I use the Divi WordPress theme designed by Elegant Themes on a lot of sites I design for clients.  It is a a page builder theme – I usually explain it to clients as saying it is a bit like LEGO, you add blocks on top of each other to create the function and layout of a page that you need.

But it does mean the page end of pages (and potentially) posts have a different look from the normal WordPress editor.

There are now 2 ways to edit posts / pages.  Using the Divi Builder or using the Visual Builder.  Both work in a similar way, and it is often personal preference which you use.  The visual builder has the bonus of being able to see live the changes you made.

Here is a simple guide to editing pages that are built with the Divi Builder.

Logging onto your site

Go to http://yourdomaincom/wp-admin (changing the ‘yourdomain’ to your actual domain)

Input the Username and Password you have been given.

You will then be logged into the dashboard.

To edit pages / posts using the Divi builder

On the left click on pages – all pages

Choose the page you want to edit and click ‘edit’

(Or if you are viewing the page normally click edit on the black bar at the top)

Once you are in the edit page go down to the Divi Builder (in the purple box)

If you do not see this page and have a box that just says Edit with Divi and it takes you to the front end editor you need to go to (on left hand black menu) Divi – Theme Options – Builder – Advanced – and make sure Enable Classic Editor is Enabled.

 

Using the image above and the arrows and numbers – you can do the following.  For more details of how to edit a module see the next image.

  1. Click on the cog to open and edit a section.  The modules will correspond to how the page looks.  E.g. Text /Image/Slider/Gallery.
  2. The 2 overlapping boxes –  this duplicates the module type and contents.
  3. The bin icon deletes the section
  4. The clock undoes the last action (or several)
  5. Updates your live website with any changes you have made

Editing a text module

screenshot-geekfairy.co.uk 2016-04-22 14-15-26

  1. Once you click to edit a text section you will open a familiar WordPress editing box.
  2. Edit as you would any other WordPress page, using the tool bar at the top for Add Media, text size and look etc.
  3. When you have made any edits you can see what they look like by clicking te eye icon in the middle bottom
  4. When you are happy then click Save & Exit
  5. The click the blue Update button (number 5 option on image at the top)

Inserting a new module

screenshot-geekfairy.co.uk 2016-04-22 14-16-12

  1. On the main page Builder page (See top image) click on Insert Modules and you will get the option screen above.
  2. Choose the module you want depending on the function you want e.g. Text /Image/ Call to Action
  3. Then once in place, click on the 3 horizontal lines to edit that module.
  4. When you are happy then click Save & Exit
  5. The click the blue Update button (number 5 option on image at the top)

To edit posts / pages using the Visual Builder

To activate the visual builder open the page / post you want to edit and click on Enable Visual Builder at the top in the black bar

You will then see the visual builder loading

Once it has loaded when you move your mouse cursor around it will show the settings bar for each section, row and module.

Each one has the following options

   Move

   Settings – opens up all the options to edit text, change image, change designs features like text size

   Duplicate

  Save to Library

   Delete

Editing text in the Divi Visual Builder

Either use the settings button in a text module and it will open up the familiar text box, or if you click into the text without clicking the settings icon you can edit it there.

Once you have made any changes you need to save them to go live.

Click on the purple circle at the bottom with three dots and it will open new icons.  The green save button is on the right at the bottom

To view the site in different screen sizes use the icons on the left, to undo anything use the clock icon in the middle.

There are many other features in the visual builder that you can discover, just make sure you have a back up before you start trying them all out.

 

Pin It on Pinterest

Share This