Steal These Elementor Custom Widget Looks!

Lara Lee Design | Steal These Elementor Custom Widget Looks!
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Use an Elementor custom widget, or two, or three. Elementor is a popular and powerful WYSIWYG website builder. I’ve even blogged about it earlier in my WordPress tutorial, “How to Make Custom Post Types with Elementor Pro.”

Elementor requires no coding experience. Nonetheless, it still helps its users without web development experience achieve that custom look for their brand. Users may choose the free plugin, which has a limited selection of design widgets. Alternatively, they may opt for the paid pro plugin, which expands the widget library greatly plus offers new options to make custom templates, archives, error pages, and more.

In fact, I also use Elementor Pro! I combined it with their Hello theme to craft this website exactly the way I want it to look from the ground up.

Templates push websites from concept to live quickly. Yet, relying on templates results in a stock look that fails to differentiate one brand from another. Furthermore, templates alone rarely provide all the functionality a client specifically requires of their online user experience. However, a solution is also readily available: use Elementor modified widgets to create a custom and unique web design.

Previously, I said users don’t need to know how to code to use Elementor. And they still don’t!

However, knowing how to code can greatly expand your customization options. Use these simple CSS-only mods of existing Elementor widgets to evolve your templates into something new and unique.

Continue reading to copy these modified Elementor widgets in your design.

Jump to an Elementor Custom Widget Look:

Break-out Backgrounds

Let backgrounds extend past the container, but not quite full-width, for extra-wide content.

Background Color Breaks Out of Parent Container and Wrapper —Elementor Custom Widget

You commonly see this visual with article images wider than the article text. You see it in WordPress Gutenberg’s new “wide” image block option and in blogs like Medium.

I call them break-out because the backgrounds “break-out” of their traditional, wrapper-sized container. They’re large, eye-catching, and impactful. So, perfect for showcasing beautiful imagery or promoting a CTA!

Add an Inner Section widget inside a full-width Section to create this Elementor custom widget.

Requires Elementor Widgets:

Elementor Basic Widget: Inner Section

Break-Out Background Settings:

Place one Section and edit:

Layout tab > Layout
Content-width: Full Width
Columns Gap: No Gap

Layout tab > Structure
100

Inside the Section’s only Column, add one Inner Section. Set:

Layout tab > Layout:
Content Width: Full Width

Layout tab  > Structure
50, 25, 25

Style tab > Background
Background Type: Classic
Color: #FFCD03

Advanced > Custom CSS:

				
					selector {
 display: block;
 margin: 0 auto;
 max-width: 1300px /*size of choice*/;
}
				
			

Padded Video Backgrounds

By default, video backgrounds go edge-to-edge. Instead, create a unique web design by adding space from the edges.

Padded Background Video —Elementor Custom Widget

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. I coupled it with rounded corners for a nice effect.

Requires Elementor Widgets:

None

Padded Video Background Settings:

All you need is a Section. Tweak it like so:

Style tab > Background
Border-radius: 20px 20px 20px 20px

Advanced > Custom CSS:

				
					selector {
 box-sizing: border-box;
margin: 20px !important;
}

selector .elementor-background-video-container {
 border-radius: 20px !important;
 background-size: cover !important;
 background-repeat: no-repeat;
}

selector .elementor-background-video-container,
selector .elementor-background-overlay {
 border-radius: 20px !important;
}
				
			

Polaroid Images

Give that classic Polaroid photo effect to your website images.

Polaroid Image Borders —Elementor Custom Widget

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.

Requires Elementor Widgets:

Elementor Basic Widget: Image

Polaroid Image Settings:

Grab a few Image widgets and recreate this Elementor custom widget look with the following CSS:

Advanced tab > Custom CSS:

				
					selector {
 margin-bottom: 30px !important;
 padding: 20px 10px 30px 10px !important;
 background: white;
 border: 1px solid #2b3838 !important;
 border-radius: 10px;
}

