{"id":825735,"date":"2018-01-09T16:00:46","date_gmt":"2018-01-09T16:00:46","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/5-cool-design-examples-that-demonstrate-the-power-of-divis-new-font-options\/"},"modified":"2022-12-10T13:49:30","modified_gmt":"2022-12-10T13:49:30","slug":"5-cool-design-examples-that-demonstrate-the-power-of-divis-new-font-options-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/5-cool-design-examples-that-demonstrate-the-power-of-divis-new-font-options\/","title":{"rendered":"5 Cool Design Examples that Demonstrate the Power of Divi&#8217;s New Font Options"},"content":{"rendered":"\n<div id=\"post-67302\">\n<p>The way you represent the written content on your website is a big part of how the message will be received by your visitors. Giving it special attention and trying to work out something unique is one of the things that can help you communicate in a memorable way. That\u2019s why we\u2019re going to show you some of the cool results you can create with Divi and its new font options on whatever kind of website you are creating. Of course, there are a lot more that\u2019s possible with these new design settings than we\u2019re going to show you in this post, but to kickstart your own process of discovery and design we\u2019ve put together five cool design examples that demonstrate the power of Divi\u2019s new font options. Enjoy!<\/p>\n<h2>Result<\/h2>\n<p>Before we dive into the tutorial, let\u2019s take a look at the examples we\u2019ll be showing you how to recreate, step by step. Each of these examples are made by using just a Text Module (with the right settings) that you can place wherever you want on your website.<\/p>\n<h3>Example #1<\/h3>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67285 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture.png\" alt=\"font\" width=\"880\" height=\"328\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Example #2<\/h3>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67297 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3.png\" alt=\"font\" width=\"880\" height=\"270\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3-300x92.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3-768x236.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3-610x187.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Example #3<\/h3>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67298 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4.png\" alt=\"font\" width=\"880\" height=\"281\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4-300x96.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4-768x245.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4-610x195.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Example #4<\/h3>\n<h3>\u00a0<img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67314 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6.png\" alt=\"font\" width=\"880\" height=\"292\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6-300x100.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6-768x255.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6-610x202.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Example #5<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67324 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8.png\" alt=\"font\" width=\"880\" height=\"333\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8-300x114.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8-768x291.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8-610x231.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>5 Cool Combinations of Divi\u2019s New Font Options<\/h2>\n<p><iframe loading=\"lazy\" title=\"5 Cool Design Examples that Demonstrate the Power of Divi\u2019s New Font Options\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/HkALC0A-x2g?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><br \/><a class=\"button primary-button inline-button accent-red\" href=\"https:\/\/www.youtube.com\/c\/elegantthemes?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">Subscribe To Our Youtube Channel<\/a><\/p>\n<h2>Recreate Example #1<\/h2>\n<p>For the first example, we\u2019re using a combination of a gradient background, an inverted font family and a text shadow that will give a border to the text we use within the Text Module.<\/p>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67285 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture.png\" alt=\"font\" width=\"880\" height=\"328\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/Capture-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Gradient Background<\/h3>\n<p>After having added a Text Module, the first you will need to do is add a gradient background. Although you can choose whichever gradient background you\u2019d like to appear, for this example, we\u2019ve used the following settings:<\/p>\n<ul>\n<li>First Color:\u00a0rgba(255,255,255,0)<\/li>\n<li>Second Color:\u00a0#eeef8b<\/li>\n<li>Gradient Type: Linear<\/li>\n<li>Gradient Direction: 180deg<\/li>\n<li>Start Position: 60%<\/li>\n<li>End Position: 0%<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67334 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc1.png\" alt=\"font\" width=\"880\" height=\"454\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc1.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc1-300x155.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc1-768x396.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc1-610x315.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Text Settings<\/h3>\n<p>Then, move on to the Design tab and make the following changes to the Text subcategory:<\/p>\n<ul>\n<li>Text Font: Zilla Slab Highlight<\/li>\n<li>Text Font Weight: Bold<\/li>\n<li>Text Size: 100px (Desktop), 62px (Tablet), 38px (Phone)<\/li>\n<li>Text Color: #FFFFFF<\/li>\n<li>Text Line Height: 1em<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67335 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc2.png\" alt=\"font\" width=\"880\" height=\"476\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc2-300x162.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc2-768x415.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc2-610x330.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Within the Text subcategory, add the following Text Shadow as well:<\/p>\n<ul>\n<li>Text Shadow Horizontal Length: 0em<\/li>\n<li>Text Shadow Vertical Length: 0em<\/li>\n<li>Text Shadow Blur Strength: 0.06em<\/li>\n<li>Text Shadow Color: #000000<\/li>\n<li>Text Orientation: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67336 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc3.png\" alt=\"font\" width=\"880\" height=\"469\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc3-300x160.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc3-768x409.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc3-610x325.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Example #2<\/h2>\n<p>The most special thing about this second example is the use of the wavy underline in combination with a text shadow that will make it look like there is a double wavy underline to the text. On top of that, we\u2019re also using a double border for the left and right side of the Text Module.<\/p>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67297 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3.png\" alt=\"font\" width=\"880\" height=\"270\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3-300x92.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3-768x236.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt3-610x187.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Text Settings<\/h3>\n<p>After adding a Text Module, you can start off by making the following changes to the Text subcategory within the Design tab:<\/p>\n<ul>\n<li>Text Font: Sofia<\/li>\n<li>Text Font Weight: Regular<\/li>\n<li>Text Font Style: Underline<\/li>\n<li>Text Underline Color:\u00a0rgba(131,0,233,0.15)<\/li>\n<li>Text Underline Style: Wavy<\/li>\n<li>Text Size: 78px (Desktop), 36px (Tablet), 25px (Phone)<\/li>\n<li>Text Color:\u00a0#606060<\/li>\n<li>Text Spacing: 12px<\/li>\n<li>Text Line Height: 1em<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67338 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc4.png\" alt=\"font\" width=\"880\" height=\"423\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc4-300x144.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc4-768x369.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc4-610x293.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Add the following Text Shadow to the Text subcategory as well:<\/p>\n<ul>\n<li>Text Shadow Horizontal Length: 0em<\/li>\n<li>Text Shadow Vertical Length: 0.17em<\/li>\n<li>Text Shadow Blur Strength: 0.05em<\/li>\n<li>Text Shadow Color:\u00a0rgba(162,181,0,0.13)<\/li>\n<li>Text Orientation: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67339 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc5.png\" alt=\"font\" width=\"880\" height=\"409\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc5-300x139.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc5-768x357.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc5-610x284.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Border<\/h3>\n<p>Continue by opening the Border subcategory and use the following settings for the left and right Border Styles:<\/p>\n<ul>\n<li>Border Width: 11px<\/li>\n<li>Border Color:\u00a0rgba(162,181,0,0.18)<\/li>\n<li>Border Style: Double<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67340 size-full\" style=\"font-size: 16px;\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc6.png\" alt=\"font\" width=\"880\" height=\"426\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc6.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc6-300x145.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc6-768x372.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc6-610x295.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Example #3<\/h2>\n<p>For the third example, we\u2019re matching the color of our font with the section background color. If you\u2019re using another background color, make sure you change the text color as well. We\u2019ll also add a text shadow to create the borders for the text. On top of that, we\u2019re also using an underline to the text to emphasize it.<\/p>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67298 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4.png\" alt=\"font\" width=\"880\" height=\"281\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4-300x96.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4-768x245.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt4-610x195.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Text Settings<\/h3>\n<p>For this example, you will need the following settings for the Text subcategory of the Text Module:<\/p>\n<ul>\n<li>Text Font: Bungee Inline<\/li>\n<li>Text Font Weight: Regular<\/li>\n<li>Text Font Style: Underline<\/li>\n<li>Text Underline Color: #FFFFFF<\/li>\n<li>Text Underline Style: Solid<\/li>\n<li>Text Size: 69px (Desktop), 45px (Tablet), 29px (Phone)<\/li>\n<li>Text Color:\u00a0#ededed<\/li>\n<li>Text Line Height: 1em<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67342 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc7.png\" alt=\"font\" width=\"880\" height=\"459\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc7.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc7-300x156.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc7-768x401.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc7-610x318.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Lastly, use the following Text Shadow as well:<\/p>\n<ul>\n<li>Text Shadow Horizontal Length: 0em<\/li>\n<li>Text Shadow Vertical Length: 0em<\/li>\n<li>Text Shadow Blur Strength: 0.05em<\/li>\n<li>Text Shadow Color:\u00a0#000000<\/li>\n<li>Text Orientation: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67343 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc8.png\" alt=\"font\" width=\"880\" height=\"437\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc8.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc8-300x149.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc8-768x381.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc8-610x303.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Recreate Example #4<\/h2>\n<p>For the following example, we\u2019re combining a background color with rounded corners and a border style. The color we\u2019re using for the border style is the same as the one we\u2019re using for the strikethrough font style. To make sure our text is still readable, we\u2019re using a slightly transparent color.<\/p>\n<h3>\u00a0<img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67314 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6.png\" alt=\"font\" width=\"880\" height=\"292\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6-300x100.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6-768x255.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt6-610x202.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h3>Background Color<\/h3>\n<p>Start off by adding \u2018#f2f2f2\u2019 as the background color of your Text Module.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67344 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc9.png\" alt=\"font\" width=\"880\" height=\"454\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc9.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc9-300x155.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc9-768x396.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc9-610x315.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Text Settings<\/h3>\n<p>Then, move on to the Design subcategory and make the following changes to the Text subcategory:<\/p>\n<ul>\n<li>Text Font: Ribeye Marrow<\/li>\n<li>Text Font Weight: Regular<\/li>\n<li>Text Font Style: Strikethrough<\/li>\n<li>Text Strikethrough Color:\u00a0rgba(224,43,32,0.18)<\/li>\n<li>Text Strikethrough Style: Double<\/li>\n<li>Text Size: 78px (Desktop), 46px (Tablet), 31px (Phone)<\/li>\n<li>Text Color:\u00a0#000000<\/li>\n<li>Text Line Height: 1.1em<\/li>\n<li>Text Orientation: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67345 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc10.png\" alt=\"font\" width=\"880\" height=\"475\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc10.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc10-300x162.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc10-768x415.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc10-610x329.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Spacing<\/h3>\n<p>Next, apply the following Custom Padding to the Spacing subcategory:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67346 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc11.png\" alt=\"font\" width=\"880\" height=\"465\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc11.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc11-300x159.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc11-768x406.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc11-610x322.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Border<\/h3>\n<p>Lastly, make the following changes to the Border subcategory:<\/p>\n<ul>\n<li>Rounded Corners (All): 100px<\/li>\n<li>Border Style: All Sides<\/li>\n<li>Border Width: 4px<\/li>\n<li>Border Color:\u00a0rgba(224,43,32,0.18)<\/li>\n<li>Border Style: Double<\/li>\n<\/ul>\n<h3>\u00a0<img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67347 size-full\" style=\"font-size: 16px;\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc12.png\" alt=\"font\" width=\"880\" height=\"469\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc12.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc12-300x160.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc12-768x409.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc12-610x325.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/h3>\n<h2>Recreate Example #5<\/h2>\n<p>In the last example, we\u2019re combining a gradient background with a rounded corners, a top border style and a box shadow to add the final touch to our Text Module.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67324 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8.png\" alt=\"font\" width=\"880\" height=\"333\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8-300x114.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8-768x291.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/capt8-610x231.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Gradient Background<\/h3>\n<p>Start by adding a gradient background to your Text Module:<\/p>\n<ul>\n<li>First Color:\u00a0rgba(155,175,193,0.2)<\/li>\n<li>Second Color:\u00a0rgba(244,244,244,0)<\/li>\n<li>Gradient Type: Linear<\/li>\n<li>Gradient Direction: 180deg<\/li>\n<li>Start Position: 48%<\/li>\n<li>End Position: 0%<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67348 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc13.png\" alt=\"font\" width=\"880\" height=\"456\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc13.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc13-300x155.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc13-768x398.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc13-610x316.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Text Settings<\/h3>\n<p>Then, move on to the Design tab and apply the following changes to the Text subcategory:<\/p>\n<ul>\n<li>Text Font: Codystar<\/li>\n<li>Text Font Weight: Bold<\/li>\n<li>Text Size: 60px (Desktop), 35px (Tablet), 22px (Phone)<\/li>\n<li>Text Color:\u00a0#494949<\/li>\n<li>Text Line Height: 1.1em<\/li>\n<li>Text Orientation: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67349 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc14.png\" alt=\"font\" width=\"880\" height=\"462\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc14.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc14-300x158.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc14-768x403.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc14-610x320.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Sizing<\/h3>\n<p>Next, go to the Sizing subcategory and make the following changes to it:<\/p>\n<ul>\n<li>Width: 78% (Desktop), 76% (Tablet), 86% (Phone)<\/li>\n<li>Module Alignment: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67350 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc15.png\" alt=\"font\" width=\"880\" height=\"475\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc15.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc15-300x162.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc15-768x415.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc15-610x329.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Spacing<\/h3>\n<p>We\u2019ll also need to add the following padding to the Spacing subcategory:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67351 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc16.png\" alt=\"font\" width=\"880\" height=\"459\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc16.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc16-300x156.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc16-768x401.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc16-610x318.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Border<\/h3>\n<p>Then, open the Border subcategory and apply the following changes to it:<\/p>\n<ul>\n<li>Top Left &amp; Bottom Right Corners: 500px<\/li>\n<li>Bottom Left &amp; Top Right Corners: 20px<\/li>\n<li>Top Border Width: 2px<\/li>\n<li>Top Border Color:\u00a0rgba(0,0,0,0.44)<\/li>\n<li>Top Border Style: Double<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67352 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc17.png\" alt=\"font\" width=\"880\" height=\"466\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc17.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc17-300x159.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc17-768x407.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc17-610x323.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h3>Box Shadow<\/h3>\n<p>Last but not least, we\u2019re also going to add a subtle Box Shadow to our Text Module:<\/p>\n<ul>\n<li>Box Shadow Horizontal Position: 5px<\/li>\n<li>Box Shadow Vertical Position: -10px<\/li>\n<li>Box Shadow Blur Strength: 0px<\/li>\n<li>Box Shadow Spread Strength: 2px<\/li>\n<li>Shadow Color:\u00a0rgba(155,175,193,0.66)<\/li>\n<li>Box Shadow Position: Outer Shadow<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"with-border aligncenter wp-image-67353 size-full\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc18.png\" alt=\"font\" width=\"880\" height=\"469\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc18.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc18-300x160.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc18-768x409.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2017\/12\/fc18-610x325.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>Final Thoughts<\/h2>\n<p>In this post, we\u2019ve shown you some cool ways to style the Text Modules on your website. Of course, there are a lot more possibilities out there but with these examples, you have a head start. If you have any questions or suggestions; make sure you leave a comment in the comment section below!<\/p>\n<p><em>Featured Image by vladwel \/ shutterstock.com<\/em><\/p>\n<\/div>\n<blockquote class=\"wp-embedded-content\" data-secret=\"F9MMhD1Bwc\"><p><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/5-cool-design-examples-that-demonstrate-the-power-of-divis-new-font-options\">5 Cool Design Examples that Demonstrate the Power of Divi&#8217;s New Font Options<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;5 Cool Design Examples that Demonstrate the Power of Divi&#8217;s New Font Options&#8221; &#8212; Elegant Themes Blog\" src=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/5-cool-design-examples-that-demonstrate-the-power-of-divis-new-font-options\/embed#?secret=6Cd2Gluxyq#?secret=F9MMhD1Bwc\" data-secret=\"F9MMhD1Bwc\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The way you represent the written content on your website is a big part of how the message will be received by your visitors. Giving it special attention and trying to work out something unique is one of the things that can help you communicate in a memorable way. That\u2019s why we\u2019re going to show [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":825737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-825735","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/825735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=825735"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/825735\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media\/825737"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=825735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=825735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=825735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}