fbpx

3 Elementor tricks you need to build a better WordPress site

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
If you’re building your website on WordPress, you will definitely come to learn about the page builder, Elementor. It is one of the world most popular page builder according to WordPress.org, largely because of its superior user interface and top notch development experience.

If you’re unfamiliar with the term WordPress as well as Elementor and are unsure about what they do, please read the following articles first because coming back to ours.

Read : What is WordPress, explained for Beginners
Read: What is Elementor for WordPress

But today we are not going to share about how great Elementor is and why you should use it for your WordPress development. Instead, we would like to share with you 3 Elementor tricks that you need to build a more advanced WordPress site.

If you want your website to stand out and look unique compared to your peers’ website , this article is for you.

Key Takeaways

Elementor is an amazing page builder that non-coder can utilise to build neat looking websites in a short span of time. However, as your skill improves, you can further unlock Elementor's potential to its fullest capacity and build websites that doesn't even look generic. Here are 3 Elementor tricks that you can utilise to bring your website development skills to another notch.

(1) Incorporating popup into custom header to create full screen menu effect
(2) Hide the first child of accordion using custom CSS code so your items stay neat
(3) Utilising global widget to modify all the fixed element on your site

#1 OF 3 ELEMENTOR TRICKS: INCORPORATING POPUP INTO CUSTOM HEADER TO CREATE FULL SCREEN MENU EFFECT

Elementor trick : Popup menu Elementor trick
Instead of adding navigation menu, you can add a heading and then link it to a popup for full screen menu effect
Elementor, by default, does not have the option of displaying a full screen menu. That being said, it’s not like you can’t achieve the full screen menu effect. Here’s how you can work around it:

(1) First, create a header as how you would normally build one. But instead of using a navigation menu, using a heading instead.

(2) Within the heading, type in the following code:
Elementor trick : Typing in custom CSS code to display a menu icon
The code above helps you to create a list icon which acts as a menu button for your website
(3) Once you have typed the above code into the heading, you should be able to see a list icon within your heading.

(4) Now all you need to do is to create a custom popup which displays all your menu links. You can refer to the following image to achieve that effect.
Elementor trick : How to create a popup using Elementor
How you can create a popup using Elementor
(5) Once you have a popup ready, all you need to do is customising it. The idea here is simple, you want this popup to show up when people click on the menu icon. Find further instruction using the recording below:
And there you have it! A custom header that looks professional! With enough practice, you can even make many more different variant of headers.

#2 OF 3 ELEMENTOR TRICKS : HIDE THE FIRST CHILD OF ELEMENTOR ACCORDION TO KEEP IT NEAT AND TIDY

Accordion elementor trick
Custom code to keep your accordion closed by default instead of open.
Don’t you just hate the fact that Elementor’s accordion is opened by default? Well, you can actually keep it closed at all times!

Fix it just by applying the following steps:

  1. Duplicate your first accordion item.
  2. Type the following code within your CSS bar

/* Hides the first accordion item */
.elementor-accordion .elementor-accordion-item:first-child
{ display: none; }

Copy this entire code and paste it within your additional CSS
Accordion after the Elementor trick
Your accordion will now be neat and tidy at all times!
The trick behind is simple, with that CSS code, your website will keep the first content of the accordion hidden at all times.

It would appear as if it skipped the first child of the accordion, displaying your 2nd item as its first. Therefore, your accordion will look “closed” at all time!

#3 OF 3 ELEMENTOR TRICKS : LEARN HOW TO MODIFY FIXED CONTENT ON YOUR WEBSITE AT ONCE USING GLOBAL WIDGET

Elementor trick : Saving an element as global widget
Make changes to an element which can be used on every single page
Sometimes you want to be able to make changes which affects the single site right? Maybe you want to put a banner which display you latest promotion, sales or information…

AND YOU WANT THAT INFORMATION TO DISPLAY ITSELF THROUGHOUT YOUR WEBSITE!

There’s two ways to do it, either you add it in manually page by page and make changes everytime there’s any or….. You can use a global widget!

Global widget gives you the ability to make multiple changes across your whole site by just editing it once. So you can finally save yourself the precious time and put them on more important tasks instead.

Elementor themselves have an official document on it, read it here!

WANT MORE ELEMENTOR TRICKS? MAKE SURE YOU SIGN UP FOR OUR NEWSLETTER!

TO SUM IT UP

Elementor is truly the best page builder the market can offer today. Without even a single coding knowledge, one can build a website that is advanced looking and fully functional. But when you mastered it enough, you will be able to push the limits of Elementor to an even greater height, capable of achieving effects beyond what Elementor can do by default.

And learning them aren’t hard either, all you need to do is just spend enough time with this page builder tool and you will definitely get then hang of how to unleash its full potential.

But if all of these are too much trouble for you, and you’re looking to hire a digital agency and engage their services, make sure you read our article here first to avoid a bad hire.

Read: 5 red flags you’re hiring the wrong digital agency [2020]

If you want to read more of our articles, do check out our Knowledge Archive. If you want weekly updates on topics pertaining to life and business, do let us follow us on Instagram and Facebook

If you like how we write our article and would like to start a project with us, tap the link here.
Jin Chi

Jin Chi

The founder of Catalyst Digital. Born in year 1995, a huge fan of blue ocean strategy as well as lean startup. You can contact him by email at [email protected]

Advertisement:

Follow us on Facebook

Advertisement:

Web Hosting

subscribe to our newsletter

Join us on our journey to help more schools reach out to their perfect audience and make education transparent and accessible for everyone.

Exclusive marketing tips content
Free marketing e-book every 3 months
Free for a lifetime

Subscribe to our newsletter

Join us on our journey to help more schools reach out to their perfect audience and make education transparent and accessible for everyone.

Exclusive marketing tips content
Free marketing e-book every 3 months
Free for a lifetime