Divi guide: getting started
Divi help: edit pages, auto updates and starter designs
Divi is the visual builder we use for most sites. You edit the real page, on the front end, and see the result as you go. Here is how to do the three things every Divi owner needs.
How to edit a page
- Log in, then visit the page on your site. In the black admin bar at the top, click Edit With Divi. (From the dashboard: Pages, hover the page, Edit With Divi.) For a brand new page, go to Pages > Add New and click Use Divi Builder.
- The page reloads inside the Visual Builder. Hover over anything to see its outline: blue is a section, green a row, grey a module.
- To change text, click it and type. To change anything else, click the element (or its gear icon) to open its settings, which have three tabs: Content (text, images, links), Design (colours, fonts, spacing) and Advanced (CSS classes, visibility).
- To add something, click a + icon: the blue one adds a section, the green one a row (pick how many columns), the grey one a module such as Text, Image, Button or Contact Form.
- Check the page on phone and tablet with the device icons in the builder's top bar. Settings can differ per device.
- Click Publish (or Save) in the top bar. Ctrl+S, or Cmd+S on a Mac, also saves. Then click Exit Visual Builder.
Made a mess? The builder keeps an editing history: use Undo (Ctrl+Z) or the history panel to step back. Nothing goes live until you save.
How to choose a starter design
You do not have to start from a blank page. Divi offers three kinds of head start:
| Option | Where to find it | Best for |
|---|---|---|
| Divi Quick Sites and Starter Sites | Divi > Dashboard, the Divi Quick Sites card | A new site. A starter site brings a full set of pages, menus, header and footer templates and global colours and fonts in one go. You can also describe your business and let Divi's AI build a first draft. |
| Premade layouts | On a new page, Use Divi Builder > Choose A Premade Layout, Premade Layouts tab | Adding one more page in a consistent style. Pick a layout pack for your type of business, then the page (Home, About, Contact, and so on), then Use This Layout. |
| Your own library (Divi Cloud) | Right-click any section, row or module, Save to Library | Re-using your own designs: a call-to-action block, a pricing table, a testimonial row. |
How to choose: pick the starter whose structure fits your business (the pages and sections), not the one whose photos you like. Photos, colours and fonts are the easiest things to change; the structure is the hardest. Then set your colours and fonts once, globally, so every page follows them.
How to set Divi to update itself
Divi is not in the free WordPress directory, so WordPress can only update it once Divi knows your Elegant Themes account.
- Log in at elegantthemes.com, open Account > API Key and generate a key. Elegant Themes recommends a separate key for each site, so you can switch one off without affecting the others.
- In your site go to Divi > Theme Options > Updates. Enter your Elegant Themes Username and the API Key, and save.
- Updates now appear under Dashboard > Updates like any other theme.
- To make them automatic, go to Appearance > Themes, click Divi's Theme Details and choose Enable auto-updates.
Keep a recent backup before any theme update, and check your key pages afterwards. Divi has a rollback button under Theme Options > Updates if an update causes trouble. See our auto update advice.
Divi words, explained
- Section: a full-width band of the page (blue).
- Row: sits inside a section and holds columns (green).
- Module: the actual content, such as text, an image or a button (grey).
- Theme Builder: templates for the header, footer and page types used across the whole site.
- Global colours and fonts: change one setting and every module that uses it follows.
Want a Divi site without the learning curve?
We design Divi sites, set them up with everything on this site, and show you how to make your own edits.