Divi Theme – How to Edit and Add Toggle Modules

 In Divi Theme, Wordpress Training

Toggles are a great way to consolidate information and improve user experience on your page. Using Divi, you can create any number of toggles that will look great inside any sized column.

The toggle module will look something like this on your website:

toggle-module-example

Step 1. Go to www.your-website-url/wp-admin

The login window will look like this:

login

Enter your username and password to get into the ‘Dashboard’ of WordPress.

Step 2. Once you have logged in, on the left hand side, there is a menu. Find the ‘Pages’ menu item,  hover over it and go to ‘All Pages’. You should see an page with all of the pages listed.

Click on the name of the page you would like to edit the text on, for example ‘Home’, and you will be taken to an ‘Edit Page‘ page.

Step 3. The pages are broken up into different sections, we have labeled these sections so it makes them easier for you to find. The dark grey boxes contain content that you can edit like text and images, these are called ‘Modules’.

Find the section on the page where the text you would like to edit, for example on the ‘Working with us’ page you may want to edit the text under the heading ‘There are currently positions available at EIM’ and add a new position, the module used to display the positions is called the ‘Toggle’ module.

To edit an existing Toggle module:

  1. To edit the content inside, click on the little icon with 3 horizontal lines as per this image:

edit-module

  1. Type in your title as per the image below, this will appear when the ‘Toggle’ is closed.

toggle module settings

 

  1. Type in your content as per the image below, this will appear when the ‘Toggle’ is opened. 

toggle module opened

  1. Make sure you hit ‘Save & Exit’ or you will lose your changes.

Once you hit ‘Save & Exit’, you need to ‘Update’ the page so that you can see your changes on the website. This button is called ‘Update‘ and is located in the right hand side menu, under the word ‘Publish’, as per the image below:

publish 

 

  

To add another Toggle module:

  1. Click the ‘Insert Module(s)’ link in the section where you would like to put the module, as per the image below.

 insert-module

  1. Select the ‘Toggle’ module, as per the image below.

toggle-module

  1. Now you can edit the module as discussed in the ‘To edit an existing Toggle module’ tutorial above. You can also drag and drop the module to other areas of the page if you wish.

 

Make sure you hit ‘Save & Exit’ or you will lose your changes.

 

Once you hit ‘Save & Exit’, you need to ‘Update’ the page so that you can see your changes on the website. This button is called ‘Update‘ and is located in the right hand side menu, under the word ‘Publish’, as per the image below:

publish

 

That’s it! You can have a look at the page on your website to have a look at your change.

If you want to get there from the Edit Page screen, you can click on ‘View Page‘ near the title of the page as per this image:

view page

Recent Posts

Subscribe for the lastest Wordpress news, tips & tricks!

Stay up to date on the latest features and important updates for Wordpress.

Ta Da! you are now on the list. Nice work!