Divi

https://www.elegantthemes.com/documentation/divi/
Admin
Divi is the #1 WordPress Theme and visual page builder, enabling users to design and build any type...
Tokens:234,182
Snippets:957
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Divi Hosting Setup Guide

Source: https://www.elegantthemes.com/documentation/divi/using-divi-hosting-by-flywheel

This guide explains how to set up a website using Divi Hosting by Flywheel. It outlines the process of signing up for hosting, selecting a plan, and completing the purchase, after which a new Divi-optimized website with Divi pre-installed and activated is created.

```text
Setting up your first Divi website with Divi Hosting is a breeze. To get started, go here and click big blue button.
This will ask you to log in to your Elegant Themes account if you are not logged in, and then you will be redirected to Flywheel. Here you can set up a new hosting account or sign in to your existing account if you are already a Flywheel hosting. 
Once you sign up or log in, you will be shown various hosting options that Flywheel offers. Choose the hosting plan that best suits your needs and proceed to the checkout process. Once you have completed your purchase your new Divi website will be created. It can take a few minutes for the website creation process to complete. 
That’s it! Your new Divi-optimized website is ready to go and Divi is already installed and activated. Now you can jump right in to building your website.
```

--------------------------------

### Install Divi & WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-product-description-module

Before using the Divi Woo Product Description module, ensure that the Divi theme and WooCommerce are installed on your WordPress website. Refer to the provided links for installation guides.

```text
Install Divi theme and WooCommerce on your WordPress website.
Refer to: https://www.elegantthemes.com/documentation/divi/installation/ for Divi theme installation.
Refer to: https://woocommerce.com/documentation/plugins/woocommerce/getting-started/installation/ for WooCommerce installation.
```

--------------------------------

### Install Divi & WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-cart-totals-module

Instructions on installing the Divi theme and WooCommerce, prerequisites for using Divi modules. Links to further guides are provided.

```php
/*
  To install the Divi theme:
  Refer to: https://www.elegantthemes.com/documentation/divi/installation/

  To install WooCommerce:
  Refer to: https://woocommerce.com/documentation/plugins/woocommerce/getting-started/
*/
```

--------------------------------

### Enable Divi Visual Builder

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Instructions on how to enable the Divi Visual Builder on any page of your website by clicking 'Enable Visual Builder' on the top admin bar.

```text
Navigate to any page and click “Enable Visual Builder” on the top admin bar.
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

When the Divi Visual Builder is enabled for a new page, users are presented with three options: Build From Scratch, Choose A Premade Layout, and Clone An Existing Page.

```text
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/map/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

When the Divi Visual Builder is enabled for a new page, users are presented with three options: Build From Scratch, Choose A Premade Layout, and Clone An Existing Page.

```text
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Divi Hosting Setup with Pressable

Source: https://www.elegantthemes.com/documentation/divi/using-divi-hosting-by-pressable

This section describes the optimized Divi Hosting package offered by Pressable, highlighting its features like automatic Divi installation, license key generation, and product activation. It's recommended for users seeking an easy way to set up a fast Divi website.

```English
Pressable has curated ultra-fast, secure & scalable WordPress Hosting plans for businesses and site developers. Divi, WordPress and Jetpack Premium come pre-installed. The definition of WordPress Hosting from the creators of WordPress.com.
If you are looking for an easy way to set up a fast Divi website, then we suggest using Pressable as your hosting provider. We partnered with Pressable to create an optimized Divi Hosting package and includes automatic Divi installation, license key generation and product activation. Divi Hosting by Pressable meets all of Divi’s requirements out of the box and is supported by leading WordPress professionals. That’s why we choose to recommend them to our customers!
```

--------------------------------

### Install Divi Theme and WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-breadcrumbs-module

Instructions on installing the Divi theme and WooCommerce, prerequisites for using the Divi Woo Breadcrumbs module. Links to further guides are provided.

```php
<?php
// Instructions for installing Divi theme and WooCommerce are typically done via the WordPress dashboard.
// This is a conceptual representation.

