Divi is a website building platform. To create new pages, you can use either Divi Visual Editor (premade layouts or building a page from scratch at your choice) or go with standard-looking pages and customize them using WordPress.
You'll find the most comprehensive Divi guides HERE.
In this guide, we cover the following:
- Theme installation
- Layouts and authentication
- Theme structure
- Visual Builder
- Theme Options
- Theme Customizer
Once you've downloaded the theme, enter your WordPress panel and go to Appearance => Themes => Add New => Upload Theme.
Click Upload Theme to upload the zip file you've downloaded. Install the theme.
Click Activate to continue.
LAYOUTS AND AUTHENTICATION
We recommend that you start with a premade layout. Click the Browse Layouts button.
In the layout library, select the Online Store option. Here's where you can check the available layout packs as well.
Check the layouts Divi has to offer and choose the one that best fits. To do this, click the Use This Layout button.
Note that not all packs have Single product page. You can either create a product page based on a premade layout using Divi Theme Builder or go with a standard product page.
To download the premade layout you’ve chosen, you need to authenticate your Elegant Themes subscription.
Go to your Elegant Themes account. In the dropdown menu in your Account, click the Username and API key option.
Copy your username and API key.
Go back to your WordPress admin area and paste these credentials in the Divi popup. Click Submit to continue.
CREATING NEW PAGE
Later on, you’ll be able to choose how to build new pages: you can use either the standard WP editor or the Divi Builder. Click the Use The Divi Builder button.
In the popup, you’ll see the welcome message. Click the Start Building button.
Next, you'll be offered to take a tour to learn more about how Divi works.
Next, we'd recommend choosing the premade layout option.
The Divi theme has 3 customization options:
- Divi Visual Builder. Here you can manage your website content.
- Theme Options in your WP admin area. Here you can manage theme general settings.
- Theme Customizer. Here you can manage your menus and styles for standard pages.
THEME STRUCTURE & VISUAL BUILDER
Divi has the following nested structure:
- Sections are the largest building blocks (Blue color)
- Rows are column layouts that can be placed inside of sections (Green color)
- Modules are pieces of content (buttons, images, videos, comments, sliders, etc.) you can add in a row (Gray color)
To add a section, press the blue '+' icon.
To add a row, press the green '+' icon.
To add a module, press the gray '+' icon. Use the search option to find the module you need.
Once you've added an element, hover over ito edit. Click the mechanism icon to manage the block settings. Use the Trash icon to remove the element.
The same works if you need to change or delete an image inside of the module.
Each module has Content settings, Design settings, Advanced settings.
In the Content tab you can edit your text, add links and background image.
The Design tab offers the widest range of customization options. Here you can change the way your text and button look like, adjust spacing, manage animation, etc.
To manage hover states, hover over the settings title and click the arrow icon. Next, click the Hover option.
In the Theme Options tab of your admin area, you’ll find theme functional settings: navigation, layout, SEO, integrations, etc. You can learn more HERE.
For example, in the General tab you can upload your logo, choose a font, add your social media links, add custom CSS code, etc.
In the Navigation tab, you’ll find some navigation settings.
In the SEO tab, you can manage your SEO settings.
In Theme Customizer you can manage your menus and standard page settings (i.e. pages that have been created without Divi Builder).
Here you can adjust your layout and typography settings, upload your logo, choose pages background color, manage buttons, etc. You can learn more HERE.
To access your Theme Customizer, hover over the Divi Theme in your top WP panel.