Wpdaily

Daily WordPress News

Understanding How the Divi Blurb Module is Structured

Divi’s Blurb Module is versatile and can display text and an image or icon in your designs. This module makes highlighting services, features, and steps in a process more accessible. One of the benefits of using a Blurb Module is that you can customize all of the design settings in one place and apply styling to all of the blurb content effortlessly.

The Blurb Module offers a wide range of design options, allowing you total creative control over the design. In this post, we’ll look closer at the Divi Blurb Module and the extensive options you can use to customize the content and design. Additionally, we’ll go over three design examples that demonstrate the versatility of the blurb module.

Let’s dive in!

Understanding How the Divi Blurb Module is Structured (& What You Can Use it For)

The Blurb Module is a simple yet very versatile module that you can use to display an image or icon along with header and body text. You can use the Blurb Module to present some highlights or features, services, processes, key products or pages, and more. It’s a helpful way to break up content that might otherwise be a longer text block with some graphics that draw visual interest and make your information easier to scan. Now, let’s take a closer look at the Blurb Module settings.

Divi Blurb Module Add Module

Content Settings

The content tab is where you can add any content to your blurb. You can also add a link, set the background, and add an admin label.

Text

Here is how the blurb looks by default when you add it to your layout. Here, you can set the title and add body text to your Blurb Module.

Divi Blurb Module Text

Image & Icon

You can add an image or an icon to your Blurb Module. If you enable Use Icon, the icon picker will be displayed below.

Divi Blurb Module Icon

Alternatively, you can display an image in your blurb.

Divi Blurb Module Image

Link

Next is the link settings. You can set a link for the blurb title or the entire module. You can also set the link to open in the same window or a new tab.

Divi Blurb Module Link

Background

In the background settings, you can set a background color, gradient, image, video, pattern, or mask that will appear behind your blurb content. You can even combine multiple background types to create interesting effects.

Divi Blurb Module Background

Design Settings

Now, let’s move over to the design tab. Here, you can customize the design of every aspect of the Blurb Module.

Image & Icon

The first settings section allows you to customize the image or icon you enabled for the blurb. If enabled, here is where you set the icon color. You can also add a background color to the image or icon, select the placement (top or left), set the width, and add rounded corners.

Divi Blurb Module Image Icon Design

Additionally, you can add a border to the image or icon. You can specify the border width, border color, and border style.

Divi Blurb Module Image Border

Finally, you can add a box shadow and apply image filters to the image.

Divi Blurb Module Image Box Shadow

Text

In the text settings, you can set the alignment for the blurb text, select the text color, and enable a text shadow.

Divi Blurb Module Text Design

Title Text

Here is where you can customize the styling of the title text. You can specify the heading level and set the font, font weight, font style, alignment, color, size, spacing, line height, and shadow.

Divi Blurb Module Title Text

Body Text

Next is the body text settings. Like the title text settings, you can customize the font, font weight, font style, alignment, color, size, spring, line height, and shadow.

Divi Blurb Module Body Text

Sizing

In the sizing settings, you can set the content width, width, max width, alignment, min height, height, and max height.

Divi Blurb Module Sizing

Spacing

Next, the spacing section is where you can set the margin and padding for the Blurb Module.

Divi Blurb Module Spacing

Border

You can add rounded corners to the blurb in the border settings and enable a border. You can specify the border width, color, and style.

Divi Blurb Module Border

Box Shadow

Here, you can set a box shadow for the entire blurb. With the box shadow enabled, you can set the positioning, blur and spread strength, shadow color, and shadow position.

Divi Blurb Module Box Shadow

Filters

Next are the filters settings. You can use these options to modify the blurb’s hue, saturation, brightness, contrast, invert, sepia, opacity, and blur. You can also select a blend mode.

Divi Blurb Module Filters

Transform

Here, you can scale, translate, rotate, skew, and set origin points to transform how your Blurb Module appears in the design.
Divi Blurb Module Transform

Animation

The final section in this tab is the animation settings. You can select from seven different animation styles: Fade, Slide, Bounce, Zoom, Flip, Fold, and Roll. Each animation style can be further customized by modifying the animation directions, duration, delay, intensity, starting opacity, speed curve, and repeat. In this section, you can also set the image/icon animation.

Divi Blurb Module Animation

Advanced Settings

Finally, let’s take a look at the advanced tab. Here, you can set the CSS ID and Class, add custom CSS, set the image alt text, set display conditions and visibility settings, modify transitions, set an advanced position, and enable scroll effects. These settings can take your designs to the next level with advanced customizability and dynamic effects.

