In this Advanced Tips & tricks tutorial, we’re going to combine headings, images, and custom CSS code to create amazing interactive sections in Elementor! This lesson will provide you with:
✓ Positioning Elements using Absolute Positioning
✓ Combine Widgets & Motion Effects
✓ Learn how to create a Text Stroke
✓ Using Custom CSS
✓ Using the Elementor Navigator!
✓ Responsive Editing
✓And much more!
Hey there it’s Ash from Elementor, welcome to this Tips & Tricks tutorial.
Today we will learn how to build these awesome effects… combining text and images, with Elementor’s magic and a single line of CSS code.
We will re-create this hero section step by step and explain the logic behind its functionality.
Excited or scared?! let’s begin!
We will start in our editor..
First, create a new section with one column…
Then, set its minimum height to 80vh… to give us some vertical space inside the section.
In style… set a background colour of your preference to match the template…
Next, let’s add our heading.
On the widgets menu.. drag and drop the heading inside the column…
Type your text..
and in Style..
set a colour… and a font style of your choice…
When you use large sized fonts it’s best to use relative units to make them responsive! We chose VW for this one to make the font size change according to the percentage of the screen’s size.
Now back to the widgets menu…
drag and drop the image widget under the heading.
Select the image of your choice and insert it….
As you saw in our example, this image will be used to rotate itself when a user scrolls, showing one watch at a time.
To make this effect, we created a square sized image that has a transparent background. Above it, we placed our watches rotated around a circle.
Next, we are going to change the size of the image.
In style…
Change the units to viewport width, to make the image equal to the percentage of the window’s width..
and set the value to 90…
Now, change the default maximum width by setting its value to 90 vw.
This size is great for our example.
Now it’s time to position our widgets on top of each other.
Select the heading… and in the advanced tab… under positioning..
Set its position to absolute
Now select the image… and in the advanced tab.. Set its position to absolute as well.
As you can see, both the heading and the image widgets are removed from the flow of elements on the page, so they don’t take up any height in the column.
This allows us to position them exactly where we want them, even on top of each other.
Adjust the horizontal… and vertical offsets…
And that’s it, our image is ready!
Now let’s create the illusion of the image moving “inside” the text.
Select the heading…
Oops.. I can’t select the heading since the image is in front of it!
When you have absolute positioned widgets, it might be hard to select them since they often overlap with each other.
Navigator comes really handy for this!
Click here.. to open the navigator…
Select the heading widget.. And adjust its position a bit using the vertical offset
Now right click on your heading… and select duplicate…
This trick requires 2 headings.. and this image positioned right between them…
But when we say between them… how can we control which element is in front of the other?
The answer is Z-index!
In the advanced tab of each widget, column or section….. you will see this option called Z-Index….
The higher the number the more to the front of the screen the element will be.
We want this heading to be right at the back, so let’s give it a low number, 1.
This will be the text that stays at the back of the other two and it includes the solid colour of the font.
To make this easier to remember, let’s give it a name. Double click the heading.. and name it “filled text”….
Next, select the image.
We want this image to be right on top of the filled text.
In the advanced tab, give it a z-index of 2.
Lastly, let’s double click the other heading and give it a name of outlined text.1 This heading will be on top of the other widgets showing only the outline of the font.
In the advanced tab, set it’s z-index to 3.
As you can see it immediately showed up in front of the image.
Next, let’s create the font’s outline.
In style… set it’s background to transparent by dragging it all the way to the left…
Now, back to the advanced tab, we are going to use Custom CSS.
Elementor gives you full control over your elements to customise them even further using CSS.
Let’s add this line here.
Type selector, to select your widget… and inside brackets, type this.
As you can see, the font now has a white outline creating the illusion of the image being inside of it.
The last thing that is left to do is to add a motion effect to our image!
Select the image… and in the advanced tab…. under motion effects… enable the scrolling effects…
We will enable the option to rotate, while we scroll through our website… and customise its settings a bit…
Now if we try to scroll…. We will see that it works great, but the image overlaps on the section below.
There is an easy trick to hide this overflow.
Select the section, and in style… make sure you have an active background colour.
Now in the advanced tab, set the z-index to 2.
Just like we saw before, using z-index made the section below go in front of the previous one, hiding the unwanted image overflow.
Use this trick to hide or show overflows of a section or a widget as well as to position them in the desirable order.
Let’s now take a look at how this displays on tablet and mobile devices.
Click on the responsive mode… and select tablet….
The hero section looks out of place, but don’t worry we can fix this really easily
Select the section, and adjust its minimum height.
Next, select the heading, and fix its position by altering the horizontal… and vertical offsets…
Repeat for the second heading….
We can also set the image a little lower… in the advanced tab… under positioning… change its vertical offset.
For mobile you have two options, One is to disable the effect, and the other one is to keep it as is adjusting the widgets position.
To remove the rotate effect just click on the image, and in the advanced tab, under motion effects, remove the mobile tag so that the effects won’t apply to it.
In our example we will keep the rotation as is.
Select the section, and change the minimum height.
And lastly, select the image and increase the width and the maximum width a little.
And that’s pretty much it!
Use this effect to give a playful touch and highlight your products.
Create different combinations and surprise us with your unique designs!
As always, thanks for watching and don’t forget to like and subscribe to our channel for more cool tutorials and tricks!
