How to generate and add blob background graphics in Elementor layouts

With the latest control features for background graphics that Elementor introduced this January, new possibilities opened for more spicy, device-agnostic backgrounds. Populating our sections with subtle background graphics is a great common practice but like most things it should be executed in a balanced way and context.

An easy concept to get started if you are new to this, are blobs. Blobs are a well-established popular trend, and as a design pattern they are very flexible because they provide a neutral texture, and a very discreet design touch that if-done-right does not interfere with readability. They are relatively simple in their shape format and their curved smoothness makes them easy for the eye and an excellent candidate for background overlays. Unless your branding is razor sharp with zero-radius corners, in most of the cases you can make use of a blob element and integrate it into your design seamlessly.

The only way until now that I knew how to add such a graphic into an Elementor project was to design the blob itself in my UI design software (Sketch or figma) and then export it ready for WordPress.

Meet Blobmaker.app

The fine folks at zcreativelabs have created Blobmaker, an awesome little tool that lets you generate .SVG blob graphics in any colour. Go visit blobmaker.app  and you will find that the website comes with a beautifully simple interface and a few controls like colour / complexity / contrast. And this is all you really need to mess around if you want smooth, balanced blob graphics that are lightweight and scale well in any device.

Why SVG?

Well, SVG stands for scalable vector graphics, and as the name suggests, these are vector graphics that will scale sharply to any screen resolution and scale.  So, expect no pixelation here. If before you jump into Elementor you use a design software like Sketch or Figma, you can drop your blob vector file into the page design and either integrate it with your concept or further edit it.

Enabling SVG file upload for your WordPress site

First, you need to make sure that you are allowed to drop an SVG file into your media library in WordPress. By default WordPress does not allow SVG file uploads but you can easily bypass this by using the SVG Support plugin from the WordPress repository.

Setting up the blob graphic as a background overlay in Elementor

Implementation options are literally infinite, so for the shake of simplicity let’s just use a blob to add a neat design touch to a copy-powered section. We have simply created our blob in blobmaker.app and already added the exported SVG file into the Media gallery in WordPress.

First, I am setting a background colour for this section. Next, I will simply go to the background overlay panel and choose the blob from my media gallery. I will align it to the Center both vertically and horizontally, set it to no-repeat and -in order to fully exploit Elementor’s background controls – I will set a custom size and positioning. Click on the image below to see a short video of how the graphic behaves.

Quick tips

There are a couple of things that are worth mentioning while trying to add a blob graphic as a background overlay in Elementor.

• Do not overuse blobs. They are lightweight and cool, but use them with caution. You want this to be an “accent” to your design, not the design itself.
• Use them only if they are aligned with your brand’s voice and style.
  Make sure that the blob smoothness works with your brand. One style does not fit all.
• Experiment with opacity
  If you use the blob as a background overlay, experiment with opacity for even more discreet blob awesomeness
• Use consistent colours
  Make sure that the colour you picked at Blobmaker is within your brand’s colour pallete.

Have you implemented a blob design yet? Post your links to the comments section.