Divi Blurb Module Advanced

Using the Blurb Module in a Design

Now that we have explored the options in the Blurb Module settings, let’s move on to some practical examples. We will create three different designs using Blurb Modules.

Preview

Here is a preview of what we will design.

Blurb Design 1

Blurb Design 1

Blurb Design 2

Blurb Design 2

Blurb Design 3

Blurb Design 3

Create a New Page with a Premade Layout

Let’s start by using a premade layout from the Divi library. For this example, we will use the Toy Store Home Page layout from the Toy Store Layout Pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Search for and select the Toy Store Home Page layout.

Select Use This Layout to add the layout to your page.

Now, we are ready to build our designs. We will redesign the Build, Solve, and Learn section for this tutorial using Blurb Modules. The layout is created with image and text modules, but we can use the Blurb Module to combine the elements into one module and style them together. Let’s get started!

Recreating the Layout with a Blurb Module

Each of our three designs will begin with the same basic layout. Start by adding a new row with three columns to the section.

Insert Row

Next, add a Blurb Module to the first column.

Add Blurb

Add a title and some body text to the blurb.

  • Title: Build
  • Body: Lorem ipsum dolor sit amet. In nisi dolores et atque impedit et repellendus praesentium aut laudantium consequatur et amet corrupti.

Blurb Add Text

In the image settings, add the image for the first blurb.

  • Image: toy-store-24.jpg

Divi Blurb Module Image

Next, duplicate the Blurb Module twice to create three Blurb Modules. Rearrange the modules so there is one in each column.

Duplicate Blurb

Open the settings for the second and third Blurb Modules and modify the content.

For blurb 2:

  • Title: Solve
  • Image: toy-store-19.jpg

For blurb 3:

  • Title: Learn
  • Image: toy-store-27.jpg

Divi Blurb Module Modify Image

Once the three blurbs are set up, delete the original row.

Delete Old Layout

Blurb Design 1

With the blurb layout set up, let’s start designing the first blurb layout. This example will be a simple layout with a rounded image that adds an interesting design element. Navigate to the design tab of the Blurb Module and add rounded corners under the Image & Icon settings.

  • Image/Icon Rounded Corners: 250px top right and left

Blurb Image Icon

Next, open the title settings and customize the font as follows:

  • Title Font: Libre Bodoni
  • Title Font Weight: Bold
  • Title Text Size: 25px desktop, 20px tablet, 16px mobile
  • Title Line Height: 1.4em

Blurb Title Text

In the body text settings, set the following options:

  • Body Font: Jost
  • Body Text Color: rgba(0,0,0,0.58)
  • Body Text Size: 17px desktop, 15px tablet, 14px mobile

Blurb Body Text

Now, the design for the first blurb is complete. To apply the styles to the rest of the blurbs, simply click the three dots at the top of the settings window and select Extend Blurb Styles.

Blurb Extend Styles

Select the option to extend styles to all blurbs throughout the row.

Blurb Extend Styles

Final Result

Here is the completed design!

Blurb Design 1 Full

Blurb Design 2

For the second blurb design, we will create a colorful layout with a background graphic and an icon. Begin by opening the Image and Icon section in the content tab and enable Use Icon. For the first blurb, select the building blocks icon.

Blurb Image Icon

Move to the background settings. Begin by adding a background image. Since we will combine this graphic with a color overlay, make sure to select the overlay blend mode.

  • Background Image: toy-store-7b.png
  • Background Image Blend: Overlay

Blurb Background Image

Next, set the background color. For the first blurb, we will add a blue color.

  • Background: rgba(82,137,221,0.25)

Blurb Background Color

Now, move over to the design tab. In the image and icon settings, set the icon color and alignment.

  • Icon Color: #739ddd
  • Image/Icon Alignment: Left

Blurb Icon Color

In the title text settings, modify the following:

  • Title Font: Libre Bodoni
  • Title Font Weight: Bold
  • Title Text Size: 25px desktop, 20px tablet, 16px mobile
  • Title Line Height: 1.4em

Next, modify the body text.

  • Body Font: Jost
  • Body Text Color: rgba(0,0,0,0.58)
  • Body Text Size: 17px desktop, 15px tablet, 14px mobile

Blurb Body Text

Open the spacing settings and set the padding:

  • Top and Bottom Padding: 80px
  • Left and Right Padding: 20px

Blurb Padding

