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(single click import)
- Method 2: Manually importing the layout
In this guide, we will walk you through both of these methods step-by-step.
Method 1: Using DiviFlash Layout Importer
You can import any DiviFlash layout with a single click using its layout importer. Here is how to do it:
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
The News Layout has a few widgets that you need to set manually. Here are the steps to do it:
- 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 if you want.
- 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”.
- For “Latest Posts,” create it from the bottom of the widget section.
- The rest of the process is the same.
Note: After adding the data in the sidebar area, you can place it anywhere in the website by using the DiviFlash sidebar module. If you want the same design as our “News Layout,” add a class name “custom-sidebar” in the sidebar settings.
To add the class name in the sidebar settings, follow the below steps:
- Go to the homepage and enable visual builder. Scroll down to the “politics” section and click on the plus “+”.
- Then search for the sidebar and click on it.
- Click on “Advanced” and write the class name “custom-sidebar” under “CSS Class”.
- Save it and now your widget should show as expected.
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.
Now the News layout has been imported, and your website should look like the layout.
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 Field” 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 guide 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
The News layout has some widgets in the home page that you have set manually. Here are the steps to do it:
- 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 if you want.
- Click the three dots on the toolbar, then choose “Add after.”
- Next, click the Plus “+” and add the “Categories List” block. Same process to add the “Tag Cloud”.
- For “Latest Posts,” create it from the bottom of the widget section.
- The rest of the process is the same.
Note: After adding the data in the sidebar area, you can place it anywhere in the website by using the DiviFlash sidebar module. If you want the same design as our “News Layout,” add a class name “custom-sidebar” in the sidebar settings.
To add the class name in the sidebar settings, follow the below steps:
- Go to the homepage and enable visual builder.
- Scroll down to the “politics” section and click on the plus “+”.
- Then search for the sidebar and click on it.
- Click on “Advanced” and write the class name “custom-sidebar” under “CSS Class”.
- Save it and now your widget should show as expected.
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 visit your site and see if the layout design is displaying correctly and matches the imported News Layout.
Any Questions?
Do you have any questions regarding the layout? Please contact our support team at support@diviflash.com.