/* Optional: interactive effect */
selector:hover,
selector:focus {
 filter: drop-shadow(0 0 10px #2b383833);
}
				
			

Left-Aligned Stats Checklist

Turn that animated Counter widget on its side—transpose stat descriptions side-by-side into a checklist.

Left-Aligned Counter Widgets in Checklist —Elementor Custom Widget

This Elementor custom widget uses the same break-out section styles from earlier on this page. Basically, this look uses modified Counter widgets, which are now left-aligned, to create this checklist. The checklist itself is just another Inner Section.

If you’re embedding multiple Inner Sections within other Inner Sections—like the demo—save the child Inner Sections as a Template and add a Template widget instead.

Requires Elementor Widgets:

Elementor Basic Widget: Inner Section
Elementor Basic Widget: Counter

Counter Checklist Settings:

Achieve this look mostly with CSS.

Start with a Section to group the list items together in one checklist. No changes to the default settings here.

Now, the Section has only one column. Let’s make whitespace around the list items. Change the Section > Column settings:

Layout tab > Layout
Vertical Align: Middle

Style tab > Background
Color: #ffffff (white)

Advanced tab > Advanced
Padding: 40px 64px 40px 64px

Next, start adding list items. Each list item is its own Inner Section. So, add an Inner Section widget to the Column with these settings:

Layout tab  > Structure
20, 80

Advanced tab > Advanced
Padding: 20px 40px 20px 40px

Advanced > Custom CSS:

Advanced tab > Custom CSS:

				
					/*Skip this style on the last checklist item*/
selector {
    border-bottom: 1px solid #F04724;
}
				
			

A checkmark image occupies the first column; then, the stat occupies the second. Add a Counter widget to the Inner Section’s second column, style it to taste, then add these custom settings:

Advanced tab > Custom CSS:

				
					selector .elementor-counter .elementor-counter-number-wrapper,
selector .elementor-counter-title {
 text-align: left;
 display: inline-block;
 width: 100%
}

/*Add this to distance the number and title from each other*/
selector .elementor-counter-number-wrapper {
 margin-bottom: 8px !important;
}
				
			

Swap out testimonials in the Testimonial Carousel widget for live text slides and create a new multi-slide carousel you didn’t get out-of-the box.

Carousel with Multiple Slides —Elementor Custom Widget

Elementor doesn’t offer a carousel of multiple, live text slides out of the box. However, there are a few other carousel widgets. We can adapt these to our purposes.

This Elementor custom widget heavily modifies the existing Testimonial Carousel widget. I choose this one, because it provides many ideal live text elements, such as a description and image.

I also take advantage of the ability to add HTML within Elementor’s text fields. I added the button this way.

Other big changes:

  1. I added an interactive effect, a slide drop shadow. As a result, I needed to add widget padding to prevent the drop shadow from getting cropped.
  2. Additionally, I hyperlinked the whole slide for a nice, large click target.
  3. I furthermore moved the navigation below the slides at the bottom of the widget.

By default, the navigation buttons are vertically centered on the far edges of the widget—on top of the slides. Since I hyperlinked the whole slide, I didn’t want two different link destinations competing with each for the same touch target. So, I separated them.

Requires Elementor Widgets:

Elementor Pro Widget: Testimonial Carousel

Multi-Slide Carousel Settings:

Create a Section and edit:

Layout tab > Layout
Content-width: Full Width

Style tab > Background
Image: (image of choice)

Inside the Section’s only Column, add one Testimonial Carousel. Tweak heavily:

Content > Slides:
Skin: Default
Layout: Image Stacked
Alignment: Center
Slides Per View: 4
Width: 100%

Content > Slides > Item #1+:
Content:

				
					<a href="#" style="color: white;"><div>
<h3 class="event-date">6/7</h3>
<p class="event-name">Opening Session</p>
</div></a>
				
			

Image: (choose square images for a circle effect later)
Name:

				
					<a href="#"><button>View Session</button></a>
				
			

Title: (leave blank)

Style tab > Slides:
Space Between: 80
Border Size: 1px 1px 1px 1px
Border Color: #2B3838

Style tab > Content:
Text Color: #2B3838

Style tab > Image:
Image Size: 124px
Border Radius: (leave blank here; it doesn’t accept percentages)

Style tab > Navigation:
Size: 48px
Color: #2B3838

Advanced tab > Advanced:
Margin: 0 0 40px 0

Advanced tab > Custom CSS:

				
					/* Visual Styles */


/*Optional: A linear gradient which fades widget content to invisibility on outside edges*/
selector {
 -webkit-mask-image: linear-gradient(to left,
 transparent 0%,
 black 20%,
 black 80%,
 transparent 100%);
    
 mask-image: linear-gradient(to left,
 transparent 0%,
 black 20%,
 black 80%,
 transparent 100%);
}

selector .elementor-swiper-button-prev {
 position: absolute;
 left: 40%;
 top: 560px;
}

selector .elementor-swiper-button-next {
 position: absolute;
 right: 40%;
 top: 560px;
}

#carousel-properties .swiper-slide {
 transition: .5s;
 background-color: transparent !important;
 height: 500px;
 border-radius: 20px;
 margin: 10px;
 margin-bottom: 50px;
 box-sizing: border-box;
}

