Random Blob

Due to the dynamic nature of Divi Builder the Random Blob will change its shape every time a change is done in the Editor, however, in the front-end, this will only happen if the page is reloaded. These are the available options:

Some of the settings below only apply to a specific blob type. The following color code will be used through this guide to help you identify options specifics for each type:

1. Blob Type: Choose the Blob type.
   • Standard
   • Image
   • Pattern
2. Blob Pattern: Select your Blob Background Pattern. Applies to the Pattern only. Explore Patterns.
3. Stretch Blob: Stretch the Blob to fit the content. If this option is used in conjunction with the Blob Type image, the image will be stretched as well Depends on Use Blob Content is set to YES.
4. Blob Size: Minimum size of the Blob in percentage. A larger value will produce a larger Blob.
5. Horizontal Blob Position: Adjust the horizontal position of the Blob. Negative values are allowed. Negative values are allowed.
6. Vertical Blob Position: Adjust the horizontal position of the Blob. Negative values are allowed. Negative values are allowed.
7. Scale Blob Horizontally: Scale the Blob horizontally to adjust its size.
8. Scale Blob Vertically: Scale the Blob vertically to adjust its size.
9. Blob Randomness: Minimum size of the blob in percentage. The smaller the more randomness. The minimum value accepted is 2.
10. Blob Complexity: Total nodes to create a shape. Increasing this value will add complexity to the shape. The minimum value accepted is 2.

Settings • Standard & Pattern Blob type.

The following settings apply only to Standard & Pattern Blob types:

1. Blob Border Width: Adjust the width of the Blob border.
2. Blob Border Color: Set the color of the Blob border.
3. Blob Color: Set the background color of the Blob.
4. Use Gradient: Enable to use a gradient background color instead of a solid color.

   The following options are available once Use Gradient is set to ENABLED.

   1. Blob Gradient Type: Choose the Blob gradient type:
      • Linear
      • Radial
   2. Blob Start Gradient Color: Set the start color of the gradient.
   3. Blob Middle Gradient Color: Set the middle color of the gradient.
   4. Blob End Gradient Color: Set the end color of the gradient.
   5. Blob Gradient Start Color Offset: Set the gradient start color offset.
   6. Blob Gradient Middle Color Offset: Set the gradient middle color offset.
   7. Blob Gradient End Color Offset: Set the gradient end color offset.
   8. Make Hollow: When ENABLED, the gradient will be used as the color for the outline of the shape and no background color will be present. Note: Your Blob Border Width needs to be set to at least 1px for the outline to show.
   9. SVG Linear Gradient Settings
      1. Gradient X1 Rotation: Adjust the start gradient rotation.
      2. Gradient Y1 Position: Adjust the start gradient position.
      3. Gradient X2 Rotation: Adjust the end gradient rotation.
      4. Gradient Y2 Position: Adjust the end gradient position.
   10. SVG Radial Gradient Settings
       1. Start Circle Gradient X Coordinate: This attribute defines the X coordinate of the start circle of the radial gradient.
       2. Start Circle Gradient Y Coordinate: This attribute defines the Y coordinate of the start circle of the radial gradient.
       3. End Circle Gradient X Coordinate: This attribute defines the X coordinate of the end circle of the radial gradient.
       4. End Circle Gradient Y Coordinate: This attribute defines the Y coordinate of the end circle of the radial gradient.
       5. End Circle Radius: This attribute defines the radius of the end circle of the radial gradient.

Settings • Image Blob type.

The following settings apply only to Image Blob type:

1. Blob Image: Upload your Blob Background Image. To keep your image from stretching is recommended to upload an image with a 1:1 aspect ratio, for instance: 700 x 700 pixels.
2. Image X Position: Adjust the X or Horizontal position of the image of the Blob Background Image.
3. Image Y Position: Adjust the Y or Vertical position of the image of the Blob Background Image.
4. Aspect Ratio Alignment: If set to None, uniform scaling will not be forced therefore the graphic content of the Blob will be scaled non-uniformly without preserving the aspect ratio. For more information regarding the other Alignment Values, please visit the Developer Mozilla Docs preserveAspectRatio > Alignment value.
5. Aspect Ratio Meet or Slice: The default behavior is Meet which stretches the content in both the X and Y dimension until it fills either the width or height of the viewBox inside the SVG. The alternative, Slice, preserves the aspect ratio of the content but scales up the graphic until it fills both the width and height of the viewBox (clipping the content that overflows the viewBox).

Blob Content

1. Use Blob Content: Enable to add content to your Blob.

The following options are available once Use Blob Content is set to ENABLED.

Title • Subtitle • Content

1. Default Divi Builder Options: Margin, Padding, and all Font and Text Styles and Text Color provided by the Visual Builder.
2. Heading Level: Available for Title & Subtitle.

Link Button

1. Use Custom Styles For Link Button: Enable the default Button style options provided by the Visual Builder.
2. Button Alignment: Align your button to the left, right or center of the module.

Image | Icon

1. Image | Icon Alignment: Select the Image or Icon alignment.
2. Default Divi Builder Options: Margin, Padding, Round Corners, Border Styles, and Round Box Shadow provided by the Visual Builder.

Content Spacing

1. Content Padding: Padding adds extra space to the inside of the element, increasing the distance between the edge of the element and its inner contents.

Other Options

1. Divi Builder Default: Default Sizing, Spacing, Border Styles, Box Shadow, Filters, Transform, and Animation provided by the Visual Builder.