Elementor-Tips&Tricks

Elementor Tips & Tricks: November picks

0%
Ana Karić

Ana Karić

Content Author

Keen on learning some Elementor tips & tricks?

If you’ve decided to create a website with Elementor, we must say that you made a good choice. By using this user-friendly page builder, you’ be able to build beautiful, functional websites while having fun and expressing your creativity.

In order to leverage all the benefits Elementor has to offer, we’ve prepared a series of  tips & tricks articles so you can make your website stunning with less hassle as possible. In this one, in particular we’ll get you familiar with some hacks that are beginner friendly, yet the end result is amazing.

Scroll down and see for yourself!

Just in case you still haven’t got familiar with Elementor, we suggest you jump to our Step-by-step tutorial on how to make a website with Elementor.

Elementor Trick #1: Fixed Image Scroll

Fixed image scroll effect looks very nice and professional, but actually, it is very easy to implement. The hack is that the background image is fixed when you scroll. There’s so many great examples of how can you use this effect, here’re some ideas to get you started:

Elementor tips and tricks -fixed-scrool

We’ve used the fixed image scroll in our banners – looks neat, right?

Here’s how to implement this effect into your design:

  1. In the Style section of a chosen element go to the Background section
  2. Edit the Attachment value to Fixed

Elementor tips and tricks -fixed-image

This is one more example of how we’ve added the fixed image scroll effect to a corporate-style website, gannonadvisory.com.

GannonAdvisory
GIF source: gannonadvisory.com

Elementor Trick #2: Gradient CTA Button

A call-to-action button is one of the essentials when it comes to communicating with your users. Therefore, it is important to make sure that its design is tempting enough so the user actually clicks on it. 

There is a wide range of button styles and colors, but why not make it even more catchy with gradient effect? Here’s what we are talking about:

Elementor: Gradient Button
Image source: uplabs.com

Now, how to do it? Follow these steps.

First, insert the button widget:

Elementor_tips_tricks

Then, chose the button’s main color:

Elementor-tips

In the box Style section, change the position from Outline to Insert:

Elementor_tricks

Now, reduce the Blur to minimum and play with the Horizontal and Vertical sliders. Add the second color by clicking on the pen button, adjust the Blur once again and play around with the gradient style. Simple as that!

Elementor_gradient_trick
Elementor_gradient_tip

Elementor Trick #3: Shrinking Sticky Header

Here’s an effect that apart from looking cool, is very useful – a shrinking sticky header. Check out what are we talking about:

Elementor_shrinking_header
GIF source: elementor.com

Basically, the header shrinks as the site visitor scrolls through the page. This way, you’ll have more space to arrange the rest of your content, since headers can take some valuable content space. Besides, it really looks good, doesn’t it? Give your site visitors some eye-candy!

This effect fits well with the creative websites, but business-style as well. 

Let’s guide you through the creation process:

You’ll need to edit your header, or header template, depending on how you’ve saved it. The steps are the same and they start with checking if your header works with a CSS code we’ll provide you with. How?

Elementor: shrinking header

These should be default settings but check if the header’s height is set to Minimum Height.

Elementor-shrinking-header-trick

Now, let’s make sure that your header is sticky → in the Advanced tab set the header section’s CSS Classes to sticky-header (you’ll need to type this manually).

Elementor_header_trick

To finalize the preparations, open your logo image settings and in the Advanced tab set the CSS Classes to logo. Like this:

Elementor_header_tip

Okay, now you should enable your header to stick to the top when users are scrolling through the site. This can be edited in the Motion Effects settings found in the Advanced tab. Like this:

Shrinking header in Elementor

Now, let’s do some coding (…just kidding, you’ll just need to copy-paste code). Go to the header SettingsAdvancedCustom CSS.

header.sticky-header {

    --header-height: 90px;

    --opacity: 0.90;

    --shrink-me: 0.80;

    --sticky-background-color: #0e41e5;

    --transition: .3s ease-in-out;

    transition: background-color var(--transition),

                background-image var(--transition),

                backdrop-filter var(--transition),

                opacity var(--transition);

}