#carousel-properties .event-name {
 font-size: 14px;
 font-style: normal;
 font-weight: bold;
 text-transform: uppercase;
 color: #2B3838;
}

#carousel-properties .event-date {
 font-size: 96px;
 font-weight: 900;
 text-transform: uppercase;
 color: #2B3838;
}


#carousel-properties .elementor-testimonial__footer {
 height: 0;
 margin: 0;
}

#carousel-properties .elementor-testimonial__image img {
 border-radius: 50%;
 margin: 0 auto;
 height: auto !important;
 margin-bottom: 24px;
}

#carousel-properties button {
 border: 1px solid #F04724;
 background: #F04724;
 color: white;
 padding: 8px 16px;
 margin: 0 auto !important;
 margin-bottom: 40px !important;
}

/* Hide These While Inactive */
#carousel-properties .event-name{
 visibility: hidden;
}

#carousel-properties .elementor-testimonial__image img,
#carousel-properties button {
 display: none;
}

/* Active Styles */
#carousel-properties .swiper-slide:hover,
#carousel-properties .swiper-slide:focus {
 background-color: #B0C4A6 !important;
     box-shadow: 0 0 10px rgba(33,33,33,.75);
}

#carousel-properties .swiper-slide:hover .event-name,
#carousel-properties .swiper-slide:focus .event-name {
 visibility: visible /*Unlike display:none this CSS means the item continues to take up space*/;
}

#carousel-properties .swiper-slide:hover .elementor-testimonial__image img,
#carousel-properties .swiper-slide:focus .elementor-testimonial__image img,
#carousel-properties .swiper-slide:hover button,
#carousel-properties .swiper-slide:focus button {
 display: block;
}
				
			

Broken Grid Color Blocking

Apply split color blocks to Inner Section widgets for a broken grid look popular in 2021 graphic design trends.

Broken Grid Color Blocking —Elementor Custom Widget

This Elementor custom widget looks deceptively complex. However, it’s surprisingly easy to recreate this broken grid look! All this Elementor custom widget needs is some background-color.

Requires Elementor Widgets:

None

Broken Grid Color Blocking Settings:

I opened with a Section widget filled with a background-image and a Spacer widget. This is simply:

Layout tab > Layout:
Content Width: Full Width

Overlapping the bottom of the previous Section is a color block, which allows the big image of the previous Section to show through. This color block is just a second Section with a background gradient and negative margin.

The background gradient sets both color stops at the same location to create a crisp, solid edge.

Additionally, Elementor makes use of octadecimals to use transparent colors. The octadecimal sets the RGB and alpha channels, the latter of which controls transparency. (This is just another way to format rgba(), maybe quicker!) You can also drag the color picker slider all the way left to select 0% opacity for a transparent color.

