Nicole Says

18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog
Divi 3.0 & The All New Visual Builder Has Arrived! LEARN MORE
Themes Plugins Blog Contact Login JOIN TO DOWNLOAD
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
Have you ever tried experimenting with font families and

letter spacing at the same time? Let me tell you that it can
bring eye-catching results. It gives an abstract feeling to
your design and it also matches design trends in 2018.
https://www.elegantthemes.com/blog/divi-resources/how-to-effectively-use-letter-spacing-to-create-a-stunning-design-with-divi 1/38
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.
Color Palette #1
Color #1: #f44f34
Color #2: #c81a33
Color #3: #e03933
Color #4: #f29d96
Color #5: #44cae1
Color Palette #2
Color #1: #dddddd
Color #2: #b2b2b2
Color #3: #cccccc
Color #4: #5b5b5b
Color #5: #ff0022
How to Effectively Use

Letter Spacing to Create a
Stunning Design with Divi
How to Effectively Use Letter Spacing to Create a Stun…
Subscribe To Our Youtube Channel
Approach
There are two color palettes that you can apply to this
design
Choose one color palette and keep the numbering the

way it is
Throughout the tutorial, we’ll refer to a certain color

number which you have to get from the color palette
of your choice
Afterwards, you can still clone a section and apply the

other color palette to it instead
We’re using both extra and negative letter spacing to

create the overall look and feel
The letter spacing value depends on the size of your

font
That means we’ll need to change the letter spacing for

every font size (desktop, tablet, phone)
Add a New Standard

Section
Gradient Background
Create a new page or open an existing one and switch over

to Visual Builder. Add a new section next, open the settings
and apply the following gradient background color to it:
First Gradient Color: Color #1
Second Gradient Color: Color #2
Gradient Type: Linear
Gradient Direction: 160deg
End Position: 53%
Spacing
Then, move on to the Design tab, open the Spacing

subcategory and create some space at the top and
bottom of your section by adding the following custom
padding:
Top Padding: 60px
Bottom Padding: 180px
Add First Row

Column Structure
Once you’re done with the section settings, you can add
your first row using the following column structure:
Spacing
Before adding any modules, open the row settings and add
‘150px’ to the bottom padding.
Add First Name Text Module
Text Settings
Now we can start adding the desired modules to this row.

The first thing we’ll do is add a Text Module for the first
name. The text size and letter spacing will be different for
each screen size. We’re using negative letter spacing to
bring the characters closer to each other while still keeping
the size of the text:
Text Font Weight: Ultra Bold
Text Font Style: Uppercase
Text Size: 300px (Desktop), 210px (Tablet), 125px (Phone)
Text Color: Color #3
Text Letter Spacing: -20px (Desktop), -15px (Tablet),

-8px (Phone)
Text Line Height: 1em
Text Shadow Vertical Length: 0.03em
Text Shadow Blur Strength: 0.02em
Text Shadow Color: rgba(0,0,0,0.47)
Text Orientation: Center
Add Last Name Text Module
Text Settings
Right below the previous Text Module, add another one

containing the last name. Apply the following text settings
to it:
Text Font: Allura
Text Color: rgba(255,255,255,0.86)
Spacing
To make this Text Module overlap the previous one, add the
following top margin to it as well:
Top Margin: -200px (Desktop), -150px (Tablet), -100px

(Phone)
Add Job Title Text Module
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.
Letter Spacing: 22px (Desktop), 14px (Tablet), 8px

(Phone)
Text Line Height: 1.5em
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.
Add Second Row

Column Structure
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
Before adding any modules, open the row settings and use
‘#ffffff’ as the row background color.
Column 1 Background Color
We’ll also apply a slightly gray background color to the first

column using the ‘#f7f7f7’ color code.
Sizing
We want the columns to have the same height, that’s why

we’ll enable the ‘Equalize Column Heights’ option in the
Sizing subcategory.
Spacing
And to remove all of the space above and below the

columns, we’ll add ‘0px’ to the top and bottom padding of
our row.
Box Shadow
Lastly, we’ll apply a Box Shadow with quite a blur strength in

combination with a darker shadow color:
Box Shadow Blur Strength: 80px
Shadow Color: rgba(0,0,0,0.49)
Add First Text Module to Column 1
Text Settings
Now, let’s start adding modules to the first column. We’ll

start with a ‘get to know me’ Text Module for which we’ll use
the following text settings:
Text Font: Allura
Text Font Weight: Bold
Text Size: 29px
Spacing
To vertically center the Text Module on desktop, we’ll need

to add some top margin. We’ll also create some space at
the left side:
Top Margin: 250px (Desktop), 50px (Tablet & Phone)
Left Margin: 17% (Desktop), 10% (Tablet & Phone)
Add Second Text Module to Column 1
Text Settings
Right below the previous Text Module, add another Text

Module. After you’ve added your content, apply the
following text settings:
Text Font: Adamina
Text Font Weight: Bold
Letter Spacing: -5px (The text size difference between

screen sizes is neglectable, that’s why we’re using this
value across all screen sizes)
Spacing
Open the Spacing subcategory next and apply the

following custom margin to it:
Bottom Margin: 50px (Tablet & Phone)
Left Margin: 17% (Desktop), 10% (Tablet & Phone)
Add Image Module to Column 2
Upload Image
We’ve added all the needed modules to the first column so

now we can move on to the second one. The first thing we’ll
add there is an Image Module.
Image Alignment
Go to the Design tab next and enable left Image Alignment

in the Alignment subcategory. Also, make sure the ‘Always
Center Image on Mobile’ option is disabled.
Spacing
We’re going to make this image overlap the top of the row
by using the following top margin for it:
Top Margin: -50px (Desktop Only)
Left Margin: 5% (Tablet)
Border
We’re also going to add a border to this image using the

