{"id":820498,"date":"2018-10-21T16:00:38","date_gmt":"2018-10-21T16:00:38","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/5-creative-divi-blurb-module-designs\/"},"modified":"2022-12-10T13:49:11","modified_gmt":"2022-12-10T13:49:11","slug":"5-creative-divi-blurb-module-designs-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/5-creative-divi-blurb-module-designs\/","title":{"rendered":"5 Creative Divi Blurb Module Designs"},"content":{"rendered":"\n<div id=\"post-86194\">\n<p>In this post, we\u2019re going to explore one of Divi\u2019s most popular features, the Blurb Module. Although seemingly simple out of the gate, it has many customizable features that can bring your website elements\u00a0to life.\u00a0Generally, the Blurb Module is used for things like services, benefits, contact information, etc, but with Divi, the possibilities are endless.<\/p>\n<p>Let\u2019s have some fun!<\/p>\n<h2>Sneak Peek<\/h2>\n<p>Here is a sneak peek of the 5 blurb module styles I\u2019ll be creating in this tutorial.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10.png\" alt=\"\" width=\"880\" height=\"328\" class=\"with-border aligncenter size-full wp-image-86599\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17.png\" alt=\"\" width=\"880\" height=\"522\" class=\"with-border aligncenter size-full wp-image-86605\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-300x178.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-768x456.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-610x362.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23.png\" alt=\"\" width=\"880\" height=\"328\" class=\"with-border aligncenter size-full wp-image-86629\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29.png\" alt=\"\" width=\"880\" height=\"474\" class=\"with-border aligncenter size-full wp-image-86638\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29-300x162.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29-768x414.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29-610x329.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39.png\" alt=\"\" width=\"880\" height=\"562\" class=\"with-border aligncenter size-full wp-image-86648\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39-300x192.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39-768x490.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39-610x390.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>5 Creative Divi Blurb Module Designs<\/h2>\n<p><iframe loading=\"lazy\" title=\"5 Creative Divi Blurb Module Designs\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/6e7VKDUITkg?feature=oembed\"  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p><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>Getting Started<\/h2>\n<p>To get started, you will need to create a new page. From your WordPress Dashboard, navigate to Pages &gt; Add New. Then give your page a title and deploy the visual builder. Select the option \u201cBuild From Scratch\u201d. Once the visual builder loads on the page, you are ready to start designing.<\/p>\n<p>This tutorial is designed to make it easy to create each of these blurb style designs individually so feel free to jump down the post to the design you want to build. In other words, you don\u2019t have to start with the first one.<\/p>\n<h2>1. Pop-Out Blurbs with Feature Lists<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10.png\" alt=\"\" width=\"880\" height=\"328\" class=\"with-border aligncenter size-full wp-image-86599\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>In this first example, we are going to have a little fun with expanding blurbs outside of the row to create a pop-out effect. Then we can use the adjacent columns next to each to add a few blurbs with left aligned icons to serve as featured list items.<\/p>\n<p>To start, create a new section and a row with a four-column structure. <\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb2.png\" alt=\"\" width=\"880\" height=\"495\" class=\"with-border aligncenter size-full wp-image-86591\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb2.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb2-300x169.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb2-768x432.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb2-610x343.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then go ahead and update the row settings as follows:<\/p>\n<p>Background Color: #2e3858<br \/>Make This Row Fullwidth: YES<br \/>Use Custom Gutter Width: YES<br \/>Gutter Width: 1<br \/>Equalize Column Heights: YES<br \/>Custom Margin: 5vw Top, 5vw Bottom<br \/>Custom Padding: 0px top, 0px bottom<\/p>\n<p>Save settings.<br \/><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb4.png\" alt=\"\" width=\"880\" height=\"771\" class=\"with-border aligncenter size-full wp-image-86593\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb4.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb4-300x263.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb4-768x673.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb4-610x534.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then in the first column, add your first blurb module.<\/p>\n<p>Take out the last sentence in the content box to shorten the amount of text a bit. Then select to use an icon instead of an image and choose an icon (anyone will do). <\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb5.png\" alt=\"\" width=\"880\" height=\"568\" class=\"with-border aligncenter size-full wp-image-86594\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb5.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb5-300x194.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb5-768x496.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb5-610x394.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then update the following:<\/p>\n<p>Background Color: #df4570<br \/>Icon Color: #ffffff<br \/>Text Orientation: Center<br \/>Title Font: Encode Sans Semi Condensed<br \/>Title Font Style: TT<br \/>Title Letter Spacing: 2px<br \/>Custom Margin (desktop): -5vw Top, -5vw Bottom<br \/>Custom Margin (tablet): 0px Top, 0px Bottom<br \/>Custom Padding: 5vw Top, 5vw Bottom, 3vw Left, 3vw Right<br \/>Box Shadow: see screenshot<br \/>Box Shadow blur Strength: 80px<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb6.png\" alt=\"\" width=\"880\" height=\"1135\" class=\"with-border aligncenter size-full wp-image-86595\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb6.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb6-233x300.png 233w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb6-768x991.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb6-794x1024.png 794w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb6-610x787.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Using the right click menu option or the cmd+c and cmd+v shortkeys, copy the module you just created and paste it into column 3. Then update the new blurb module settings with another bright (but complimentary) background color:<\/p>\n<p>Background Color: #24c4a3<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb7.png\" alt=\"\" width=\"880\" height=\"505\" class=\"with-border aligncenter size-full wp-image-86596\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb7.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb7-300x172.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb7-768x441.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb7-610x350.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Now it\u2019s time to add the list item blurbs adjacent to the pop-out blurbs we just created. <\/p>\n<p>To do this add a new blurb in column 2. Then take out the mock text in the content box so that only the title text remains. Then add an icon to replace your image just as before. Then update the design settings as follows:<\/p>\n<p>Icon Color: #df4570<br \/>Image\/Icon Placement: Left<br \/>Title Font: Encode Sans Semi Condensed<br \/>Custom Padding: 20px Top, 20px Bottom, 3vw Left, 3vw Right<\/p>\n<p>Duplicate the blurb twice so that you get three total list blurbs in the column. Then use Divi\u2019s Multiselect feature to select all three blurbs and then copy and paste them into column 4. <\/p>\n<p>You can also use multiselect to select all three blurbs in column 4 and bulk edit the element settings to change the icon color of all three to #24c4a3.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb9.png\" alt=\"\" width=\"880\" height=\"414\" class=\"with-border aligncenter size-full wp-image-86598\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb9.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb9-300x141.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb9-768x361.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb9-610x287.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>That\u2019s it! Creating pop-out blurbs is a fun way to make your blurbs stand out and having adjacent list blurbs on the side gives you some additional options for more creative designs.<\/p>\n<p>Here is the final result.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10.png\" alt=\"\" width=\"880\" height=\"328\" class=\"with-border aligncenter size-full wp-image-86599\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb10-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb11.png\" alt=\"\" width=\"880\" height=\"578\" class=\"with-border aligncenter size-full wp-image-86600\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb11.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb11-300x197.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb11-768x504.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb11-610x401.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb12.png\" alt=\"\" width=\"453\" height=\"924\" class=\"with-border aligncenter size-full wp-image-86601\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb12.png 453w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb12-147x300.png 147w\" sizes=\"(max-width: 453px) 100vw, 453px\"\/><\/p>\n<h2>2. Promotional Blurb with Custom Background Image.<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17.png\" alt=\"\" width=\"880\" height=\"522\" class=\"with-border aligncenter size-full wp-image-86605\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-300x178.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-768x456.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-610x362.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>This blurb style is great for featuring content and promotional offers like a free book. The basic idea is to position the blurb content to the left of the module in order to make room for the custom background image. Let\u2019s get to it.<\/p>\n<p>First add a regular section with a two-column row structure. In the left column add a new blurb module.<\/p>\n<p>Update the Title text and take out the last sentence of the mock content to cut down on the amount of text. Then update your image with a book image (or an image of your product). An icon of a book or something will also work as well.<\/p>\n<p>I\u2019m using the image assets from the Travel Blog Layout Pack so feel free to jump start the design by grabbing those images.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb13.png\" alt=\"\" width=\"880\" height=\"738\" class=\"with-border aligncenter size-full wp-image-86603\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb13.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb13-300x252.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb13-768x644.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb13-610x512.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><strong>TIP:<\/strong>You could also add a Module Link URL to this module in order to make the entire module clickable since it can serve as a promotion. <\/p>\n<p>Next, add a background image to the module. Make sure the background image is a header like image with the focal point of the image to the right side that way you can add your content to the left of the image with it the background distracting from the text.<\/p>\n<p>Then add a background gradient to serve as a partial overlay that sits behind the content and overlays the background image to make the text more readable. To add the background gradient update the following:<\/p>\n<p>Background Gradient Left Color: rgba(255,255,255,0.8)<br \/>Background Gradient Right Color: rgba(255,255,255,0)<br \/>Gradient Direction: 90deg<br \/>Start Position: 40%<br \/>End Position: 70%<br \/>Place Gradient Above Background Image: YES<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb14.png\" alt=\"\" width=\"880\" height=\"711\" class=\"with-border aligncenter size-full wp-image-86604\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb14.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb14-300x242.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb14-768x621.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb14-610x493.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then update the following:<\/p>\n<p>Image Box Shadow: see screenshot<br \/>Title Font: Noto Serif<br \/>Title Text Size: 26px<br \/>Body Font: Noto Sans<br \/>Body Text Size: 16px<br \/>Image Width: 150px<br \/>Content Width (desktop): 60%<br \/>Content Width: (smartphone): 80%<br \/>Custom Padding: 2vw Bottom, 2vw Left, 2vw Right<\/p>\n<p>The key design technique here is giving both the image and the content a custom width so that the content can be positioned to the left later on.<\/p>\n<p>Now we need to add a box shadow at the top of the blurb to create the impression that book image is extending above the module for a nice overlapping effect. To do this, update the following:<\/p>\n<p>Box Shadow: See Screenshot<br \/>Box Shadow Horizontal Position: 0px<br \/>Box Shadow Vertical Position: 50px<br \/>Shadow Color: #ffffff<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb15.png\" alt=\"\" width=\"880\" height=\"849\" class=\"aligncenter with-border size-full wp-image-87501\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb15.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb15-300x289.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb15-768x741.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb15-610x589.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>The last step involves a short snippet of custom CSS needed to align the blurb content to the left side of the module. To do this, go to the advanced tab and add the following custom CSS under the Blurb Content input box:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">margin-left: 0;&#13;\n<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb16.png\" alt=\"\" width=\"880\" height=\"521\" class=\"aligncenter with-border size-full wp-image-87502\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb16.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb16-300x178.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb16-768x455.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb16-610x361.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Now Check out the result!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17.png\" alt=\"\" width=\"880\" height=\"522\" class=\"with-border aligncenter size-full wp-image-86605\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-300x178.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-768x456.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb17-610x362.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><strong>TIP:<\/strong> Don\u2019t forget about the hover options that are available. Try giving the book image a border on hover to make things come alive!<\/p>\n<h2>3. Circle Blurb Style using Background Gradient<\/h2>\n<p>This simple blurb style uses background gradients to serve as a circle background to your blurb content. This is a fun alternative to turning your entire blurb module into a circle using custom CSS.<\/p>\n<p>Start by add a new regular section with a three column row structure.<\/p>\n<p>Then add a blurb module to the left column.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb18.png\" alt=\"\" width=\"880\" height=\"462\" class=\"with-border aligncenter size-full wp-image-86606\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb18.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb18-300x158.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb18-768x403.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb18-610x320.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then take out the last sentence of the content to decrease the amount of text. It is important for this design to keep the text amount somewhat small because you will be fitting it inside of a circle.<\/p>\n<p>Then add a background gradient to create the circle background as follows:<\/p>\n<p>Background Gradient Left Color: #fa7f28<br \/>Background Gradient Right Color: rgba(255,255,255,0)<br \/>Gradient Type: radial<br \/>Start Position: 60%<br \/>End Position: 0%<br \/>Place Gradient Above Background Image: YES<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb19.png\" alt=\"\" width=\"880\" height=\"625\" class=\"with-border aligncenter size-full wp-image-86607\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb19.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb19-300x213.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb19-768x545.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb19-610x433.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then update the rest of the design settings as follows:<\/p>\n<p>Text Orientation: Center<br \/>Title Font: Oswald<br \/>Title Font Style: TT<br \/>Title Letter Spacing: 1px<br \/>Body Font: Robot<br \/>Body Font Weight: Light<br \/>Body Text Size: 16px<br \/>Width (tablet): 80%<br \/>Module Alignment: Center<br \/>Custom Padding (desktop): 20% Top, 25% Bottom, 20% Left, 20% Right<br \/>Custom Padding (smartphone): 20% Top, 25% Bottom, 10% Left, 10% Right<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb22.png\" alt=\"\" width=\"880\" height=\"819\" class=\"with-border aligncenter size-full wp-image-86628\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb22.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb22-300x279.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb22-768x715.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb22-610x568.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>The key here is to get the custom padding adjusted correctly so that the background circle is aligned with the content in the center. You may need to adjust these settings depending on the amount of content you have. <\/p>\n<p>Now you can copy and paste the module into the remaining columns.<\/p>\n<p>Then update the row settings so that it has a custom width of 80% and a Gutter width of 1.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb20.png\" alt=\"\" width=\"880\" height=\"479\" class=\"with-border aligncenter size-full wp-image-86608\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb20.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb20-300x163.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb20-768x418.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb20-610x332.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>To complete the design, you can add a background image and gradient to your section as follows:<\/p>\n<p>Add Background Image<br \/>Background Gradient Left Color: rgba(2,0,76,0.51)<br \/>Background Gradient Right Color: rgba(2,0,76,0.84)<br \/>Place Gradient Above Background Image: YES<\/p>\n<p>That\u2019s it! Check out the final design!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23.png\" alt=\"\" width=\"880\" height=\"328\" class=\"with-border aligncenter size-full wp-image-86629\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23-300x112.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23-768x286.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb23-610x227.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb24.png\" alt=\"\" width=\"452\" height=\"1337\" class=\"with-border aligncenter size-full wp-image-86630\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb24.png 452w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb24-101x300.png 101w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb24-346x1024.png 346w\" sizes=\"(max-width: 452px) 100vw, 452px\"\/><\/p>\n<p>For additional space, you can always decrease the size of the blurb icon to something like 50px in order to keep the circles from colliding on smaller browser widths. When making adjustments, don\u2019t forget to take advantage of Divi\u2019s Multiselect feature to make bulk edits to all modules at once.<\/p>\n<h3><strong>Bonus Tip:<\/strong> Making the Entire Blurb Module a Circle with Custom CSS<\/h3>\n<p>If you were looking to turn the entire module into a circle (instead of using the background gradient), replace the gradient with a regular background color and add this custom CSS under the Advanced Tab of the blurb module settings:<\/p>\n<p><strong>In the Main Element box: <\/strong><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">height: 300px;&#13;\nwidth: 300px;&#13;\nborder-radius: 100%;&#13;\nborder: 5px solid #ffffff;&#13;\npadding: 5% !important;&#13;\ndisplay: flex;&#13;\n<\/pre>\n<p><strong>In the Blurb Content box: <\/strong><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">margin: auto;&#13;\n<\/pre>\n<p>This custom CSS overrides the padding set in the blurb module settings so you may need to take that snippet out if you want to gain back control of those settings. Also, this css uses flex to center the blurb content within the circle. This will come in handy.<\/p>\n<p>It will look something like this if applied to all three modules.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb41.png\" alt=\"\" width=\"880\" height=\"302\" class=\"with-border aligncenter size-full wp-image-86665\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb41.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb41-300x103.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb41-768x264.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb41-610x209.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<h2>4. Framed Blurb with Borders and Box Shadows<\/h2>\n<p>One of my all time favorite Divi design features to have fun with is box shadows. We already featured a creative use for box shadows in our promotion blurb design earlier where we created the overlap effect. But you can also use box shadows as a creative way to frame your content with broken grid designs. In this design, I\u2019ll show you how to combine borders and box shadows in a unique way.<\/p>\n<p>To start, add a new regular section with a three column row structure. Then add the blurb module to the first column.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb25.png\" alt=\"\" width=\"880\" height=\"374\" class=\"with-border aligncenter size-full wp-image-86634\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb25.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb25-300x128.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb25-768x326.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb25-610x259.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Add an image to the blurb. Then give the blurb image a border and box shadow by updating the design settings as follows:<\/p>\n<p>Image Top Border Width: 8px<br \/>Image Top Border Color: #2f3854<br \/>Image Left Border Width: 8px<br \/>Image Left Border Color: #2f3854<\/p>\n<p>Image Box Shadow: See Screenshot<br \/>Box Shadow Horizontal Position: -20px<br \/>Box Shadow Vertical Position: -30px<br \/>Shadow Color: #f89da9<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb26.png\" alt=\"\" width=\"880\" height=\"1036\" class=\"with-border aligncenter size-full wp-image-86635\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb26.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb26-255x300.png 255w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb26-768x904.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb26-870x1024.png 870w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb26-610x718.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then update the Title and Body font and spacing as follows:<\/p>\n<p>Title Font: Yeseva One<br \/>Body Font: Montserrat<br \/>Custom Margin: 50px Bottom<br \/>Custom Padding: 2vw Bottom<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb27.png\" alt=\"\" width=\"880\" height=\"561\" class=\"with-border aligncenter size-full wp-image-86636\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb27.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb27-300x191.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb27-768x490.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb27-610x389.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Finally, give your blurb module a custom border and box shadow to balance out the frame design as follows:<\/p>\n<p>Right Border Width: 15px<br \/>Right Border Color: #2f3854<br \/>Bottom Border Width: 15px<br \/>Bottom Border Color: #2f3854<\/p>\n<p>Image Box Shadow: See Screenshot<br \/>Box Shadow Horizontal Position: 20px<br \/>Box Shadow Vertical Position: 35px<br \/>Shadow Color: #dddddd<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb28.png\" alt=\"\" width=\"880\" height=\"1139\" class=\"with-border aligncenter size-full wp-image-86637\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb28.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb28-232x300.png 232w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb28-768x994.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb28-791x1024.png 791w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb28-610x790.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Now copy and paste the module in column 2 and 3 and update the blurb images to finish off the design.<\/p>\n<p>Here is the final result.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29.png\" alt=\"\" width=\"880\" height=\"474\" class=\"with-border aligncenter size-full wp-image-86638\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29-300x162.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29-768x414.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb29-610x329.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb30.png\" alt=\"\" width=\"454\" height=\"1675\" class=\"with-border aligncenter size-full wp-image-86639\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb30.png 454w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb30-81x300.png 81w\" sizes=\"(max-width: 454px) 100vw, 454px\"\/><\/p>\n<h2>5. Styling Blurbs as Curved List<\/h2>\n<p>This next design is a fun way to create lists using blurbs. Using some custom margins, you can curve your blurb list items to wrap around elements on your page. In this example, I\u2019m going to curve the list to wrap around the right side of a large blurb icon. And you can get a little creative <\/p>\n<p>First, add a new regular section with a two column row structure.<\/p>\n<p>Before you add any blurb modules, give your row a custom width and gutter width by updating your row settings as follows:<\/p>\n<p>Custom Width: 700px<br \/>Gutter Width: 2<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb31.png\" alt=\"\" width=\"880\" height=\"492\" class=\"with-border aligncenter size-full wp-image-86640\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb31.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb31-300x168.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb31-768x429.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb31-610x341.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Now let\u2019s create the large blurb icon by adding blurb module in the left column. Then take out the Title Text and content. And then choose the light bulb icon. Now only the icon should be visible. Next, update the color and size of the icon as follows:<\/p>\n<p>Icon Color: #96a6bd<br \/>Icon Font Size (desktop): 400px<br \/>Icon Font Size (smartphone): 200px<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb32.png\" alt=\"\" width=\"880\" height=\"465\" class=\"with-border aligncenter size-full wp-image-86641\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb32.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb32-300x159.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb32-768x406.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb32-610x322.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>In the right column, add a new blurb module. This will be the first of five total blurbs that will make up our list. Then open the module settings and take out the content leaving only the title text. Then choose the right arrow icon for the blurb.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb33.png\" alt=\"\" width=\"880\" height=\"472\" class=\"with-border aligncenter size-full wp-image-86642\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb33.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb33-300x161.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb33-768x412.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb33-610x327.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Next update the design settings as follows:<\/p>\n<p>Background Color: #bb7860<br \/>Icon Color: #ffffff<br \/>Image\/Icon Placement: Left<br \/>Use Icon Font Size: YES<br \/>Icon Font Size: 30px<br \/>Title Font: Raleway<br \/>Title Text Color: #ffffff<br \/>Title Text Size: 20px<br \/>Title Line Height: 1.5em<br \/>Custom margin: 5% bottom<br \/>Custom Padding: 3% Top, 10% Left, 2% Right<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb34.png\" alt=\"\" width=\"880\" height=\"985\" class=\"with-border aligncenter size-full wp-image-86643\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb34.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb34-268x300.png 268w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb34-768x860.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb34-610x683.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Duplicate the module four times until you get a total of five blurbs stacked in the right column.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb35.png\" alt=\"\" width=\"880\" height=\"639\" class=\"with-border aligncenter size-full wp-image-86644\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb35.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb35-300x218.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb35-768x558.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb35-610x443.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then give the second blurb a new color, custom margins to push it to the right, and creative rounded corners as follows:<\/p>\n<p>Background Color: #393e56<br \/>Custom margin (desktop): 10% Left, -10% Right<br \/>Custom margin (tablet): 0% Left, 0% Right<br \/>Rounded Corners: 50px top right, 50px bottom left<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb36.png\" alt=\"\" width=\"880\" height=\"463\" class=\"with-border aligncenter size-full wp-image-86645\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb36.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb36-300x158.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb36-768x404.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb36-610x321.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Before you leave this module, copy the rounded corners by right clicking on the option in the blurb settings. <\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb37.png\" alt=\"\" width=\"880\" height=\"464\" class=\"with-border aligncenter size-full wp-image-86646\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb37.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb37-300x158.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb37-768x405.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb37-610x322.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Then save the blurb settings and right click on the first (top) module you created and paste the rounded corners style the module.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb38.png\" alt=\"\" width=\"880\" height=\"542\" class=\"with-border aligncenter size-full wp-image-86647\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb38.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb38-300x185.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb38-768x473.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb38-610x376.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p>Now let\u2019s continue to update the last three modules with proper colors, spacing and rounded corner designs.<\/p>\n<p>For the third blurb in the column, update the following:<\/p>\n<p>Background Color: #96a6bd<br \/>Custom margin (desktop): 20% Left, -20% Right<br \/>Custom margin (tablet): 0% Left, 0% Right<br \/>Rounded Corners: 50px top right, 50px bottom right<\/p>\n<p>For the fourth blurb, update the following:<\/p>\n<p>Background Color: #393e56<br \/>Custom margin (desktop): 10% Left, -10% Right<br \/>Custom margin (tablet): 0% Left, 0% Right<br \/>Rounded Corners: 50px top left, 50px bottom right<\/p>\n<p>For the fifth blurb, simply copy the rounded corners in the fourth blurb and paste them in.<\/p>\n<p>That\u2019s it! Let\u2019s check out the final design.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39.png\" alt=\"\" width=\"880\" height=\"562\" class=\"with-border aligncenter size-full wp-image-86648\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39.png 880w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39-300x192.png 300w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39-768x490.png 768w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb39-610x390.png 610w\" sizes=\"(max-width: 880px) 100vw, 880px\"\/><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb40.png\" alt=\"\" width=\"553\" height=\"893\" class=\"with-border aligncenter size-full wp-image-86649\" srcset=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb40.png 553w, https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2018\/10\/fb40-186x300.png 186w\" sizes=\"(max-width: 553px) 100vw, 553px\"\/><\/p>\n<h2>More Blurb Style Inspiration<\/h2>\n<p>If you are interested exploring more fun blurb module designs, check out the links below:<\/p>\n<p>Well I hope these examples have inspired you to see what\u2019s possible with The Divi Blurb Module! The sky\u2019s the limit here. This module is extremely popular and will probably be used on almost\u00a0every site you build so it\u2019s good to have a versatile set of ideas so\u00a0designs\u00a0don\u2019t start looking the same. Sometimes, just changing the colors and fonts can give these a whole new look so feel free to take these ideas and make them your own!<\/p>\n<p>I look forward to hearing from you in the comments.<\/p>\n<p>Cheers!<\/p>\n<\/div>\n<p>https:\/\/www.elegantthemes.com\/blog\/divi-resources\/divi-blurb-module-designs <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we\u2019re going to explore one of Divi\u2019s most popular features, the Blurb Module. Although seemingly simple out of the gate, it has many customizable features that can bring your website elements\u00a0to life.\u00a0Generally, the Blurb Module is used for things like services, benefits, contact information, etc, but with Divi, the possibilities are endless. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":820499,"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-820498","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\/820498","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=820498"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/820498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media\/820499"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=820498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=820498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=820498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}