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.

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.

VPN Plus

1. Open the edit page screen. (see previous section)

2. Click the “Use Divi Builder” button to activate the divi builder on this page.

Synology VPN Visual Manual Step 1-2

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.

Synology VPN Visual Manual Step 1-2

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. 

Synology VPN Visual Manual Step 1-2

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.

Synology VPN Visual Manual Step 1-2

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.

Synology VPN Visual Manual Step 1-2

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.

Synology VPN Visual Manual Step 1-2

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

Synology VPN Visual Manual Step 1-2

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. 

Synology VPN Visual Manual Step 1-2

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. 

Synology VPN Visual Manual Step 1-2
Synology VPN Visual Manual Step 1-2

How do I customize an element ive added to a page?

When creating a page, you will be adding elements to your page that do not exactly meet your expectations. To resolve this, you will need to edit the element’s design tab. This section will teach you how to edit your element’s design. 

1. First, click the settings cog on an element that appears when hovering your mouse over it. This settings cog will be gray as elements will appear with a gray border. 

2. Navigate to the “Design” tab at the top of the screen.

3. Once you are in the design tab, you can customize your elements without having to edit any code! Just keep in mind, each element has different design settings.

Synology VPN Visual Manual Step 1-2
Synology VPN Visual Manual Step 1-2

How do I edit the visibility of columns or elements?

When creating a page, sometimes you will be creating a page that requires elements that may only work on either desktop or mobile. If you need to hide a column or element, follow the directions below.

1. First, click the settings cog on an element or column that appears when hovering your mouse over it.

2. Navigate to the “Advanced” tab at the top of the screen.

3. Once you are in the “Advanced tab”, click the “Visibility” section on the page below. 

4. You will now see 3 checkboxes for disabling the visibility of the currently selected column or element. If you would like to hide only on desktop, click the desktop checkbox. 

Keep in mind, the element will now display as partially transparent on the front end editor. You can still edit it but if you loaded the page outside of the front end editor, the element would not display. 

Synology VPN Visual Manual Step 1-2
Synology VPN Visual Manual Step 1-2

How do I import a pre-build template for my divi page?

When creating a divi page, you do not always need to start from scratch. With the Divi page builder, you can also import pre-built page templates you think will fit your website. These pre-built page templates are fully customizable!

1. First, create a new page or edit a blank pre-existing page.

2. Open the front-end divi page builder. (see previous sections for help)

3a. [If you started with a new page] Once you are in the front-end divi page builder, you will get a popup that asks you if you would like to use a blank page, premade page or clone  a existing page. Click “Choose a pre-made layout”

Synology VPN Visual Manual Step 1-2

3b. [If you started with a pre-existing page] Once you are in the front-end divi page builder, you will need to click the three dots icon at the bottom of the page. Next, click the “+” plus button on the left of the menu that appears. 

Synology VPN Visual Manual Step 1-2

4. You should now see a library of pre-built divi page templates to select from. Find something that you think could look good on your website. Keep in mind, they are fully customizable so the initial template does not need to be related to your website. For example, you can import a shoe store website template and edit it to look like a flower store point of sale website.

Once you find a template you like, import it and you are done!

Synology VPN Visual Manual Step 1-2

How do I save a column or element so I can use it again in the future?

If you are trying to remain consistant and save time, saving your elements or columns will allow you to add them again to pages in the future.

1. First, create an element or column you would like to save for future use.

2. Hover your mouse over the element or column. A menu should appear over the item you are hovering. Next, click the “(⬇)” down arrow icon.

3. Name your element or column. In this case, I named my element I am saving “Textblock-for-guide”.

4. Click “Save To Library”

Synology VPN Visual Manual Step 1-2
Synology VPN Visual Manual Step 1-2

How do I load a saved column or element to my divi page?

So you saved you element and now you need to use it? Well luckily for you, it is quite easy!

1. Click the “(➕)” plus button to add a new element or column to the page. Remember, if you saved an element, the plus button will be gray. If you saved a column, the plus button will be green.