following settings:
Border Width: 35px
Border Color: #ffffff
Border Style: Solid
Box Shadow
Lastly, we’ll add a box shadow to create some depth:
Box Shadow Vertical Position: 24px
Box Shadow Blur Strength: 41px
Shadow Color: rgba(0,0,0,0.3)
Add Text Module to Column 2
Text Settings
Right below the Image Module you’ve added, add a Text

Module for your description. After adding your content,
apply the following text settings to it:
Text Size: 15px
Text Color: #828282
Text Line Height: 1.4em
Text Orientation: Justify
Sizing
We’re going to change the width of this Text Module as well

by opening the Sizing subcategory and assigning ‘70%’ to
the Width.
Spacing
Lastly, we’re going to add some top and left margin too:
Top Margin: 50px (Desktop Only)
Left Margin: 10% (Tablet & Phone)
Add Button Module to Column 2
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
We’re changing the appearance of the button by using the

following settings:
Use Custom Styles for Button: Yes
Button Text Size: 13px
Button Text Color: #ffffff
Button Background Color: Color #5
Button Border Width: 0px
Button Letter Spacing: 6px
Button Font Style: Uppercase
Spacing
Last but not least, to create some more background space

for the button, we’ll apply the following custom padding:
Top Padding: 10px
Right Padding: 40px
Bottom Padding: 10px
Left Padding: 40px
Preferential Extra Step

You can always take these tutorial designs a step further
and make them unique. One of the things you can do is add
a vibrant top divider, for instance:
Add Top Divider to Section
To add this top divider, go to the Design tab of your section,

open the Dividers subcategory and apply the following
settings to it:
Divider Style: Find in List
Divider Color: Color #5
Divider Height: 500px (Desktop), 300px (Tablet), 250px

(Phone)
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.
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!
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.
Your Name*
Your Email*
Your URL
SUBMIT COMMENT
Receive notifications about our new blog posts.
Recent Posts Categories Follow Us
How to Effectively Use Community

Letter Spacing to
Customer Spotlight
Create a Stunning
Divi Resources
Design with Divi
2 Ways to Fix the Editorial

  
WordPress Mixed Freebie Of The Week
Content Error Face Twit Drib
General News boo ter bble
k
How to Use a Filterable
Resources
Portfolio and Post
Theme Additions
  
Navigation to Organize
Case Studies with Divi RSS Goo You
Theme Changes/Bug gle+ Tub
e
How to Make Your Fixes
Websites GDPR Theme Releases

Compliant
Theme Sneak Peeks
Get a Free Law Firm
Tips & Tricks
Layout Pack for Divi
492,154
Customers Are
Already Building
Amazing
Websites With
Divi. Join The
Most
Empowered
WordPress
Community On
The Web
We offer a 30 Day Money Back
Guarantee, so joining is Risk-Free!
SIGN UP TODAY
112,528 38,814 273,824

FOLLOWERS FOLLOWERS FOLLOWERS
About Us Affiliates Careers Privacy Policy Terms of Service
Copyright © 2018 Elegant Themes ®

Nicole Says

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Nicole Says

Uploaded by

Copyright:

Available Formats

18/04/2018 How to Effectively Use Letter Spacing to Create a Stunning Design with Divi | Elegant Themes Blog

Themes Plugins Blog Contact Login JOIN TO DOWNLOAD

Have you ever tried experimenting with font families and

How to Effectively Use

How to Effectively Use Letter Spacing to Create a Stun…

Subscribe To Our Youtube Channel

Choose one color palette and keep the numbering the

Throughout the tutorial, we’ll refer to a certain color

Afterwards, you can still clone a section and apply the

We’re using both extra and negative letter spacing to

The letter spacing value depends on the size of your

That means we’ll need to change the letter spacing for

Add a New Standard

Create a new page or open an existing one and switch over

First Gradient Color: Color #1

Second Gradient Color: Color #2

Gradient Type: Linear

Gradient Direction: 160deg

End Position: 53%

Then, move on to the Design tab, open the Spacing

Top Padding: 60px

Bottom Padding: 180px

Add First Row

Add First Name Text Module

Now we can start adding the desired modules to this row.

Text Font Weight: Ultra Bold

Text Font Style: Uppercase

Text Size: 300px (Desktop), 210px (Tablet), 125px (Phone)

Text Color: Color #3

Text Letter Spacing: -20px (Desktop), -15px (Tablet),

Text Line Height: 1em

Text Shadow Vertical Length: 0.03em

Text Shadow Blur Strength: 0.02em

Text Shadow Color: rgba(0,0,0,0.47)

Text Orientation: Center

Add Last Name Text Module

Right below the previous Text Module, add another one

Text Font: Allura

Text Size: 88px (Desktop), 78px (Tablet), 39px (Phone)

Text Line Height: 1em

Text Orientation: Center

Top Margin: -200px (Desktop), -150px (Tablet), -100px

Add Job Title Text Module

Text Font Style: Uppercase

Text Size: 17px (Desktop), 16px (Tablet), 14px (Phone)

Text Color: Color #4

Letter Spacing: 22px (Desktop), 14px (Tablet), 8px

Text Line Height: 1.5em

Text Orientation: Center

Add Second Row

Column 1 Background Color

We’ll also apply a slightly gray background color to the first

We want the columns to have the same height, that’s why

And to remove all of the space above and below the

Lastly, we’ll apply a Box Shadow with quite a blur strength in

Box Shadow Blur Strength: 80px

Add First Text Module to Column 1

Now, let’s start adding modules to the first column. We’ll

Text Font: Allura

Text Font Weight: Bold

Text Size: 29px

Text Color: Color #5

To vertically center the Text Module on desktop, we’ll need