Live Demos:
Elementor Custom Widgets

Padded Video Background—

Add Some
Breathing Room

Padding on a background video gives a fresh look to the traditional full-width hero image. Unfortunately, padding alone fails to achieve this look—use a margin + box-sizing combo instead.

Polaroid Images—

Polaroid It.

Keep the Elementor Image widget and the Polaroid effect, too! This classic photographic treatment doesn’t vertically center images. Instead, keep the bottom padding heavier to raise the image. It’s a trick popular in fine art! In web design, achieve this look using a border + padding combo to the image parent to achieve this look.

Photo of Lara Lee scrolling through web designs on her tablet.
Photo of a hot cup of tea sitting on a stack of graphic design and branding books.
Photo of Lara Lee logo in red on a bright red card on a gray background with the shadows of leaves. This was one of the updates from my 2021 brand refresh.
Your Ideal Audience Is Missing

Break-out Backgrounds—

Want content wider than the wrapper? Break-out.

Content that goes past the edges of the container has been super popular. You commonly see this visual with article images wider than the article text. Use this look for backgrounds, too. Add an Elementor Inner Section widget inside a full-width Section to create this look.

Photo of Lara Lee scrolling through web designs on her tablet.
Photo of a hot cup of tea sitting on a stack of graphic design and branding books.
Photo of Lara Lee holding a phone in her hand displaying the blog web page.

Your regularly scheduled content continues here, within the wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur commodo pulvinar. Vivamus neque quam, scelerisque id ornare in, tristique non odio. Suspendisse eleifend gravida risus in suscipit. Pellentesque sollicitudin fermentum vestibulum. Nulla facilisi. Nunc ipsum enim, placerat nec magna id, tincidunt mattis turpis. Ut elementum tempor arcu ut maximus. Mauris volutpat fringilla purus, ut vulputate elit ullamcorper ac. Donec dictum massa ac tellus eleifend, eu venenatis orci pretium. Vestibulum imperdiet euismod nibh, a hendrerit libero ornare accumsan. Nam venenatis odio eget hendrerit posuere.

Modified Flip Cards—

John
Doe

President

Aliyah
Johnson

Director, Accounts

Lara
Lee

Graphic Designer

Ryan
Smith

Web Developer

Call-outs—

Coffee or Tea

Tea, definitely

Craziest Thing I Do

Walk my parrots

Lara Lee

Graphic Designer

Here’s two more examples of modified Elementor widgets.

First, I applied a zoom effect to the image on. Just four lines of CSS to the image and its parent container creates the zoom effect.

Second, I pulled the call-outs out of the grid layout. Achieve this effect by setting a negative top margin on the widget, which pulls it over the image. Double-check z-index if the image still overlaps the call-out. To strengthen the broken grid look, I also maxed out the call-out width at only 80% wide.

Left-Aligned Counter Checklist—

Modified Counters in

Elementor

This Section uses the same break-out section styles from earlier on this page. It also uses modified Counter widgets, which are now left-aligned, to create this checklist. The checklist itself is just another Inner Section. If embedding multiple Inner Sections within Inner Sections—like this demo right here—save the child Inner Sections as a Template and add that widget instead.

0
Attendees at my largest client's event
0 +
Unique clients
0
Most projects at a time
0
Years Experience

Broken Grid Color Blocking—

Just a section
with a gradient
background-color.

This is an Inner Section.

It goes inside a full-width, single-column Section.

Your Ideal Audience Is Missing

This is an Inner Section.

It goes inside a full-width, single-column Section.

Photo of a hot cup of tea sitting on a stack of graphic design and branding books.

This is an Inner Section.

It goes inside a full-width, single-column Section.

3 Big Signs You Need a Brand Refresh