Editing pages in WordPress
using Divi

Learn how to edit WordPress pages using Divi. From cloning templates,
to adding images, changing column structures, how to undo mistakes and more.

Video user guide for editing pages in WordPress.

1. How do you add or edit a page in Divi?

To add a new Divi page, click Pages and Add New. If you see the purple Use The Divi Builder button, click on it so that you get to the three options: Build from Scratch, Choose A Premade Layout or Clone Existing Page. The most efficient and effective way forward is to always clone an existing page. Doing so ensures you have all of the formatting, CSS and rules carried over automatically. Then all you have to do is change the text and images.

  • If you choose Build from Scratch you’ll waste time and probably miss some key formatting rules.
  • If you choose Choose a Premade Layout, you’ll end up with a page that looks nothing like the rest of your website.

So click on Clone Existing Page. Locate the page that has the same layout as you’d like your new page to have, by scrolling or using the search. Once you’ve chosen your page, simply click Use This Layout and the page will load. Now all you need to do is edit the content – the layout is already done.

On the right hand side you can save your work using the Save Draft button, or you can Preview and of course Publish when ready to go live.

You can also schedule your page to go live at a future date by clicking Edit next to Publish immediately.

Now, since we cloned an existing page, everything is already populated. All you need to do is edit the page.

2. How do you edit a page in Divi?

You have 2 options. You can either work in the back end, or on the front end by clicking Build On the Front End. The latter gives you a better visual of what you’re doing, but either way, the same rules apply.

Pages are made up of blue sections, green rows, and grey modules. But, instead of getting technical about this, simply work inside the colour that contains the content you want to edit.

At a very high level:

  • Blue sections tend to contain full-width background colours or images.
  • Green rows contain 1 or many columns so that you can display content on the left and right, or even split into 3 columns for example.
  • Grey modules contain your content items like text, images, videos and accordions for example.

3. How do you edit text using Divi?

Simply click and type, or click on the cog icon to reach the text editor. Either way, your changes don’t go live until you Save the page. The text editor is much like Word and other editing programs.

4. How do you add a link to text?

You can add a link to text by highlighting it clicking the link icon and then entering the URL, starting with http. For external websites, always set the Target to New Window. Clicking on the green Tick icon saves that module, but doesn’t put it live. To make your changes live, click on the purple dot and the green save.

5. How do you edit an image?

You can edit an image by clicking on it, selecting the grey cog, clicking on the image and then choosing an existing image from your Media Library, or click Upload files to choose on from your computer. Either way, click Upload an image once done.

6. How do you edit a button?

You can edit a button by clicking on it, selecting the grey cog, and then changing the button text and/or link.

7. How do you add new content?

To add new content, don’t ever start from scratch. Simply clone an entire page, blue section, green row, and/or grey module.

8. How do you clone an item?

You can clone an item by clicking on the Duplicate icon.

9. How do you delete an item?

You can delete an item by clicking on the Delete icon.

10. How do you move an item?

You can move an item by clicking on the Move icon and dragging it.

11. How do you alter the number of columns?

You can alter the number of columns in a row by clicking on the columns icon and choosing your preference. Once you’ve added a new column, you can then click on the grey plus icon, to add a text module for example.

12. How do you save an item to your Divi library?

You can save an item to your library for use elsewhere by clicking on the Save To Library icon. This feature lets you save and reuse entire pages, sections, rows or modules, on other pages. So again, you never need to start from scratch. Duplicate, or Save and reuse.

To use an item you’ve saved to your library, click on the corresponding colours plus icon, so if you’ve saved a grey module, click on the grey plus. Choose Add from Library to find the module you want to add. Click Use this module.

13. How do you undo a change?

You can undo a change if you haven’t yet saved or published the page, be using the Undo feature in the text editor, by pressing Ctrl + Z or by choosing a different version in the Editing History.

Please note that the latter is only a list of changes since you chose to edit the page. Once you’ve published your changes or saved the page, your editing history will start from scratch.

14. How do you edit an existing page?

To edit an existing page, locate it in the Pages section by scrolling or using the Search. Hover over the page and click Edit.

Need more help editing your WordPress website?

We specialise in WordPress websites in Noosa, both with and without the Divi framework. If you need a hand making changes to your website, please contact Judy for support.