• Rife WP Theme
    • Rife PRO
    • Rife FREE
    • Demos
    • Pricing
    • Features
    • Reviews
    • Help
      • Documentation
      • Change log
      • Rife Free Child Theme
    • Tutorials
  • Rife Elementor Ext.
  • Blog
  • Contact
Try Rife!
Updated: November 9, 2018 by Daniel 1
Tips

Popular Basic Tricks for Elementor Plugin – Tutorials & Tips

Popular Basic Tricks for Elementor Plugin – Tutorials & Tips
Updated: November 9, 2018 by Daniel 1
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.

Big Update! Download ready free Elementor Templates + Writing Effect for your next project!

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


Parallax Fixed Background - Basic Elementor Plugin Tricks

Parallax Background – Example from Rife WP Theme

 

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


Parallax Fixed Background Steps - Basic Elementor Plugin Tricks

  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


Full Height Section - Elementor Tutorials, Tips & Tricks

Full Height Section – Example from Rife WordPress Theme

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


Full Height Section Steps - Elementor Tutorials, Tips & Tricks

  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


Shape Divider - Elementor Tutorials, Tips & Tricks

Shape Divider – Example from Unicorn Free

 

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


Shape Divider Steps - Elementor Tutorials, Tips & Tricks

  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


Custom Fonts & Colors - Elementor Tutorials, Tips & Tricks

 

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


Custom Fonts & Colors Steps - Elementor Tutorials, Tips & Tricks

  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


Custom Fonts & Colors Steps - Elementor Tutorials, Tips & Tricks

  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


Text with Image on the Left - Elementor Tutorials, Tips & Tricks

Text with Image on the Left – Example from Raven Free

 

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


Text with Image on the Left - Elementor Tutorials, Tips & Tricks

  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


Text with Image on the Left - Elementor Tutorials, Tips & Tricks

  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 - Elementor Tutorials, Tips & Tricks

Video Background – Example from Dancer 2

 

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


Video in the Background Steps - Elementor Tutorials, Tips & Tricks

  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


New Section Steps - Basic Elementor Plugin Tricks

  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)


Section with No Gap - Basic Elementor Plugin Tricks

 

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


Section with No Gap Steps - Basic Elementor Plugin Tricks

  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.
Get new WordPress tips and deals from our Newsletter

 

If you Like it, Share it!

Elementor

Daniel
Graphic designer and also founder of Apollo13. He is responsible for esthetics of each of our themes. He likes clean and useful design, where content can breath. Big fan of riding bicycles. For some reason Air's dog always try to bite him...

1 comment

Sergio says:
June 29, 2018 at 4:42 pm

Nice article.

One of the issues I run into a lot is how to use the “Full Height Section” with a header without the access height falling below the fold. (#2) Visual Composer calculates the space for you and adjusts the height accordingly, but Elementor doesn’t.

I have yet to find an answer.

-Sergio

Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

WP Resources

Recent Posts

10 Great Themes for Developers’ ResumesJanuary 31, 2023
  Ten Excellent WordPress Themes for StartupsNovember 29, 2022
7 Strategies and Tips to Avoid Mental BurnoutSeptember 27, 2022
10 Excellent Online Image Editors [2022 Version]September 15, 2022
10 Cool WordPress Themes for Dance StudiosAugust 30, 2022

Useful Stuff

  • Rife WordPress Theme
  • Rife Free WP Theme
  • Terms of service
  • Privacy Policy
  • About Us
  • Contact
  • Blog

We know that our clients are the key to our success and that is why we decided to make support as our strongest value.

Useful Stuff

  • Rife WordPress Theme
  • Rife Free WP Theme
  • Terms of service
  • Privacy Policy
  • About Us
  • Contact
  • Blog

From the Blog

10 Great Themes for Developers’ ResumesJanuary 31, 2023
  Ten Excellent WordPress Themes for StartupsNovember 29, 2022
7 Strategies and Tips to Avoid Mental BurnoutSeptember 27, 2022
10 Excellent Online Image Editors [2022 Version]September 15, 2022
10 Cool WordPress Themes for Dance StudiosAugust 30, 2022

Get news & promotions

Be the first to get info about new Designs, new features, and special promotions!
© All Rights Reserved Apollo13Themes - Wordpress Premium Themes.
We use blazing fast Kinsta hosting and you?