Finally, open the Box Shadow settings and enable a box shadow. Set the shadow color.

  • Shadow Color: #739ddd

Blurb Box Shadow

Now, the design of the first blurb is complete. Extend the design settings to the rest of the blurbs.

Extend Blurb Styles

Customizing Blurb 2

Open the settings for the second blurb and navigate to the Image & Icon section. Enable the icon and select the puzzle icon.

Blurb Image Icon

Next, open the Background settings and change the background color.

  • Background Color: rgba(229,167,223,0.3)

Blurb Background

Open the Image & Icon settings in the design tab and set the icon color.

  • Icon Color: #ea9ada

Blurb Icon

Finally, open the box shadow settings and change the shadow color.

  • Shadow Color: #ea9ada

Blurb Shadow

Customizing Blurb 3

For the third blurb, we will repeat the same steps to change the colors. First, enable the icon and select the lightbulb icon.

Blurb Image Icon

Next, set the background color for the third blurb.

  • Background Color: rgba(232,176,104,0.31)

Blurb Background

Move to the design tab and customize the icon color under Image & Icon.

  • Icon Color: #e8ac5f

Blurb Icon

Finally, modify the box shadow color.

  • Shadow color: #e8ac5f

Blurb Shadow

Final Result

Here is the completed blurb layout.

Blurb Design 2 Full

Blurb Design 3

For the third design, we will use the blurb images as background images and create an eye-catching layout with large text. Begin by opening the settings for the first blurb. Delete the body text from the blurb.

Blurb Content

Move to the Image & Icon settings and enable the icon. For the first blurb, select the building blocks icon.

Blurb Icon

Open the background settings and add the background image. We will add an overlay to make the text easier to read on the background image, so select the overlay blend mode.

  • Background Image: toy-store-24.jpg
  • Image Blend Mode: Overlay

Blurb Background

Next, set the background color.

  • Background Color: rgba(38,67,104,0.47)

Blurb Background Color

Move to the design tab and open the Image & Icon settings. Set the icon color to white.

  • Icon Color: #FFFFFF

Blurb Icon Color

In the title font settings, customize the following:

  • Title Font: Libre Bodoni
  • Title Font Weight: Bold
  • Title Text Alignment: Center
  • Title Text Color: #FFFFFF
  • Title Text Size: 75px desktop, 50px tablet, 40px mobile
  • Title Line Height: 1.4em
  • Title Text Shadow: Style 3

Blurb Title Text

Next, customize the padding in the spacing settings.

  • Padding top and bottom: 70px
  • Padding left and right: 30px

Blurb Spacing

Finally, open the border options and add a rounded corner to the blurb.

  • Rounded Corners: 10px

Blurb Border

Now, the design of the first blurb is complete. Extend the design to the other two blurbs.

Extend Blurb Styles

Customizing Blurb 2

Open the settings for the second blurb and remove the body text.

Blurb 2 Content

Next, enable the icon and select the puzzle icon.

Blurb 2 Icon

Change the background image and set the background color.

  • Background Color: rgba(188,45,105,0.3)
  • Background Image: toy-store-19.jpg

Blurb 2 Background

Finally, move to the Image and Icon settings and modify the icon color.

  • Icon Color: #FFFFFF

Blurb 2 Icon Color

Customizing Blurb 3

Like we did for blurb 2, remove the body text from the blurb and enable the icon. For the third blurb, select the lightbulb icon.

Blurb 3 Icon

Set the background image for the blurb and change the background color to orange.

  • Background Color:rgba(242,101,36,0.57)
  • Background Image: toy-store-27.jpg

Blurb 3 Background

Finally, set the icon color in the design tab.

  • Icon Color: #FFFFFF

Blurb 3 Icon Color

Final Result

Here is the completed design for layout 3.

Blurb Design 3 Full

Final Result

Let’s take another look at the final blurb designs.

Blurb Design 1

Blurb Design 1

Blurb Design 2

Blurb Design 2

Blurb Design 3

Blurb Design 3

Final Thoughts

Divi’s Blurb Module is a powerful and flexible tool that allows you to creatively display text and an image or icon. With endless design possibilities, you can achieve unique layouts that highlight your content and capture attention with callouts that are easy to scan. If you want to learn more about how to customize the Blurb Module, look at this tutorial to create a blurb expanding section on scroll.

How have you used the Blurb Module in your own designs? Let us know in the comments!

The post Understanding How the Divi Blurb Module is Structured appeared first on Elegant Themes Blog.

Source