Feeling overwhelmed by the thought of creating a professional-looking website all by yourself? In this tutorial, we will show you how the Elementor page-builder plugin can help you do so without technical skills or a hefty budget for a designer.
Elementor is powerful yet user-friendly. It has a drag-and-drop interface, extensive template library, and design widgets–all the tools you need to create a website easily.
In this article, we’ll explore everything you need to know about this page-builder solution. You’ll discover how to install and set up Elementor, create your first page, and explore its powerful features.
Let’s get started.
Installing and Setting Up Elementor
Before you can start playing around with the page editor, you’ll need to install it first. For that, find the Plugins section on your dashboard and click on Add New. In the search bar of the screen that follows, type “Elementor” and hit enter. You should see the plugin at the top of the search results.
Click on the Install Now button next to it. Once on your site, click Activate. Done.
Creating and Editing Your First Page with Elementor
The best way to learn about Elementor is by actually experimenting with it. Follow along with this tutorial to get a better handle on Elementor and its features.
However, before we begin, here are a few features to get familiar with beforehand:
- Drag-and-drop functionality – The core of Elementor’s appeal is its user-friendly drag-and-drop builder. This feature makes it so you can easily add, arrange, and customize elements on your pages without needing any coding knowledge.
- Real-time editing – Elementor provides a live editing experience. As you make changes to your page, you see them happen in real-time, which streamlines the design process and helps you build sites more efficiently.
- Templates and blocks – Elementor Free includes a basic collection of pre-designed templates and blocks. These resources allow you to quickly build professional-looking pages. Of course, the paid version of Elementor builds on this significantly.
- Styling options – The plugin provides general settings like styling options, animation effects, and multi-column layouts. These options make it easier to create a unique look and feel for your site and are flexible enough to meet a variety of design needs.
- WooCommerce integration – For those running eCommerce sites, Elementor integrates with WooCommerce. This integration allows you to design custom WooCommerce product pages, enhancing the shopping experience considerably.
Now, let’s get to some practical applications for the above.
1. Create a Page
In WordPress, go to Pages and select Add New. Give your new page a title that reflects the content or its purpose. After naming it, click on the Edit with Elementor button. This transitions you from the WordPress interface to Elementor’s page builder.
Get Familiar with the Elementor Page Editor
Elementor opens up to a two-part interface: the main editing screen and the sidebar.
Here is how they work together:
- The sidebar – This is the control center of Elementor. In this place, you’ll find a plethora of drag-and-drop features and widgets that you can use to construct your webpage.
- The main editing area – This is where your page will take shape. As you drag widgets from the sidebar, you can drop them into this area and start shaping your page’s layout. More on that in a moment.
- The Navigator – This highly useful feature acts like a roadmap of your page structure. It provides a visual representation of all elements on your page, organized hierarchically. This includes sections, columns, and widgets. To access the Navigator view, right-click on any widget, column, or section in the Elementor editor and select Navigator from the context menu
- The Finder – This feature allows you to search and access any page, template, or setting within Elementor and WordPress. This includes posts, pages, settings, templates, and even specific Elementor widgets. You can easily open the Finder by pressing CMD / CTRL + E.
Basic Building Blocks
As you play around with Elementor throughout this tutorial, you’ll likely notice there are three main elements that make up most pages:
- Sections – Think of sections as the foundational layers of your page. They are the largest building blocks where you will start structuring your page.
- Columns – Within each section, you can insert columns. These serve as containers for your widgets and help in organizing your content more precisely.
- Widgets – Widgets are the actual content elements – like text, images, buttons, and more. You’ll find many widgets in the sidebar, ready to be dragged and dropped into your sections and columns.
You’ll be making use of all three as you build your page(s).
2. Add Page Elements
To begin, you’ll need to make adjustments to your page’s layout. Use the + button to add new sections.
After that, you can choose between different column structures.
Once you have settled on a basic layout, you can then add widgets. For example, you can add a heading by dragging the Heading widget into a section or column on your page.
To add some text, drag the Text widget from the Elementor sidebar into your desired section. Click on the text box to start typing or paste your content.
Naturally, to add an image, you would use the Image widget. You can upload images from your library or directly from your computer.
Repeat this process to add buttons or any other features you’d like to include.
3. Customize Elementor Widgets
Once placed, each widget can be customized. To edit sections, columns, or widgets, simply click them. This allows you to access additional customization options like styling, layout adjustments, and more in the sidebar on the left.
For one, there is the Style tab. Here, you can customize the content of the different elements. For example, for a Heading widget, you can adjust the font, size, color, and alignment.
In addition, there is the Advanced tab. Here, you can make changes to margins and padding, border, background, and more. You can even hide elements on certain types of devices.
Experiment with different widgets and styles to find the perfect look for your page. Be aware, however, that the free version only comes with a few basic options.
Basically, all you have access to here are widgets for adding headings, text, images, videos, buttons, dividers and spacers, as well as Google Maps and icons to your pages.
You can also use built-in WordPress widgets like category lists, recent posts, navigation menus, and similar. However, if you want the full toolbox, you have to get the paid version of the website builder.
4. Set Global Defaults
Another thing that wen need to cover in this Elementor tutorial is how to set defaults for global settings on your site, such as fonts and colors. For that, click on the hamburger menu in the top left corner of the Elementor sidebar and select Site Settings.
Use the options under Design System and Theme Style to make adjustments to the colors on your site, configure the look of headings of different orders, style buttons, images, or form fields, and configure settings for headers and footers.
You can override most of this on a per-widget basis, however, establishing defaults goes a long way to make the end result look congruent.
5. Access Revision History
If you ever find yourself in a situation where your design has developed into a direction you aren’t convinced by, don’t worry. Elementor’s Revision History allows you to track and revert changes with a few clicks.
Located at the bottom of the sidebar, the History icon (it looks like a circular arrow with two hands of a clock in it) lets you see a log of all the actions taken during your editing session.
You can use it to move back and forth between actions and revert to previous versions if needed. That way, you don’t have to painstakingly remember and undo everything that has landed you in a design cul-de-sac.
6. Explore Elementor Templates
Templates are a significant time-saver. They are pre-designed pages and sections that you can use as is or customize to suit your needs. Elementor offers them in many different forms.
To access templates, click on the folder icon inside any section in the Elementor editor.
This opens the Template Library.
It contains templates for both blocks and entire page layouts. Use the search function or category filters at the top to zone in on what you are looking for. You can preview templates by clicking on them. If you’re satisfied with your selection, click Insert to place the template in your page (note, you will have to create a free Elementor account to use the Template Library).
Once the template is loaded, you can start customizing it like before. Click on any element in the template to modify its content, style, and settings.
In the free version, the number of available templates is very limited. There are a lot more in the Pro version.
7. Publish Your Page
Once you’re satisfied with the design, click Publish to make your page live. You can always come back and edit the page later, too.
What Does Elementor Pro Offer?
We’ve already alluded to the paid version of Elementor several times in this article. On paper, the plugin is a freemium offer with some basic functionality you can use without paying and additional options in the premium offer.
In truth, however, the free plugin version won’t get you very far. It provides basic design control and general settings that include styling, animation, effects, and the ability to add shortcodes and HTML code. It also includes mobile editing and responsive UI features.
However, if your goal is to build anything other than a really basic website, you will need to buy Elementor Pro. It significantly expands the capabilities of the free version, offering a suite of advanced features that cater to a wide range of web design and marketing needs.
Powerful Theme Builder
Elementor Pro adds full theme-building support, allowing you to go beyond designing individual posts or pages such as in this tutorial. You can customize your theme template files directly using Elementor, including designing templates for headers, footers, single posts, archives, and even 404 pages.
This feature also includes special widgets for dynamically inserting various elements like post titles and featured images.
Extended Template Library
While the free version of Elementor offers a basic collection of page templates, Elementor Pro provides a more extensive selection. This includes over 100 website kits, which are collections of templates to help you create a full website, covering various niches.
These kits can be particularly helpful for building client sites, as you can import a kit and then customize it according to the client’s requirements
WooCommerce Builder
For those creating an online store, Elementor Pro’s WooCommerce Builder lets you fully customize your store, including single product pages, shop listing pages, and key elements like the Cart, Checkout, and My Account pages.
This feature ensures a consistent and branded shopping experience across your website.
Global Settings
With Elementor Pro, you get more control over your website’s global settings. This includes advanced customization options like adding custom CSS directly to widgets, columns, and sections, and using unique motion effects and custom fonts in your designs.
Form Builder
Elementor Pro’s built-in Form Builder makes creating complex forms simple and integrates seamlessly with CRM and marketing tools. Use it for lead generation, featuring a variety of field types, styling options, and the ability to set actions after form submission. For example, you can display confirmation popups or redirect visitors to thank-you pages.
Popup Builder
This feature in Elementor Pro replaces the need for dedicated popup plugins. You can design various types of popups (modal, notification bars, slide-ins, full-screen fillers, etc.) with detailed targeting and trigger rules. This builder is versatile for a range of uses, from announcements and email list building to contact forms and social share prompts.
AI Features
Elementor is one of the WordPress companies on the forefront of using AI in WordPress. As a consequence, their plugin comes with a number of features to help you create websites faster with the help of artificial intelligence.
Thanks for a connection to ChatGPT, you can have the plugin create both text and images for your web pages. In addition, AI support is available for creating code snippets and custom CSS.
Final Thoughts: Elementor Tutorial
Today, we’ve covered the essential steps of using Elementor, from installation to creating your first page, and explored the expanded capabilities of Elementor Pro.
Elementor is a very useful tool for anyone trying to build complex WordPress websites but lacking technical skills. It is also a great tool for professional designers and developers to put together websites more quickly.
The page builder plugin offers a flexible and powerful platform to bring your website ideas to life. There is a reason for its success. However, if you really want to take advantage of what it has to offer, you won’t get around paying for its premium version.
What are your thoughts on using Elementor for web design? Will you be giving it a try if you haven’t yet?
