Sie sind auf Seite 1von 39

7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content

Accordion Content Designs | Elegant Themes Blog

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

How to Use Divi’s Text and List Style


Options for Unique Toggle and Accordion
Content Designs
Posted on July 23, 2019 by Jason Champagne in Divi Resources | 5 comments

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

In this tutorial, I’m going


Divi Changes to show you
Everything. how
Give It Ato useDrive!
Test Divi’s text and list MORE
LEARN style options for
unique toggle and accordion content designs. This will come in handy whenever
ALL
Dyou
I V I want incorporate different text
C O Ndesigns
TA C T without
A Chaving
C O U N to
T use CSS classes or
PRICING
PRODUCTS
inline css.

Let’s get started.

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Download the List Style Designs for Toggles and


Accordions Layout for FREE
To lay your hands on the designs from this tutorial, you will rst need to download
it using the button below. To gain access to the download you will need to subscribe
to our Divi Daily email list by using the form below. As a new subscriber, you will
receive even more Divi goodness and a free Divi Layout pack every Monday! If
you’re already on the list, simply enter your email address below and click
download. You will not be “resubscribed” or receive extra emails.

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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.

Let’s get to the tutorial shall we?

What You Need to Get Started


To get started, you will need to have the following:

1. The Divi Theme installed and active

2. A new page created to build from scratch on the front end (visual builder)

3. Images to be used for mock content

After that, you will have a blank canvas to start designing in Divi.

Part 1: Using List Styles in Toggle Modules


https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?utm… 5/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Add a Toggle Module


Next, add a toggle module to column 1. This will be the rst of three toggle modules
that will be added to each of the three columns.

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Add the Toggle HTML Content


The HTML content is key to this design. In order for us to take advantage of the
different list styles within the Divi toggle settings, we need to add HTML lists to our
content box.

Go ahead and paste the following HTML into the


Body content box.

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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.

Styling the Content


Now we can start adding some colors and font styles using the built-in settings and
list styles. Update the toggle design settings 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?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

Title Font: Oswald


Title Text Size: 18px
Title Line Height: 3em

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Unordered List Font: Oswald


Unordered List Font Weight: Light
Unordered List Text Color: #333333
Unordered List Text Size: 36px
Unordered List Style Type: None

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Ordered List Font: Kameron


Ordered List Font Weight: Bold
Ordered List Text Color: rgba(255,61,151,0.34)
Ordered List Text Size: 100px
Ordered List Line Height: 1.1em

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Duplicate First Toggle Module to Create the Other


Toggles
To create the toggles for column 2 and 3, we are going to duplicate the toggle
module we just nished designing. Then we can drag those into each column so that
each column has the same toggle module.

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

For the duplicate


A L L toggle in column 2, we need to have the ordered list start with the
DIVI C O N TA C T ACCOUNT PRICING
number “2” Pinstead
R O D U of
C T“1”.
S To change this, open the toggle module settings and

change the start number in the ol tag to “2”.

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

Now let’s check


A L L out the nal design.
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… 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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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.

Extend Toggle Styles to the Accordion


One quick way to carry over the styling from the toggles we created over to the
accordion module is to use the extend styles feature. To do this, open up one of the

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

toggle modules and right


Divi Changes click on the
Everything. Giveicon
It Astyle
Testcategory
Drive! andLEARN
selectMORE
“extend icon
styles” from the right click menu. Then select to extend this icon’s styles to “All
ALL
DAccordions”
IVI throughout “This Page”.
C O N TA C T ACCOUNT PRICING
PRODUCTS

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

content in a Toggle Module


ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

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:

01 <ol style="column-count: 2">


02 <li>
03 <ul>
04 <li>Lorem ipsum dolor sit amet</li>
05 <a href="#">Learn More</a>
06 </ul>
07 </li>
08 <li>
09 <ul>
10 <li>Lorem ipsum dolor sit amet</li>

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

11 <a href="#">Learn More</a>


Divi Changes Everything. Give It A Test Drive! LEARN MORE
12 </ul>
ALL
DIVI 13 </li> C O N TA C T ACCOUNT PRICING
PRODUCTS
14 <li>
15 <ul>
16 <li>Lorem ipsum dolor sit amet</li>
17 <a href="#">Learn More</a>
18 </ul>
19 </li>
20 <li>
21 <ul>
22 <li>Lorem ipsum dolor sit amet</li>
23 <a href="#">Learn More</a>
24 </ul>
25 </li>
26 </ol>

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

