Popular Basic Tricks for Elementor Plugin – Tutorials & Tips

I would like to invite you to a new collection of tutorials. This time I will focus on Basic Elementor Plugin Tricks, which becomes extremely popular and at the time of writing this article is activated on over 600,000 installations. A great success that allows you to look positively into the future and be safe that for many years, people behind Elementor will develop and improve it to make it even better and more intuitive.

For those familiar with Elementor, the tutorials shown below may seem obvious, but there is a large group of people who are just starting their adventure with the Elementor plugin. If you are such a person and want to learn about the most interesting basic elements of this plugin, please check my article. This is a very good extension of the Elementor documentation.

For more advanced people I’ll prepare a separate collection of tutorials where I will try to explain more complex tutorials that are not visible at first glance. I’ll also show you how to create Elementor templates.

Basic Elementor Plugin Tricks – Table of Contents

1. Parallax (Fixed) Background
2. Full Height Section
3. Shape Divider
4. Defaults Fonts & Colors
5. Image (or Icon) with Text
6. Video in the Background
7. Adding New Section
8. Removing Gap in the Section

1. How to add the Parallax – Fixed Effect

Calling this Parallax Effect, in this case, is exaggerated because the creators of the Elementor did not decide to create a configurable system for setting the scrolling speed or other parameters, they used the fixed background, so a background photo does not move with the content and stay only in one place.

Maybe sometime Elementor will have more possibilities to configure this element, but for now, we have to use the fixed built-in option.

Tutorial – Adding the Parallax – Fixed Background

1. Choose a section in which you want to apply Fixed Effect and click on the Edit icon.
2. Go to the “Style” tab.
3. Choose the “Background Type – Classic” icon and add any photo from your media library.
4. Here you can choose the position of the photo. I do not have any special suggestions here, choose a position at your own discretion.
5. This point is crucial and here we can set the parallax effect. Select “Fixed” from the “Attachment” option.

Important note to remember: “Attachment Fixed works only on the desktop”.

2. How to add the Full Height Section

Many websites use this effect to show readers their product or service, such as Microsoft, Buffy or Ember. We have also been tempted to add this to a few of our designs like Dancer and Chillout II.

I often come across the question – how to extend the page background to the full height, so I go across all the questioners and presents the way how to do it in the Elementor.

Tutorial – Adding the Full Height Section

1. Choose a section in which you want to add Full Height and click on the Edit icon.
2. In the Layout tab go to the Height parameter and choose “Fit to Screen” option from the dropdown list.

3. How to add the Shape Divider

None of you probably have any doubts that this effect can add flavor to the whole website, especially when it used with relevant content. A perfect example of such variation is one of the Elementor demo – Sweet. We also like these effects and you can see how we used it in Dancer 2.

This effect can be used without any problems for the upper and lower edge of the section, you can also set the background color to match the previous or next section.

Tutorial – Adding the Shape Divider

1. Choose a section in which you want to apply Shape Divider and click on the Edit icon.
2. Go to the “Style” tab.
3. Expand the Shape Divider tab. Remember that you can choose the Top and Bottom divider.
4. Choose your divider style from the dropdown list in the Type parameter.
5. Below each Type, you can set many other styles like Color, Width, Height, Flip, Invert. Play with these settings and find your best look.

You can choose from many fancy styles like Waves, Mountains, Tilts, Triangles, Drops, Curves, Piramides, Wave Brushes, Zigzags, Clouds, Books and many more.

4. How to change the defaults Fonts & Colors

Every modern site in current times should use more interesting solutions than using the Arial font. With help come ready and free solutions that you know perfectly well, Google Fonts, which are very often implemented in builders including Elementor.

In addition, each separate text widget such as Heading has a built-in option that allows you to change each font separately. In the example below, however, I will only deal with the change of fonts for Global settings. Global settings make it very easy to work because there is no need to change each widget separately.

Tutorial – Changing the Default Fonts

1. Click on the Hamburger icon in the top left corner.
2. In the Style section click the “Default Fonts”.
3. Here you can change settings for the Primary & Secondary  Headlines, Body Text and Accent Text.

Important! You must confirm your changes by clicking the green “Apply” button as it appears.

Tutorial – Changing the Default Colors

1. Click on the Hamburger icon in the top left corner.
2. In the Style section click the “Default Colors”.
3. Here you can change colors for each section like Primary, Secondary, Text, and Accent. You can also choose predefined color palettes made by the Elementor Team.

Important! You must confirm your changes by clicking the green “Apply” button as it appears.

5. How to add the Image (or Icon) with Text

Presentation of your services is one of the key elements of a well-designed website. Widgets built-in Elementor allow us to easily create any presentation page. Tools that we can use allow us to add graphics created by you or select any icon built into this plugin. Elementor uses free icons from the FontAwesome collection, which we can insert immediately.

Below I present adding pictures thanks to the Image Box widget, but next to it is an Icon Box that allows you to add the vector icons described above.

Tutorial – Adding the Image Box

1. Click on the Grid icon in the top right corner.
2. From the General Elements drag&drop the “Image Box” and move it to your selected section.

Tips! Almost the same you can do it with the “Icon Box” if you would like to use the FontAwesome Icons instead of an image.

Tutorial – Configuring the Image Box

1. Click on the Grid icon on the Icon Box and more settings will appear on the left bar.
2. Add an image from your Media Library
3. Switch the Image Position to Left. You can switch to other sides (center & right) to find your perfect image position.

6. How to add the Video to the Background

Video in the background is a beautiful thing that can spice up any website. People who use such solution on their websites know this very well. Take a look at these examples Unsilenced, Minthis Resort, Antoni. Be like them and upload your background video. Elementor allows you to place a video in the background in five steps, which I present in this tutorial. Easy-Peasy! Let’s Go! 🙂

Tutorial – Adding the Video Background

1. Choose a section in which you want to insert Video BG and click on the Edit icon.
2. Go to the “Style” tab.
3. Click on the “Background Type – Video Background” icon.
4. Add your Video Link in this field. Like you can read under this input, you can add a YouTube link or mp4 video file.
5. Background Fallback option is necessary on tablet devices that do not support video background and on the lower mobile resolutions.

7. How to add the New Section

Before I got to know the Elementor for good, there was one option that irritated me incredibly (before of course I found this magic cross :)), this was adding new empty sections!

At the beginning, I did it in such a way that each time when I wanted to add a new section at the beginning I had to scroll the entire page to the bottom, where the “Add new Section” button is always visible and I dragged this newly created section to the very top, massacre! Especially when I had a dozen sections, it was very annoying.

Until finally, the success, I accidentally clicked on the unknown (for me that time) cross and I saw a button that was previously visible at the bottom. Below I present a screen for people who have faced similar irritation as I do 🙂

Tutorial – Adding a New Section

1. Between the “duplicate section” and “saving section” you can find this cross, click it!
2. The whole rectangle appears with the possibility of adding a new section and the option to add a template.

8. How to disable the Gap (Spaces)

With this question, we often meet if someone wants to add Slider Revolution via the shortcode widget in Elementor. Although the slider itself has a full-width mode, margins will appear around corners which spoil the final effect.

The tutorial you will find below is also useful when you want to reduce the distance between several columns in one section. There are options that allow you to remove this margin but also allow you to increase it.

Tutorial – Removing Gaps (Spaces) from the Section

1. Choose a section in which you want to remove Gaps this effect and click on the Edit icon.
2. In the Layout tab edit the Columns Gap option and choose the No Gap from the drop-down.