Welcome to part 2 of our series on building a WordPress website using the CloudCanvas platform. CloudCanvas allows you to launch WordPress websites that come packed with outstanding security, speed and premium plugins and themes.

In this part, we will show you how to start adding your first pages, posts and media. We will also cover the Divi page builder, show you how to build unique layouts and engaging experiences that your visitors will love.

Part 1 – Registering your CloudCanvas site, purchasing a domain name and adding your branding

Part 2 – Add your first pages, posts and learn how to use the Divi page builder

Part 3 – Activating plugins, adding social media integration, checking analytics

Part 4 – Finalise your site and content and launch

Sneak peak at Divi 3.0, coming to CloudCanvas in September

Sections, Rows, Columns and Modules

The Divi page builder uses sections, rows, columns and modules as building blocks for your website, below we will explain what each item does.

There are three types of sections, Standard Section, Fullwidth section and Speciality Section.

Standard Section
This is the default section and can be used to make almost any kind of layout, within the Standard section you can add up to 4 columns in many different variations. The Standard Section is the most versatile section.

 

Fullwidth Section
The Fullwidth section can only be used as a full-width module, you can’t insert columns in a full-width module.

 

Speciality Section
Speciality sections were created to allow for more advanced column structures. Unlike normal sections, when you use a speciality section, you can add complex column variations next to full-spanning vertical sidebars, without adding unwanted breaks to the page. These types of layouts are not possible using normal sections.

 

Rows & Columns

Rows can be added inside the Standard Sections and Speciality Sections. rows can contain up to 4 columns. Rows allow you to build structures layouts such as text paragraphs, and another content side by side.

Modules

Modules make up the content, there are currently over 30 modules to choose from such as Video, Sliders, Blog, Accordion, Tabs and much more. More modules are constantly added and you can take advantage of the code module to create truly custom layouts and functions on your site.

Fullwidth Section Modules

Editing content in the Divi page builder is pretty simple once you are done a few modules, you can edit the module by clicking the 3 lined tab in the top right corner of the module. You will notice these tabs on the sections and rows also but we will get into those later.

Divi module settings

Divi Module Settings open, how to edit

 

From within the module settings, you can change just about any imaginable setting. The ‘General Settings’ tab is where you can change the content, in the example above you can see the settings for this Blurb module, you can change the link’s, title, icons, alignment and add text to the Blurb all from here.

The CloudCanvas page builder is powered by the renowned Divi Page builder, a simple but powerful page builder that allows you to create designs and layouts with endless possibilities.

We will give you a brief overview of the page builder and how you can use it to make simple or complex layouts for your CloudCanvas website.

Getting started on a new page

Upon creating a new page, post or project, you will see a blue button ‘Use Page Builder’. Click the Use Page Builder button, if you already have content in the default editor it will be placed in a text module in the Page Builder.

Starting a new page from scratch can be a long process of trial and error, we always recommend drawing some outlines of the layout you want to achieve on some paper so you have something to work towards. Another way to get started quickly is to use one of the pre-designed layouts included with Divi, these can be added to any page and you can do whatever you want with them. You can also build your own layouts, save them and easily reuse them around your website.

Divi Page Builder Predefined Layouts
Adding a pre-designed layout is very simple, click the ‘Load from library’ button on your page builder.

 

Divi Page Builder Predefined Layouts
Pick from any of the Predefined layouts, if you want to use a layout that you have uploaded or saved to your library click the ‘Add from library’ tab.

After you have added a predefined layout you can do whatever you want to it and even save it in your own library with the changes made. You can preview your page by clicking the preview button or eye icon on the page builder modules to preview modules as you are working on them.