1. Make sure to add your theme style settings before you start building
When you start building your website in Elementor, you will quickly realise that all of the widgets you insert into your page will use the factory default Elementor style settings. While this is not a major issue as you can manually change these settings, it can quickly become a tiresome task when you are changing the font family and colour for the 100th time across every text box and heading you add.
Fortunately, Elementor contains some handy options that allow to you change the styling that your widgets default to when they are added to your page. You can find these by selecting the burger menu at the top left of the editor sidebar, then choosing site settings in the following menu.
From here, you will be presented with a list of styling options for various elements such as headings, body text, buttons and images. Simply adjust these options so they suit the design of your site and these will become the new default settings that are used when you add new widgets to your pages.
It seems like a small change but this will ultimately cut down on the amount of time you spend fiddling around with font and button styling settings and allow you to spend this time elsewhere.
2. Use the position controls to align widgets next to each other, rather than just section columns.
An obstacle that will often pop up when you are figuring out the layout of your page is horizontally positioning widgets next to each other. At a glance, it seems like an easy task to achieve, right? Just add a section and insert a bunch of columns into this section to contain each of the items. Well, not exactly. Using horizontal columns can work but it is not always a suitable way of achieving this.
The drawback of Elementor columns is that you have restricted control over their width. They do not allow you to select a fixed width value (i.e 500 pixels wide), only a percentage. This is not good if you are trying to align your widgets horizontally with a fixed amount of distance between each of them. Placing them in columns with a percentage width will cause your widgets to appear too far apart on larger screen sizes.
To prevent this, you can make use of Elementors position controls instead of relying on stretchy columns. Located under Advanced > Positioning in the widget settings, here you can swap a widget to an inline width rather than full width (which it defaults to).
With inline, the widget will be able to automatically position itself alongside other inline elements as long as the section is sufficiently wide enough to contain them on a single line. You can then add left or right margin to add spacing between these inline widgets. With this approach, it no longer matters how wide the screen is, your widgets will retain the same amount of spacing between them.
3. Save time by converting your widgets into globals
Have a widget that you utilise across multiple pages on your site? Consider converting this widget into a global so you can bulk update the settings for this widget sitewide in the future. For example, let’s say that your 10-page site contains a series of contact forms that are displayed at the bottom of every page.
The normal approach would be to manually create and configure these forms individually across each page. However, if you wanted to update the recipient email address for these forms in the future, you would have to manually edit all 10 forms across each page separately. This would be a long-winded process and can lead to inconsistencies between the forms.
To avoid this, consider creating your form then saving it as a global widget. This can be achieved by right-clicking on the widget and select “Save as Global” in the menu. Give your global a name and you are good to go!
In the future, when you need to add your form to a page, you will be able to find it listed within the global tab in the editor sidebar so you can drag and drop it onto your page. If you edit your global form in the future then your changes will automatically apply to every instance of this global across the entire site.
4. Don't forget about your 404 page!
A 404 page is the page that is presented to users that find themselves on an invalid URL that doesn’t exist on your site. In an ideal world, users will never be able to find themselves on an invalid page but unfortunately, it is impossible to prevent entirely. With this in mind, it is important to consider creating a functional 404 page that can direct users to the rest of the site.
Fortunately, Elementor can assist with this as it provides you will the ability to create your own custom 404 pages. To do this, you can select Templates > Theme Builder in the admin area (see below).
From here, select the tab for Error 404 pages and create the new page. Here you will be able to use the Elementor editor to construct your 404 page. There are even a few pre-built templates you can use to get you started. When saving your page, you will be asked to select the display conditions for your page. In this case, you will want to select “404 Page” from the list of options.
Now in the future, if a user finds themself on an invalid page, they will be presented with your fancy 404 page instead of a blank screen.
