WordPress and Elementor Customisations
October 25th, 2022 by Pavithra Kameswaran
What is Elementor?
Elementor is a page builder solution that can be installed within WordPress, to provide efficiencies with regard to the build of a WordPress Website. The efficiencies are mainly with regard to implementing mobile responsiveness, and quickly implementing modern looking site elements. Elementor continually provides new user interface elements which are relatively quick to add to websites. For example, some of the more recent include:
- Animated SVG logos and icons
- Floating effects and blobs
What Options Exist for Customising Website Functionality when using WP with Elementor?
Many of the websites that we build for our clients require highly customised user interfaces. These customisations are usually around more complex data that needs to be presented and potential interacted with by the website visitor.
At times, the standard features available within Elementor and Elementor Pro can be limited. When this happens, we have a range of options to achieve the particular look and feel or functionality that is required. Below I have described the various options:
1. Work with the controls available in particular widgets
There are myriad controls provided by Elementor, from simple elements such as Headings, through to complex widgets such as a carousel, or a web form. Each widgets makes available for easy manipulation a certain set of features. These loosely fall into 3 categories: Content, Appearance, and Positioning. Positioning includes settings around mobile responsiveness.
Ensuring that you choose the exact right element, or combination of elements on a particular page, is important for ensuring fast loading of each web page.
Even though there are probably of 100s of adjustments per element, there are times when we need to do still more. That’s when we need to use one of the following alternate options.
In deciding which option is the best, it is vital to consider performance. The temptation with WordPress and with Elementor is simply to purchase another plugin to achieve your goal. There are plenty of plugins to choose from, and you can even purchase bundles of plugins that give you lots of potential.
However, with every additional plugin there is overhead:
- Each plugin adds more code to the website, thus reducing load speed and performance of the page. Poor load speed = poor SEO, which will negatively impact on how high in the search engine results Google is willing to show your website.
- Each plugin must be maintained – new versions of PHP, WordPress or other related plugins, may require an update to the plugin. Someone needs to manage the updates, and ensure that the updates don’t break another piece of functionality.
- Most plugins must be paid for, increasing your overall website cost.
Because of all these overheads, we ensure that we first seek alternatives other than just installing yet another plugin!
2. The HTML Widget
The HTML widget, as the name suggests, gives us a way to insert straight code, without Elementor getting in the way.
It can be used to display static tables, charts, etc. so that we do not need separate plugins/widgets to achieve these.
One of the biggest advantages is that we can execute Javascript within the HTML widget by wrapping the Javascript within <script> tags. We have achieved many features in our client websites using this method instead of opting for plugins.
Using Javascript gives us much more control over the functionality required for a particular website. However, certain types of Javascript or very complex Javascript code cannot be used within the HTML widget. For example, we cannot manipulate core Elementor Javascript operations such as the ajax functionalities. When such changes are required, we may require an additional plugin.
Javascript also gives us greater control for manipulating the look and feel of dynamic fields as well as introducing new DOM elements on the fly.
We have used the HTML widget combined with Javascript within the Raxo Website to enable the emailing of PDF urls when a website visitor chooses to download a catalogue.
3. Dynamic Values
We can add dynamic values to a website within Elementor’s standard Text Editor and Heading widgets. These widgets can be customised to draw in dynamic values which have been added using the Advanced Custom Fields plugin, as well as Site fields (Site Url, Site logo), Post fields, etc. When we use dynamic values, we can also specify the before and after attributes attached to each dynamic field, which can be used to add static data and even html code to prepend and append to the value being displayed.
An example is to add the copyright date dynamically to the footer. For this, we can use the text editor’s dynamic value called ‘Date’. The Date value displays the current date, and can be customised to display only the year or date in any format required. To display the copyright year, we will use just ‘Y’ within the Custom Value attribute for the Date dynamic field, and insert before and after text for the other information about the date. A footer created this way will always display the current year dynamically.
Another example is when we have a company that has several branches and we need to dynamically display the heading of the page as the relevant location of the organisation, such as ‘<location> organisation’. In such a case, we can use the Heading widget to dynamically add the Post title and the organisation’s name in the dynamic field’s After attribute. We can also add html tags such as <strong>, <u> and even <a> tags to add links to the dynamic field into these After and Before values. We employ this method within certain pages of the Kool Kidz Childcare website to reference various childcare centre locations.
4. Custom Queries
A common reason that webmasters add plugins into a WordPress website is to customise the set of information displayed within a particular area of the website.
This problem doesn’t actually require a plugin, if you know how to write custom queries, which are utilised by the various elements within your web pages.
In many use cases, we need to query posts in a way that is not available in Elementor by default. For example, sorting by custom fields is still not available by Elementor. Elementor allows sorting posts only by date or title. To achieve sorting by custom fields, we need to write custom queries. Custom queries can be used within the Posts widget which is used to display a list of posts in the appropriate order, and matching certain conditions.
Similarly, while search in WordPress and Elementor applies to the entire website, and although there are several search plugins that can search within particular custom posts, categories, etc., we can simply write custom search queries that will perform the search on not only the desired custom posts but also within the desired custom fields.
By writing our own custom queries (rather than using a plugin), we have better control over the custom queries, and we don’t need to worry about what happens when WordPress or Elementor update the widget in which we are calling the query.
5. Last Resort: Install a Plugin
As mentioned above, the biggest issue with adding more plugins is performance, as most plugins will cause significant additional Javascript code to be loaded into the website, which may or may not be used depending on the page, action, etc. The more plugins, the poorer the performance.
Plugins should be added with caution as support for some plugins might be stopped, causing trouble with later versions of WordPress. Plugins need to be kept up to date to ensure that they are not causing security or performance issues, and that they co-exist correctly with WordPress.
Upgrading plugins needs to be performed with care, as upgrades are sometimes incompatible with other plugins, or may may not have the same functionality as the earlier version of the plugin.
Summarising…
We love finding new ways to customise WordPress & Elementor websites, that don’t require yet another plugin! We are all about performance of our client’s websites, at the same time as providing beautiful looking interfaces that wow the visitor, and make it easy for the visitor to find exactly what they need. Helping you to shine!
by 
