
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.
- 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.
- The 2 overlapping boxes – this duplicates the module type and contents.
- The bin icon deletes the section
- The clock undoes the last action (or several)
- Updates your live website with any changes you have made
Editing a text module
- Once you click to edit a text section you will open a familiar WordPress editing box.
- Edit as you would any other WordPress page, using the tool bar at the top for Add Media, text size and look etc.
- When you have made any edits you can see what they look like by clicking te eye icon in the middle bottom
- When you are happy then click Save & Exit
- The click the blue Update button (number 5 option on image at the top)
Inserting a new module
- On the main page Builder page (See top image) click on Insert Modules and you will get the option screen above.
- Choose the module you want depending on the function you want e.g. Text /Image/ Call to Action
- Then once in place, click on the 3 horizontal lines to edit that module.
- When you are happy then click Save & Exit
- 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.
This did not help me. I didn’t have the three lines in step 1. My screen does not look like the one in the video.
Divi updated and changed the look, I have now updated the first image with numbers to reflect the changes. Hope that helps.
Thank you! I was looking for how to bring up the Divi wireframe in “edit post” mode. “Enable Classic Builder” in the theme options did the trick.
Thanks again for the great instruction
Hi Guys, I am trying to edit text which is in a shop layer. I just cant get to the actual text. Can you help? Its driving me crazy! When I click on the cog it doesn’t show me the text that I need to edit.
Hi there, the shop page with woo commerce auto-generates, so usually you can’t edit the text on it there as if it’s woo-commerce it will often be a shortcode that generates it. It all depends how the site / store was set up with divi. It might be that in Divi – Theme Builder (in left dashboard) that you will find a page set up just for the shop.
This is helpful, thank you! I’m struggling to change the title of the page. Please can you explain how I could do that?
You need to click on the edit page or post to edit the title of a page or post. You can’t do that on the front end.