// To install Divi theme:
// 1. Navigate to Appearance > Themes > Add New.
// 2. Upload the Divi theme zip file.
// 3. Activate the Divi theme.

// To install WooCommerce:
// 1. Navigate to Plugins > Add New.
// 2. Search for 'WooCommerce'.
// 3. Install and activate the WooCommerce plugin.
?>
```

--------------------------------

### Enable Divi Visual Builder

Source: https://www.elegantthemes.com/documentation/divi/map/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Instructions on how to enable the Divi Visual Builder on any page of your website by clicking 'Enable Visual Builder' on the top admin bar.

```text
Navigate to any page and click “Enable Visual Builder” on the top admin bar.
```

--------------------------------

### Save Divi Visual Builder Settings

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Learn how to save your work in the Divi Visual Builder. It supports both manual saving via a button and keyboard shortcuts for quick saves before exiting the builder.

```General
To save your design you can click the green Save button at the bottom right of the screen, or use the keyboard shortcut cmd + s (mac) or ctl + s (PC). Then click “Exit Visual Builder” on the top toolbar to exist the Visual Builder.
```

--------------------------------

### Save Divi Visual Builder Settings

Source: https://www.elegantthemes.com/documentation/divi/map/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Learn how to save your work in the Divi Visual Builder. It supports both manual saving via a button and keyboard shortcuts for quick saves before exiting the builder.

```General
To save your design you can click the green Save button at the bottom right of the screen, or use the keyboard shortcut cmd + s (mac) or ctl + s (PC). Then click “Exit Visual Builder” on the top toolbar to exist the Visual Builder.
```

--------------------------------

### Install Divi and WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/woo-related-products

Before using the Divi Woo Related Products module, ensure both Divi and WooCommerce are installed and activated on your WordPress website. Refer to the 'Getting Started With The Divi Builder' guide for more information on the Divi Builder.

```WordPress
Navigate to the WordPress Dashboard and go to **Divi > Theme Builder** on the left sidebar.
```

--------------------------------

### Create New Page with Divi Builder

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Steps to create a new page and enable the Divi Visual Builder. This involves navigating to the WordPress dashboard, adding a new page, giving it a title, and clicking 'Use Divi Builder'.

```text
Navigate to your WordPress dashboard and click Page > Add New.
Give your page a title, then click “Use Divi Builder”.
```

--------------------------------

### Install Divi & WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-product-information-module

This section outlines the prerequisites for using the Divi Woo Product Information Module, emphasizing the need for the Divi theme and WooCommerce to be installed on a WordPress website. It also directs users to further resources for installing Divi and WooCommerce, as well as general Divi Builder guidance.

```php
/*
  To install the Divi theme:
  1. Navigate to Appearance > Themes in your WordPress dashboard.
  2. Click 'Add New' and then 'Upload Theme'.
  3. Choose the Divi theme .zip file and click 'Install Now'.
  4. Activate the theme.

  To install WooCommerce:
  1. Navigate to Plugins > Add New in your WordPress dashboard.
  2. Search for 'WooCommerce'.
  3. Click 'Install Now' and then 'Activate'.
  4. Follow the WooCommerce setup wizard.
*/
```

--------------------------------

### Install Divi and WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/divi-woo-product-tabs-module

Instructions on installing the Divi theme and WooCommerce plugin, prerequisites for using Divi modules with WooCommerce.

```text
Install Divi theme.
Install WooCommerce plugin.
```

--------------------------------

### Create New Page with Divi Builder

Source: https://www.elegantthemes.com/documentation/divi/map/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Steps to create a new page and enable the Divi Visual Builder. This involves navigating to the WordPress dashboard, adding a new page, giving it a title, and clicking 'Use Divi Builder'.

```text
Navigate to your WordPress dashboard and click Page > Add New.
Give your page a title, then click “Use Divi Builder”.
```

--------------------------------

### Install Divi and WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-product-price-module

Instructions on installing the Divi theme and WooCommerce plugin on a WordPress website, prerequisites for using the Divi Woo Product Price Module.

```php
<?php
// Instructions for installing Divi theme and WooCommerce plugin would go here.
// This is a placeholder as the original text does not contain actual code for installation.
?>
```

--------------------------------

### Advanced Code Editing in Divi

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Divi provides a fully-featured code editor with syntax highlighting, error reporting, auto-complete, and more, allowing users to add custom CSS or code to elements and pages.

```CSS
/* Add custom CSS to any element */
.my-element {
  color: blue;
}
```

```JavaScript
// Add custom JavaScript to a page
console.log('Hello from Divi!');
```

--------------------------------

### Install Divi and WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-checkout-details-module

This section outlines the prerequisites for using the Divi Woo Checkout Details Module, emphasizing the need for both the Divi theme and the WooCommerce plugin to be installed on a WordPress website. It also directs users to further resources for installing Divi and WooCommerce, as well as general Divi Builder usage.

```text
Install Divi & WooCommerce
Before you can add the Divi Woo Checkout Details Module to your website, you’ll need to have the Divi theme and WooCommerce installed on your WordPress website. Learn how to install the Divi theme on your WordPress website here and how to install WooCommerce here. For additional information on the Divi Builder itself, its interface, usage philosophy and best practices, please refer to our Getting Started With The Divi Builder guide.
```

--------------------------------

### Divi Call To Action Module Guide

Source: https://www.elegantthemes.com/documentation/divi/cta

This guide explains how to add, configure, and customize the Divi Call To Action module. It highlights the importance of clear calls to action for user experience and conversions, and how the module can be used to grow email lists, increase form submissions, and promote products.

```WordPress
To get started, add a new page to your website. By default, the Standard Gutenberg Editor loads whenever a new post or page is added in WordPress. To load the Divi builder on any post or page, click the purple button underneath the page title that says “Use The Divi Builder”.
Once clicked, this will reload the page with the Divi Visual Builder. As your page reloads, you’ll notice three options that come up: Build From Scratch, Choose A Premade Layout, and Clone An Existing Page.
```

--------------------------------

### Install Divi and WooCommerce

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-checkout-information-module

Instructions on installing the Divi theme and WooCommerce plugin on a WordPress website, prerequisites for using the Divi Woo Checkout Information Module.

```text
Install the Divi theme on your WordPress website.
Install WooCommerce on your WordPress website.
```

--------------------------------

### Install Elegant Themes Updater Plugin

Source: https://www.elegantthemes.com/documentation/divi/update-legacy

Steps to install the Elegant Themes Updater plugin, which is necessary for authenticating your subscription and enabling theme updates. This involves downloading a ZIP file and uploading it via the WordPress Plugins page.

```php
function example() {
  return true;
}
```

--------------------------------

### Add Divi Map Module to Page

Source: https://www.elegantthemes.com/documentation/divi/map

This section explains how to add the Divi Map Module to your website. It requires the Divi theme to be installed and activated. The guide also references the 'Getting Started With The Divi Builder' for further information on the builder's interface and usage.

```PHP
<?php
// Ensure Divi theme is installed and activated before proceeding.
// Refer to: https://www.elegantthemes.com/documentation/divi/getting-started/
?>

