Divi Essential Documentation

  1. Home
  2. Docs
  3. Divi Essential Documentation
  4. Modules Documentation
  5. Divi Next Blurb

Divi Next Blurb

A multiple content creation tool and a versatile design tool allowing users to create unique web content

Content → Text

  1. Pre-Heading Enable – type the pre-heading text 
  2. Heading Text – Include a relevant heading text
  3. Select Heading Tag – as the name suggests select the specific heading tag
  4. Post-Heading Enable – type the post-heading text
  5. Description – add a description to your blurb design

Content → Image & Icon

This is where you begin structuring your blurb design. Progress to having a more visionary look and feel using the Blurb to create your content.

  1. Use Icon – enable the switch to include an icon to the blurb module design
  2. Image – select an image that goes with the content for the blurb

Content → Button

  1. Button Show Hide – enable to open the options to add a button
  2. Button Text – type in what the button should be called
  3. Button Link – Include a link to the button
  4. Button Link Target – specify how the link would open when clicked. 

Content → Image Mask

  1. Use Image Mask – enable the switch to use Image Mask
  2. Select Shape – select a prebuilt shape to mask the image to
  3. Select Mask Size – select how you want the image to cover or contain within the shape of the mask
  4. Image Horizontal Position – adjust the horizontal position of the image within the shape
  5. Image Vertical Position – adjust the vertical position of the image within the shape

Content → Image Mask

  1. Use Upload Mask – enable the switch to use Image Mask
  2. Upload Mask – Upload the custom mask available as an SVG file 
  3. Select Mask Size – select how you want the image to cover or contain within the shape of the mask
  4. Image Horizontal Position – adjust the horizontal position of the image within the shape
  5. Image Vertical Position – adjust the vertical position of the image within the shape

Content → Background Heading

  1. Background Heading Color – enable to view the background color settings
  2. Select Background Color – select the background color using the pointer or simply add the hex code to get the exact color required

Content → Background Heading

Gradient settings for any color-applying features are the following:

  1. Gradient Heading Color – enable to view the gradient settings
  2. Select Color One – select a color for the top
  3. Select Color Two – select the color for the bottom part of the background
  4. Select Gradient Type – select a type of gradient for your design either Linear or Radial
  5. Linear/Radial Direction – adjust the direction of the colors within the background
  6. Start Position – adjust the start position using the slider
  7. End Position – adjust the end position of the color

Content → Background Description

  1. Background Description Color – enable to view the background color settings
  2. Select Background Color – select the background color using the pointer or simply add the hex code to get the exact color required

Content → Background Image

  1. Use Background Image Color – enable to view the background color settings
  2. Image Background Color – select the background color using the pointer or simply add the hex code to get the exact color required

Content → Background Icon

  1. Use Icon Font Background Color – enable to view the background color settings
  2. Icon Background Color – select the background color using the pointer or simply add the hex code to get the exact color required

Content → Background Button

  1. Button Background Color – enable to view the background color settings
  2. Select Background Color – select the background color using the pointer or simply add the hex code to get the exact color required

Design → Image

  1. Image Placement – choose where the image should be displayed
  2. Rounded Corners – adjust the four corners to apply rounded corners
  3. Border Styles – add a border on each side or on all four sides

Design → Image (continuation)

  1. Border Width – adjust the image’s border width using the slider 
  2. Border Color – select a color for the border using the pointer or simply put the hex code to get the exact color required
  3. Border Style – select a prebuilt style of the border for the image
  4. Image Box Shadow – add a box shadow to the image

Design → Icon

  1. Icon Color – select a color for the icon using the pointer or simply put the hex code to get the exact color required
  2. Icon Font Size – resize the icon using the slider 
  3. Rounded Corners – adjust the four corners to apply rounded corners
  4. Border Styles – add a border on each side or on all four sides

Design → Icon (continuation)

  1. Border Width – adjust the width of the border using the slider.
  2. Border Color – pick a color for the border you’ve added.
  3. Border Style – select a style of the border from the premade border styles
  4. Box Shadow – add a box-shadow to the text element

Design → Hover Effect

  1. Hover Effect Enable – enable to view the list of premade hover effects
  2. Select 2D Hover Effect – select a hover effect from the list of effects available here

Design → Hover Effect (Tilt)

  1. Tilt Effect Enable – turn the switch on to view the tilt effect settings
  2. Glare Enable – when enabled, add a glare to the image as you hover on it
  3. Tilt Reverse – reverse the tilt effect by enabling the tilt reverse
  4. Tilt Perspective – adjust the perspective of the tilt as it shifts in all directions. Changing the perspective allows the tilt to stretch more as hovered on.
  5. Tilt Max – adjust the max perspective of the tilt effect
  6. Tilt Speed – configure the speed and motion at which the tilt effect is moving 
  7. Tilt StartX – allows the tilt effect to stretch to the right before hovering
  8. Tilt StartY – allows the tilt effect to be slanted from the bottom before hovering
  9. Tilt Scale – adjust the scale of the tilt effect to have it zoomed in when hovered on

Design → Title Text (Pre | Heading | Post)

  1. Font – Select a font from the collection or use a custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for both front and back.
  4. Text Alignment – align the text for both the front and back text.
  5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  6. Text Size – easily resize the text for both the front and back parts of the flip box.
  7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
  8. Line Height – easily include gaps between the lines using the slider
  9. Text Shadow – add text shadow to have the texts highlighted.

Design → Description Text 

  1. Font – Select a font from the collection or use a custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for both front and back.
  4. Text Alignment – align the text for both the front and back text.
  5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  6. Text Size – easily resize the text for both the front and back parts of the flip box.
  7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
  8. Line Height – easily include gaps between the lines using the slider
  9. Text Shadow – add text shadow to have the texts highlighted.

Design → Button Text

  1. Font – Select a font from the collection or use a custom font.
  2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
  3. Font Style – Pick a style of font for both front and back.
  4. Text Alignment – align the text for both the front and back text.
  5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
  6. Text Size – easily resize the text for both the front and back parts of the flip box.
  7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
  8. Line Height – easily include gaps between the lines using the slider
  9. Text Shadow – add text shadow to have the texts highlighted.

Here we present to you the Spacing, Border, and Shadow features for each toggle.

Design → Image/Icon Spacing

  1. Image Margin – margin adds extra space to the outside of an element, increasing the distance between the element and the other items on the page
  2. Image Padding – padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents

Design → Header Spacing (Pre | Header | Post)

  1. Margin – margin adds extra space to the outside of an element, increasing the distance between the element and the other items on the page
  2. Padding – padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents

Design → Body/Description Spacing

  1. Body Margin – margin adds extra space to the outside of an element, increasing the distance between the element and the other items on the page
  2. Body Padding – padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents

Design → Border

  1. Rounded Corners – adjust the four corners to include rounded corners
  2. Border Styles – include borders on any side of the text or all four sides. 
  3. Border Width – adjust the width of the border using the slider.
  4. Border Color – pick a color for the border you’ve added.
  5. Border Style – select a style of the border from the premade border styles.

Design → Box Shadow

Include box-shadow to the entire design. Choose the best one from the following shadows and adjust them to your liking.

Design → Button Box Shadow

Include a box-shadow to the Button. Choose the best one from the following shadows and adjust them to your liking.

Design → Body Box Shadow

Include a box-shadow in the Description. Choose the best one from the following shadows and adjust them to your liking.

Was this article helpful to you? Yes No

How can we help?