Plugins

DiviMenus

DiviMenus - $36.75

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $6.75

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $6.75

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $6.75

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $14.25

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $6.75

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69 ⚡

This stunning Bundle includes the DiviMenus plugin and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

Applying different styles within a Toggle Title

Let's Insert Italic Text into a Divi Toggle Title!

PREVIEW

Get DiviMenus!

Take advantage of the “Show” link type to reveal a 2 columns Row when clicking the “Menu Item”.

Although the Title field of all Divi modules does not allow you to style words separately by default, you can take advantage of the :before and :after pseudo-elements to get up to 3 different elements and style them to your liking.

This way you can choose the Italic style for your Title from the Toggle module settings and then style the pseudo-elements adding some specific CSS from the Page Settings.

Styling the “Toggle” Title

As shown in the video, you should note that Divi already uses the :before pseudo-element of the Toggle Title to display the open/close Icon, so we only have the :after pseudo-element to add any other content.

Goes

This default Toggle is already using the :before pseudo-element to display the open/close Icon using the ET icon font.

If we try to replace the open/close Icon by “Your Title”, the content is replaced using the ET icon font.

We are using the :after pseudo-element to display “Here”.

Goes

In this Toggle we are only using the :after pseudo-element to display “Here”.

  • Style the :after Toggle Title, pasting this into your Page Settings:
.custom-title .et_pb_toggle_title:after {
  content: " Here";
  color: #ff000000;
  font-style: normal;
}
  • Assign this CSS Class to your Toggle module:
custom-title

By assigning this class only to the modules you want to modify, you will prevent these styles from being applied to other modules on the same page.

Styling the “Menu Item” Title

🥳 DiviMenus comes to our rescue!

Let’s recreate a Toggle easily taking advantage of the versatile “Show” link type using a single “Menu Item” and a Text module.

Now we can style both pseudo-elements, the “Menu Item” title, and the open/close Icon separately, since all of them here are separate elements!

This is a “DiviMenu Flex” module recreating a Toggle module.

We are taking advantage of the “Show” link type to reveal a Text module with a Slide Down Animation when clicking the “Menu Item”.

We are using the :before pseudo-element to display “Your Title”, and the :after pseudo-element to display “Here”.

  • Style the :before and :after Menu Item Title, pasting this instead:
.custom-title .dd-text-content:after {
  content: " Here";
  color: #ff000000;
  font-style: normal;
}
.custom-title .dd-text-content:before {
  content: "Your Title ";
  color: #ff000000;
  font-style: normal;
}
  • Assign this CSS Class to your DiviMenus module:
custom-title

By assigning this class only to the modules you want to modify, you will prevent these styles from being applied to other modules on the same page.

…and play around to get the example below:

Get DiviMenus!

Take advantage of the “Show” link type to reveal a 2 columns Row when clicking the “Menu Item”.

👉 Subscribe to our YouTube channel

More Videos