Inside this semi-transparent Section, you must add a Spacer widget. Without it, the web browser might render this Section with a height of 0px. You’ll need to match the Spacer height with the Section’s negative margin.

Use these settings on the semi-transparent Section:

Layout tab > Layout:
Content Width: Boxed
Boxed Slider: 1024px

Style tab > Background:
Background Type: Gradient
Color: #EDEDE800
Location: 60%
Color 2: #EDEDE8
Location: 60%
Type: Linear
Angle: 90°

Advanced tab > Advanced:
Margin: -100px 0 0 0 (match Spacer height)

Add a third Section immediately below the semi-transparent Section. This one will be solid. Match the color stop locations with the above Section to ensure they align. Otherwise, the illusion of the broken grid breaks.

Layout tab > Layout:
Content Width: Boxed
Boxed Slider: 1024px

Style tab > Background:
Background Type: Gradient
Color: #EDEDE8
Location: 60%
Color 2: #2B3838
Location: 60%
Type: Linear
Angle: 90°

Add whatever content you’d like within this solid gradient Section.

First, I added a Heading widget with manual line breaks to keep the heading within the dark color block. No big changes here.

Then, I also added a few Inner Section widgets that spanned the full-width of the wrapper. These contrasting widths really emphasize the Broken Grid look.

I styled the Inner Section widgets like so:

Layout tab > Layout:
Content Width: Full Width
Structure: 60, 15, 25

Style tab > Background:
Color: #FFFFFF (white)

Style tab > Border:
Color: #2B3838
Width: 1px 1px 1px 1px
Border Radius: 10px 10px 10px 10px

Advanced tab > Advanced:
Padding: 8px 16px 8px 16px

Advanced tab > Custom CSS:

				
					selector {
 margin-top: 16px;
 margin-bottom: 16px;
}

selector:hover,
selector:focus {
 filter: drop-shadow(0 0 10px rgba(0,0,0,.3));
}

				
			

Finally, I finish it off with another, shorter semi-transparent section. The same settings above apply, just without the negative margin.

Staff Bio Flip Cards

with Extra Animation!

Convert Flip Box widgets into these branded, animated staff bios.

Staff Bio Flip Boxes —Elementor Custom Widget

Elementor Flip Boxes have a lot of flexibility. Like the Testimonial Carousel widget, the Flip Box widget features live text and other elements that make it great for personalization. However, I wanted an even more custom look.

This Elementor custom widget applies extra positioning and animation styling for a unique web design.

Requires Elementor Widgets:

Elementor Pro Widget: Flip Box

Flip Box Settings:

For each Flip Box widget, style like so:

Content tab > Front > Content:
Graphic Element: None
Title: John <br />Doe
Description: President

Content tab > Front > Background:
Image: (image of choice)

Content tab > Back > Content:
Title: (blank)
Description: (blank)
Button Text: View Bio

Content tab > Front > Background
Color: #F04724

Content tab > Settings:
Height: 356px
Flip Effect: Fade

Style tab > Front:
Padding: 8px 8px 0 8px
Vertical Position: Bottom

Style tab > Back:
Alignment: Center

Style tab > Button > Hover:
Color: #2B3838

Advanced tab > Custom CSS:

Inside the Section’s only Column, add one Testimonial Carousel. Tweak heavily:

Content > Slides:
Skin: Default
Layout: Image Stacked
Alignment: Center
Slides Per View: 4
Width: 100%

Content > Slides > Item #1+:
Content:

				
					<a href="#" style="color: white;"><div>
<h3 class="event-date">6/7</h3>
<p class="event-name">Opening Session</p>
</div></a>
				
			

Image: (choose square images for a circle effect later)
Name:

				
					<a href="#"><button>View Session</button></a>
				
			

Title: (leave blank)

Style tab > Slides:
Space Between: 80
Border Size: 1px 1px 1px 1px
Border Color: #2B3838

Style tab > Content:
Text Color: #2B3838

Style tab > Image:
Image Size: 124px
Border Radius: (leave blank here; it doesn’t accept percentages)

