A multiple content creation tool and a versatile design tool allowing users to create unique web content
![1. content-text](https://diviessential.com/wp-content/uploads/2022/04/1.-content-text-3.jpeg)
Content → Text
- Pre-Heading Enable – type the pre-heading text
- Heading Text – Include a relevant heading text
- Select Heading Tag – as the name suggests select the specific heading tag
- Post-Heading Enable – type the post-heading text
- Description – add a description to your blurb design
![2. content-image-icon](https://diviessential.com/wp-content/uploads/2022/04/2.-content-image-icon-1.jpeg)
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.
- Use Icon – enable the switch to include an icon to the blurb module design
- Image – select an image that goes with the content for the blurb
![3. content-button](https://diviessential.com/wp-content/uploads/2022/04/3.-content-button.jpeg)
Content → Button
- Button Show Hide – enable to open the options to add a button
- Button Text – type in what the button should be called
- Button Link – Include a link to the button
- Button Link Target – specify how the link would open when clicked.
![4. content-image-mask (1)](https://diviessential.com/wp-content/uploads/2022/04/4.-content-image-mask-1.jpeg)
Content → Image Mask
- Use Image Mask – enable the switch to use Image Mask
- Select Shape – select a prebuilt shape to mask the image to
- Select Mask Size – select how you want the image to cover or contain within the shape of the mask
- Image Horizontal Position – adjust the horizontal position of the image within the shape
- Image Vertical Position – adjust the vertical position of the image within the shape
![4. content-upload-image-mask (2)](https://diviessential.com/wp-content/uploads/2022/04/4.-content-upload-image-mask-2.jpeg)
Content → Image Mask
- Use Upload Mask – enable the switch to use Image Mask
- Upload Mask – Upload the custom mask available as an SVG file
- Select Mask Size – select how you want the image to cover or contain within the shape of the mask
- Image Horizontal Position – adjust the horizontal position of the image within the shape
- Image Vertical Position – adjust the vertical position of the image within the shape
![5. content-background-heading-fill-color (1)](https://diviessential.com/wp-content/uploads/2022/04/5.-content-background-heading-fill-color-1.jpeg)
Content → Background Heading
- Background Heading Color – enable to view the background color settings
- Select Background Color – select the background color using the pointer or simply add the hex code to get the exact color required
![5. content-background-heading-gradient-color (1)](https://diviessential.com/wp-content/uploads/2022/04/5.-content-background-heading-gradient-color-1.jpeg)
Content → Background Heading
Gradient settings for any color-applying features are the following:
- Gradient Heading Color – enable to view the gradient settings
- Select Color One – select a color for the top
- Select Color Two – select the color for the bottom part of the background
- Select Gradient Type – select a type of gradient for your design either Linear or Radial
- Linear/Radial Direction – adjust the direction of the colors within the background
- Start Position – adjust the start position using the slider
- End Position – adjust the end position of the color
![6. content-background-description-fill-color (1)](https://diviessential.com/wp-content/uploads/2022/04/6.-content-background-description-fill-color-1.jpeg)
Content → Background Description
- Background Description Color – enable to view the background color settings
- Select Background Color – select the background color using the pointer or simply add the hex code to get the exact color required
![7. content-background-image-fill-color (1)](https://diviessential.com/wp-content/uploads/2022/04/7.-content-background-image-fill-color-1.jpeg)
Content → Background Image
- Use Background Image Color – enable to view the background color settings
- Image Background Color – select the background color using the pointer or simply add the hex code to get the exact color required
![8. content-background-icon-fill-color (1)](https://diviessential.com/wp-content/uploads/2022/04/8.-content-background-icon-fill-color-1.jpeg)
Content → Background Icon
- Use Icon Font Background Color – enable to view the background color settings
- Icon Background Color – select the background color using the pointer or simply add the hex code to get the exact color required
![9. content-background-button-fill-color (1)](https://diviessential.com/wp-content/uploads/2022/04/9.-content-background-button-fill-color-1.jpeg)
Content → Background Button
- Button Background Color – enable to view the background color settings
- Select Background Color – select the background color using the pointer or simply add the hex code to get the exact color required
![10. design-image (1)](https://diviessential.com/wp-content/uploads/2022/04/10.-design-image-1.jpeg)
Design → Image
- Image Placement – choose where the image should be displayed
- Rounded Corners – adjust the four corners to apply rounded corners
- Border Styles – add a border on each side or on all four sides
![10. design-image (2)](https://diviessential.com/wp-content/uploads/2022/04/10.-design-image-2.jpeg)
Design → Image (continuation)
- Border Width – adjust the image’s border width using the slider
- Border Color – select a color for the border using the pointer or simply put the hex code to get the exact color required
- Border Style – select a prebuilt style of the border for the image
- Image Box Shadow – add a box shadow to the image
![11. design-icon (1)](https://diviessential.com/wp-content/uploads/2022/04/11.-design-icon-1.jpeg)
Design → Icon
- Icon Color – select a color for the icon using the pointer or simply put the hex code to get the exact color required
- Icon Font Size – resize the icon using the slider
- Rounded Corners – adjust the four corners to apply rounded corners
- Border Styles – add a border on each side or on all four sides
![11. design-icon (2)](https://diviessential.com/wp-content/uploads/2022/05/11.-design-icon-2.jpeg)
Design → Icon (continuation)
- Border Width – adjust the width of the border using the slider.
- Border Color – pick a color for the border you’ve added.
- Border Style – select a style of the border from the premade border styles
- Box Shadow – add a box-shadow to the text element
![12. hover-effect (1)](https://diviessential.com/wp-content/uploads/2022/05/12.-hover-effect-1-1.jpeg)
Design → Hover Effect
- Hover Effect Enable – enable to view the list of premade hover effects
- Select 2D Hover Effect – select a hover effect from the list of effects available here
![12. hover-effect-tilt (2)](https://diviessential.com/wp-content/uploads/2022/05/12.-hover-effect-tilt-2-1.jpeg)
Design → Hover Effect (Tilt)
- Tilt Effect Enable – turn the switch on to view the tilt effect settings
- Glare Enable – when enabled, add a glare to the image as you hover on it
- Tilt Reverse – reverse the tilt effect by enabling the tilt reverse
- 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.
- Tilt Max – adjust the max perspective of the tilt effect
- Tilt Speed – configure the speed and motion at which the tilt effect is moving
- Tilt StartX – allows the tilt effect to stretch to the right before hovering
- Tilt StartY – allows the tilt effect to be slanted from the bottom before hovering
- Tilt Scale – adjust the scale of the tilt effect to have it zoomed in when hovered on
![13. design-title-text (Pre-Heading-Post)](https://diviessential.com/wp-content/uploads/2022/05/13.-design-title-text-Pre-Heading-Post.jpeg)
Design → Title Text (Pre | Heading | Post)
- Font – Select a font from the collection or use a custom font.
- Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
- Font Style – Pick a style of font for both front and back.
- Text Alignment – align the text for both the front and back text.
- 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.
- Text Size – easily resize the text for both the front and back parts of the flip box.
- Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
- Line Height – easily include gaps between the lines using the slider
- Text Shadow – add text shadow to have the texts highlighted.
![14. design-description-text](https://diviessential.com/wp-content/uploads/2022/05/14.-design-description-text.jpeg)
Design → Description Text
- Font – Select a font from the collection or use a custom font.
- Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
- Font Style – Pick a style of font for both front and back.
- Text Alignment – align the text for both the front and back text.
- 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.
- Text Size – easily resize the text for both the front and back parts of the flip box.
- Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
- Line Height – easily include gaps between the lines using the slider
- Text Shadow – add text shadow to have the texts highlighted.
![15. design-button-text](https://diviessential.com/wp-content/uploads/2022/05/15.-design-button-text.jpeg)
Design → Button Text
- Font – Select a font from the collection or use a custom font.
- Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
- Font Style – Pick a style of font for both front and back.
- Text Alignment – align the text for both the front and back text.
- 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.
- Text Size – easily resize the text for both the front and back parts of the flip box.
- Letter Spacing – space out the letters using the slider for an easier read for the website visitors.
- Line Height – easily include gaps between the lines using the slider
- Text Shadow – add text shadow to have the texts highlighted.
Here we present to you the Spacing, Border, and Shadow features for each toggle.
![16. design-spacing-border-shadow (1)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-1.jpeg)
![16. design-spacing-border-shadow (2)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-2.jpeg)
Design → Image/Icon Spacing
- 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
- 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
![16. design-spacing-border-shadow (3)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-3.jpeg)
Design → Header Spacing (Pre | Header | Post)
- Margin – margin adds extra space to the outside of an element, increasing the distance between the element and the other items on the page
- Padding – padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents
![16. design-spacing-border-shadow (4)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-4.jpeg)
Design → Body/Description Spacing
- 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
- 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
![16. design-spacing-border-shadow (5)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-5.jpeg)
Design → Border
- Rounded Corners – adjust the four corners to include rounded corners
- Border Styles – include borders on any side of the text or all four sides.
- Border Width – adjust the width of the border using the slider.
- Border Color – pick a color for the border you’ve added.
- Border Style – select a style of the border from the premade border styles.
![16. design-spacing-border-shadow (6)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-6.jpeg)
Design → Box Shadow
Include box-shadow to the entire design. Choose the best one from the following shadows and adjust them to your liking.
![16. design-spacing-border-shadow (7)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-7.jpeg)
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.
![16. design-spacing-border-shadow (8)](https://diviessential.com/wp-content/uploads/2022/05/16.-design-spacing-border-shadow-8.jpeg)
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.