Beruflich Dokumente
Kultur Dokumente
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Divi’s text and list style options are a common feature available within most Divi
Modules. This opens new opportunities to design creative content and list designs
within modules (like the toggle and accordion module) that were previously only
possible within the text module. The trick is to setup your content with the
appropriate html so that you can target those items using the built-in design
settings.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 1/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Sneak Peek
Here is a quick look at the designs we will build using Divi’s text and list style
options.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 2/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 3/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 4/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS Download For Free
Join the Divi Newlsetter and we will email you
a copy of the ultimate Divi Landing Page
Layout Pack, plus tons of other amazing and
free Divi resources, tips and tricks. Follow
along and you will be a Divi master in no time.
If you are already subscribed simply type in
your email address below and click download
to access the layout pack.
DOWNLOAD
Enter your email address
To import the layout to your page, simply extract the zip le and drag the json le
into the Divi Builder.
2. A new page created to build from scratch on the front end (visual builder)
After that, you will have a blank canvas to start designing in Divi.
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
In this rst part of the tutorial, we are going to create three toggles that each have
content designed using list style options. This will be useful for separating your list
items in separate toggles almost like a custom blurb of content.
First create a regular section with a three-column row. Then update the row
settings as follows:
Gutter Width: 2
Width: 100%
Max Width: 90vw
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 6/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
01 <ol start="1">
02 <li>
03 <ul style="margin-top: -1.5em;">
04 <li>Lorem ipsum dolor sit amet</li>
05 </ul>
06 </li>
07 </ol>
08 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 7/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Now this piece of HTML code creates an ordered list using the ol tag. The ordered
list has only one list item (li) which is a nested unordered list (ul) with one list item
(li) that has some mock content. Under the ordered list is a basic paragraph of text.
With this setup, we can target each of those tags (ol, ul, p) for different styling using
Divi’s built in text styles which include list styles.
Notice the beginning ol tag has start=”1″ inside it. This tells the list which number
to start with listing the numbers of the ordered list with each list item. Technically,
this is not necessary for the rst number because it will automatically start with 1
by default. But we will need it for the next toggles we will add.
Also, the unordered list tag has some inline styling to bring the ul content up a bit
using negative margin. This is how we will overlap number of the ordered list with
the text of the unordered list in the design.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 8/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Icon Color:
Divi#ff3d97
Changes Everything. Give It A Test Drive! LEARN MORE
Icon Font Size: 26px
ALL
DOpen
I V I Toggle Background Color:C#ffffff
O N TA C T ACCOUNT PRICING
PRODUCTS
Closed Toggle Background Color: #ffffff
Open Title Text Color: #333333
Title Text Color: #333333
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 9/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 10/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 11/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 12/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Update
Divithe Ordered
Changes ListGive
Everything. Start Numbers
It A Test Drive! LEARN MORE
You will also need to update the toggle in column 3 with the ordered list start
number of “3”.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 13/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Final Divi
Design
Changes Everything. Give It A Test Drive! LEARN MORE
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 14/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 15/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 16/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Part 2:
DiviUsing
ChangesList Styles
Everything. inItAccordion
Give A Test Drive! Modules
LEARN MORE
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
In this second part of the tutorial, I’ll show you a quick and easy way to bring the list
style content designs from the toggle module to an accordion module. The process
is easy because you can use the same text and list styles in an accordion module (or
pretty much any module) that we used in our previous toggles. To do this, rst
create a new section with a one-column row. Then add an accordion module to the
row.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 17/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Then duplicate one of the two default accordions under the content tab for a total
of three accordions. Then update the content for each individual accordion with
the same exact toggle html content within each of the three toggles we created
earlier.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 18/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Then do the same for each of the design categories that have custom styling that
needs to be extended to the accordion module. These include styling for “Toggle”
“Title Text”, and “Body Text”.
Then check out the nal result for the accordion design.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 19/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Part 3:
DiviUsing
ChangesList Styles
Everything. toIt Create
Give Multiple
A Test Drive! LEARNColumn
MORE
In this third part of the tutorial, I’m going to show you how you can create multiple
columns of content for your list style designs.
First, create a new section with a one-column row. Then copy and paste one of the
toggle modules we created earlier into the row.
Then update the toggle module body content with some new HTML as follows:
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 20/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Notice the “column-count:2” inline style attribute that has been added to the
beginning ol tag. This will allow the ordered list content to be structured into two
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 21/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
columnsDivi
instead of one.
Changes You can change
Everything. Give Itthis to any
A Test number for
Drive! more
LEARN columns as
MORE
needed.
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
And notice how we have the ability to use Divi’s built-in design settings for the title,
link, and list styles.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 22/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Styling
Divithe LinkEverything.
Changes Text Give It A Test Drive! LEARN MORE
And since we aren’t overlapping any text with this design, go ahead and give the
ordered list style numbers a brighter color as follows:
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 23/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 24/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Width: 100%
Max Width: 89vw (desktop), 90vw (tablet and phone)
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 25/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 26/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Unordered List Text Size: 26px (desktop), 18px (tablet), 14px (phone)
Unordered List Item Indent: 1px
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 27/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 28/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
And here is the same design with a darker background and white text colors.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 29/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Final Thoughts
Most of the time, toggles and accordions will have basic body content that really
doesn’t require creative design. But if the time does come when you want to spice
up your toggle and accordion content, you can take advantage of Divi’s built-in text
and list style options. Once you have your html in place, you can target those html
tags for different designs without having to use external custom CSS or classes.
This is also a great way to display creative list styles within any module using the
Divi builder because these same list style options are available in all modules.
Cheers!
By Jason Champagne
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 30/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
By Jason Champagne
Divi
Jason started Changes
a career Everything.
in education Give co-founding
before It A Test Drive! LEARN MORE
Launch Tower, a Houston based web
developmentAcompany
LL specializing in conversion optimization through Divi. He enjoys
DIVI C O N TA C T ACCOUNT PRICING
freelance
P Rwriting,
O D U C Tall
S things WordPress, and the occasional ping pong match.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 31/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 32/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
Divi Design Showcase: New Submissions from July 2019
Posted on July 28, 2019 by Randy A. Brown in Divi Resources
It’s that time again for our monthly Divi Showcase where we take a look at 10 Awesome Divi websites
made by our community members. Each month we showcase the best Divi websites that were
submitted from our community and today we want to share with you the top ten websites for the
month of July....
Most companies will need to showcase services on their website to their visitors. And one way to
showcase services above the fold is to use a slider. This allows you to highlight each service one by one,
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 34/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
showcase services above the fold is to use a slider. This allows you to highlight each service one by one,
DiviisChanges
but the downside Everything.
that the user Give
will have to It A Test
navigate backDrive!
and forth toLEARN
nd theMORE
service they...
5 Comments ALL
DIVI CO N TA FULL
VIEW C T POSTA C C O U N T PRICING
PRODUCTS
Eric
July 23, 2019
REPLY
Stephen Vaughan
July 24, 2019
Very nice use of list in toggles. One Question. The magic numbers. At some point
during the tutorial the numbers for the ordered list gain a leading 0. How do you
do this?
REPLY
Stephen Vaughan
July 24, 2019
Ok. Under the ordered list set the Ordered List Style Type to decimal leading
zero
REPLY
Jason Champagne
July 24, 2019
Stephen,
Good catch. I totally skipped that step. Sorry. I’ll try and update the
post asap. Thanks.
REPLY
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 35/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
SharatAJaswal
LL
DIVI
July 26, 2019
C O N TA C T ACCOUNT PRICING
PRODUCTS
Point me to the changelog for Divi, please. I have an old version and was just
wondering if I should renew the membership.
REPLY
Leave A Reply
Name
Email Address
SUBMIT COMMENT
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 36/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Recent Posts
Divi Design Showcase: New Submissions from July 2019
How to Create Overlapping Columns with Divi’s Column & Transform Options
Categories Follow Us
Business
Community
Facebo Twitter LinkedI
ok n
Customer Spotlight
Design
Editorial
General News
Marketing
Resources
Theme Additions
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 37/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
WordPress
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 38/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
WordPress Plugins
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 39/39