<!-- Example of adding the Divi Map Module via shortcode or builder interface -->
[divi_map_module]
  <!-- Module settings and pins would be configured here -->
[/divi_map_module]
```

--------------------------------

### Add Divi Login Module to WordPress Page

Source: https://www.elegantthemes.com/documentation/divi/login

This guide explains how to add the Divi Login Module to a WordPress page. It requires the Divi theme to be installed and activated. The process involves using the Divi Builder, either starting from scratch or selecting a premade layout.

```WordPress
Install and activate the Divi theme on your WordPress website.
```

```Divi
Add a new page in WordPress.
Click the purple button "Use The Divi Builder" underneath the page title.
Choose to "Build From Scratch", "Choose A Premade Layout", or "Clone An Existing Page".
```

--------------------------------

### Add Divi Image Module to WordPress Page

Source: https://www.elegantthemes.com/documentation/divi/image

This guide details the process of adding the Divi Image Module to a WordPress page. It requires the Divi theme to be installed and activated. The steps involve loading the Divi Builder and selecting an option to start building the page.

```WordPress
Install and activate the Divi theme on your WordPress website.
```

```Divi
Add a new page to your website.
Click the purple button underneath the page title that says “Use The Divi Builder”.
This will reload the page with the Divi Visual Builder.
```

--------------------------------

### Divi Hosting Overview

Source: https://www.elegantthemes.com/documentation/divi/using-divi-hosting-by-siteground

This section provides an overview of Divi Hosting, a partnership with SiteGround to offer optimized hosting for Divi websites. It highlights pre-installed Divi and WordPress, automatic license key generation, and support from WordPress professionals, simplifying the setup process for users.

```text
We partnered with SiteGround to bring Divi users fast Divi Hosting that works perfectly out of the box! Plus Divi and WordPress come pre-installed and configured with your license key. Skip the setup process and jump right into the builder! Divi Hosting from SiteGround is configured to meet all of Divi’s requirements and is supported by a team of WordPress professionals.
If you are looking for an easy way to set up a fast Divi website, then we suggest using SiteGround as your hosting provider. We partnered with SiteGround to create an optimized Divi Hosting package and includes automatic Divi installation, license key generation and product activation. Divi Hosting by SiteGround meets all of Divi’s requirements out of the box and is supported by leading WordPress professionals. That’s why we choose to recommend them to our customers!
```

--------------------------------

### Divi Builder Initialization Options

Source: https://www.elegantthemes.com/documentation/divi/premade-layouts

When the Divi Builder is loaded, users are presented with three initial options to start building their page: building from scratch, choosing a premade layout, or cloning an existing page.

```text
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Install Divi Theme via WordPress Dashboard

