How to Design Your Website with Divi 2024

Customizing & Managing Your Content

In the last post, you’ve learnt how to install a Pre-Built Divi Template, now you’ll need to replace all the dummy content, images, etc., on the page to make it your original page.  After doing these, your basic website is pretty much completed, and you can then publish the site and make it go live!

In order to update your content, you’ll need to understand a bit more about the structure of Divi.  There a few levels of building blocks in Divi that you’ll need to get familiar with.

Since we’re working on Premade Layouts, for the purpose of this exercise, we’ll be focusing purely on managing contents within the Modules on the webpage.

The Divi Modules

Modules in Divi are basically the different content types that you can add onto a website.  The only difference is Divi, and similar to other popular WordPress themes, enables you to style them to your liking without any codes.  These can be as simple as Texts, Images, Videos, etc., or they can also be Contact Forms, Image Sliders, Image Galleries, Accordians, Toggles, on page Tabs, etc.  The below procedures is a general process that gives you an idea on how to Add / Update / Remove module, and it works in a very similar way from module to module.

By now, you would have added a Page with layout filled with dummy content, your goal now is to update it with your own content.

Updating a content Module

1. Go to Pages on the left hand vertical menu in WordPress
2. Hover over one of the existing pages that you’ve created, and click on Edit with Divi
3. Once you’re in Edit mode on the page, navigate to one of the rows (i.e. element with a green border)
4. Hover over an existing module (i.e. element with a dark grey border), then when you see a Gear icon, click that.
5. In the Content tab of the module, this is where you are able to update/replace the content within an existing module.
6. After updating the content, click onto the tick and save the content.
7. Repeat the above step and update all the content.
8. After all the content update process is complete, click Publish to save and publish the page to the web.  Note, if you’re editing a draft version of the page (i.e. a page that hasn’t gone live yet) and you don’t want it to go live yet, then click Save Draft instead.

Adding a content Module

1. Go to Pages on the left hand vertical menu in WordPress
2. Hover over one of the existing pages that you’ve created, and click on Edit with Divi
3. Once you’re in Edit mode on the page, navigate to one of the rows (i.e. element with a green border)
4. If you hover anywhere within the row, a dark grey “+” will appear, click onto the “+” and a list of different Modules will appear, and that’s how you can add a module.
5. After adding the module, click onto the tick and save the content.
6. Click Publish.

Removing a content Module

1. Go to Pages on the left hand vertical menu in WordPress
2. Hover over the content module (i.e. dark grey) that you’d like to remove from the page, and click on that module
3. When you see a icon menu, find the Trash Can icon, and click.  The Module should now be deleted.
4. Click Publish.

Undo / Redo

Great thing about Divi is that there’s a built-in Undo and Redo function.  These 2 functions allow you to undo or redo your previous actions if you have accidentally done something wrong without trying to restore the whole page.

1. Within your modules (works the same for Sections / Rows / Columns), go to the Undo (in purple), or Redo (in blue), button to perform this action.
2. Once you’re done and recovered the content you wanted, click onto the tick and save the content.
3. Click Publish.

Updating the Menu

Now that you’ve created all the pages you required for your website, it’s time to go back to the menu to add the pages onto it so that your audience can navigate through your site.  Note: if your page is in Draft mode, you won’t be able to add them onto the menu.  Therefore, ensure that you’ve published all the pages before performing this step.

Adding Pages to your Menu

1. Go to Theme Customizer
2. On the left hand menu in the Theme Customizer, select Menus
3. Select the menu you previously created and click
4. Go to the + Add Items button and click
5. A list of all the pages created will appear on your right, simply select the page you’d like to add and click
6. Repeat the above step until you’ve added all the Menu Items onto the menu.
7. After all the menu items have been added, click Publish

CONGRATULATIONS!  YOUR SITE IS NOW LIVE!

Congratulations!  Your site is officially live and your potential clients are now able to find and navigate your around site online.

NEXT, Maintenance!

The site is now completed, and live.  In order to ensure that the site is works find, and even if it doesn’t, you’ll have a way to quickly restore your site, we highly recommend that you regularly check a few things.  This is what the next step is about.

 Go To . Step 4 Post-Going Live Maintenance >>>