This post is part of a series on how we built our website. In Part 1 we provided insights why we started a redesign of our site in the first place, and what the process looked like. In Part 2, we focus on the GeneratePress theme and how it plays together with Elementor. This is Part 3, the focus of this post is on Elementor, sharing all the learnings made while building this site.
Imagine this: A designer handing you a web design in photoshop, and you can implement the design on your website without writing a single line of code, just by using visual design software. That’s the promise page builders make. The concept of WYSIWYG editing (What You See Is What You Get) is as old the internet, but it seems in the last 2-3 years we have made tremendous steps to finally get there.
This post is about Elementor, a page builder for WordPress, that allows you to do exactly that.
Back in 2016 I wrote about Elementor:
Quickly building landing pages is often a requirement for digital marketers. In the last few years, the tools and apps supporting this task have become better and better. Elementor is a WordPress plugin that adds a page builder functionality to your existing WordPress theme and allows you to do exactly that. If you are used to working with WordPress and have been involved in website projects in the past, you will quickly feel at home in Elementor.
Back then Elementor was the new page builder around the block, now it is a very well known player in the WordPress community.
I have spent many hours in implementing a design created by one of our freelancers, without writing code. Here are my learnings creating our agency frontpage using Elementor.
Keep Responsive Design In Mind From The Beginning!
Constantly switch between Desktop and mobile editing early on in your project, or even try to concentrate on mobile first.
Why? First, because Elementor is not very good at translating the desktop settings of your site to mobile. (i.e. paddings or margins of your desktop settings). You may be surprised how your page looks like if you switch to mobile view for the first time after finishing the desktop design.
Second, Elementor offers many cool styling features that may look great on desktop or tablet, but not so much on mobile. Examples would be
- Background Image
- Background Overlay
- Shape Divider
- Entrance Animation
You should use these styling elements, they can make your site very unique! Just don’t exaggerate when using them or combine all of them in one section.
Use the Hide & Show Responsive Option
This directly relates to the previous paragraph about making your site responsive.
If you run into the problem of having a really cool design idea for your page, it might happen it only looks cool on the desktop or tablet version of your site. You can create a separate “light” version of the element for mobile, and use the advanced responsive settings on the element depending on your
We do that for our page hero on our site. There was no way in displaying the two-column layout in a way that it looks cool on mobile too.
For our page hero on our homepage, we use a lot of advanced settings to design the element. Background image and background overlay on section level,
There was just no elegant way to get the same element displayed on mobile with the same style details. So we decided to create a simpler version with less complicated design for mobile. The following section is a one-column layout, and uses the “hide on
This is of course only recommended for elements that are pretty static on your site. For content that needs to be updated frequently stick to one design that works well on both mobile and desktop.
Set Paddings & Margins On Sections And Columns Only
Paddings and Margins are used all over a website for spacing between elements. With Elementor, you can edit these settings on all levels on your site, which is really powerful.
- Content elements like Headline, Text, image, …
Whenever possible edit these settings on section or column level. Why? Its easier to customize for responsive behaviour of your site later on. In most cases, margins and paddings on column level will do the trick.
We wrote a detailed post about working with padding and margins in Elementor. Check it out!
Use the Copy Style Function
This feature is not around in Elementor for very long but vital when building a site. It relates also to the previous paragraph here about paddings and margins. The copy style feature is a great way to be sure to get a consistent design across your page.
Working in Elementor is a click and scroll marathon anyway, try to take shortcuts when possible!
Global Widgets Are A Real Time Saver
Every website has content elements that are used on several pages on your site
The benefit of Global widgets is that once defined they can be re-used on any page in Elementor. You can edit the global widget and it changes on all sites the widget is used on or decide to unlink the widget and create an independent version of the element.
On our site, examples for such a global widget would be the call to action section at the bottom of our client portfolio pages and the contact form.
Basic Form Needs Are Covered!
Nearly every website uses forms to collect customer data. Elementor comes with a forms widget that covers all basics, including the option to specify a width for each form element. This feature might make installing a plugin for just that task obsolete.
Check Out Pages and Block Gallery
The reason why you have chosen Elementor to build your site with are the cool templates available. If you are interested in a specific style you can import a page or block and take a look (and use the copy design feature to immediately apply the style on your component).
I also recommend using templates for your own site. Finalize one page of a category (i.e. the design of a client case study, a product detail page), test it on all screen sizes and then save the page as a template. Final means with real content.
I am used to getting great support from WordPress theme developers. Both the team from Enfold and GeneratePress have been excellent at this. They are going the extra mile for making your experience using their themes awesome.
With Elementor, there is no official support forum to post questions too. The comparison might not be fair: Elementor is a design tool and you can start out on a blank canvas, you can create your very own theme with Elementor. This opens the door for endless questions. When is a question still a support question, when is it about the design of a site and you should figure it out yoursefl?
There are Elementor docs you can read, but most support comes from the community itself. YouTube videos on Elementor, and Facebook Groups.
I am not a software developer, but I imagine that developing a web app like Elementor is a complicated project. During many hours of editing I never experienced glitches, or lost work due to crashes of the editor or anything similar.
Should You Use Elementor Pro?
Are you building a page for a business and have plans to constantly edit, update and add content to the site. In short, is it a site that is crucial to your business? Then go with Elementor Pro!
You may start out using the free version of Elementor and switch to the Pro version later. Nothing of your settings or content will get lost!
Bonus Content: We are using the following Elementor Pro components:
- Flip Box – for the work section on our frontpage
- Posts Widget – on our frontpage and all /blog pages
- Testimonial Carousel – on our workshop page
- Theme Builder – for designing our /blog pages
- Share Buttons – on blog single posts
- Pop Up Builder – for promoting our newsletter and WordPress services
- Template widget – for re-using sections
In general, we are happy with our decision to use Elementor to design our website. We created lots of landing pages for clients based on the Enfold theme in the past, that might finally change this year as Elementor offers way more possibilities. Keep in mind that Elementor is still a young product and new features are constantly added.
Considering that Elementor Pro comes with a Theme builder, and the ability to conditionally show the various elements on whatever page you want, I’m wondering what the real benefits of using GeneratePress are?
Basically , what is the point of GeneratePress? Can’t you just do everything with Elementor Pro?
Hi, yes, you can do everything with Elementor. Recently, they launched there own theme called “Hello Theme”, which you could use.
Or you could use any theme and select “canvas” as page layout, and design everything in Elementor.
We prefer to manage the basics in a separate theme, like navigation and footer, and apply some basic style settings via the classic WordPress Customizer. In our case with GeneratePress.
In addition, you can use the Elements feature to add hooks, see http://share.freshvanroot.com/ASbMvV
If you are the only editor, you could do everything in Elementor, if you are working as a team with Elementor everybody can change everything.
Another question to ask is if you are planning to create 50 pages in Elementor or just 3-4 pages – Depending on your answer having a separate theme can add overhead in managing the site or ease things.
I am working on a blogpost about how to re-use components in Elementor – I think it has limitations for larger websites, especially in the area of permissions (not every user with access to Elementor should be able to edit the navigation, or unlock a global widget, etc.)
Your videos are broken, and I was really hoping to learn how you did the vertical slanted divider in your hero space
Hi Max, just scrolled through all videos in this post and found no problems.
Regarding the hero – play around with background settings and background overlay / divider settings.
videos are broken indeed in safari.
Hi Jochem, thanks for pointing that out. I checked in Safari and was able to replicate the issue. Will take a detailed look. In the meantime, please try with Chrome or Firefox.
How did you do the shape divider for a column (blue angled over image)?