Since the title


A Land
L list styles are already in place from the previous design, all we
DIVI C O N TA C T ACCOUNT PRICING
need to do isP add
R O Dsome
U C T Sdesign for the link text.

Open the toggle settings and update the following:

Link Font Weight: Semi Bold


Link Font Style: Underline
Link Text Color: #ff3d97
Link Text Size: 15px

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:

Ordered List Text Color: #ff3d97

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Add a Background to the toggle


To nish the design, we can add a custom background to our toggle. To do this,
update the following toggle settings:

Background Image: [upload image of your choice]


Background Gradient Left Color: rgba(255,255,255,0.92)
Background Gradient Right Color: rgba(255,255,255,0.8)
Gradient Direction: 90deg
Start Position: 50%
End Position: 0%
Place Gradient Above Background Image: YES

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Adding Responsive Elements to the two column toggle


Since the toggle content is now two columns, let’s update the design with some
responsive styles to make it scale nicely on mobile.

First, update the row settings as follows:

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

The open the toggle settings and update the following:

Icon Font Size: 5vw

Title Text Size: 4vw

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Ordered List Text Size: 8vw

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Final Design of the Multi-Column Toggle Content

Here is the design on tablet and phone displays.

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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.

Have fun exploring new designs.

I look forward to hearing from you in the comments.

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.

Explore Divi, The Most Popular WordPress Theme In


The World And The Ultimate Page Builder
LEARN ABOUT DIVI

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Check Out These Related Posts

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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....

VIEW FULL POST

How to Create Overlapping Columns with Divi’s Column & Transform


O ti
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-text-and-list-style-options-for-unique-toggle-and-accordion-content-designs?ut… 33/39
7/29/2019 How to Use Divi’s Text and List Style Options for Unique Toggle and Accordion Content Designs | Elegant Themes Blog
Options
Divi Changes Everything. Give It A Test Drive! LEARN MORE
Posted on July 26, 2019 by Orana Velarde in Divi Resources
ALL
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS
In one of the latest Divi updates, we added some pretty amazing controls to columns in the builder.  It’s
now easier than ever to create column overlaps. In this tutorial, we’ll show you how to create a
testimonial section with three overlapping columns using Divi’s column and...

VIEW FULL POST

How to Use Multiple Sliders to Showcase Services with Automatic


Animation
Posted on July 25, 2019 by Jason Champagne in Divi Resources

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

Wow, Jason, very creative!

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

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

Comments are reviewed and must adhere to our comments policy.

Enter your comment here

Name

Email Address

Your Website (Optional)

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE

Receive noti Acations


LL about our new blog posts.
DIVI C O N TA C T ACCOUNT PRICING
PRODUCTS

Recent Posts
Divi Design Showcase: New Submissions from July 2019

How to Create the Best Sponsorship Page Possible

9 Non-Pro t Child Themes for Divi

Happy Tools by Automattic: The Ultimate Guide for Distributed Teams

How to Create Overlapping Columns with Divi’s Column & Transform Options

Categories Follow Us
Business
  
Community
Facebo Twitter LinkedI
ok n
Customer Spotlight

Design   

Dribbbl RSS YouTub


Divi Resources e e

Editorial

Freebie Of The Week

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

Divi Changes Everything. Give It A Test Drive! LEARN MORE


Theme Changes/Bug Fixes
ALL
D I VReleases
Theme I C O N TA C T ACCOUNT PRICING
PRODUCTS

Theme Sneak Peeks

Tips & Tricks

WordPress

601,772 Customers Are Already Building Amazing


Websites With Divi. Join The Most Empowered
WordPress Community On The Web
SIGN UP TODAY

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

130k 35k 47k 291k 90k 6k

Followers Members Followers Subscribers Subscribers Followers

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

DIVI PRODUCTS RESOURCES B LO G C O M PA N Y


Divi Changes Everything. Give It A Test Drive! LEARN MORE
Divi Builder Divi Theme Documentation Recent Posts About Us
ALL
DIVI
Layout Library Extra Theme C O N24/7
TA CSupport
T ACCO U N T Updates
Product PRICING
Careers
PRODUCTS
Live Demo Bloom Plugin Community Divi Resources Contact Us

Customer Showcase Monarch Plugin Developer Docs Business Terms of Service

WordPress Themes Af liates WordPress Privacy Policy

WordPress Plugins

Copyright © 2019 Elegant Themes ®

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

Das könnte Ihnen auch gefallen