Elementor Tips

Know about Elementor

Elementor has rapidly gained popularity as a leading website builder, captivating the attention of web designers and developers worldwide with its intuitive drag-and-drop interface and extensive design capabilities. With its robust functionality and seamless integration with WordPress, Elementor has become a go-to tool for creating visually stunning and highly functional websites, allowing users to unleash their creativity and achieve professional-grade designs.

Here is some small tips using Elementor:

User Preferences

• Turn on Editing Handles.
• You can change the panel width.
• You can change from light/dark/autodetect in the editing theme – you could also do this via CSS!
• Enable/Disable Lightbox in editor.

Site Setting Tips

• Set up Lightbox.
• Don’t set up link typography.
• Global fonts and colours are a must for consistency and efficiency.
• Limit use of plugins—Elementor keeps adding features that negate other plugins—keep up to date with new features via their newsletter!
• Sometimes a simple change to a function file will negate the use for a whole plugin— Documentation on Elementor’s site.

Page Setup

• Build one page and then use that as a template for all other internal pages.
• Use inner sections within a section to build rows of columns.
• Save a section as a template and use template widget to edit globally.
• Steroids for Elementor plugin is also great.
• Build as much of the site as is possible with templates.
• Add user roles for editing in Elementor ( content only etc. ).
• Especially if the client will edit it. This will improve efficiency and consistency! Try and get it so the client makes all their edits via Gutenberg / custom fields. Side note—this will make the build efficient but remember to write documentation as it might be confusing to go back to several months later.

Design Tips

• Use styling options to make sections more interesting – shape dividers, motion effects etc.
• Overlay images are easier to style than background images.
• Avoid selecting different colours for each element with the colour picker.
• Avoid using more than 2 different fonts that include multiple weights.
• Avoid using extra columns and spaces to control the positioning of a widget(eg different text boxes).
• Copying styles in sections and widgets.
• Less is more. Try and stick to a handful of font styles and colours – this is where global fonts and colours can really help. I could show some brand guidelines from various companies?
• Keep useful functions/css tricks/other things you use often in a note-taking app.

Mobile

• Using different headers for mobile and desktop – can set display using Advanced > Responsive.
• You can use a popup for an ‘off canvas’ slide in menu.

Page Loading

• Avoid lazy lazy load= motion effects + caching plugins + image optimisation.

Updates

• Use dynamic tags in the header for the footer date and copyright – using the dynamic options for Current Date Time and custom date for year.

Plugins Helper

• Flexible Elementor Panel – allows you to exit the editor to the page in one click.

Here are a few small tips for using Elementor, so that both new and experienced users can make the most of its features and utilize Elementor more effectively.