2. Web Hosting & Domain
3. Install WordPress
4. Choose Your Theme
5. Get To Know WordPress
6. Design With Divi Builder
7. Divi Theme Builder Templates
8. Import & Export Layouts
9. Checklist: After Launch
10. Let's Celebrate!
You are a star!
6.1 Introduction to the Divi Visual Builder
- Your progress:
We’ll harness the Divi Visual Builder’s capabilities to craft a sticky header and menu, design the body content, and even create a captivating global footer. Additionally, we’ll utilize the Divi Visual Builder to construct templates for blog posts, category pages, the 404 error page, and more. You can practically use this visual builder for any aspect of your website.
Before we dive into the details, let’s provide a brief overview of the Divi Visual Builder’s concepts and features so you can gauge its potential for your project.
- Enable Divi Visual Builder: In WordPress, you can enable the Divi Visual Builder for a specific page by clicking the “Enable Divi Builder” button in the top bar when logged into WordPress. It allows you to make changes to your page directly.
- WYSIWYG (What You See Is What You Get): The Divi Visual Builder provides a live preview of your website, and you can edit content on the spot. Just click on content elements, and a simple interface allows you to make changes without diving into complex code.
- Page Structure: In Divi, pages are structured hierarchically. A section is represented by a blue box, a row is a green box, and columns are gray boxes. Inside columns, you have content modules, which are the building blocks of your page.
- Duplication and Reuse: Divi enables you to duplicate and reuse content. This functionality speeds up your design process. Simply duplicate an element, like a blurb or image module, and edit the content as needed.
- Advanced Design Settings: The Divi Visual Builder offers advanced design settings for customization. You can access these options by clicking on a module and then the cogwheel icon to open the design tab. Here, you can manipulate features like box shadow, animations, colors, and more.
- Visual Feedback: Divi provides visual feedback on editing. When you hover over an element, it’s highlighted with a blue border, giving you clear access to edit options. The default interaction mode is “Click,” but you can change it to “Hover” if you prefer.
- Page Management: Within Divi Visual Builder, you can click on the three dots to manage various settings for your page. Options include saving to the Divi Library, deleting all content, and more.
- Responsive Design: Divi Visual Builder helps ensure your website is responsive. You can easily switch between different device views, including desktop, tablet, and smartphone. This feature allows you to optimize your site for various screen sizes.
- Wireframe View: The wireframe view provides an overview of the backend structure of your page. This can be handy for understanding the organization of your content.
- Global Designs and Advanced Options: Divi allows you to manage global design settings, advanced design settings for specific modules, and even add custom CSS to individual pages.
- Import and Export: You can import and export layouts or designs in Divi. This is excellent for reusing content across different pages or websites.
- Design Library: Divi includes a design library with over 1,500 ready-made layouts that you can import and customize. These layouts cover various types of pages, such as homepages, about pages, and blog pages.
- History and Reversion: Divi maintains a history of edits. You can use this feature to revert to a previous state if you make a mistake. It’s like a time-traveling tool for your website.
- Split Testing: Divi offers an A/B testing feature to help you optimize your website’s performance by comparing two different versions.
- Export Designs: You can export your designs in JSON format, which is handy for transferring designs between different websites.
In the following tutorial sections, we will explore all these features in-depth. It’s highly recommended to install Divi and follow along step by step. If you want to use the same designs as the Divi Crib, they’ll be available for download on DiviMundo.com. Dive in and unlock the creative potential of the Divi Visual Builder!
This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.
Feel free to ask questions and leave feedback on the tutorial here.