KeylinkIT
How to use the Divi Page Builder
In today’s dynamic digital era, building beautiful and functional websites has never been more essential. With Divi Page Builder, the power to create, innovate, and inspire is right at your fingertips. Whether you’re a seasoned developer or a novice dipping your toes into the world of web design, this guide promises to be your indispensable companion.
Our team at KeylinkIT has poured hours into making this comprehensive resource for you, ensuring that every aspect of Divi is covered, clarified, and made compelling. Our mission? To simplify the complex and help you unlock the full potential of your web design projects.
As you journey through this guide, you’ll discover tricks, tips, and techniques that will transform your web-building experience. Dive in and let the magic of Divi unfold.
How to select a page to edit?
1. Login to your wordpress website’s administrator backend.
2. Click on the “Pages” link on the left side admin menu.
3. Select a page from the list by clicking the name of the page. You may also click the “Add New” Button.

How to open the Divi Visual Builder?
1. Open the edit page screen. (see previous section)
2. Click the “Use Divi Builder” button to activate the divi builder on this page.

3. Click the “Build on front end” button near the top of the edit screen. If you do not see this button, ensure you have either the “Divi” Theme or “Divi Builder” Plugin.

What are sections, columns and elements?
What is a section?
In the Divi Builder, a section is like a container for your content. It’s a space where you put rows, columns, and other elements. These sections stretch across the whole screen width and help you organize and design parts of your webpage. With Divi, it’s easy to add or change sections to make your site look great.
How do I create a section?
1. To create a section, click on the blue plus button on the page you are editing. Typically, you will find the blue plus button below other sections or at the top of the page if the page is blank. See screenshot to have a visual for the blue plus button.

What is a column?
In the Divi Builder, a column is a space within a row where you place your content. Rows can be divided into multiple columns, allowing you to organize and design side-by-side elements on your webpage. With Divi, adjusting the number and size of these columns is straightforward, helping you shape the layout you want.
How do I create a column?
1. To create a column, click on the green plus button on the page you are editing. Typically, you will find the green plus button below other columns or at the top of the page if the page is blank. See screenshot to have a visual for the green plus button.

How do I edit columns & elements?
How do I edit a column I have added to my page?
1. To edit a pre-existing column, simply hover your mouse over a section that has a column within it. Next, click the green cog that appears.

2. Next, you will see the columns in this column. If you would like to increase the number of columns, click the “Add New Column” button.

3. If you would like to re-order the columns, click and hold on a column and drag it to the new location.

How do I edit a elements I have added to my page?
Editing elements can be a little more complicated as the exact settings for each element is mostly unique. To keep things simple, we will just go over how to access these settings. If you have any specific questions regarding an element, email [email protected].
1. To edit a pre-existing element, simply hover your mouse over a column that has an element within it. Next, click the gray cog that appears. Based on your element, you will see different settings here.

How do I undo, save or revert changes to a page?
How do I undo a mistake I have made?
Editing pages is not an easy task so its normal to make mistakes while doing so. If you have made a mistake, please follow the directions below:
1. To quickly undo changes you have made to a page, you can use the keyboard shortcut CTRL + Z to undo your last changes. Be careful, you will undo more than your previous change if you press these keys multiple times.
OR
1. Click the three dots in the purple circle at the bottom of the page.
2. Next, Click the clock icon in the smaller purple cirlce that appears
after step 1.
3. You should now see a list of past changes you have made. To revert to a past change, simply click the past change and it will turn green. All changes after the selected change will be reverted.

