Blob Generator

To learn more about this widget, check out our Blob Generator widget page.

Blobs have become a common background filler pattern in the modern web design as it adds a nice touch of fun, randomness, and flair to the design.

A quick intro to Blob Generator:

Blob Generator is a new widget element introduced by Designer Powerup to generate blob SVGs and control the size and complexity from within Elementor.

A Blob Generator within Elementor solves these issues:

  • Difficult to create a blob manually using the Pen tool unless you are a Pro designer.
  • Hassle of manually exporting, saving, and importing the blobs onto the site if you’re using a generator like this one.
  • Poor WordPress support for SVGs (which is why 3rd party devs had to create SVG support plugins like these)
  • Lack of Advanced Elementor feature controls if copying the SVG to the Custom HTML widget.
  • Loading as a separate image (1 more resource request per blob) if using it in the Image Widget.

Getting the most value out of Blob Generator:

Here are some different ways you can use the Blob Generator in your designs:

  • Make empty sections stand out more
  • Use blobs behind icons to add a visual flair to your designs
  • Use blobs in your hero section to create some pretty unique designs

Check out our tutorial to learn more about the different ways you can use blobs on your website.

How to use Designer Powerup’s Blob Generator widget?

  1. Drag the Blob Generator element from the panel.
  2. Set the required size and shape.
  3. Adjust the blob shape by changing the Extra Path Points and Shape Randomness controls.
  4. Click on the “Generate Blob” button.

How to add a Fill to the blob shape?

The Blob Generator widget allows you to choose the fill type for the blob. You can add a solid color fill, gradient color fill, and an image mask.

Here’s how you can apply a gradient fill to the blob shape:

  1. Select the blob shape and go to the Style tab.
  2. Select the ‘Blob Fill‘ dropdown in the Fill type setting.
  3. Choose the fill type as ‘Gradient‘.
  4. Select your gradient colors.
  5. Tweak the color location and angle settings to achieve the desired gradient color.

How to add an image inside the blob shape?

With Designer Powerup’s blob generator widget, you can also create image masks for your blobs.

To add an image inside your blob shape, follow the steps given below:

  1. Select the blob widget and open the ‘Blob Fill‘ settings.
  2. Choose ‘Image‘ as the blob fill.
  3. Select the image you want to add in the blob shape.
  4. Choose the image size and fill type to properly fit your image inside the blob.

How to position the blob generated by the blob generator widget?

Once you’ve generated your blob, you may want to move it to properly position it on your page.

To do this, select the blob widget on your page and go to Advanced > Custom Positioning.

Under the position settings, select Absolute position.

This setting allows you to move the blob freely anywhere on the page. You can use the horizontal and vertical offset settings to accurately place the blob where you want.

If you don’t like a particular shape, you can simply click on “Generate Blob” button again to generate a different shape. You can keep shapes until you get the one you like.

No JavaScript library or code is added on the front-end for these blobs. All the magic happens in the backend where the widget automatically generates valid SVG in real-time and saves it to the post. After that, it’s just a normal HTML element like any other.

Note:

  • The generator generates a shape every time you click on the ‘Generate Blob’ button.
  • The blob currently doesn’t support image masking.
  • The blobs don’t affect the loading speed of your website as they are SVG shapes which become normal HTML elements after the shape is saved.
  • You cannot apply Designer Powerup’s multi-layer gradients to the blob the shapes.
  • If the blob shape overlaps any element, change the z-index of the blob.
Was this page helpful?
Yes No