Building in Elementor – tools for the job

So I’ve been working (neck deep) in Elementor for over three years, and as you might expect there’s a ton of things I’ve learnt over that time and a lot I wish I knew 3 years 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:

  • Siteground Security – free, good basic firewall that works with Siteground and other providers.
  • Classic Editor – because let’s face it – Gutenberg is not great.
  • 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).
  • Crocoblock Suite – 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.   Initially I spent around 2 years working with ElementsKit and it was fine up to a point but about a year ago I switched to Crocoblock as JetEngine and its query builder and other features allowed me to take dynamic functionality and site features MUCH further and closer to precise client requirements.
  • JetEngine listings – part of Croocblock, this is a tool that allows you to create any kind of custom post repeater for blog posts, job listings, property listings or any kind of repeated post based data.    Here’s a blog post on how to do this.
  • ACF – custom field support on post types and custom posts.  I use ACF Pro for sites needing field repeaters or galleries.
  • 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.
  • Rankmath – for SEO.
  • TranslatePress – for any foreign language or translation work.

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 > Fonts.   Note: this is different from Elementor > Site Settings > Typography which is where you to the underlying default HTML tag 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 but its more important to get it right in the global fonts area and use those styles (and not HTML tags) to set your fonts.

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 Containers as a way to keep logical areas of a page grouped within a single section.   If a single logical section, ends up being built as 3 or 4 elementor “container” widgets (kinda like rows in your page) – 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.

 

 

 

 

 

 

 

 

Categories

Recent Posts