Professional Documents
Culture Documents
Divi 3.0 & The All New Visual Builder Has Arrived! LEARN MORE
How to Effectively
Use Letter Spacing
to Create a
Stunning Design
with Divi
Posted on April 18, 2018 by Donjete Vuniqi in Divi
Resources | 0 comments
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 1/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Not only can you add extra letter spacing to your text, you
can also use negative letter spacing to bring
your characters closer to each other. In this tutorial, that is
inspired by one of Roney Gibson‘s designs, we’re going to
show you how to creatively and effectively use letter
spacing to obtain beautiful results on all screen sizes. For
this, we’re using Divi’s built-in options only.
Preview
Before we dive into the tutorial, let’s take a quick look at
what you can expect from this tutorial on different screen
sizes.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 2/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Color Palette #1
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 3/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Color #1: #f44f34
Color #2: #c81a33
Color #3: #e03933
Color #4: #f29d96
Color #5: #44cae1
Color Palette #2
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 4/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Color #1: #dddddd
Color #2: #b2b2b2
Color #3: #cccccc
Color #4: #5b5b5b
Color #5: #ff0022
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 5/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Approach
There are two color palettes that you can apply to this
design
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 6/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Gradient Background
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 7/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 8/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Once you’re done with the section settings, you can add
your first row using the following column structure:
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 9/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
Before adding any modules, open the row settings and add
‘150px’ to the bottom padding.
Text Settings
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 10/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 11/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Text Settings
Text Color: rgba(255,255,255,0.86)
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 12/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
To make this Text Module overlap the previous one, add the
following top margin to it as well:
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 13/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Text Settings
The last Text Module in this row is used to share the job title
(or anything else you’d like to share). For this Text Module,
we’re using extra letter spacing to create contrast.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 14/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
We’ll also add ‘100px’ to the top margin of this Text Module to
create sufficient space between this Text Module and the
previous ones.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 15/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Now that we’re done with the first row, we can move on to
the next. We’ll need the following column structure:
Background Color
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 16/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Before adding any modules, open the row settings and use
‘#ffffff’ as the row background color.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 17/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Sizing
Spacing
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 18/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Box Shadow
Shadow Color: rgba(0,0,0,0.49)
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 19/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Text Settings
Spacing
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 20/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Text Settings
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 21/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 22/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Upload Image
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 23/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Image Alignment
Spacing
We’re going to make this image overlap the top of the row
by using the following top margin for it:
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 24/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Border
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 25/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Box Shadow
Shadow Color: rgba(0,0,0,0.3)
Text Settings
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 26/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Text Color: #828282
Sizing
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 27/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
Lastly, we’re going to add some top and left margin too:
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 28/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Button Alignment
The last module we’ll need to add is the Button Module. After
you’ve added your CTA, open the Alignment subcategory
within the Design tab and enable left Button Alignment.
Button Settings
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 29/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 30/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Spacing
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 31/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 32/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Preview
Now that we’ve gone through all of the steps, and even
shared a preferential extra step you can add, let’s take a
final look at the result on different screen sizes.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 33/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Final Thoughts
Experimenting with letter spacing within your design can
bring amazing results. To illustrate that, we’ve shown you
how to create a stunning design that uses both extra and
negative letter spacing. We’ve also provided you with two
color palettes that look great when applied to this design.
There’s a flashy red and a subtler gray one. If you have any
questions or suggestions, make sure you leave a comment
in the comment section below!
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 34/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
By Donjete Vuniqi
Donjetë is a freelance content writer who is
fascinated by content marketing, design, and
technology. She helps clients bring the right
content to the right people. If you're looking for
someone to help you tell your company's story,
she'll know how to handle it.
Leave a Reply
Comments are reviewed and must adhere to our
comments policy.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 35/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Your Name*
Your Email*
Your URL
SUBMIT COMMENT
492,154
Customers Are
Already Building
Amazing
Websites With
Divi. Join The
Most
Empowered
WordPress
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 37/38
18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Community On
The Web
We offer a 30 Day Money Back
Guarantee, so joining is Risk-Free!
SIGN UP TODAY
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 38/38