How to Creatively Use Symbols in Your Web Design with Divi

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to creatively use symbols in your web design with Divi. For this tutorial, we’ll use the Life Coach Layout Pack but what I’m showing you in this post can be applied to any Divi Layout. We’re constantly looking for new and creative ways that allow you to personalize your website and this tutorial brings you one step closer.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a look at the three different examples we’ll recreate on different screen sizes.

Approach

The characters on your keyboard are not the only ones that exist. As a matter of fact, there are a bunch of them that are out there but not included on your keyboard. A lot of these characters go beyond the letters of the alphabet. They contain visually appealing symbols, for instance. And like the letters of the alphabet, you can use these symbols in Text Modules on your website as well. You can find all characters by going to your computer’s Character Map (PC) or Character Palette (Mac). Or you can also find them on the following website.

These symbols behave the same way other characters do which means you can adjust their font size, letter spacing, color and so on. This makes it extremely easy for you to adjust them on different screen sizes with Divi’s Visual Builder.

Create Example #1

Add New Row

Row Position

Let’s get started with the first example! Open the landing page of the website you’ve built using Divi’s Life Coach Layout Pack with the Visual Builder and add a new row on the following spot:

Column Structure

For this row, we’ll only need one column.

Sizing

Open this row’s settings. The only thing you’ll need to do within these settings is changing the Sizing of your row to increase the width:

• Make This Row Fullwidth: Yes
• Use Custom Gutter Width: Yes
• Gutter Width: 1

Add Text Module

Symbols

Next, add a Text Module with the following symbols:

░░░░░░░░░░░░░░░░░░░░
░░
░░
░░
░░
░░
░░
░░
░░

Text Settings

Now we can play around with the text settings of these symbols. To achieve the same result as the example, use the following settings:

• Text Size: 100px
• Text Orientation: Left

Spacing

Lastly, we’re also going to push down the Text Module by adding ‘-200px’ to the bottom margin.

Create Example #2

Add New Row #1

Row Position

The second example needs two rows. We’re going to place the first row in the same spot as in the first example:

Column Structure

We’ll only need one column for this row as well.

Sizing

Apply the following Sizing settings to your row next:

• Make This Row Fullwidth: Yes
• Use Custom Gutter Width: Yes
• Gutter Width: 1

Spacing

And use ’40px’ for the top and bottom padding of this row.

Add Text Module

Symbols

Continue by adding a Text Module to your row with the following symbols:

═════╗

Text Settings

Open the text settings next and apply the following changes:

• Text Color: #44627c
• Text Size: 85px
• Text Line Height: 1em
• Text Orientation: Left

Add New Row #2

Row Position

We’re going to do the exact same thing at the end of the testimonials with symmetrical symbols. Add a new row right below your testimonials.

Column Structure

Add one column to your row next.

Copy & Paste Row Style

To save ourselves some time, we’re going to copy the style of the previous row we’ve created and paste it into our new row.

Add Text Module

Symbols

The Text Module in this row needs the following symbols that are symmetric to the previous ones we’ve used:

╚═════

Text Settings

Continue by opening the Text Settings of this module and apply the following changes:

• Text Color: #ffb356
• Text Size: 85px
• Text Line Height: 1em
• Text Orientation: Right

Sizing

Lastly, we’re also going to change the Sizing of this Text Module to make it look equally as good on mobile:

• Width: 74%
• Module Alignment: Right

Extra: Add Text Shadow to Symbols

Text Shadow Text Module #1

Want to take this example one step further? Add a text shadow as well. Open your first symbol Text Module and apply the following text shadow:

• Text Shadow Horizontal Length: 1.3em
• Text Shadow Vertical Length: 0.4em
• Text Shadow Color: #ffb356

Text Shadow Text Module #2

Then, open your second Text Module and apply the following text shadow as well:

• Text Shadow Horizontal Length: -1.6em
• Text Shadow Vertical Length: -0.3em
• Text Shadow Color: #44627c

Create Example #3

Add New Row

Row Position

For the last example of this tutorial, add your row on the following spot on your landing page:

Column Structure

We’re, again, using only one column.

Sizing

And we’ll increase the width of our row using the following Sizing settings:

• Make This Row Fullwidth: Yes
• Use Custom Gutter Width: Yes
• Gutter Width: 1

Add Text Module #1

Symbols

To create our example, we’ll need two Text Modules. Add your first Text Module using the following symbols:

❖❖

Text Settings

Use the following settings for this first Text Module:

• Text Color: #44627c
• Text Size: 200px
• Text Line Height: 1em
• Text Orientation: Center

Add Text Module #2

Symbols

The second Text Module only needs one symbol:

❖

Text Settings

Apply the following text settings to this Text Module:

• Text Color: #ffb356
• Text Size: 200px
• Text Line Height: 1em
• Text Orientation: Center

Spacing

Lastly, add ‘-100px’ to the top margin and you’re done!

Preview

Now that we’ve gone through all the steps and all the examples, let’s take a final look at the result on different screen sizes.

Final Thoughts

In this Divi design tutorial, we’ve shown you how to use symbols in your web design with Divi. We’ve applied this method to Divi’s Life Coach Layout Pack. Adding symbols to your website in a creative way can help you personalize your website and bring it to life. We’ve shown you three beautiful ways on how to do it but the sky is the limit, so go ahead and give it a try with other symbols as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!