Developing distinctive checklist designs is a very powerful facet of internet design. Readers respect the construction and aesthetics of a well-designed checklist as it permits them to procedure data a lot faster.
With Divi’s textual content module, you may have the entirety you wish to have to turn into strange lists into gorgeous artworks. Divi’s textual content module settings let you goal and elegance other html parts inside your content material – together with lists. And with a couple of design ways, you’ll be able to harness the facility of those choices to customise your lists in sudden tactics.
On this educational, I’m going to turn you ways you’ll be able to create distinctive checklist designs in Divi.
Let’s get began.
Sneak Peek
Here’s a peek on the 4 checklist designs we can construct on this educational.
Impressed by way of the Textual content Module Settings
In case you are like me, chances are you’ll generally tend to disregard one of the most “hidden” options lurking deep throughout the Divi Builder. One module that has a couple of buried treasures is the Textual content Module. The Textual content Module settings have more than one tabs that cling taste choices for various html parts. This may also be a particularly handy and inventive design software. Those tabs come with choices for frame textual content, hyperlinks, unordered lists, ordered lists, and blockquotes.
And, there are a couple of hidden gem stones underneath those tabs that you can now not have idea to make use of for your design. For instance, do you know that you’ll be able to alternate the checklist taste choices for unordered lists? There are a selection of distinctive choices to be had (18 to be precise), together with Roman Numerals and decimals with a number one 0.
Those would possibly appear insignificant, however whilst you harness the design choices, you’ll be able to produce some in point of fact inventive designs.
You’ll be able to additionally goal the way of various heading ranges (or tags) underneath each and every of the tabs underneath the heading taste choices.
This skill to focus on more than one html parts for your content material opens up some glorious probabilities. With a bit of luck, they’ll encourage you as effectively.
For extra in this, take a look at the feature update that explains a few of these glorious textual content choices.
Developing your HTML Listing
An html list can both be “ordered” (with numbers, roman numerals, and so on.) or “unordered” (with sq. icons, circle icons, and so on.). For unordered lists, the checklist pieces can be wrapped in a “ul” tag (“ul” stands for “unordered checklist”). For ordered lists, the checklist pieces are wrapped in a “ol” tag (“ol” stands for “ordered checklist”). Every checklist merchandise is wrapped in a “li” tag (“li” for “checklist merchandise”).
Here’s the elemental construction of an ordered checklist:
- Listing Merchandise
- Listing Merchandise
- Listing Merchandise
Which by way of default will appear to be the next:
- Listing Merchandise
- Listing Merchandise
- Listing Merchandise
You’ll be able to in truth create an HTML checklist the use of the wysiwyg editor inside a Divi Textual content Module. You should definitely are enhancing within the visible tab and easily sort out your checklist pieces ensuring there’s a line ruin (press input) after each and every one. Then spotlight the content material and click on one of the crucial checklist icons on the most sensible of the editor.
Now pass over to the textual content tab to peer what the HTML seems like:
This works tremendous for easy lists, however if you wish to create nested lists (an inventory inside an inventory), you’re at an advantage of constructing them the use of HTML (the use of the textual content tab) to steer clear of the headache of looking to do it within the wysiwyg editor (visible tab).
Here’s the elemental construction of a nested checklist which has an ordered checklist with each and every checklist merchandise having a nested unordered checklist.
- Ordered Listing Merchandise
- Unordered Listing Merchandise
- Ordered Listing Merchandise
- Unordered Listing Merchandise
- Ordered Listing Merchandise
- Unordered Listing Merchandise
Through default, this nested html checklist will appear to be this:
- Ordered Listing Merchandise
- Unordered Listing Merchandise
- Ordered Listing Merchandise
- Unordered Listing Merchandise
- Ordered Listing Merchandise
- Unordered Listing Merchandise
You’ll be able to additionally upload different html tags within the checklist as effectively. For instance, we will be able to wrap the ordered checklist merchandise in an h5 tag. The outcome will appear to be this:
Ordered Listing Merchandise
- Unordered Listing Merchandise
Ordered Listing Merchandise
- Unordered Listing Merchandise
Ordered Listing Merchandise
- Unordered Listing Merchandise
Don’t fear, that is as sophisticated as I’m going to get for this educational. However what you wish to have to comprehend is this construction has 3 other tags (ol, ul, and h5) that may be styled independently from one some other with Divi’s robust design settings in a textual content module.
We will be able to be desiring this construction a little bit later, however for now, let’s get our web page up and operating to start out our design within the visible builder.
Developing the Segment and Row for the Lists
Create a brand new web page and deploy the Visible Builder. Then make a choice the way to Create Web page from Scratch. Then create a normal phase with a two column row.
Developing the HTML Listing in a Textual content Module
Within the first column of your row, upload a brand new textual content module. Within the content material field within the textual content settings, input the next HTML Listing:
Design
- Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Broaden
- Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Ship
- Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
This construction must glance acquainted from previous. The h5 header textual content would be the ordered checklist pieces and the “lorem ipsum” dummy textual content would be the nested unordered checklist pieces.
Through default it’s going to glance one thing like this:
No longer too spectacular to this point, I do know. However with this content material in position, now we will be able to start the joys a part of designing our checklist with Divi!
Essential Be aware: Since each and every design is a changed model of the primary design, you’ll want to get started with the primary design on this educational and stay them so as.
Listing Design #1
For starters, let’s give our textual content module a gradient background as follows:
Gradient Background Left Colour: rgba(0,0,0,0.04)
Gradient Background Proper Colour: rgba(255,255,255,0)
Gradient Route: 90deg
Get started Place: 25%
Finish Place: 0%
Styling the Ordered Listing Pieces
Now pass over the the design tab and make a choice the ordered checklist tab underneath the Textual content toggle.
Then replace the next:
Ordered Listing Font: Abril Fatface
Ordered Listing Font Weight: Daring
Ordered Listing Textual content colour: #559cad
Ordered Listing Textual content Measurement: 45px
Ordered Listing Line Peak: 1.6em
Ordered Listing Taste Kind: decimal-leading-zero
Ordered Listing Taste Place: Out of doors
Ordered Listing Merchandise Indent: 2vw
You’ll understand that the h5 and the nested unordered checklist will inherit the way of the dad or mum ordered checklist. Don’t fear, it is possible for you to to override the way of the opposite pieces.
Styling the Unordered Listing Pieces
Now click on the ordered checklist tab to switch the next settings:
Unordered Listing Font: Montserrat
Unordered Listing Font Weight: Gentle
Unordered Listing Textual content colour:
Unordered Listing Textual content Measurement: 18px
Unordered Listing Taste Kind: None
Unordered Listing Merchandise Indent: 0.01px
Styling the H5 Header
The very last thing we want to taste is the H5 header. To try this, pass the choices underneath Heading Textual content and click on the H5 tab. Then replace the next:
Heading 5 Font: Montserrat
Heading 5 Font Weight: Gentle
Heading 5 Font Taste: Uppercase (TT)
Heading 5 Textual content Colour: #4f6d7a
Heading 5 Textual content Measurement: 5vw (desktop), 70px (pill), 40px (smartphone)
To complete off the design of our textual content module, upload the next customized padding:
Customized Padding (desktop): 3vw Most sensible, 3vw Backside
Customized Padding (pill): 2vw Left
Customized Padding (smartphone): 50px Left
Save Settings.
Now replica the textual content module and paste it into the second one column of the row. Chances are you’ll understand that the checklist numbers want to be adjusted within the duplicated textual content module in order that it continues from the former checklist. We would like our 2d textual content module checklist first of all the quantity 4 (as a substitute of one). To try this we want to upload one small alternate to our html checklist. Move to the content material field within the textual content module settings and change the hole “ol” tag with the next:
<ol get started="4">
Now let’s take a look at the overall end result.
Listing Design #2
For this 2d instance checklist design, I’m going to copy the primary phase we created to present us a head get started. I’ll additionally introduce a fab background for the checklist design the use of background gradients.
Making a Customized Background Gradient Design
Within the duplicated phase, replace the phase environment with the next gradient background:
Gradient Background Left Colour: #ffffff
Gradient Background Proper Colour: rgba(155,29,32,0.08)
Gradient Route: 45deg
Get started Place: 50%
Finish Place: 0%
Save Settings.
Now replace your Row settings with the next background gradient:
Gradient Background Left Colour: rgba(155,29,32,0.08)
Gradient Background Proper Colour: rgba(255,255,255,0)
Gradient Route: 45deg
Get started Place: 25%
Finish Place: 0%
Column 2 Gradient Background Left Colour: rgba(255,255,255,0)
Column 2 Gradient Background Proper Colour: #ffffff
Column 2 Gradient Route: 45deg
Column 2 Get started Place: 65%
Column 2 Finish Place: 0%
The important thing to those background gradient designs is that all of them have the similar gradient path of 45deg. Then you’ll be able to use the beginning place to house out the design frivolously.
Taste Settings for Listing Design #2
At this level, we will be able to in point of fact have some amusing tweaking the designs of our lists in distinctive tactics. For this 2d instance, I’m going to turn you ways simple it’s to turn into your design with only a few minor adjustments. Move to the textual content module within the first column and replace the settings as follows:
First delete the background gradient.
Unordered Listing Font Weight: Medium
Unordered Listing Textual content Colour: rgba(0,0,0,0.5)
Ordered Listing Font Weight: Common
Ordered Listing Textual content Colour: #9b1d20
Heading 5 Font Weight: Skinny
Heading 5 Textual content Colour: rgba(0,0,0,0.8)
Heading 5 Textual content Measurement: 5vw (desktop)
Now replica the module kinds over to the textual content module in the appropriate column.
Here’s the overall design of our 2d instance.
Listing Design #3
For the 3rd instance, I believed it could be just right to present an instance of a targeted one-column checklist design. To create this design, reproduction the second one instance phase. Within the new duplicated phase, alternate the row construction to 1 column after which delete the second one textual content module.
Now replace the phase settings with new gradient background colours:
Gradient Background Left Colour: #559CAD
Gradient Background Proper Colour: #4f6d7a
Replace the Row settings with a brand new left gradient background colour:
Gradient Background Left Colour: #4f6d7a
Then upload a brand new background gradient to the textual content module.
Gradient Background Left Colour: rgba(255,255,255,0)
Gradient Background Proper Colour: #559cad
Gradient Route: 45deg
Get started Place: 75%
Finish Place: 0%
This creates a darker model of the symmetrical background design in checklist design #2 for a one column checklist. The important thing to this design is to layer background gradients by way of including one to the phase, the row, and the module.
Taste Settings for Listing Design #3
For this 3rd instance, I wish to display you what a middle aligned checklist seems like. And for the ordered checklist merchandise, I’ll use a extra conventional decimal/quantity taste.
Move to the textual content module settings and replace the next:
Ordered Listing Font: Poppins
Ordered Listing Font Weight: Heavy
Ordered Listing Textual content Alignment: Heart
Ordered Listing Textual content Measurement: 4vw (desktop), 50px (pill)
Ordered Listing Textual content Colour: #f4f1bb
Ordered Listing Taste Kind: decimal
Ordered Listing Taste Place: Within
Ordered Listing Merchandise Indent: 0vw
(Be aware: Converting the way place to within will motive the quantity to stack above the header textual content which is handy for this design.)
Unordered Listing Font Weight: Gentle
Unordered Listing Textual content Colour: #ffffff
Heading 5 Font: Lato
Heading 5 Font Weight: Skinny
Heading 5 Letter Spacing: 6vw (desktop), 70px (pill), 40px (smartphone)
Heading 5 Textual content Colour: #ffffff
Heading 5 Textual content Measurement: 6vw
Customized Padding (desktop): 15% Left, 15% Proper
Customized Padding (pill): 5% Left, 5% Proper
You must additionally take out the customized 50px left padding on smartphone for this design.
Here’s the overall design.
Listing Design #4
For this fourth instance, I’m going to move with a extra minima-“checklist” design (see what I did there?). For the ordered checklist, I’m going to make use of massive Uppercase Roman Numerals within the Lato Font. I’ll additionally body the checklist by way of including a field shadow to each and every module.
Taste Settings for Listing Design #4
To jumpstart this checklist design, reproduction the primary phase with checklist design #1. Then replace the primary textual content module settings within the new phase as follows:
Delete Background gradient.
Ordered Listing Font: Lato
Ordered Listing Font Weight: Gentle
Ordered Listing Textual content Colour: #000000
Ordered Listing Textual content Measurement: 6vw
Ordered Listing Taste Kind: upper-roman
Ordered Listing Merchandise Indent: 0vw
Heading 5 Font: Lato
Heading 5 Font Weight: Daring
Heading Font Taste: Underline
Heading 5 Underline Colour: rgba(0,0,0,0.14)
Heading 5 Underline Taste: double
Heading 5 Textual content Colour: #000000
Heading 5 Textual content Measurement: 40px
Customized Padding: 3vw Left, 3vw Proper
Delete the customized left padding for pill and smartphone carried over from the former design.
Field Shadow Horizontal Place: 6px
Field Shadow Vertical Place: 6px
Field Shadow Unfold Energy: 0px
Field Shadow Blur Energy: 0px
Shadow Colour: #000000
Field Shadow Place: Interior Shadow
Reproduction Module Kinds over to the second one column. Then replace the field shadow place to outer shadow.
Here’s the overall end result.
That’s it!
Ultimate Ideas
After development and tweaking your html lists within the above examples, you’ll have a greater working out of learn how to harness the facility of the textual content module settings like a Divi knowledgeable. Not will you need to accept dull checklist designs for your content material. I’m hoping those ways will encourage you to create superb checklist designs in your subsequent mission.
I would like to peer some examples from you, so please be at liberty to proportion within the feedback.
Cheers!
The submit Unleashing the Power of Divi’s Text Module for Creative List Designs seemed first on Elegant Themes Blog.
WordPress Web Design