Source: https://www.elegantthemes.com/documentation/divi/install-divi

This guide explains how to manually install the Divi Theme using the WordPress Dashboard. It details the process of downloading the Divi Theme zip file from your Elegant Themes account and preparing it for installation.

```bash
Step 1: Log Into Your ET Account And Download Divi Theme
Before we can install the Divi Theme on your WordPress website, we’ll need the Divi Theme zip file. Log into your Elegant Themes Account and navigate to the Members Area. Click the “Download The Divi Theme” button to save the Divi Theme zip file to your desktop.
**Note:** If you’re using a Mac with Safari, your zip files will automatically be unzipped. To avoid this you’ll need to adjust your Safari Preferences. Learn how to do that here.
```

--------------------------------

### Add Divi Blurb Module to Page

Source: https://www.elegantthemes.com/documentation/divi/blurb

This guide explains how to add the Divi Blurb Module to a WordPress page using the Divi Builder. It requires the Divi theme to be installed and activated.

```WordPress
1. Install and activate the Divi theme.
2. Add a new page in WordPress.
3. Click the purple button "Use The Divi Builder" underneath the page title.
4. Choose to "Build From Scratch" or "Choose A Premade Layout".
```

--------------------------------

### Add Divi Fullwidth Menu Module

Source: https://www.elegantthemes.com/documentation/divi/fullwidth-menu

This guide explains how to add the Divi Fullwidth Menu Module to a WordPress page using the Divi Builder. It requires the Divi theme to be installed and activated.

```WordPress
1. Install and activate the Divi theme.
2. Add a new page to your WordPress website.
3. Click the purple button under the page title that says "Use The Divi Builder".
4. Choose to "Build From Scratch" or "Choose A Premade Layout" to load the Divi Visual Builder.
```

--------------------------------

### Add Divi Audio Module to Page

