Elementor was designed with ease of use in mind. It aims to keep things simple and intuitive for its users. This isn’t at the cost of nuance however. Despite the fact that elementor is beginner friendly, there is much to learn to maximize the potential of the platform. It’s easy for a beginner to make simple mistakes that they don’t even realize.
Not Using an Appropriate Theme
The most common mistake is people using an incompatible theme. Elementor is designed with WordPress coding standards in mind. By virtue of this, any theme could technically be used with Elementor. In practice however, using a theme that wasn’t built for Elementor will cause a myriad of issues. Majority of the time, simply switching to an Elementor appropriate theme will resolve the issues.
There are plenty of themes that are built specifically for Elementor. Elemento Pro from greenturtlelab is a great option. Built from the ground up for compatibility with Elementor, you can be sure that Elemento Pro will work flawlessly.
Using Blank Elements for Spacing
The nature of WordPress lends itself to less code savvy web designers. It’s understandable if WordPress users aren’t too familiar with how HTML operates. It’s common for users to add empty widgets for columns to format the spacing on their page. While this technically works, it can be a detriment to your page.
Every element you add will add to your HTML code. The more HTML the page needs to render, the longer it will take to load those elements. While the additional code won’t be negligible when it comes to performance, your SEO could take major hit. Search engines will penalize you for having too much empty content.
A simple way to fix this is to make use of padding and margins. Making use of these options ensures you’re using as little HTML as possible. The padding and margins will affect the CSS of your page, leaving your HTML untouched. It’s a good rule of thumb to keep HTML for content, and CSS for styling. Another benefit is the reusability of the CSS for other parts of your site.
Editing Without Disabling or Clearing Cache
Pretty much every designer has had an instance where they made an edit and reloaded their page, only to find the previous version. What’s causing this is your web browser. For the sake of performance, your browser caches previous versions of your site so it doesn’t need to reload all the assets every time you visit. This is great for regular users but can get rather annoying for designers. The solution is to either disable or clear your cache. This will force your page to reload all assets on each visit. This will ensure that your page will always be the most up to date version of it. Using incognito or a private window is another solution to this issue.
Using the Wrong-Sized Images
It’s important to use images that are appropriately sized. There’s no reason for your site logo to be a giant, hi-res images. Alternatively, using a small image for the hero is equally problematic. Using an incorrect sized image forces the image to fit the allotted widget. This can cause many formatting issues and is generally an eyesore. If you’re a photography site with image galleries, consider editing the photos beforehand to uniform size. Not only will this make your life easier when formatting, it will generally look better. This should be the case for all images present on the site. A little bit of extra work upfront can save you a massive headache down the road. Ensure images are the correct size beforehand, rather than letting Elementor scale them up or down.
Not Setting Default Colours
Setting default colours will save you plenty of time. Rather than selecting the colours for every individual element, create a consistent theme throughout. Elementor has plenty of tools to take care of this issue.
Ultimately, the more you use Elementor the more comfortable you will get with it. It is however, important to think about where you can save yourself time and do things cleaner. Spending a little bit of extra time upfront can save you a great deal of time in the long run.