How To Use Magazine Layout?

To use this Magazine layout, you can follow any of the below methods: 

• Method 1: Using the DiviFlash layout importer (single click import)
• Method 2: Manually import the layout

In this guide, we will show you how to use this layout using both methods. Let’s get started. 

Method 1: Using DiviFlash Layout Importer

In DiviFlash, you can import any layout with a click of the mouse. 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 “Magazine Layout“. 

Step 4: In this step, point your mouse at the layout and click on “Import Layout“. 

• A pop-up will be shown just after clicking the “Import Layout”, where you will see settings and server requirements. Ensure there are no red crosses and if there are any, adjust the server settings before clicking on the  “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 according to your preferences. You can follow our Divi Layout Menu Customization guide. 

Step 5: Magazine Layout has a popup in the menu section of the homepage. To show the popup to the visitors, you need to manually update the popup ID in the location where it’s triggered. 

Here is the step-by-step guide,

• Go to WordPress Dashboard > DF Popups > All Popups.

• Copy the Popup Target ID.

• Go to the “Homepage”, and enable the visual builder and hover over your mouse on the “Menu Bar” and click on the “Edit Header Template”. 

• Click on the “Settings Icon” and find “button”. 

• In the “Button”, click on the settings icon and paste the “Popup Target ID” under the “Button URL” 

• Save it and your popup should now work as expected. 

Step 6: Set the side widget for your Home Page

• Go to WordPress Dashboard > Appearance > Widgets 
• Under the sidebar area, click the Plus “+” button, search for “Tag Cloud” and click on it, then update it.  

Step 7: In the final steps, it’s time to set the homepage of your site. Here is how to do it:

• Click on the WordPress Dashboard > Settings > Reading.
• In the “Your homepage displays” section, choose “A static page“. 
• Then select the “Home” from the homepage dropdown menu. 

• At last, click on  “Save Changes” to save the changes you have made. 

You should now see the complete Magazine Layout on your website. 

Method 2: Manually Import the Layout

Apart from method one, you can manually import the Magazine Layout. Here is a step-by-step guide:

Step 1: Install and activate the Divi Theme. 

Step 2: Install and activate the DiviFlash Plugin. 

Step 3: Download the Magazine Layout packs and unzip it.

Step 4: Install and activate the “WooCommerce plugin”. (This layout has WooCommerce elements.)

Step 5: Install and activate the “Advanced Custom Field” plugin. 

Step 6: Import the “ACF – Magazine Layout – DiviFlash.Json” file into the ACF plugin. 

• Go to WordPress Dashboard > ACF > Tools
• Under the “Import” section, click on “Choose File” and select “ACF – Magazine Layout – DiviFlash.Json” file. 

• Finally, click on the “Import JSON”

Step 7: Upload the “DiviFlash Dashboard” file into the DiviFlash Dashboard panel:

• Go to WordPress Dashboard > DiviFlash > Settings > Import/Export.

• Click “Choose File” and select “DiviFlash Dashboard – Magazine Layout – DiviFlash.Json”

• Then, press the “Import Settings” button. 

Step 8: Now, import the “Divi Theme Options” setting file into the Divi Theme Options panel:

• Go to WordPress Dashboard > Divi > Theme Options
• Press the “Import & Export” icon exactly on the right side of the corner

• Click on the “Import” tab and choose the JSON file named “Divi Theme Options – Magazine Layout – DiviFlash.Json” 

• Lastly, click on the “Import Divi Theme Options” and save it. 

Step 9: Import the “Divi Theme Builder Settings” file into the Divi Theme Builder panel:

• Go to WordPress Dashboard > Divi > Theme Builder. 
• Click on the “Import & Export” icon on the right side of the screen.

• Then, select the “Import” and choose the JSON file named “Divi Theme Builder Settings – Magazine Layout – DiviFlash.Json”

• At the end, click on the “Import Divi Theme Builder Templates“ and save it. 

Step 10: Import the “Divi Library” file into the Divi Library panel

• Go to the WordPress Dashboard > Divi > Divi Library
• Click on the “Import & Export” icon on just right side of the corner

• Choose the “Import” tab and select the JSON file named “All In One – Magazine Layout – DiviFlash.Json”

• Now, click on the “Import Divi Builder Layouts”

Step 11: Import the “Theme Customizer Settings” file into the Theme Customizer Panel:  

• Go to WordPress Dashboard > Divi > Theme Customizer
• Click on the “Import & Export” on the left corner of the screen

• Then, select the “Import” and choose the JSON file named  “Divi Theme Customizer Settings – Magazine Layout – DiviFlash.Json”

• Finally, click on the  “Import Divi customizer Settings”

Step 12: Import the Media file for the Layout 

• Go to WordPress Dashboard > Tools > Import
• Click on the “Run Importer” just below the “WordPress” (If you see “install Now” instead of “Run Importer”, click install.) 

• Next, click on the “Choose File” and import the file named “Media – Magazine Layout – DiviFlash.xml” and click on the “Upload file and import”

• Assign the author (or you can skip this step). After that, check the “Download and Import File Attachments” option and click “Submit” to save the changes you have made. 

By following the same steps (WordPress Dashboard > Tools> Import > Run Importer under WordPress), you have to import .xml files for pages, posts, and products.

Step 13: Import the popup file

• Go to WordPress Dashboard > DF Popups > Import & Export
• Under the “Import” section, click on “choose File” and select “Popup – Magazine Layout – DiviFlash.Json” file. 

• Click on the “Import” button. 

Step 14: After importing the DF-Popup, you need to publish it

• Go to WordPress Dashboard > DF Popups > All Popups. 
• Click “Edit” under the popup name. 

• Click “Publish” and then “Update” it. 

• Now, go to WordPress Dashboard >DF Popups > All Popups 

• Copy the “Popup Target ID”

• Now, go to the “Homepage”, enable the visual builder and hover over your mouse on the “Menu Bar” and click on the “Edit Header Template”. 

• Click on the “Settings Icon” and find “button”. 

• In the “Button”, click on the settings icon and  paste the “Popup Target ID” under the “Button URL” 

• Save it & your popup should look as expected. 

Step 15: Manually set the side widget for your Home Page

• Go to WordPress Dashboard > Appearance > Widgets 
• Under the sidebar area, Click the plus“+” button, search for “Tag Cloud”, and click on it, then update. 

Step 16: It’s time to set the homepage of your site by following the steps below:

• Go to WordPress Dashboard > Settings > Reading.
• Under the  “Your homepage displays” section, select “A static page.”
• Select “Home” from the homepage dropdown menu.

• Now, click on the “Save Changes” to save your changes. 

Step 17: Next, create a menu for the imported layout. You can follow the Divi Layout Menu Customization Guide for directions.  

At this point, you should now see your website look like our demo site. 

Do You Still Have Questions?

Do you have any questions regarding the layout? Please contact our support team at support@diviflash.com.