X

Super Easy Elementor Tricks to Be Like A Pro

The Elementor website builder is gaining more and more popularity among website creators on WordPress. It is easy to work in and you can set up a site in a couple of hours without touching the code. It has so many tools and magic features. That is why I decided to share some Elementor tricks with you. 

This page builder has free and premium versions. Which one to use is up to you. In Elementor review you can find out more information to make such a decision. I am just going to tell you some Elementor tricks at both versions. 

The first 5 super easy Elementor tricks are suitable for the free page builder version. 

#1 Gradient button 

  1. Click on a necessary button and make it bigger for a comfortable adjusting.
  2. Find at the Style tab the Button configuration section.
  3. Go to Box shadow and pick a desirable color.
  4. Go to Position and choose Insert.
  5. Adjust the horizontal, vertical, blur and spread indicators to create a unique gradient button.

#2 Inline text styles

  1. Go to settings of Heading widget;
  2. Type words at the title input field;
  3. Wrap the word you want to change in angle brackets;
  4. To change the color write 

<span style=”color:#4B79B6”>your_word</span> 

  1. To change font-weight write 

<span style=”font-weight:800;” >your_word</span> 

  1. To change font style write 

<span style=”font-style:italic;” >your_word</span> 

#3 Negative margins

Adjusting negative margins, you can create an overlapping effect.

  1. At the column widget go to the layout tab.
  2. Change the Column width and see how it looks.
  3. Go to the advanced settings > margin.
  4. Add a negative margin to see how the columns overlap.
  5. Also, you can add at the top positive margins and at the bottom negative margins to make different designs.

#4 Vertical divider

This trick can make a more colorful and structural page design. Separating columns with vertical dividers help also to focus more on the text sections.

  • Go to the column settings -> Border settings.
  • Choose Solid at the Border type.
  • Then you can adjust the width and color of the desirable vertical divider.

#5 Parallax Image Scroll

This technology is gaining popularity more and more nowadays because it looks very cool. Many think that to achieve such an effect, code skills are necessary. But with Elementor page builder you can do it with a few clicks.

  • First, you need to go to the Section> Style tab.
  • Add a background image to the website page.
  • At the attachment tab choose Fixed.

Now, when you scroll your page, the image will stay still, creating a parallax effect.

#6 Neomorphism

This last Elementor trick suits only for the Elementor Pro version

The neomorphic look in the UI is getting trendy lately. This look is like a breath of fresh air combining flat design with old skeuomorphic principles. If you like to stand out among the crowd, you should try this trick.

I will show you how to apply this look to a countdown timer.

  1. Go to the countdown timer widget>Style section.
  2. Jump to the preview (click F12+Fn) and copy the exact CSS class of our countdown timer cards. Look at the picture below.
  1. At the Style section> Advanced>Custom CSS add our code.
  2. Change radius and width of the border, a background color.
  3. Get back to Advanced tab > Custom CSS and paste the code snippet below. 

.your-class {

    -webkit-box-shadow:

 5px 5px 10px rgba(0,0,0,0.1),             

-5px -5px 10px #fff ;

    -moz-box-shadow:

 5px 5px 10px rgba(0,0,0,0.1),             

-5px -5px 10px #fff ;

    box-shadow:

 5px 5px 10px rgba(0,0,0,0.1),             

-5px -5px 10px #fff ;

}

.your-class:hover {

-webkit-box-shadow:

  15px 15px 20px rgba(0,0,0,0.1),

 -15px -15px 20px #fff;

 -moz-box-shadow:

  15px 15px 20px rgba(0,0,0,0.1),

 -15px -15px 20px #fff;

    box-shadow:

  15px 15px 20px rgba(0,0,0,0.1),

 -15px -15px 20px #fff;

}

Watch the video for more detailed steps.

Useful Elementor Templates

We all know that Elementor is compatible with all WordPress themes, but some developers prefer to create their products specifically for this builder. I am not going to tell you about it, you can read it in our article 10+ Must-Check Elementor Page Builder Themes

There are also Elementor plugins and jet section layouts that help further expand the capabilities of the page builder by creating content and additional elements of the site. It becomes easy to customize blocks, all kinds of content, from menus to tabs and comments, to create bright and attractive posts, beautiful designs without programming skills. Check out our collection of the best Free Elementor Templates to help you get your next web project started in 2020.

There are tons of useful templates for different sections of websites too. I would like to share with you some ready-to-use templates from one of the biggest Elementor marketplaces. The collection includes more than 200 themes, plugins, and individual page templates. They are ideal for developers, designers, and businessmen who value their time.

I have picked 3 most interesting in my opinion templates to share with you. 

Picex – Pricing Tables Jet Sections Elementor Template

It is a set of pricing tables sections. On the demo, you can find 17 ready-to-use templates in different styles. You need just to import them to the Elementor and customize them with the help of Jet Elements.

Try out the template

Testiz – Testimonials Jet Sections Elementor Template

One more ready solution from the ZEMEZ design studio. The availability of testimonials builds a trustworthy relationship with potential customers. And a high-quality design shows your professionalism. This set includes 17 section layouts.

Try out the Template

Clokerum – Countdown Timer Jet Sections Elementor Template

A countdown timer can bring some fresh air to any landing page or e-commerce website. Use one of 10 templates that suits your web page design.

Try out the Template

To sum up

Using Elementor Page Builder is easier and much faster if you use templates, themes, and plugins designed specifically for this builder. In total, I covered 6 Elementor tricks and 3 design tools in this article. I am sure that they will help you create and design your Internet resources in such a way as to interact with your client as efficiently as possible. Also, check our quick review Divi vs Elementor and see why Elementor might be the better choice for you.

Be professional and learn something new every day. Good luck!