Covid19 update: WE ARE OPEN... it's business as usual and we look forward to hearing from you.

How To Use WordPress Divi Page Builder – Part 1 – The Basics

The Divi Builder is designed as an easy-to-use builder that allows you to create dynamic modern websites without expertise. It features a drag and drop modular building system and is compatible with many themes. The builder is intuitive in nature, and fast to use. You can manage the builder’s settings to control how it responds to you, and realise your vision with access to over 40 different types of content modules, meaning that what you can achieve is almost limitless. With WordPress Divi Page Builder you do not need to use or understand code to create beautiful posts and pages that will wow your potential clients!

Setting Up A Page

When creating a page you can choose between building the page from scratch and using a layout template.

From here, you will see what Divi refers to as the Wireframe view, which allows you to view your webpage as a series of modular blocks, housed within rows, and those within sections, for a simple overview of the structure and layout of your site. With 3 section types, 20 row types, and 46 content modules in your toolbox, there are endless layout possibilities and your content areas can comprise of whatever size or shape you desire.

Different Views of your Website

Above the builder window, running across from the save button there are a series of icons which allow you to switch between different views of your webpage.

Excitingly, here you can move instantaneously between viewing your page as it would appear on a desktop screen, a tablet, or a smart phone with great accuracy of rendering, all without saving, changing tabs or exiting your page editor. You can also zoom out for a bird’s eye view of the flow of your page, and then return to the Wireframe view, allowing you to jump around as your workflow dictates.

Adding Content

Use the circular plus icons to add sections, rows and modules, and move them around as you see fit.

You can make changes to the typography, colours and spacing, and can easily select multiple modules to make changes to all of them at once. You can also use Divi’s find and replace tool to change, for example, all occurrences of one colour to another within the page, instantly transforming your aesthetic with the minimum number of clicks. Switch effortlessly between the different views while menu boxes are open and move boxes around your whole browser window, or dock them on one side, for a flexible and user friendly workspace.

Duplicating Elements

All elements can be copied and pasted, eliminating the need to rebuild similar content from scratch, and modules can be locked and unlocked to avoid mistakes, or hidden from view if you should wish, for example, to keep your sale banner in place but simply hidden from your visitors when your promotion is not active, avoiding the need to rebuild content in the future.

Page Settings and Tools

At the top of your builder a clean looking menu of icons give you access to your page tools.

In Part 2 of this introduction to building with Divi we will explore Layouts and using the fantastic Divi Library function, but for now we will focus on some of the other icons you will see. The clock icon allows you to view the steps of your editing history and roll back if you realise you have made a change to your page that you are not happy with, while the dustbin icon allows you to clear the whole page and start again. The cog symbol gives access to your page settings, such as the title of your page and featured image, and likewise for each section, row or module, the icons you see will give access to the settings for that particular element.

The last menu option, displayed as three dots, allows you to make a variety of changes to the way the builder functions, including which view automatically loads when you create a new page, and whether individual module editing menus appear when you move your cursor over modules on the desktop, tablet or Smartphone view. You can also choose whether you need to click on them to view the menu, or whether these menus appear all the time. This can be really useful if your content overlaps, making it easy to identify exactly which element you are looking for.

A Brief Summary

Every aspect of the builder is designed with facilitating your creative process in mind, and as you use Divi Builder you will continue to notice useful little functions, like the highlighting of relevant modules as you hover over their editing options, and the capacity to collapse sections or rows on content within the Wireframe view which enables you to keep your screen tidy and focus only on what you’re working on. You can even copy and paste entire elements between pages!

We hope that this has been a useful introduction to the Divi Builder tool, and hope you will join us for the upcoming Parts 2 and 3 where we will explore the potential of Divi’s Library tools and the powerful split testing system; Divi Leads. With the most advanced builder plugin on the market at your fingertips, we believe that you are bound to enjoy the wonderful world of website building as much as we do!

As always, you know where to find us if you need some advice, or a nice cup of tea.

About Alex

A former Teapot Apprentice. I handle a lot of the hosting, server management and site setup for our developers as well as building websites. It’s great to be a part of the team offering a great service here at Teapot. I love tea and I’m also an avid gamer.

Give us a call on 01460 281865 or email us to see how we can help you!