Source: https://www.elegantthemes.com/documentation/divi/audio

This guide explains how to add the Divi Audio Module to a WordPress page using the Divi theme and Visual Builder. It assumes the Divi theme is installed and activated.

```HTML/Divi
When you load the Visual Builder, Divi automatically adds a section and a row. You can learn more about how to modify and customize sections here and rows here. Once the section, row, and columns are set up, click on the grey “+” icon inside the row. This brings up the Divi Module Library which contains all the modules included with the Divi theme. Scroll down to “Video” and click on it to load the module.
Note: This module library is also searchable. Type the name of the module you want in the search bar at the top.
```

--------------------------------

### Add Divi Button Module to Page

Source: https://www.elegantthemes.com/documentation/divi/button

This guide explains how to add the Divi Button Module to a WordPress page using the Divi theme and builder. It assumes the Divi theme is already installed and activated.

```WordPress
1. Install and activate the Divi theme on your WordPress website.
2. Add a new page or edit an existing one.
3. Click the "Use The Divi Builder" button below the page title.
4. Choose to "Build From Scratch" or "Choose A Premade Layout" to load the Divi Visual Builder.
```

--------------------------------

### Add Divi Tabs Module

Source: https://www.elegantthemes.com/documentation/divi/tab

This guide explains how to add the Divi Tabs Module to a WordPress page using the Divi theme's Visual Builder. It assumes the Divi theme is installed and activated.

```text
1. Load the Visual Builder.
2. Click the grey "+" icon inside the row.
3. Search for "Tabs" in the Divi Module Library and click to load.
```

--------------------------------

### Add Divi Icon Module to Page

Source: https://www.elegantthemes.com/documentation/divi/icon

This section explains the prerequisite for adding the Divi Icon module to your WordPress website, which is having the Divi theme installed and activated. It guides users on how to proceed once the theme is set up.

```text
Before you can add the Divi Icon module to your website, you’ll need to have the Divi theme installed on your WordPress website. Learn how to install the Divi theme on your WordPress website here. Once you have the Divi theme installed and activated, we can begin using the features and functionalities of Divi.
```

--------------------------------

### Divi Hosting by Flywheel Overview

Source: https://www.elegantthemes.com/documentation/divi/other

This overview describes the partnership with Flywheel to offer optimized WordPress hosting for Divi users. It emphasizes automatic WordPress and Divi installation, enabling users to skip setup and enjoy faster websites.

```text
Divi Hosting By Flywheel Overview
Get amazing WordPress hosting that just works with Divi. We partnered with Flywheel to bring great Divi hosting to our customers along with automatic WordPress and Divi installation. Skip the installation and setup process and enjoy a faster Divi website!
View Full Article
```

--------------------------------

### Adding Divi Blog Module with Divi Theme

Source: https://www.elegantthemes.com/documentation/divi/blog

This guide details the process of adding the Divi Blog Module to a WordPress page. It requires the Divi theme to be installed and activated, and then instructs users to enable the Divi Builder for page creation.

```WordPress
Before you can add the Divi Blog module to your website, you’ll need to have the Divi theme installed on your WordPress website. Learn how to install the Divi theme on your WordPress website here. Once you have the Divi theme installed and activated, we can begin using the features and functionalities of Divi.
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/social-follow/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Outlines the initial choices presented when the Divi Visual Builder is enabled for a new page. These options allow users to start building from scratch, select a pre-designed layout, or duplicate an existing page.

```WordPress
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/fullwidth-portfolio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Outlines the initial choices presented when the Divi Visual Builder is enabled for a new page. These options allow users to start building from scratch, select a pre-designed layout, or duplicate an existing page.

