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.