Elementor Tips & Tricks: November Picks

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 without much hassle. 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:

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

This is one more example of how we’ve added the fixed image scroll effect to a corporate-style website, 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:

Now, how to do it? Follow these steps.

First, insert the button widget:

Then, chose the button’s main color:

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

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 Trick #3: Media Files with Text

Adding text next to media files is used very often, especially when presenting some services or product benefits.

Elementor has built in widgets that allow you to easily create stunning presentation pages by adding icons, images or video next to your text.

Did you know that Elementor has a great choice of free stock images? Of course, you can always upload your own media files, but if you are a design noob – Elementor has you covered!

Ok, let’s get to work. Here’re the steps how to add text next to your media:

Add a Media & text block:

Add your own media file or find one that fits your needs on Pexels (there’re 3 Million Free stock images & videos, surely you’ll find something interesting).

Make sure you check our post with 50+ FREE design resources, we beat you’ll find everything that you need!

Now, just add the desired text and make some alignments if needed! 

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:

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:

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):

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). 

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

Aaaaand voilà:

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!

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!