header.sticky-header.elementor-sticky--effects {

    background-color: var(--sticky-background-color) !important;

    background-image: none !important;

    opacity: var(--opacity) !important;

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

}

header.sticky-header > .elementor-container {

    transition: min-height var(--transition);

}

header.sticky-header.elementor-sticky--effects > .elementor-container {

    min-height: calc(var(--header-height) * var(--shrink-me))!important;

    height: calc(var(--header-height) * var(--shrink-me));

}

header.sticky-header .elementor-nav-menu .elementor-item {

    transition: padding var(--transition);

}

header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {

    padding-bottom: 10px!important;

    padding-top: 10px!important;

}

header.sticky-header > .elementor-container .logo img {

    transition: max-width var(--transition);

}

header.sticky-header.elementor-sticky--effects .logo img {

    max-width: calc(100% * var(--shrink-me));

}

Shrinking header - Elementor

That’s it! 

Shrinking header preview - Elementor
Shrinking header preview

Ok, obviously, there’s some customization to be done.

The CSS can be edited directly in the Elementor interface, or you can use a code editor. You have an option to customize five variables – if you want, of course. Here’re the editable CSS variables with the default values.

  • –header-height: 90px;
  • –opacity: 0.90;
  • –shrink-me: 0.80;
  • –sticky-background-color: #0e41e5;
  • –transition: 300ms ease-in-out;

To customize these, just update the values after the  “–“.

Play around with the variables until you get the shrinking header that goes the best with your theme, style. 

Elementor Trick #4: Parallax Image Scroll

Parallax image scroll is one of the most praised trends in web design nowadays. Just take a look at the examples below and you’ll understand why:

Elementor-parallax image-diesel
GIF source: bad.diesel.com
Elementor-parallax-image-
Image source: dogstudio.co

As you can see, this technique enables background images to move and create an illusion of depth in a 2D or 3D scene of distance.

And yes – you can leverage this effect in Elementor! There are two ways and here’re the steps:

  1. On a Web Element
  2. On the background

Let’s first start with adding the parallax effect to a web element. To do so, edit the chosen element in the Advanced tab. In the Motion Effect dropdown, set the Scrolling effect to “On”. Now, decide which animation you like the most – here’s what you can choose from:

Elementor-parallax-effect

Finally, tweak the animation according to your needs (by clicking on the “pencil”). You can apply multiple effects for each element, but we advise you not to overdo it 😀.

Here’s how the effect looks implemented on a text (My Services):

Elementor-parallax-image-example

When it comes to parallax effect on the website background, start by clicking on one of the website’s sections and hit the Style tab. Find the Background section and select Motion Effect or Mouse Effect (try both and decide which one fits your needs). 

Elementor-parallax-image-trick

The next steps are the same as explained for adding the effect on a web element.

Aaaaand voilà:

Elementor-parallax-image-tip

Elementor Trick #5: Inline Text Styles

If you want to highlight a certain part of the text, certain word(s) we recommend to play around with text styles. Here’s a quick trick.

In the Heading settings click on the text box and type the desired title → wrap the word(s) you want to point out and write the styles for properties you want to change (colors, fonts and more).

The more you test the more ideas you’ll get!

Elementor-inline-text-trick

To wrap things up

With Elementor you can create visually stunning pages with a few mouse clicks – hopefully our tips & tricks will come in handy. 

Stay tuned for more Elementor hacks updates, or reach out to see what kind of (magic) tricks can we do for your project! We’ll get back to you with a custom, FREE quote.

Stay tuned for more Elementor tips & tricks articles!

more osm
posts

  • ·
swiftui

SwiftUI: Apple’s Ecosystem Supercharged

Developer tools don’t make much noise unless it is a game-changer. Apple’s SwiftUI certainly is.  SwiftUI is already changing the quality of apps available across…