You can add the Digital Agency layout to your Divi website by importing it using one of two methods:
- Method 1: Using the DiviFlash layout importer (recommended).
- Method 2: Manually importing the layout.
We will guide you through both methods with step-by-step instructions.
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 your WordPress dashboard, go to DiviFlash > Layouts and search for Digital Agency.
Step 4: Hover over “Digital Agency” layout and click on “Import Layout” to start the import process.
- A popup will appear showing the layout settings and server requirements. Make sure all items show green checkmarks. If you see any red crosses, update your server settings and refresh the page. Once everything turns green, click “Start Importing.”
- The import process may take a few minutes to complete.
- When it’s finished, you will see options for “Back to Layouts” and “Menu Customize.” Click on “Back to Layouts” and we will show you how to create the menu in the next step.
Step 5: Create a Menu
Digital Agency is a single-page layout, which means you need to assign a CSS ID to each section and then create a menu using those IDs.
Here is how:
- Go to WordPress dashboard > Pages. Then hover over Home and click “Edit With Divi.”
- Click on the Settings icon of the section you wish to add to the menu (e.g.,Service).
- Navigate to the Advanced tab > Attributes > CSS ID and enter your desired ID (e.g., service). Copy the CSS ID for later use.
- Repeat this process for each section you want to include in the menu (e.g., Service, Process, Testimonial, Portfolio, Contact).
- Go to Appearance > Menus, and create a new menu.
- Select Custom Links and fill in the following details:
- URL: Add a hashtag and paste the copied ID (e.g., #service).
- Link Text: Enter your desired menu name (e.g., “Service”).
- Repeat the same steps to add custom links for Process, Testimonial, Portfolio, Contact.
Once all custom links are added, click the “Save Menu” button to apply your changes.
Step 6: After modifying the menu, set your website’s homepage by following these steps:
- Navigate to WordPress Dashboard > Settings > Reading.
- Under “Your homepage displays,” click on “A static page” and select “Home” from the dropdown menu.
- Click on “Save Changes” to save the changes.
The Digital Agency layout has been successfully imported and is now live on your website.
Method 2: Manually Import the Layout
While the DiviFlash Layout Importer offers the easiest process, you can also import the Digital Agency Layout manually.
Here is a step-by-step guide:
Step 1: Install and activate the Divi Theme.
Step 2: Download the Digital Agency layout file from the DiviFlash website and unzip it.
Step 3: Import the “Divi Theme Options Settings” file into the Divi Theme Options panel:
- Navigate to WordPress dashboard > Divi > Theme Options
- Click on the “Import & Export” icon in the top right corner
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Option Settings – Digital Agency Layout – DiviFlash.json”
- Finally, click on “Import Divi Theme Options”
Step 4: Import the “Theme Customizer Settings” file into the Theme Customizer
- Navigate to WordPress dashboard > Divi > Theme Customizer
- Click on the “Import & Export” icon on the top left corner.
- Select the Import tab and click “Choose Files” to upload the JSON file named “Divi Theme Customizer Settings – Digital Agency Layout – DiviFlash.json”
- Finally, click on “Import Divi Customizer Settings”.
Step 5: Import the Home Page file into Divi Library
- Navigate to WordPress dashboard > Divi > Divi Library
- Click on the “Import & Export” button on the top left
- Select the Import tab and click “Choose Files” to upload the JSON file named “Home page – Digital Agency Layout – DiviFlash.json”
- Click on the “Import Divi Builder Layouts” button.
- Now, create new pages using the layout items you imported into the Divi Library. Follow this doc: How to create pages with Divi Layouts From Library.
Step 6: Next, create a menu for the imported layout. Follow the below instructions:
- Go to WordPress dashboard > Pages. Then hover over Home and click “Edit With Divi.”
- Click on the Settings icon of the section you wish to add to the menu (e.g.,Service).
- Navigate to the Advanced tab > Attributes > CSS ID and enter your desired ID (e.g., service). Copy the CSS ID for later use.
- Repeat this process for each section you want to include in the menu (e.g., Service, Process, Testimonial, Portfolio, Contact).
- Go to Appearance > Menus, and create a new menu
- Select Custom Links and fill in the following details:
- URL: Add a hashtag and paste the copied ID (e.g., #service).
- Link Text: Enter your desired menu name (e.g., “Service”).
- Repeat the same steps to add custom links for Process, Testimonial, Portfolio, Contact.
Once all custom links are added, click the “Save Menu” button to apply your changes.
Step 7: Now set the homepage for the layout.
- Navigate to the WordPress dashboard > Settings > Reading.
- Under “Your homepage displays,” select “A static page.”
- Choose “Home” from the homepage dropdown.
- Finally, click “Save Changes” to set the new homepage.
Now your website should look exactly the same as the Digital Agency layout!
Any Questions?
If you have any questions, please feel free to contact our support team at [email protected]