If you have invested time and money into a beautiful Elementor web design, you don’t want the simplest of edits or some new content to undo all of that hard work.
There are common pitfalls and errors even the most well-intentioned marketer or content creator can make. This article is here to signpost frequent mistakes and arm you with the knowledge to avoid a mishap that can send your whole site into a spin.
Elementor is a highly intuitive page builder for WordPress websites. The drag and drop editor gives you complete free reign over your website design down to the pixel. With Elementor you can hire an agency to build your site, but maintain control of editing and content uploads, or build the whole site yourself. For us at KIJO, Elementor web design offers such superior functionality and user experience compared to other page builders that we use it in all our website designs.
Another bonus is that it doesn’t require any coding knowledge to use it. Elementor has always been built with usability in mind. This is great news for our clients and marketing managers, as it means they remain in control of day-to-day edits and content uploads.
Having said that, Elementor is a sophisticated piece of software and there is a learning curve to getting it right. While changes can be made in house, you should be aware of these common mistakes before you start.
The theme you use for your WordPress website dictates the overall visual design and is a huge change to implement. Themes will already be set if you have used an agency to design your site. If you decide to change it yourself, be aware that not all themes are compatible with Elementor. When this is the case you may experience problems when you begin editing, from difficulties adjusting space and changing titles and headers to trouble moving widgets around.
Fortunately, there is an easy solution to this. Firstly, you can revert to your previous theme. Secondly, if you are keen to change the visual styling, many themes work perfectly with Elementor. Your web design agency is an ideal source of information on this. They will have used countless themes and can suggest what would work best for your site. Trusted, compatible themes frequently used alongside Elementor include the Hello Theme, Generate Press, WPAstra and OceanWP.
While this may not spell disaster straight away, continue editing like this and you will slow down your site and impede your search engine ranking.
Using blank columns and spacer widgets is a common, yet incorrect, way to design your page layout. You might get the look you’re going for, but it will come at a cost. Spacer widgets and columns add a lot of empty space to your web page, which essentially dilutes your web page content in the eyes of search engines. Over time, this will adversely affect your search engine rankings. Unnecessary spacer widgets also add bloat to your code and wreak havoc for responsive sites. Overall, this is not a great way to go about things.
There is an alternative. Elementor has designed padding and margin features specifically for this purpose. Padding means space inside the frame, between the frame and the element. Margins are the space outside the widget frame. Search engines don’t mistake these settings for blank content, so it won’t affect your SEO. Padding and margins also keep code to a minimum, which leads to faster loading times for visitors. Setting these parameters is easy. You can even copy and paste your spacing settings when you use the Paste Style option to save time.
Content creators very often upload images that are too small or too large for their intended purpose, then alter widget settings to force them to fit. Similarly, marketers sometimes add images of all different shapes and sizes, when they all need to sit within the same image gallery or carousel. Widget settings can only do so much to help here. They cannot improve the quality of images or optimise the file size.
In this case, there’s no easy substitute for astute organisation. Plan so that you know the size and dimensions required before you begin to source your images. Sketch and Photoshop are great tools that can help you edit your images before you upload them to your website.
Don’t neglect file size either. While they look great, high-resolution images always make for longer loading times and therefore higher bounce rates, exactly what you don’t want. Use free file compression tools, such as OptiMole, to reduce the file size before uploading.
When you edit without clearing cache first, you could put in hours of work only to find that nothing has changed on the front-end. Caching is when frequent data requests, such as popular pages of your website, are stored so that they can be loaded quicker. It reduces the number of requests to your server and speeds up your website’s performance. All cache systems held on your host server, including browser cache, cache plugins and website cache, need to be told when you’re making changes to your website. If they aren’t informed, they will keep serving up old pages.
It’s easy to simply refresh the browser page, or pop into browser settings and delete the cache. The same goes for plugin settings for caching tools such as WP Rocket or WP Fastest Cache. You can disable them from the WordPress dashboard before you start editing. It’s also possible to go into your plugin settings to clear the plugin cache if you forget to deactivate it beforehand.
When text is copied and pasted from another source, such as a website or Word document, it comes with all of its inline formatting, too. Even if you can’t see it yourself, that formatting can still be hidden within the HTML. This unnecessarily bloats your code and leaves you with unwanted text formats. It’s important to clean up your code before you introduce it into your website editor. That way you have clean text that you can edit afresh.
Copy the text you want to include as usual. Then, in Elementor, go to the text box toolbar where you want the text to appear. Expand the Toggle box to find the ‘Paste as text’ option. Click this and, when you paste your text, it will appear free of any previous formatting. Watch a video tutorial on how to paste text directly into the editor and achieve this in less than a minute.
If you have added new plugins to your site and then find Elementor isn’t working as expected, the chances are it’s an incompatible plugin causing the problem. Elementor is built to work with most plugins, but this isn’t the case 100% of the time. For the best chance of compatibility, source your plugins from a reputable provider, such as the official WordPress Plugin repository.
To identify which plugin is the source of the issue, there’s a simple process you can follow. Firstly, deactivate all of your plugins except Elementor and Elementor Pro. If everything is working just fine after you’ve done this, you know it’s a plugin problem. Next, you’ll need to check each plugin. Reactivate them one by one, checking the Elementor page builder each time, to find out which one is conflicting.
Most sites these days use HTTPS, which is a secure extension of the older HTTP website protocol. To keep websites secure, you can only link HTTPS sites with other, equally safe sources. Links to less secure HTTP pages or files won’t work.
If you find a link or image is broken, check the source URL. If it’s HTTP then it won’t work, and you will need to find an alternative from an HTTPS source.
If an agency has designed your WordPress website, they will have set default colours. Users can often forget this when editing content and try to find the nearest colour match. Selecting the default colours keeps design consistent across the site and saves time, as you don’t need to manually input the colour each time.
If you add a new element, make sure you use your site’s default colours to keep things consistent for the viewer. If you are designing your site yourself, set these colours at the beginning and save yourself the trouble later.
Even with the best intentions, team members can cause more damage than good if they have access to tools they don’t know how to use. An easy way to minimise the risk of Elementor mistakes is to reduce the number of team members permitted to use the software.
WordPress Role Manager lets you allocate specific Roles to each team member. WordPress has created 6 pre-defined Roles, each with a set of Capabilities. Site owners can then add or remove further permissions as required. However, this tool is designed primarily with publishing in mind.
Elementor Role Manager delivers the same functionality tailored to design and development needs. You can provide access solely for content editing or limit Elementor use altogether.
Elementor has been built since day one with ease of use and user experience in mind. Having said that, there’s still a fair amount to get your head around, as with any new technology. While it’s useful to know how to add content and make minor edits yourself, it’s often in your best interests long-term to hire an agency to handle the bigger changes for you.
If you hired a web design agency to build your website in the first place, then they will already know their way around your site. Any major changes will happen as quickly and as seamlessly as possible.
Even if you designed your website yourself, agencies can provide much needed advanced Elementor web design expertise. They can help you clean up and re-design your site so that it’s visually consistent and performing optimally.
Outsourcing is always a matter of weighing up time, money and expertise. With a little research to hone your skills, it’s easy to avoid or resolve small mistakes covered in this article. Bigger jobs come with larger margins for error that may not be as easily rectified. If you’re unsure, turn to the experts.
We have been designing bespoke websites for business for years and use Elementor every time. Should you need help making important website changes or want to start from scratch having seen the design freedoms Elementor provides, the KIJO team can make it happen, simply contact us today.
