What’s great about WordPress is that there are many ways to create a great looking site. You can hand-code a site, or you can use a page builder (or use both). Elementor is one example of a page-builder available, and it is a tool that I started using when I started back into WordPress development, and it is a great tool for making professional-looking sites.
For a tool that has been available since 2016, it has surpassed the 5-million marker for sites using Elementor. So, if you’re new to Elementor, here are 8 Easy Elementor tips that you need to know. All of these features are available in the free version.
Animations
Adding a bit of flare and custom-loading to your site really does make the difference sometimes. And with Elementor, adding animations to your page-load or even to an element can be really easy-to-do.
Within the page that you are editing within Elementor, select a widget; for example a button. Select the advanced tab, and Motions Effects. This will allow you to animate the button element. So, in this example when the page loads, the button will slide-into the screen from the left. Neat, huh?
Shape Divider
I find using the shape divider element adds an extra bit of class and uniqueness to a site. If you have a landing page that is full of blocks of text, a good way to separate each block is to use a shape divider. It makes it obvious to the reader that the next block is different to the previous, and also makes it stand-out more.
Not only that, but they look pretty cool. They are easy to implement, but they might take a few more minutes to tweak to get exactly perfect how you want it.
Responsiveness
Mobile responsiveness is key to web development today, especially if you want users to view your site on their phone, tablet as well as big-screens and laptop.
Having a multi-responsive website is also good for ranking higher in Google, because having a site that renders well in various screens sizes is a key attribute for Google liking your site.
To test your Elementor site in various dimensions, simply select the monitor icon at the bottom of the Elementor editing side-menu. You will then be presented with three different dimension previews. Very useful for showcasing what your site will look like on a mobile, tablet or desktop screen.
If we feel that a certain element or widget does not suit a mobile screen, there is an option to hide it. Very easy to-do, simply select a widget, for example a button, and then select the Advanced tab, and Positioning. You will then see three options – all of which by default should be set to show on all screens.
Positioning
Staying in the Advanced menu is the Positioning menu. This allows you to change whether or not an element or widget is set to full-width, or what position styling will be associated with it:
Absolute, fixed or default. Changing the positioning to fixed or absolute does mean that you can change the offset for horizontal or vertical orientation. Playing around with the positioning could, however, result in the element not being fully mobile responsive.
Defining Layout Structure
Perhaps one of the easiest and most-obvious of the Elementor tips is choosing the layout structure for your web pages.
On your page you will see a plus icon (+) , select it and the press the other + icon. You will now be able to chose your layout block structure. This means that you don’t need to spend ages customising the CSS or HTML to get a section looking perfect; all it takes is a few clicks. There are twelve layout structures to choose from.
Theme and Global Settings
Whilst I did say that these Elementor tips are all available in the free version, the ability to add global settings is not. However, this option is available if you do purchase the premium version, and it basically allows you to create custom settings for your entire site such as the content width and height. Global settings also allow for an element to be edited once, and then have the same values throughout the site. For example, if you wanted all buttons to be blue, simply set the value in the global settings to ‘blue’ and every button will be blue. No more copying and pasting or individually amending.
The theme settings are just as useful and similar though and are available in the free version. You can set the site/theme font, adjust the content width, change the breakpoint for your site on phone and tablets, amend the page title and choose whether or not show or hide it.
Version Control
Occasionally we get a bit too mad with our creative endeavours and we somehow go from a ‘perfect’ looking site to something that looks ruined. And all it took was a few mouse-clicks one late-night. And you can’t remember what you did, or how you did it.
Luckily Elementor has an undo feature – which is a lot the feature on your word processing software. However, you can also make changes you have submitted the update button. In the Elementor menu, there is a version control tab and this allows you to ‘go back-in-time’ to a change where you are happy going back to. A very handy and useful addition.
Free Premium Add-ons
So, if you don’t feel like purchasing the full version of Elementor, you can, however, add plugins from the WordPress Plugin Library to your site and once activated will add additional widgets to Elementor. Ironically, there are premium additions to these plugins too. But, none the less, I have found the Essential Addons plugin very useful, regardless if you are using the free or premium version.
Get started with Elementor, today and try this useful Elementor tips on your next site.
To learn more about web development and WordPress, check out more posts at JoshLister.com/blog