2. Select the “Add from Library” tab at the top of the popup. This will change the popup to a library of saved elements or columns depending on what you selected in step 1.

3. Select your item and then click “Use this module” to add it to the page. 

Synology VPN Visual Manual Step 1-2
Synology VPN Visual Manual Step 1-2

How do I see my previous changes?

Sometimes, you make mistakes so far back that you cannot fix them by using the undo button. This section will show you how to see the history of edits you have made and revert to past edits.

1. Click the “(…)” three dots button at the bottom of the page to open the divi menu.

2. Click the “(🕒)” clock button that appears. This will cause a popup to appear with your past edits.

3. Click on any of the edit entires that are listed on the page. Be careful to not go too far back as there are timestamps listed with each edit.

If you need to revert to a even older version (Days or weeks old) see the following guide: Revisions for beginners (External website)

Synology VPN Visual Manual Step 1-2

3CX Android App Installation & User Guide

Directory Keylink IT SnapGuideInstalling the iOS App Setting Up Your ExtensionMaking Calls Blind Transfer Attended Transfer Conference Record Video New Call Mute Yourself Hold CallKeylinkIT 3CX Android AppThe 3CX Android App Installation and Configuration guide offers...

3CX iOS (iPhone) App Installation & User Guide

Directory Keylink IT SnapGuideInstalling the iOS App Setting Up Your ExtensionMaking Calls Blind Transfer Attended Transfer Conference Record Video New Call Mute Yourself Hold CallKeylinkIT 3CX iOS AppThe 3CX iOS App guide offers an easy way to handle office...

Synology VPN User Guide

Directory Keylink IT SnapGuide Keylink IT Visual Manual Download the SnapGuide Here!KeylinkIT How to Use Synology VPN Welcome to our visual User Guide for Synology VPN – your comprehensive companion to effortless setup and usage. Synology VPN offers a secure VPN...

How to Use Yealink Handset Phones

Directory Yealink Phones User Guide How to Perform Actions During a CallKeylinkIT Yealink Phones User GuideExplore the Visual User Guide for Yealink T46U – your comprehensive resource for harnessing the power of these advanced IP phones designed for modern businesses....

How to Use SharePoint on Desktop

DirectoryHow to Sync SharePoint Libraries to Your ComputerKeylinkIT SharePoint and File Syncing: A Quick OverviewSharePoint, developed by Microsoft, revolutionizes how companies manage documents, collaborate, and communicate. Its standout feature, seamless file...

How to Download the Microsoft Teams App

DirectoryHow to Install Microsoft Teams on Desktop How to Install Microsoft Teams App on iPhone or iPad How to Install Microsoft Teams App on Android Phone or Tablet How to Sign Into the Microsoft Teams App on Mobile Devices and TabletsKeylinkIT How to Install...

How to Manage Junk and Phishing Emails in Outlook

Directory:How to Label Both the Email and its Sender as "Not Junk" in Outlook How to Report Emails as Phishing How to Block EmailsKeylinkIT How to Manage Junk, Spam, and Phishing EmailsDealing with important emails ending up in the junk folder within Outlook can be...

How to Create a Shared Mailbox in Outlook M365

KeylinkIT What is a Shared Mailbox?A shared mailbox in Outlook is an inbox that multiple users can access and manage collectively. It's set up with its own email address and permissions are granted to specific users. Unlike personal mailboxes, users access it through...

How to Use Fanvil Handset Phones

DirectoryKeypad Instructions How to Perform Actions During a CallKeylinkIT How to Use Fanvil Handset PhonesThe Fanvil X5U boasts two color displays and newly integrated line keys with LED lights, granting users immediate access to instructions, thus enhancing...

How to Use 3CX Phone Systems

3CX Guide Directory      Login Process      How to Install the 3CX Web Client      How to Set the Web Client App to Auto-Start      How to Set up Click2Call Browser Extension      How to Set up Voicemail      How to Make Calls Using 3CX Transferring a Call Blind...