There are two simple ways to get started with the News layout, choose one that works best for you.
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
In this doc, we will walk you through both of these methods step-by-step.
Method 1: Using DiviFlash Layout Importer
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: In the WordPress Dashboard, go to DiviFlash > Layouts, then search for the “News Layout”.
Step 4: Hover your mouse over “News Layout” and click the “Import Layout” button.
- Then a popup will appear showing layout settings and server requirements. If you see any red crosses, adjust them before going to the next step. Once everything looks good, click on “start importing”.
- This process of importing may take a few minutes.
- When the import is done, click on the “Menu Customize” to customize the menu as per your choices. For better understanding, follow the Divi Layout Menu Customization guide.
Step 5: Set side widgets for the Home Page
WordPress includes a few default widget items that you can keep or remove depending on your needs. To recreate the sidebar design used in the News Layout, follow the steps below.
- Go to WordPress Dashboard > Appearance > Widgets
- Below the sidebar area, click the plus“+” button and add a group block, then select the single container layout.
- Inside the group, click plus “+” and add a paragraph block. Now, type your preferred text and change it to a heading.
- Click the three dots on the toolbar, then choose “Add after.”
- Next, click the plus “+” and add the “Categories List” block. Follow the same process for “Tag Cloud”.
Note: By default, WordPress provides one sidebar area, but the News Layout uses two sidebars. To match the layout design, you need to create another widget area.
- Scroll to the bottom of the Widgets page.
- In the Widget Name field, create a new widget called “Latest Posts.”
- After creating it, repeat the previous steps:
- Add a Group block
- Add a Text/Heading block for the title
- Add the Latest Posts block
Once your sidebars are created, you can place them anywhere on your site using the Sidebar Module. To match the styling used in the News Layout, you have to add a custom CSS class.
Here are the steps to add the class:
- Go to the homepage and enable visual builder.
- Scroll down to the “politics” section and click on the plus “+”. (In the News Layout design, the sidebar is placed below the newsletter section.)
- Then search for the sidebar module and click on it.
- Click on “Advanced” and write the class name “custom-sidebar” under Attribute’s class field.
- Save it and now your widget should show as expected.
Note: When you select any block, its related settings will appear in the right sidebar panel, allowing you to customize it according to your design needs. For example, in the Latest Posts block, you can enable featured images and adjust their size and alignment.
Step 6: Set your site’s homepage by following the steps below:
- Navigate to WordPress Dashboard > Settings > Reading.
- Under “Your homepage display,” select “A static page.”
- Now, choose “Home” from the homepage dropdown menu.
- Click “Save Changes” to apply your updates.
Step 7: News Layout comes with a popup that you will find by going to WordPress Dashboard > DF Popups > All Popups.
The News layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
If you prefer to import the News Layout manually instead of using the layout importer, follow these steps:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the News layout from the DiviFlash website and unzip it.
Step 4: Install and activate the “Advanced Custom Fields” plugin.
Step 5: Import the “ACF – News Layout – DiviFlash.json” file into the ACF plugin.
- Go to WordPress Dashboard > ACF > Tools
- Below the “Import” section, click on “Choose File” and select “ACF – News Layout – DiviFlash.json” file.
- Now, click on the “Import JSON”.
Step 6: Import the “DiviFlash Dashboard Settings” file into the dashboard panel of DiviFlash.
- Go to WordPress Dashboard > DiviFlash > Settings > Import/Export.
- Click “Choose File” and find the file named “DiviFlash Dashboard – News Layout – DiviFlash.Json” to upload.
- Now, click on the “Import Settings” button.
Step 7: Import the “Divi Theme Options Settings” file into the Divi Theme Option panel:
- Go to WordPress Dashboard > Divi > Theme Options
- Click the “Import & Export” icon on the right side of your screen.
- Click the “Import” tab and upload the file named “Divi Theme Options Settings – News Layout – DiviFlash.Json”
- Now, click on the “Import Divi Theme Options” and save it.
Step 8: Import the “Theme Builder Settings” file into the Divi Theme Builder panel:
- Go to WordPress Dashboard > Divi > Theme Builder
- Click the “Import & Export” icon on the right side of your screen.
- Select the “Import” tab and upload the “Divi Theme Builder Settings – News Layout – DiviFlash.Json” file.
- Now, click on the “Import Divi Theme Builder Templates” and save it.
Step 9: Import the “Divi Library” file into the Divi Library panel:
- Go to WordPress Dashboard > Divi > Divi Library
- Click on the “import & Export” button on the upper left
- Select the “Import” tab and upload the JSON file named “All In One – News Layout – DiviFlash.Json”
- Now, click on the “Import Divi Builder Layouts” button.
Next, create pages based on the content you imported from the Divi Library. Use this doc on how to create pages with Divi layouts from the Library.
Step 10: Import the “Theme Customizer Settings” file into the Theme Customizer panel:
- Go to WordPress Dashboard > Divi > Theme Customizer
- Click on the “Import & Export” icon on the left side of your screen.
- Select the “Import Tab” and upload the JSON file named “Divi Theme Customizer Settings – News Layout – DiviFlash.Json”.
- Now, click on the “Import Divi Customizer Settings”.
Step 11: Import the Media file for the layout
- Go to WordPress Dashboard > Tools > Import
- Click on Run Importer under the WordPress (If you see, “Install Now” instead of “Run Importer,” click on install. Then you will get the “Run Importer” option.)
- Click on “choose File” and import the “Media – News Layout – DiviFlash” file, and click on “Upload file and import”.
- Assign the author, or you can skip this step, check “Download and Import File Attachments,” and click “Submit” to finish.
Note: Follow the same steps for “Posts” xml file too.
Step 12: Manually Set Side Widgets for the Home Page
WordPress includes a few default widget items that you can keep or remove depending on your needs. To recreate the sidebar design used in the News Layout, follow the steps below.
- Go to WordPress Dashboard > Appearance > Widgets
- Below the sidebar area, click the plus “+” button and add a group block, then select the single container layout.
- Inside the group, click plus “+” and add a paragraph block. Now, type your preferred text and change it to a heading.
- Click the three dots on the toolbar, then choose “Add after.”
- Next, click the plus “+” and add the “Categories List” block. Follow the same process for “Tag Cloud”.
Note: By default, WordPress provides one sidebar area, but the News Layout uses two sidebars. To match the layout design, you need to create another widget area.
- Scroll to the bottom of the Widgets page.
- In the Widget Name field, create a new widget called “Latest Posts.”
- After creating it, repeat the previous steps:
- Add a Group block
- Add a Text/Heading block for the title
- Add the Latest Posts block
Once your sidebars are created, you can place them anywhere on your site using the Sidebar Module. To match the styling used in the News Layout, you have to add a custom CSS class.
Here are the steps to add the class:
- Go to the homepage and enable visual builder.
- Scroll down to the “politics” section and click on the plus “+”. (In the News Layout design, the sidebar is placed below the newsletter section.)
- Then search for the sidebar module and click on it.
- Click on “Advanced” and write the class name “custom-sidebar” under Attribute’s class field.
- Save it and now your widget should show as expected.
Note: When you select any block, its related settings will appear in the right sidebar panel, allowing you to customize it according to your design needs. For example, in the Latest Posts block, you can enable featured images and adjust their size and alignment.
Step 13: Import the popup file
- Go to WordPress Dashboard > DF Popups > Import & Export
- Below the “Import” section, click on “Choose File” and select “Popup – News Layout – DivoFlash.Json” file.
- Click on “Import” Button.
Step 14: After importing the DF-Popup file, you need to publish it
- Go to WordPress Dashboard > DF Popups > All Popups
- Click “Edit” below the popup name
- Click “Publish” and then “Update” it.
- Refresh the page & your popup should look as expected.
Step 15: Set your homepage by following the below steps:
- Go to WordPress Dashboard > Settings > Reading.
- Under “Your homepage displays” select “A static page.”
- Choose “Home” from the homepage dropdown menu.
- Click on “Save Changes” to save it.
Now your website should look exactly the same as the News layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]