• CMD/CTRL + E to navigate
• The Navigator – using, anchoring
• Keystrokes
• Set a default section and padding (160/80/40/20px) and use that throughout for consistency — low-tech solution – write down the margin rules for the site to refer back to at a later date.

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 Settings tip

• 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. 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.
• Add user roles for editing in Elementor (content only etc.)

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 using more than 2 different fonts that include multiple weights
• Avoid selecting different colours for each element with the colour picker
• Avoid using extra columns and spaces to control the positioning of a widget(eg different text boxes)
• Always open external links in a new tab
• 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

Plugin helpers

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