Getting Started with Divi And WordPress

Step 1: Logging into WordPress

Before you can do anything you will need to log in to WordPress. You’ll need your websites username and password to do this. If you don’t have this, please email helpdesk@boocoo.com.au and our support team will assist.

Open up a new tab/window in your web browser and go to your websites home page.

Up in the address bar you will see your website URL. For example, because you’re looking at this website the address bar will show http://boocoo.com.au/

Now at the end of the URL type in wp-admin and press enter. For example:
https://boocoo.com.au/wp-admin

You should now see the WordPress login screen:

Type in your username/email address and password and click the blue Log In button.

You should now see the WordPress Dashboard which looks something along the lines of this:

The WordPress Dashboard can look a bit confronting the first time you see it but in time it’ll all make sense.

If you look at the top left of the dashboard you will see your Website name. Ours says BOOCOO in the above image but your website will show your site name instead.

Click on your website name and your home page will again be displayed but you’ll notice now that the WordPress Dashboard Toolbar now appears at the top of the website.

Step 2: Enabling the Divi Visual Builder

Now that you’ve logged in to your website you can start to make changes. Using the menu on your website navigate to the page you want to edit.

Now look for the Enable Visual Builder button on the WordPress Dashboard Toolbar and click on it:

The page will reload (it might take a few minutes the first time) and the visual builder will now be active. You should see a small purple circle at the bottom of the screen with three white dots in it.

Click on the purple icon and will expand out to show the Divi menu.  It’ll look something like this:

The two most important buttons on this menu are the green Save button, which saves your changes and the purple clock button which allows you to undo any changes you have made.

You’ll also notice in the grey section three icons representing a desktop, tablet and mobile.  Clicking on any of these will show you how your page will display on the selected device.

Step 3: Editing your content

To change anything on the page, just click on it. Divi will show you a pop up menu with all of the editing options.

For example, this is the pop up menu for this paragraph of text that you are reading:

This is the Divi Text module and allows you to edit the text. You can also change how the text is displayed using the Design tab.

At the bottom of the module pop up window you will see the red close button, the undo and redo buttons and the green tick button.

Once you have finished making your changes click on the green tick button.

Your web pages have been built using a range of different modules and clicking on them will show different pop up windows.  For example, clicking on an image will show the image pop up menu allowing you to upload a new image.

Divi has over 30 different modules allowing you to create some amazing web pages without any coding skills whatsoever. 

For a full list of all of the Divi modules and what they are have a look at the Divi Documentation.

Step 4: Saving and closing the Visual Builder

Once you have finished making your changes you’ll want to save them and then exit the visual builder.

Click on the green Save button to save all of your changes:

Now at the top of the screen in the WordPress Dashboard Toolbar, click on Exit Visual Builder:

That’s it, you’ve now updated your website 🙂