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.
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.
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.
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.
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.
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:
The disadvantages of Elementor go hand in hand with the fact that it is a page builder:
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:
The Pro version includes in addition to the free version:
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.
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 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.
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.
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.
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.
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:
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 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.
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).
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.
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.
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 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.
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.
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:
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.
After you have installed Elementor, you can start setting up Elementor or building your website with Elementor. There are several approaches:
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:
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.
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.