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.

src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />

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.