You can use the Church Layout in either of the following ways:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually import the layout.
This guide will walk you through each of the methods step-by-step.
Method 1: Using the 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 “Church”.
Step 4: Hover your mouse over the “Church” layout and click on “Import Layout”.
- A popup will appear informing you about layout settings and server requirements. If you see any red crosses, fix them before clicking on “Start Importing”.
- The import process may take a few minutes.
- Once the import is complete, Click on “Back to Layouts” to return to the layout page.
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 the Popups
The Church layout includes popups in several places. To display these popups to your visitors, you need to manually update the popup ID at each location where it is triggered.
Here, we will show how to update the “Popup Menu”:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Copy the “Popup Target ID” by clicking on it.
- Go to the WordPress Dashboard > Divi > Theme Builder.
- Click on the “Edit” icon of “Default Website Template” to add the popup.
- Hover on the header and click on the “Module Settings” icon.
- Next click on Icon Box’s “Edit Item” icon.
- Scroll down and paste the “Popup Target ID” into the “Icon Box Link URL” field.
- Before exiting, click the “Save” button in the top-right corner of the page.
Note: The Church layout uses different header designs for the Global Template and Custom Templates (you can find them in the Theme Builder). Because of this, you need to manually add the Popup Menu ID to each header one by one.
Step 7: Add the Donate Popup
This step is specifically for the “Donate Popup”. Here is the step-by-step guide:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Copy the “Popup Target ID” by clicking on it.
- Go to the “Homepage” to display the popup and click on “Edit With Divi.”
- Scroll down a little and hover your mouse on the “Donate Now” button and click on the “Module Settings” icon.
- Scroll down and paste the “Popup Target ID” into the button URL field.
- Before exiting, click the “Save” button in the bottom-right corner of the page.
Follow the same process for the “Video” popup and the other “Donate” popups in the layout.
The Church layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
You can also import the Church layout manually. Here’s the step-by-step guide.
Step 1: Install and activate the Divi theme.
Step 2: Install and activate the DiviFlash plugin.
Step 3: Download the Church layout from the DiviFlash website and unzip it.
Step 4: Install and Activate the “Advanced Custom Fields” plugin.
Step 5: Import the “ACF – Church Layout – DiviFlash.json” file into the ACF plugin.
- Go to the WordPress Dashboard > ACF > Tools
- Under the “Import” section, click on “Choose File” and select “ACF – Church Layout – DiviFlash.json” file.
- Click the “Import JSON”.
Step 6: 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 – Church Layout – DiviFlash.json”.
- Click on the “Import Settings” button.
Step 7: Import the “Divi Theme Options” setting file into the Divi Theme Options panel:
- Go to WordPress Dashboard > Divi > Theme Options.
- Select the “Import & Export” icon on the right side of your screen.
- Select the “Import” tab and choose the JSON file name “Divi Theme Options – Church Layout – DiviFlash.json”.
- Click on “Import Divi Theme Options” and then click “Save Changes”.
Step 8: 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” tab and choose the JSON file named “Divi Theme Builder Settings – Church Layout – DiviFlash.json”.
- Click on the “Import Divi Theme Builder Templates” and then on the “Save Changes” button.
Step 9: 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” tab and choose the JSON file named “Divi Theme Customizer Settings – Church Layout – DiviFlash.json”.
- Click on the “Import Divi Customizer Settings” button.
Step 10: 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 – Church Layout – DiviFlash.json”. (You can also import individual layout pages one by one by using their respective JSON files.)
- Click on “Import Divi Builder Layouts”.
Your next step is to create new pages using the layouts you’ve saved in your Divi Library. (Follow our guide How to Create Pages with Divi layouts from the Library for better understanding.)
Step 11: Import the Media file for the Church 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 – Church Layout – DiviFlash.xml”, then click on the “Upload file and import”.
- Assign an author (or skip this step if not needed). Next, check the “Download and Import File Attachments” and click “submit”.
By following the same steps, import the XML file for the “Posts”, “Events”, “Ministry”, and “Sermons”.
Step 12: 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 the “Save Changes” to save it.
Step 13: Import the Popup file for the Church Layout
- Go to WordPress Dashboard > DF Popups > Import & Export.
- Under the “Import” section, click on “choose File” and select “Popup – Church Layout – DiviFlash.json” file.
- Click the “Import” button.
Step 14: Publish the Popup for the Church Layout
Once you import the popup, you need to publish it. Here’s how to do it:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Click on the “Edit” to publish the “Menu popup”.
- Click “Publish” and then “Update” it.
Follow the same process for the other two popups.
Step 15: Display popups
The Church layout includes popups in several places. To display these popups to your visitors, you need to manually update the popup ID at each location where it is triggered.
Here we will show how to update the “Popup Menu”
- Go to WordPress Dashboard > DF Popups > All Popups.
- Copy the “Popup Target ID” by clicking on it.
- Go to the WordPress Dashboard > Divi > Theme Builder.
- Click on the “Edit” icon of “Default Website Template” to add the popup.
- Hover on the header and click on the “Module Settings” icon.
- Next click on Icon Box’s “Edit Item” icon.
- Scroll down slightly and paste the “Popup Target ID” into the “Icon Box Link URL” field.
- Before exiting, click the “Save” button in the top-right corner of the page.
Note: The Church layout uses different header designs for the Global Template and Custom Templates (you can find them in the Theme Builder). Because of this, you need to manually add the Popup Menu ID to each header one by one.
Step 16: Add the Donate popup
This step is specifically for the “Donate Popup”. Here’s the step-by-step guide:
- Go to WordPress Dashboard > DF Popups > All Popups.
- Copy the “Popup Target ID” by clicking on it.
- Go to the “Homepage” to display the popup and click on “Edit With Divi.”
- Scroll down a little and hover your mouse on the “Donate Now” button and click on the “Module Settings” icon.
- Scroll Down and click on the button and paste the “Popup Target ID”.
- Before exiting, click the “Save” button in the bottom-right corner of the page.
Follow the same process for the “Video” popup and the other “Donate” popups in the layout.
Now your website should look exactly the same as the Church layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]
