Do you want to create a new website or blog using WordPress? WordPress is one of the best CMS to create websites of all kinds.
But how does the design of your new website work? Do you absolutely need a page builder like Elementor to customize the design of your website?
In this article, I would like to give you helpful tips about web design and show you different options on how to best customize the layout and design of your website and which are the best tools to work with.
Why do you need a page builder for your website?
A so-called page builder is a plugin for your WordPress website that allows you to customize the design of your website according to your taste.
With a page builder you can design your website or landing pages according to your taste and add images, text or forms.
The most popular page builder plugins for WordPress are Divi, Elementor, Beaver Builder. The basic functions of these page builder tools are mostly quite similar. Usually only the design of the page builder differs.
The two page builders, Divi and Elementor, are the most modern and extensive page builders. These page builders are so-called WYSIWYG (What You See Is What You Get) page builders.
You need one of these page builders to realize complex web designs, which would not be possible with the native WordPress page builder tool, Gutenberg, to this extent.
What advantages does elementor offer as a page builder?
Elementor is one of the most popular page builders for WordPress. The website builder plugin is one of the most popular WordPress plugins with 5 million downloads. With Elementor it is possible to visually create entire websites without HTML, CSS or other programming knowledge.
What is Elementor
Elementor is a page builder for WordPress. The special thing about it is that Elementor is not a theme but is installed as a plugin. So you still need a WordPress theme. Don’t worry: there are now many themes that are optimized for Elementor. More precisely, most of the free and premium themes allow the use of Elementor.
With Elementor you can create entire websites quickly and easily. You really don’t need any knowledge of CSS or HTML for this. Really everything imaginable can be set using the visual page builder. Due to a very intuitive interface, Elementor is very clear and therefore also very suitable for beginners.
I particularly like the live editing. That means you change a color, value, etc. and see what’s happening and how it all looks directly on the website. Particularly interesting when using your own CSS: 90% of the CSS code is also displayed live. This allows minor CSS changes to be made without updating the website multiple times. Did you just understand the train station? If you don’t want to apply any CSS code, you can style everything visually in the drag-and-drop page builder.
All setting options are semantically separated (content, style & advanced) and work relatively the same for each widget (module). So you don’t have to learn every module in Elementor. Accordingly, getting started with Elementor is particularly easy.
It is worth mentioning that Elementor comes in a free version and in a pro version. The free version of the plugin already offers many functions.
The advantages and disadvantages of Elementor
Even if it sounds like Elementor is the swiss army knife of WordPress page builders. Unfortunately, the page builders do not only have advantages. Nevertheless, the advantages of Elementor outweigh the disadvantages – at least for beginners). Here is a list of the Elementor advantages and disadvantages.
Elementor benefits
As you have already read in the introductory text, it is possible to create a great WordPress website with Elementor without any programming knowledge. Compared to other page builders for WordPress, I find the editor to be the most intuitive.
The setting options also offer everything you need to create a modern and clean website. I think the Elementor advantages speak for themselves:
- Visual creation without coding: Even a WordPress beginner can easily click together a website. All changes are immediately visible and the countless clear setting options for the elements leave nothing to be desired.
- Global elements: If you have elements that should be the same across multiple websites, the global widgets are the most powerful tool you can use. And if something should change, you can update several subpages with one change.
- Customize everything with the Theme Builder: The Theme Builder ensures that Elementor’s popularity is hard to beat. This allows you to customize headers, footers, blog posts, etc. directly via the page builder. You can assign these to the respective subpages via conditions.
- Many setting options for the elements: With other page builders you have to work with CSS again and again – because not everything is adjustable. With the Elementor Editor, those days are a thing of the past.
- WooCommerce integration: Elementor is particularly interesting for online shops. Now it is also possible to customize individual product pages with the page builder. This will also increase your conversion in the e-commerce sector
- Built-in Marketing Tools: Whether you’re looking for an exit-intent popup or want to create a form. Everything is natively integrated into Elementor. In connection with the global widget function, you get a powerful marketing tool – directly in Elementor.
- 90+ widgets: Elementor Pro comes with everything you need for a modern website: testimonial section, slider, carousel, accordion, etc.
- Parallax scrolling makes scrollytelling possible: With the various really cool motion effects you can create a great scrollytelling page. However, Elementor does not stop here with parallax scrolling: Blurs, X-axes, Y-axes, etc. can be adjusted depending on the scrolling (also via offsets). This is how you create emotional WordPress websites.
- Many addons for Elementor extend the functionality: Many developers jump on Elementor and program additional widgets (elements) that you can easily install. There are countless new elements that help you to make your website even more unique.
- Template kits: You can start with a complete website layout with just one click. All images are even imported directly into the media library. This allows you to create a website in under 4 minutes.
Elementor cons
The disadvantages of Elementor go hand in hand with the fact that it is a page builder:
- Creating complex websites easily – a paradox: Even if it is possible to simply create a website, the craft of the web designer has not even been learned. User guidance, design principles and usability are not automatically achievable with the page builder, but the result of a long-term learning process.
- Increased loading times: Even if Elementor does everything right here, the many functions have to be accommodated in the code – and inflate it. As a result, a page speed score of 100 cannot be achieved that easily with the Elementor plugin. Still, it’s possible to end up here in the upper 90s with Elementor — just not quite as easy as creating the website.
- Lock-in effect: Every page builder binds the user to the system. This means if you use Elementor you are trapped. A change will not be easy – since content has to be copied manually from the live editor to the new theme. This is why it is called the lock-in effect. Luckily, the Elementor developers have recognized this and leave largely clean, readable code behind after the uninstall.
- No lifetime licenses: Unfortunately, there are now no Elementor lifetime licenses. That means you pay per year (or waive important updates)
Elementor Pro vs Free
Elementor is available in a free version and in a pro version. While the free version of Elementor comes with a number of functions, the Pro version is the flagship among page builders. I explain below when you should consider the Pro version.
The free version of Elementor offers you the following functionalities:
- Drag and drop editor
- Responsive design
- Landing page builder
- Restricted modules (widgets)
The Pro version includes in addition to the free version:
- Premium support
- Motion Effects & Scrolling Effects
- Many more modules (widgets)
- Forms
- Pop ups builder
- Different call to action buttons
- Theme Builder (build your own footer and header with the Page Builder)
- Many more functions
In general, you can already build conventional, small to medium-sized websites with the free version. If you want something more, I recommend the Pro version. Here (also in terms of design) very complex pages are possible, which will leave your visitors amazed. Likewise, you can also check out the many free extension plugins that you can find in the WordPress plugin store.
If you are looking for a specific feature that the free version of Elementor doesn’t offer, you should first search if you can’t find a free extension plugin for Elementor that offers this feature.
The Elementor functions at a glance
We’ve already heard a lot about Elementor’s great features. This section is specifically about the individual functions and what you can do with them.
The drag and drop page builder
The heart of Elementor. The drag and drop builder is a visual page builder. You can easily click together your website using the modular principle.
When creating the website, you start with the columns and pull the respective widgets from the Elementor library. Incidentally, columns within columns are also possible with the drag-and-drop builder. Distances can simply be specified by numbers.
If the respective elements are in the side area, you can click on them and the options for the respective element will be displayed. Here you can then adjust everything.
The options for the respective elements are clearly arranged in tabs. This way you always have an overview.
By the way: The same settings for the different widgets are usually in the same place.
Global colors and fonts
Especially time-saving: You can define global colors and fonts in the general settings of Elementor. If you decide to use a different color when designing your website – simply change it under Global Colors and the new color will now shine across your entire website.
The same applies to the fonts. Does your current font no longer fit the overall design so well? No problem! With one click you change all fonts globally.
Template Kits: Build Elementor Website with Templates in 4 Minutes
With the website template kits, you can import design templates for entire websites with just a few clicks – including for different subpages. ThemeForest Market offers thousands of templates and website templates that you can also edit with elementor.
If you are just starting out with Elementor, template kits like this are especially good for learning Elementor. Here you don’t start from scratch, but see how others use the widgets to create great websites.
The Elementor pop-up builder
A relatively new feature is the pop-up builder. This makes Elementor increasingly interesting for online marketers who used to work with Thrive Architect.
Not only simple pop-ups can be created here, but also exit-intent pop-ups, form pop-ups, sales pop-ups, etc.
Pop-ups can also be created globally. For example, if you want to embed a newsletter popup across your entire website, you can benefit from this feature. It is also possible to display the pop-ups only in the blog or only in certain categories in the blog via conditions.
WooCommerce builder
Another benefit is the WooCommerce Builder. In principle, this is nothing more than the Theme Builder for WooCommerce. With this you can also design your product pages variably and visually in the drag-and-drop builder. This is a great relief, especially for e-commerce users.
With this feature you can click together your individual product pages as well as the overview page of your products (i.e. the shop page) using drag and drop. Elementor offers you all the widgets from WooCommerce that you need for this:
- Shopping cart button
- Product price
- Product Title & Description
- Product pictures
- Upsells
- Similar products
- Product rating
- Product content
- Product data tabs
- Meta and additional information
- Breadcrumbs
- Inventory
Landing page builder
This Elementor feature is aimed primarily at online marketers. The landing page builder is based on the theme builder. This means that you set up a template once and can then use it for your landing pages. With the landing page builder, the developers have drilled the functionality again. As a result, Elementor also becomes a competitor for the online marketing-oriented Thrive Architect.
The Elementor theme builder
The theme builder is another the reason I use Elementor. This makes it possible to create general templates for blog posts, product pages and other templates for WordPress. You can also visually design the header and footer in the drag-and-drop Live Editor. With the so-called conditions – i.e. conditions – you determine exactly where this template is displayed.
With the Theme Builder you can create your own theme. Because normally you can only create pages, posts and sections with a normal page builder. You can also use the Theme Builder to create WordPress-specific elements. You are no longer limited to just any header templates, but can create anything you want – without a single line of code.
Global widgets
With the global widgets it is possible to create general sections or elements. For example, you design a pop-up, a button or an entire section once and can integrate it into your website again and again.
Where does all of this apply? For example, if you keep using a contact section on several pages, you build it once as a global widget and add this global widget to all your subpages. If you ever want to change something on your contact form, you do this once in the global widget and it will be automatically updated across your entire website.
Of course you can also decouple the global widget. This means you add the global widget to your website, decouple the link and now you can edit the Elementor as you like – however, it will then no longer be updated if the global widget changes. So it works like a template.
Global widgets can save you a lot of time. Anything can be a global widget. A button, a heading – but also an entire section (i.e. a large number of elements).
Display conditions
The display conditions are (sometimes spoken in German) display conditions. With this cool feature you can define when a certain element (e.g. a template) should be displayed. The possibilities of the conditions are very large.
With these conditions you can show a transparent header on the homepage and a normal header on the other subpages. Or you use a different header on your blog. You can see that you have maximum flexibility here.
Parallax scrolling and motion effects
Another big plus of the Elementor page builder is the effects. Now some might say: all that eye candy is pointless – after all, it’s all about information. On the other hand, some topics or websites need emotionality and some scrollytelling. Then you can build a beautiful scrollytelling website with Elementor.
Elementor doesn’t just stop at parallax scrolling. Other scroll effects (based on the CSS filters) are also possible. Of course, you also need a bit of creativity and imagination here. And probably Photoshop too. Nevertheless, the possibilities are very diverse and as always: Everything without writing a line of code.
Note, however, that these scoll and motion effects also affect the loading time of your website. So think carefully about whether you really need such effects to get your message across to the user.
Responsive design
I particularly like the responsive design solution in Elementor. While the whole thing is still very clunky with the Divi Theme, it is solved much better in Elementor. There are three breakpoints. So you can optimize your website for three device sizes (desktop, tablet, smartphone).
You can also set other breakpoints in the Pro version of Elementor. However, this feature is still BETA and still needs some love and time from the developers. But this is where the Elementor team comes in and will release even more innovative features in the future.
In addition to the functions of the breakpoints, you can also edit all elements with the mouse or by entering values. In this way, the width of columns can be specified with comma precision. Or columns can be switched mobile. So if you have a zigzag layout, which is then displayed one below the other on the smartphone, the images are of course shifted. With one click you deactivate this zigzag layout for mobile devices and get a uniform layout.
Multi-Step Form Builder
Multi-step forms are the supreme discipline when it comes to forms. Normally you would have to use a premium form plugin here. With Elementor you already have this functionality built in. So you don’t need an additional form plugin.
When I saw this feature, I had to bite my desk for a moment. I used to build everything with the premium form plugin Gravity Forms. The creation of multi-step forms with Elementor is much easier than with other form plugins.
Dynamic Content
A great feature is the dynamic content in Elementor. Here you can insert dynamic variables from WordPress into fields. Sound nerdy? Yes, maybe a little. Nevertheless, complex website applications are also possible.
Let’s say you want to design a single product page template. The product name is different for each product. Here you would now have to build a page for each product. With dynamic content you build a template and simply insert the variable [Productname] via the dynamic content. This means that the correct product name is displayed on each individual product subpage – without you having to enter it individually.
Very often you have the possibility to access dynamic content in the live editor. You can also use dynamic content with a button link.
Integration of other services
Since Elementor is very widespread and is also aimed at online marketers, the integration of services such as MailChimp, ActiveCampaign, etc. should not be missing. And here Elementor leaves nothing to be desired. In general, there are really a lot of widgets that integrate other marketing tools:
- AWeber
- MailChimp
- drip
- ActiveCampaign
- ConvertKit
- HubSpot
- Zapier
- GetResponse
- MailerLite
- MailPoet
- Automicy
- Sendinblue
Elementor Tutorial (Installation + Setup)
Install Elementor
Since Elementor is a plugin, of course you need a theme for WordPress beforehand. I recommend using a theme that is as small as possible – the fewer functions the theme has, the better. Since all functions come from Elementor, the theme does not need to be able to do much.
Now that you are using a theme that is as small as possible, you can search for the Elementor plugin under Plugins in the WordPress backend. If you want to use the Pro version of Elementor, you need to buy it on elementor.com and download the zip file from your account.
Then just activate the plugin and you’re done. Depending on which theme you use, there are still a few adjustments to be made to the theme. Since this can vary depending on the theme, I’ll skip this step in this little Elementor tutorial.
Set up Elementor
After you have installed Elementor, you can start setting up Elementor or building your website with Elementor. There are several approaches:
- Use a template kit: With a template kit you install an entire sample website. This includes everything. So you start directly with a finished website and only adjust the content (and colors and images if necessary). This is probably the fastest and easiest way to create a website with Elementor. Of course, this doesn’t make your website unique. But especially as a beginner you will quickly reach your goal. You can also download template kits. Above I have already listed some contact points for good template kits.
- Use blocks: Tired of the template kits? Then you can work with blocks and jigsaw your website together. Blocks are individual sections of a website. There is, for example, a header block, a service block, a contact block or even a testimonial block. This will make your website more individual and you will still reach your goal quickly
- Start from scratch: If you want to create your website from scratch, you can start right away by creating a new page in WordPress and clicking on “Edit with Elementor”. Here you now have an empty website that you can fill with the widgets (elements) from the sidebar. There are no limits to your imagination here. Of course, this also means a lot of work and takes a little longer. This way you will learn Elementor from scratch.
Elementor and the Performance (Core Web Vitals)
You have now got to know all the features and functions of Elementor. Now you’re naturally asking yourself: How am I supposed to achieve a page speed score of 100 with Elementor with all these functions? This is always the big criticism of such page builders.
I can put your mind at rest. Among the page builders, Elementor is the fastest. The developers know the importance of a fast loading time. And so every new element and feature is first checked for performance – before it is integrated into Elementor. And so the huge range of functions runs relatively quickly.
In order to also score points in the Core Web Vitals, the theme (especially in the last updates) has been given great performance features:
- Only load code that is needed
- Lazy loading
- request minimization
- Use native browser supports instead of delivering your own scripts
- Optimization of internal JavaScript and CSS files
- Optimized backend and rendering process including caching
- Leaner and better code output
Elementor is already very fast in the frontend as well as in the backend. With version 3.1, Elementor has new performance features that you can find under Elementor > Settings > Experiments. However, these functions are still in the beta phase. Therefore, you should check your site for possible display errors when using these features.
Nevertheless, Elementor can score points here compared to the Divi Theme, for example. Together with the WP-Rocket plugin, easy page speed scores in the upper 90s can also be achieved here. If you need even more performance with the Elementor plugin, take a look at Nitropack.
Conclusion
You don’t necessarily need Elementor for WordPress. But if you want to design your website professionally, a page builder plugin such as Elementor is a must. Elementor is a page builder for WordPress that is second to none. The plugin absolutely convinced me. Now this website also runs with Elementor and I think that Elementor is also interesting for programmers. A lot is already integrated, so you can do without plugins (newsletter, form plugin, etc).
That’s why I would unreservedly recommend Elementor – it also makes the multi-purpose WordPress theme obsolete.
I also see the future of WordPress in the page builders. Sure: Page builders generate a lot of code because they come with a lot of code. However, I do not consider this development to be exclusively negative. This also makes it possible for the yoga teacher around the corner to create a great website without having to close her savings account.
However, you should not only deal with design and effects. A basic design affinity is necessary – so that your website is also successful. However, you are no longer dependent on any web design agencies, some of which do not always act in the interests of the customer.