```WordPress
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Divi Bar Counters Module Documentation

Source: https://www.elegantthemes.com/documentation/divi/bar-counter

This documentation explains how to add, configure, and customize the Divi Bar Counters Module. It highlights its use for displaying numerical information and its lazy-load animation feature. The guide assumes the Divi theme is installed.

```WordPress
## How to Add the Divi Bar Counters Module to Your Page
Before you can add the Divi Bar Counters module to your website, you’ll need to have the Divi theme installed on your WordPress website. Learn how to install the Divi theme on your WordPress website here. Once you have the Divi theme installed and activated, we can begin using the features and functionalities of Divi.
### Add a Page and Load the Divi Builder
To get started, add a new page to your website. By default, the Standard Gutenberg Editor loads whenever a new post or page is added in WordPress. To load the Divi builder on any post or page, click the purple button underneath the page title that says “Use The Divi Builder”.
Once clicked, this will reload the page with the Divi Visual Builder. As your page reloads, you’ll notice three options that come up: Build From Scratch, Choose A Premade Layout, and Clone An Existing Page.
#### Build From Scratch
This option loads the Divi Builder with a blank page design. Choose this option if you’d like to start your page design from scratch.
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/tab/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Outlines the initial choices presented when the Divi Visual Builder is enabled for a new page. These options allow users to start building from scratch, select a pre-designed layout, or duplicate an existing page.

```WordPress
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Authenticate Divi Account with API Key

Source: https://www.elegantthemes.com/documentation/divi/install-divi

This section guides users on how to link their Elegant Themes membership to their Divi installation by entering their username and API key in the Divi Theme Options. This enables access to updates and layout packs.

```text
1. Log into your Elegant Themes account.
2. Navigate to Account > API Keys.
3. Copy your API Key (generate one if needed).
4. Go to your WordPress dashboard.
5. Navigate to Divi > Theme Options > Updates.
6. Enter your Elegant Themes username and API Key.
7. Click 'Save Changes'.
```

--------------------------------

### Divi Blog Module: Content Options for Pages, Media, Projects, Products

Source: https://www.elegantthemes.com/documentation/divi/blog

Outlines the content configuration settings for displaying other content types (pages, media, projects, products) within the Divi Blog module. Similar to blog posts, it covers post count, date format, content length, excerpt handling, and post offset.

```English
Post Count: Number of items to display.
Date Format: Customize date display (M, j, Y).
Content Length: Choose 'Show Excerpt' or 'Show Content'.
Use Post Excerpts: Ignore manual excerpts (generate automatically).
Excerpt Length: Set the character length for excerpts (default 270).
Post Offset Number: Skip a specified number of items.
```

--------------------------------

### ConvertKit Account Setup in Divi

Source: https://www.elegantthemes.com/documentation/divi/newsletter

This provides a step-by-step guide for connecting a ConvertKit account to the Divi Email Optin module. It details selecting ConvertKit as the provider, entering account credentials, and selecting a subscriber list.

```Divi Theme
1. Select ConvertKit as your email provider.
2. Click the "Add" button.
3. Account Name – Type a name for this account.
4. API Key – Paste your ConvertKit API Key.
5. API Secret – Paste your ConvertKit API Secret.
6. Click the "Submit Button".
7. Select a subscriber list from the dropdown menu.
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/visual-builder

Outlines the initial choices presented when the Divi Visual Builder is enabled for a new page. These options allow users to start building from scratch, select a pre-designed layout, or duplicate an existing page.