Style tab > Navigation:
Size: 48px
Color: #2B3838

Advanced tab > Advanced:
Margin: 0 0 40px 0

Advanced tab > Custom CSS:

				
					selector {
 filter: drop-shadow(0 0 20px #33333300);
}

selector:hover,
selector:focus {
 filter: drop-shadow(0 0 20px #33333360);
}

selector .elementor-flip-box__button {
 font-family: 'Montserrat';
 font-weight: regular;
 font-size: 16px;
 text-transform: regular;
 letter-spacing: 0;
 color: white;
 text-shadow: none;
 background: none;
}

selector .elementor-flip-box__button:active,
selector .elementor-flip-box__button:hover,
selector .elementor-flip-box__button:focus {
 color: white;
 background: #009999;
}

selector .elementor-flip-box__front .elementor-flip-box__layer__inner {
 text-shadow: 0 0 8px rgba(51,51,51,.8);
}

selector .elementor-flip-box .elementor-flip-box__layer__title,
selector .elementor-flip-box .elementor-flip-box__layer__description {
 color: rgb(255,255,255,1);
 text-shadow: 0 0 8px rgba(51,51,51,.8);
}

selector .elementor-flip-box .elementor-flip-box__layer__title {
 margin-bottom: 8px !important;
}

selector .elementor-flip-box__layer__description {
 margin-bottom: 16px;
}

selector .elementor-flip-box__layer__overlay {
 position: relative;
 z-index : 1;
}

selector .elementor-flip-box__layer__overlay:before {
 content : "";
 position: absolute;
 left    : 8px;
 height  : 8px;
 width   : 72px;
 border-bottom: 8px solid #ede0c2 ;
}

/* Active styles */
selector .elementor-flip-box__layer__overlay:before,
selector .elementor-flip-box__layer__title,
selector .elementor-flip-box__layer__description {
 transition: .3s ease all;
}

selector .elementor-flip-box:active .elementor-flip-box__layer__title,
selector .elementor-flip-box:active .elementor-flip-box__layer__description,
selector .elementor-flip-box:hover .elementor-flip-box__layer__title,
selector .elementor-flip-box:hover .elementor-flip-box__layer__description,
selector .elementor-flip-box:focus .elementor-flip-box__layer__title,
selector .elementor-flip-box:focus .elementor-flip-box__layer__description {
 color: rgb(255,255,255,0);
 text-shadow: 0 0 8px rgba(51,51,51,0);
}

selector .elementor-flip-box:hover .elementor-flip-box__layer__overlay:before {
 width: calc(100% - 16px);
}

				
			

Call-Out

with Zoom Effect on Image Hover

Call attention to your content by popping if off the webpage. Drop shadows, zoom effects, and a slight broken grid layout bring these elements into the user’s space.

Broken Grid Call-Outs plus Image Zoom Effect —Elementor Custom Widget

Here’s two more examples of Elementor custom widgets.

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

Second, I pulled the Inner Section 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.

Requires Elementor Widgets:

Elementor Basic Widget: Image
Elementor Basic Widget: Inner Section

Elementor Custom Widget Settings:

The Image widget has this:

Advanced tab > Custom CSS:

				
					selector {
 max-width: calc(100% - 80px);
 filter: drop-shadow(0 0 20px #33333340);
}

selector:hover,
selector:focus {
 filter: drop-shadow(0 0 20px #33333360);
}

selector:hover .elementor-widget-container {
 position: relative;
 overflow: hidden;
}

selector:hover .elementor-widget-container img {
 transition: .3s ease all;
 transform: scale(1.1);
}
				
			

The Inner Section widgets making the pop-out call-outs have these tweaks:

Advanced tab > Custom CSS:

				
					selector {
 max-width: 80%;
 margin-left: 10%;
 filter: drop-shadow(0 0 10px #2B383840);
}

selector:hover,
selector:focus {
 filter: drop-shadow(0 0 10px #2B383840);
}