So I’ve been working (neck deep) in Elementor for about a year now, and as you might expect there’s a ton of things I’ve learnt over that time and a lot I wish I knew 12 months ago that I know now.   As I circle back on my first Elementor sites I cringe at some of the structural and toolset decisions I made but they seemed like the right ones at the time.

So without going on and on about it – let’s cut to the chase – here’s how I build Elementor sites these days – starting here is a very good place to begin if you build websites for a living and want to try a shift to Elementor.

Plugins

Everyone has their favourites right?   These are the ones I use:

• Wordfence – free, good basic firewall.
• Disable gutenberg – because it sucks, lol.
• Better Search & Replace – for dB updates when I cut live or change domains.
• Elementor / Pro – pro version is a must – it’s full of good features and things that free will make a hassle (theme builder features, forms and others).
• ElementsKit / Pro – I chose this as a toolset to build with.   To be honest, I think there’s about 4 choices here – Jetelements/Crocoblock, EssentialAddons, PremiumAddsOns and prob one or two other good ones (and a long list of mediocre ones).   Doesn’t matter all that much which you use but each have certain widgets that are very handy to extend default Elementor features – tip: turn off ALL the elements except what you use for best performance.
• Ele Custom Skin – this is a tool that allows you to create a post repeater (blog, custom post type) repeater object that the ElementorPro “posts” widget will then repeat on any page to create a really nice / flexible post repeater for any post type.   Here’s a blog post on how to do this.
• Ele Custom Skin Pro – the pro extension is handy if you want to make your post repeater into a sliding carousel but if you don’t need that the free version is fine.
• ACF – custom field support on post types and custom posts.
• CPT UI – custom post type support.   This plus ACF pretty much create an ability to create any kind of custom post type and just about every serious website needs some I find these days.   ACF and CPT UI work in really well with Elementor Pro now and provide a really fast / flexible way to build out post repeaters and custom layouts of just about any custom post.
• Insert Headers & Footers – simple plugin to add scripts but I’m moving to use Elementor native features here – you can push scripts in via elementor but I have been too lazy to invest the 10 mins to work out if it’s universal enough to replace IH&F.
• Make Entire Column Clickable – I used to use this to extend elementor but it’s unreliable with port repeaters so I’ve moved to using Ele Custom Skin’s “make entire post clickable” feature to replace this (more reliable).
• Yoast – for SEO.

Themes

I’ve tried a bunch of Elementor themes but in the end I’ve ended up building using Hello Elementor (empty theme that’s very compatible with Elementor – I use Elementor controls themselves to build the theme fonts, colours, layouts).    I also install the Hello Elementor Child Theme for good practice – keep my theme changes (which are rare and modest) outside the core theme arena.

I’ve found that the Theme Forest “Elementor Template Kits” are about half price of a full wordpress theme and most provide a nice set of Elementor layouts and better than choosing a native wordpress theme with Elementor support because the theme authors just take such a random set of choices.

In most cases these days I tend to just build things natively in Hello Elementor and end up saving a lot of time – but setting up lots of subtle animation effects and nice little style points is an area where the Theme Forest Elementor Template Kit is handy.

Build Process

There’s nothing super unique or interesting about how I build but good Elementor process and practice includes:

Invest time in getting your global fonts and colours setup right from the start – a global “White” colour and   “Black” colour are handy on top of whatever you main colours are.   Set your “Primary” colour to be that main colour your headings will be and make sure you set your “Text” colour up right from the start.

Similarly invest time in setting your global fonts up right.

Be religious about ALWAYS using global fonts and styles and making limited / modest use of overriding these styles in your page layouts.    Avoid having 5 subtle variants on a global style – go back to the designer and press them to standardise a bit if you see this being needed.

Heading nomenclature – I switch between a simple “Large Heading, Medium Heading, Small Heading” kind of logical naming convention and actually naming my heading styles “Heading 1, Heading 2, Heading 3” etc.   You can define global styles for these in Elementor > Site Settings > Typography – apply these to the theme underlying H1, H2, H3 etc – this config area is where the theme draws from if you are using for example the native wordpress editor for blog posts but Elementor for other page elements.

Setting up your link styles in the Typography area likely to be handy as you’ll use the elementor “Text Editor” widget which falls back on native theme styles for links and such.

 

Templates and Global Widgets – my use of this has evolved a bit over time and its a good practice to learn about this from the start but forewarning – you kinda need to get your head around it a bit to really get the full implications but I skipped learning in this area at the beginning (I’m impatient) and I later realised I could have used these features more effectively.

What am I talking about?   Well at first the ability to save a styled / adjusted widget as a global widget is great.  Saving Sections is handy and Saving page templates too.

These are all great things and these are the first / easy use of templates that you’ll make.

For me however, I ignored the Elementor Pro “template” widget for too long – and only started using this later in site builds.   This widget is where you can take common page elements like blog repeaters, or testimonials panels or things that you will use across multple places in the site – and instead of saving those as a template and just inserting a copy in lots of places (fast, easy) – actually use the elementor ‘template’ widget to add a centralised / single copy of the section – so you only have to maintain it in one place.   Takes a little mental gymnastics at first you’ll be glad you did this.   It’s the Elementor equivalent of building a true “design system” (Figma et al).

Make proper use of Elementor theme builder layouts ie single post layouts for blogs and custom post types, and all the other theme builder layouts.  Archive layouts for custom post archives important and handy – and also a bit of mental gymnastics to get it all placed in your brain in terms of how it works and get it running smoothly (at first this made my head spin), but again – worth the time investment from the outset to to get this all working nicely in WordPress.  Here’s a blog post with some video training on how to setup custom post type listings (uses theme builder layouts for the archive / single post)

Avoid over use of margins and padding – if you find yourself frequently setting crazy / random large padding and spacing around things – it’s a warning sign that you might not have the right structural choices in place.

Use Inner Sections as a way to keep logical areas of a page grouped within a section.   If a single logical section, ends up being built as 3 or 4 elementor “section” widgets – then you miss an opportunity to group things into a single (template-able) section.   Not always possible, but good practice I find.

That’s about it I think – I could write details posts on almost each of the individual issues and choices above but wanted to just write all this down so there is it.   Happy building in Elementor – and if you start with the above you’ll save months of learning and trial and error and no doubt you’ll make your own choices and prob better ones than I, with some experience.