```WordPress
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Divi Builder: Page Settings - Text Color

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

This snippet details how to set custom text colors for both light and dark text on a per-page basis within the Divi Builder.

```Divi Builder
Text – For this page you can set a custom light text color and a custom dark text color.
```

--------------------------------

### Divi Builder Page Creation Options

Source: https://www.elegantthemes.com/documentation/divi/woo-cart-products/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Outlines the initial choices presented when the Divi Visual Builder is enabled for a new page. These options allow users to start building from scratch, select a pre-designed layout, or duplicate an existing page.

```WordPress
Build From Scratch
Choose A Premade Layout
Clone An Existing Page
```

--------------------------------

### Divi Builder: Page Settings - Spacing

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

This section explains how to adjust the spacing between columns (gutter width) in the Divi Builder. Users can modify this by entering a numerical value or using a slider.

```Divi Builder
Spacing – Gutter width is the amount of space in-between columns. The higher the number, the more space. IF you’d like to decrease gutter width spacing, type in a lower number or drag the range slider to the left.
```

--------------------------------

### Load Divi Woo Product Description Module

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-product-description-module

Learn how to add the Divi Woo Product Description module to your page by accessing the module library. You can find it under 'Woo Modules' or by using the search bar.

```text
Click the gray '+' icon to open the module library.
Navigate to 'Woo Modules' and select 'Woo Product Description'.
Alternatively, use the search bar at the top of the module library to find the module by name.
```

--------------------------------

### Build a Global Header with Divi Theme Builder

Source: https://www.elegantthemes.com/documentation/divi/the-divi-theme-builder

This describes the process of creating a global header using the Divi Theme Builder. It covers selecting a starting point (premade layout or from scratch) and using the Divi Builder interface to design the header.

```text
Click 'Add Global Header' > 'Build Global Header'.
Choose to 'Choose a Premade Layout' or 'Build From Scratch'.
Design the header layout using the Divi Builder.
Save the layout before exiting the editor.
```

--------------------------------

### Divi Builder: Page Settings - Custom CSS

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

This snippet demonstrates how to add custom CSS to a specific page within the Divi Builder. This allows for page-specific styling that does not affect other pages on the website.

```CSS
/* Type custom CSS here to apply only to this page */
```

--------------------------------

### Add Divi Pricing Tables Module

Source: https://www.elegantthemes.com/documentation/divi/pricing-tables

This section explains how to add the Divi Pricing Tables Module to a WordPress page using the Divi Builder. It requires the Divi theme to be installed and activated. The process involves loading the Divi Builder and selecting an option to start building the page.

```WordPress
1. Install and activate the Divi theme.
2. Add a new page in WordPress.
3. Click the purple button under the page title that says "Use The Divi Builder".
4. Choose to "Build From Scratch", "Choose A Premade Layout", or "Clone An Existing Page".
```

--------------------------------

### Divi Blog Module Documentation

Source: https://www.elegantthemes.com/documentation/divi/blog

This documentation explains how to add, configure, and customize the Divi Blog Module. It highlights the module's versatility in displaying various content types like posts, pages, media, projects, and products in different layouts.

```WordPress
The Divi Blog Module is actually much more than just a way to display your blog posts. It can display posts, pages, media, projects, and products in a full-width layout or a masonry-style grid layout, with thousands of design options available at the click of a button! Making the Divi Blog Module the ideal way to display content on your website.
```

--------------------------------

### Build from Scratch Option in Divi Builder

Source: https://www.elegantthemes.com/documentation/divi/blog

This describes the 'Build from Scratch' option within the Divi Builder, which is used to start designing a page with a blank canvas.

```WordPress
This option loads the Divi Builder with a blank page design. Choose this option if you’d like to start your page design from scratch.
```

--------------------------------

### Divi Builder: Page Settings - Custom CSS

Source: https://www.elegantthemes.com/documentation/divi/map/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Allows users to add custom CSS directly to a specific page within the Divi Builder. This CSS will only affect the page it is applied to and does not have global scope.

```CSS
/* Custom CSS for this page only */
.your-element-class {
  color: blue;
}
```

--------------------------------

### Enable Divi Visual Builder

Source: https://www.elegantthemes.com/documentation/divi/fullwidth-portfolio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

Instructions on how to activate the Divi Visual Builder for front-end website design. This process involves navigating to a page and clicking the 'Enable Visual Builder' option.

```WordPress
Navigate to any page and click "Enable Visual Builder" on the top admin bar.
```

--------------------------------

### Load Divi Woo Product Reviews Module

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-product-reviews-module

Instructions on how to add the Divi Woo Product Reviews Module to a page using the Divi Builder. It involves clicking the '+' icon, navigating to 'Woo Modules', and selecting 'Woo Product Reviews'. The module library is also searchable.

```text
Click the gray "+" icon to bring up the module library.
Click on "Woo Modules" and then click "Woo Product Reviews" to add it to your page.
Use the search bar at the top of the module library to type in the name of the module you are looking for.
```

--------------------------------

### Divi Builder: Page Settings - Performance Optimization

Source: https://www.elegantthemes.com/documentation/divi/audio/%E2%80%9Chttps%3A/www.elegantthemes.com/documentation/divi/visual-builder/%E2%80%9C

This explains the performance setting in Divi Builder, which involves generating a static CSS file to improve page speed and caching. It is typically enabled by default.

```Divi Builder
Performance – By default, this option is toggled on. Generating a static CSS file improves the speed and performance of the page by compiling any CSS on the page into minified static CSS files that can be served more efficiently and cached without your visitor’s browser.
```

--------------------------------

### Access Divi Responsive Preview System (Page Level)

Source: https://www.elegantthemes.com/documentation/divi/responsive-preview-system

This snippet demonstrates how to activate Divi's responsive preview system at the page level using the Visual Builder. It involves enabling the Visual Builder, accessing the page options menu, and clicking the device icons.

```text
1. Log in to your Divi website.
2. Click **Enable Visual Builder**.
3. With the Visual Builder activated, click the purple ellipsis menu at the bottom center of your screen to activate the page options menu.
4. Click the tablet or phone icon at the bottom left corner of your screen to activate the responsive preview system.
```

--------------------------------

### Add Divi Slider Module to WordPress Page

Source: https://www.elegantthemes.com/documentation/divi/slider

This guide explains how to add the Divi Slider Module to a WordPress page. It requires the Divi theme to be installed and activated. The process involves using the Divi Builder, either the visual or backend editor, to insert and configure the module.

```WordPress
1. Ensure the Divi theme is installed and activated on your WordPress website.
2. Create a new page or edit an existing one.
3. Click the purple button underneath the page title that says "Use The Divi Builder" to load the Divi Visual Builder.
4. Choose to "Build From Scratch" or "Choose A Premade Layout".
5. Add the Divi Slider module to your page.
```

--------------------------------

### Load Divi Woo Checkout Information Module

Source: https://www.elegantthemes.com/documentation/divi/the-divi-woo-checkout-information-module

Steps to add the Divi Woo Checkout Information Module to a page using the Divi Builder's module library, including how to search for the module.

```text
Click the gray "+" icon to open the module library.
Click "Woo Modules".
Click "Woo Checkout Information" to add the module.
Alternatively, use the search bar at the top of the module library to find the module by name.
```

--------------------------------

### Add Divi Countdown Timer Module

Source: https://www.elegantthemes.com/documentation/divi/countdown

This section details the process of adding the Divi Countdown Timer Module to a WordPress page. It requires the Divi theme to be installed and activated. The steps involve loading the Divi Builder and selecting an option to start building the page.

```WordPress
1. Install and activate the Divi theme.
2. Add a new page to your WordPress website.
3. Click the purple button under the page title that says "Use The Divi Builder".
4. Choose one of the following options:
   - Build From Scratch
   - Choose A Premade Layout
   - Clone An Existing Page
```

--------------------------------

### Divi Keyboard Shortcuts Overview

Source: https://www.elegantthemes.com/documentation/divi/keyboard-shortcuts

This section details how to access and utilize Divi's keyboard shortcuts to enhance design efficiency. It explains the Divi Builder Helper and the methods to access it within the Visual Builder.

```English
To access the Divi Builder Helper, just press the **shift + ?** at any time while building a site in the Visual Builder.
You can also access the Divi Builder Helper by expanding the bottom toolbar and clicking the “?” icon in the bottom right and tabbing to Keyboard Shortcuts.
```
Tokens:
Raw