### 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! ``` -------------------------------- ### 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. ``` -------------------------------- ### 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 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. ?> ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 [divi_map_module] [/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. ```