To add Events layout to your Divi site, you can follow either of the methods below:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
In this doc, we will walk you through both of the 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: Go to WordPress Dashboard > DiviFlash > Layouts, and search for “event”.
Step 4: Hover your mouse over the Events layout and click “Import Layout”.
- A popup will appear, displaying layout settings and server requirements. If you see any red crosses, adjust before clicking “start Importing”.
- The 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 your homepage and blog page.
- Go to WordPress Dashboard > Settings > Reading.
- Below “Your homepage displays,” select “A static page.”
- Choose “Home” from the homepage dropdown menu.
- Choose “Blog” from the post page dropdown menu.
- Click on “Save Changes” to save it.
Step 6: Update Popup ID
The Events layout has multiple popups throughout the pages. To show the popups to visitors, you have to manually update the popup ID in the location where it is triggered.
Here we will show you how to update homepage popups:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Copy the “Popup Target ID” by clicking on it.
- Go to WordPress Dashboard > Pages. The hover over Home page and click on “Edit with Divi”
- Now hover your mouse on the “Book Your Spot Now” button click on the module settings icon.
- Dual Button Module related settings will appear at the right side panel. Click on “Left Button” and paste the “Popup Target ID” under the URL.
- Before exiting the Visual Builder, click the “Save” button in the top-right corner of the page.
By following the same process, you need to paste the ‘Target ID’ into all the “Buy Tickets” popups in the layout. Also repeat the same process to configure the “Sponsor” button popup as well.
The Events layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
You can also import the layout manually. Here’s the step-by-step instructions:
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the Events layout from the DiviFlash website and unzip it.
Step 4: Import the “DiviFlash Dashboard” file into the DiviFlash Dashboard panel:
- Go to WordPress Dashboard > DiviFlash > Settings > Import/Export.
- Click on the “Choose File” and select “DiviFlash Dashboard – Events Layout – DiviFlash.json”.
- Now, click on the “Import Settings” button.
Step 5: Import the “Divi Theme Options” setting file into the Divi Theme Options panel:
- Got to WordPress Dashboard > Divi > Theme Options.
- Select the “Import & Export” icon on the right side of the screen.
- Select the “Import” tab and choose the JSON file named “Divi Theme Options – Events Layout – DiviFlash.json”.
- Now, Click on the “Import Divi Theme Options” and press the “Save Changes” to save it.
Step 6: 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.
- Select the “Import” and choose the JSON file named “Divi Theme Builder Settings – Events Layout – DiviFlash.json”.
- Now, click on the “Import Divi Theme Builder Templates” and then press the “Save Changes” button.
Step 7: Import the “Theme Customizer Settings” file into the Theme Customizer panel:
- Go to the WordPress Dashboard > Divi > Theme Customizer.
- Click on the “Import & Export” on the left side of your screen.
- Select the “Import” and choose the JSON file named “Divi Theme Customizer Settings – Events Layout – DiviFlash.json”.
- Finally, click on the “Import Divi Customizer Settings” button.
Step 8: Import the “Divi Library” file into the Divi Library panel:
- Go to WordPress Dashboard > Divi > Divi Library.
- Click on the “Import & Export” icon on the right side of the corner.
- Choose the “Import” tab and select the JSON file named “All In One – Events Layout – DiviFlash.json”. (You can also import individual layout pages one by one by using their respective JSON files.)
- Now, click on the “Import Divi Builder Layouts”.
Your next step is to create new pages using the layouts you’ve saved in your Divi Library. (Follow our doc How to Create Pages with Divi layouts from the Library for better understanding.)
Step 9: Import the Media file for the layout
- Go to WordPress Dashboard > Tools > Import.
- Click on the “Run importer” under the “WordPress” (If you see “Install Now” instead of “Run Importer”, click install.). “Run Importer” will appear then.
- Click on the “Choose File” and import the file named “Media – Events Layout – DiviFlash.xml”, click on the “Upload file and import”.
- Assign the author (or you can skip the step). Next, check the “Download and Import File Attachments” and click “submit”.
- By following the same steps, import the xml file for the “Posts”.
Step 10: Create Events Detail Pages
In our layout’s homepage, you will find multiple events and an “Event Details” button. You have to create a detail page for each event and link it to the corresponding button.
Here is how to do it:
- Go to WordPress Dashboard > Projects > Add new project.
- Add a title for your project and publish the page. Then click Use Divi Builder
- Now click on the “Choose a Premade Layout.”
- Click on the “Add From Library”.
- Now, select the “Events Details Content”.
- Then click on the “Use This Section”.
- Before exit from the “Visual Builder” save it.
Repeat the same process to add all other event posts. You can easily edit the content, images, and details for each event to match your needs.
Step 11: Set your homepage and blog page.
- Go to WordPress Dashboard > Settings > Reading.
- Below “Your homepage displays,” select “A static page.”
- Choose “Home” from the homepage dropdown menu.
- Choose “Blog” from the post page dropdown menu.
- Click on “Save Changes” to save it.
Step 12: Import the Popup file
To use the popup settings, first enable the Popup feature by going to WordPress Dashboard > DiviFlash > Settings > Popup Enable.
- Go to WordPress Dashboard > DF Popups > Import & Export.
- Under the “Import” section, click on “choose File” and select “Popup – Events Layout – DiviFlash.json” file.
- Click on the “Import” button.
Step 13: Publish the Popup
After importing the popup, you need to publish it. Here’s how to do it:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Now, click on the “Edit”.
- Click on “Publish.”
Apply the same procedure to publish the “Buy Tickets” popup.
Step 14: Set Popup in your home page.
- Go to WordPress Dashboard > DF Popups > All Popups, and copy the “Popup Target ID” by clicking on it.
- Go to WordPress Dashboard > Pages. The hover over Home page and click on “Edit with Divi”
- Now hover your mouse on the “Book a Call” button click on the module settings icon.
- Dual Button Module related settings will appear at the right side panel. Click on “Left Button” and paste the “Popup Target ID” under the URL.
- Before exiting the Visual Builder, click the “Save” button in the top-right corner of the page.
By following the same process, you need to paste the ‘Target ID’ into all the “Buy Tickets” popups in the layout. Also repeat the same process to configure the “Sponsor” button popup as well.
Step 15: Create the menu for the imported layout. For a better understanding, follow the Divi Layout Menu Customization doc.
Now your website should look exactly the same as the Events layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected] at [email protected]