elementor tutorial

tutorial elementor english

elementor

elementor english

elementor wordpress

elementor blog

elementor plugin

elementor page builder

Elementor Page Builder:
THE MEGA DEFINITIVE GUIDE

Share on whatsapp
Share on facebook
Share on twitter
Share on pinterest
Share on email

If you are looking for the best visual editor for web page design, you are the right place.

With this elementor tutorial you will learn from scratch how to use this powerful model maker and achieve a professional result without needing to be an expert programmer.

In the middle of 2016 Elementor Page Builder went on the market and since then until now it has managed to position itself in record time as one of the best, if not the best, of the web designers above others perhaps better known and more experienced, this thanks to its ease of use, stability and all the functionalities that allow you to create really incredible things.

In this Elementor Page Builder guide we want to explain everything about this editor so that you learn to use it and get the most out of it.

Let’s see point by point the main thing you should know and from then on it will be up to you to achieve excellent results.

Are you ready? Let’s do it

Elementor Page Builder is an open-source visual WordPress layout that allows you to edit websites by making changes to the page without having to write lines of code.

It is a free plugin (application that extends the functions of a program or tool) that also offers a paid version Pro, which contains many more possibilities than the free version, even though it is already quite functional.

Elementor is ideal for those who want to start their page from scratch or improve what they already have in a short time, in a friendly way, giving it the way you want without having to be an expert web designer.

DESIGN WITH ELEMENTOR

Ease of use: Virtually anyone can handle it, its functions are very simple and the customization possibilities are huge.

Real-time results: Every change you make can be seen immediately. You can build your site by dragging and dropping blocks along the page.

Open source: It is the first open source visual editor that is a great advantage since you can modify its source code and adapt it to your needs.

Compatibility: It is compatible with a wide variety of templates and you can also create, save and reuse them as many times as you want.

Optimized for SEO: It favors the positioning in google since its code is quite clean.

Generate HTML code: To get the layouts Elementor uses HTML code so if you decide to uninstall it at any time, it will not leave the annoying mark of the shortcodes. You will still have the content in HTML format but without the styles managed by the plugin.

For the developer and the user: It gathers everything the developer needs without forgetting what the customer needs as a non-expert user. It covers the needs of both profiles, which is fundamental.

Much more than responsive: Not only is it ready to be responsive, that is, it allows you to adapt the display of the page according to the device used to visit it, but also allows you to edit the view of the mobile or Tablet, being able to modify certain elements In the mobile version.

Without language barriers: It is translated into Spanish and is compatible with the WPML and Polylang translation plugins.

In addition to all the above reasons, we can also say that it was created taking into account the point of view of the designer and not only that of the programmer, being this where one of its greatest strengths lies, since it allows you to do many things that with other models it wouldn’t be possible.

And if that weren’t enough, we add to the long list of the virtues of Elementor, is the fact that it is faster and is constantly updated.

All of the above can be certified of by more than 1 million active installations and the 5 rating stars that it enjoys.

Surely after reading all this you will want to check it out for yourself. So let’s move on to the next point.

You can install it directly in WordPress or download it from the official Elementor website and upload the file afterwards for free.

The fastest and most convenient way is to do it from your WordPress so you will have to go to the option Plugin >>> Add new.

In the upper right you will find the search engine, there you must write the name of the layout artist: Elementor Page Builder. Once it appears just click on Install now and then on Activate.

Once installed you can start enjoying its functionalities but do not forget that you also have the possibility of acquiring the paid version PRO, which will be a very good investment if you want to put seriousness to the subject of your page.

First try the free version to see how you are doing. Surely you will want to enjoy the PRO version after a while, but to begin with, the free version is very good.

After you have installed the layout you will notice that you will have a new option in the menus of the WordPress desktop that corresponds to Elementor.

Before you start working with it, take a few minutes to set it up.

The menu consists of 5 submenus: Settings, My Library, Tools, System Information and License.

System information and License show information regarding the website and the license with which Elementor is being used. As you suppose, they cannot be modified and it does not really affect its operation at all.

We will then focus on the remaining menus, that is, Settings, My Library and Tools,

In the Settings submenu you will find 4 tabs: General, Style, Integrations and Advanced.

Let’s see the adjustments that can be made in each of them.

Input types: In this option you select what type of content you will be able to use in Elementor. At least the options present will be: entries and pages. These options may vary depending on the theme and the plugins you have installed. What is most recommended is to select only pages and entries that are according to the topic.

Excluded profiles: With this option you can restrict the use of the plugin to other users who have access to your WorPress.

Deactivate global colors / Deactivate global fonts: With the activation of these options you will use the colors and typography that come by default in the templates you are using. It is better to leave them unchecked in case you then want to make some adjustment.

Improve Elementor: With this option, it anonymously sends related data about the use that you give to the assembler, this in order to improve the product in each update.

You can mark it or not, this does not influence its operation in any way. It is your choice

Default generic sources: Here you select the family of sources that will be used by default.

Content width: Refers to the maximum width of the content you are going to create with Elementor.

If you don’t need something special, leave the one set by default.

Space between Widgets: In this part you can indicate the default space that you want exists between Widgets. You don’t really have to change this value, the one it brings works quite well.

Extend to adjust selection: Adjust a section to a specific part of the web.

Page Title Selector: Enter the selector that has the title of the page you are going to edit in case you want to remove it from your designs at any time.

Integration

Recaptcha: This option allows you to activate the spam protection service. You can include in the forms that you are going to create the well-known boxes with difficult-to-recognize letters that have to be completed to ensure that it is being used by a person.

Advanced: In this section the method of printing the CSS code is established and the method of loading the editor can be changed in case of a conflict between the other plugins and Elementor

Recaptcha: This option allows you to activate the spam protection service. You can include in the forms that you are going to create the well-known boxes with difficult-to-recognize letters that have to be completed to ensure that it is being used by a person.

Advanced: In this section the method of printing the CSS code is established and the method of loading the editor can be changed in case of a conflict between the other plugins and Elementor.

DESIGN WITH ELEMENTOR

In this section you can see the designs you have saved and you will also have the possibility to import others.

Elementor includes a series of tools that can be very useful and in some cases will save you having to install other plugins

Regenerate CSS and synchronize library: This tool is used to recover the original files in case of failures when using the editor.

Replace URL: If you are going to change the URL you will not have much problem thanks to this tool, just type the old address, the new one and click.

Revert to the previous version: If you have any problems after updating, do not worry. With this tool you can return to the previous version.

Become a beta tester: You can make beta versions appear in updates, which is not recommended if you are using Elementor on a page that is online. Remember that beta versions may contain errors since they are not definitive versions.

Maintenance mode: This tool allows you to place your website in maintenance mode if you have to make any adjustments to it. Two options are handled: code 200 for a short time and code 503 for more time.

To start using Elementor, the first thing you need to do is create or open the page you are going to work on and then click on Edit with Elementor.

The way to work with this layout is quite simple, basically you must drag and drop the different elements that are on the left, which we will describe in detail later.

If you are going to work on a page that you have already created, the elements that you add with Elementor will be added to the content that already exists, which you can also edit.

The first screen that you will see when entering Elementor will show on the left side a panel divided into three parts and on the right side the area that corresponds to the space where the different elements that are dragged to it are placed and where you will see how your page is staying.

These elements are modified from the left panel. This panel said that it is divided into three parts: In the first part, located in the upper area, we can go to the general configuration options or switch to the Widgets view.

In the central part, depending on the view that we have selected (general configuration or Widgets) we will have the different options as appropriate.

At the bottom are the options to close Elementor and return to the WordPress desktop, view the design in different screen sizes, go to the plugin documentation, save the design as a template to use it on another page and save the page.

In the work area or design, you will find two options: Add new section and add template.

Templates are professionally designed models that you can customize as much as you want. They are a good option for beginners and for those who want to start faster.

Elementor contains a good number of templates that can adapt perfectly to the type of project you are going to carry out.

When you click on the Add Template button, a pop-up window will appear with the different types of templates available.

When you have located the one you want to use, click Insert, the template will load and you can start modifying it.

To customize the template you just have to click on each one of the elements and in the left panel the corresponding options will appear to configure it to your liking.

DESIGN WITH ELEMENTOR

If we want to start from scratch and make our own design, let’s first see how the designs of this model maker work.

The designs are constructed using basically sections, columns and widgets.

Also known as blocks, the sections are the basic part of the design in Elementor since it is in them where the rest of the widgets will be placed.

You can add new sections, duplicate one that you liked so as not to re-create your design and save it as a template for later use in another part of your page.

You can insert as many sections as you want on the page and within each one the amount of widgets you like.

When you click Add new section, you must choose the type of structure you want for the section.

Once chosen you can make the adjustments you deem necessary and then add the widgets that your design requires.

To do this, click on the three lines at the top of the left panel and you will have access to the configuration options of the section.

Layout: In this part you can adjust the width of the content, set the space between the columns, the position of the content whether it is high, medium or low, the height of the section and set HTML tags.

Style: This part of the settings is related to the colors you want for the background, insert an image, choose a border type and determine its width as well as change the typography.

Advanced: You can set moving effects, work with margins and fill, set overlapping elements and make use of one of the strongest points of the layout that is to edit the mobile version, changing the size of the sections or preventing the display of what It is not wanted for this version.

Managing the sections with this editor is very easy and comfortable, and with the right mouse button you can copy, duplicate, restore styles or delete what greatly speeds up the page layout.

Columns

Columns are blocks that can be added within sections. You can create the amount you want and within them include the elements that you consider available in the layout.

As with the sections, the columns can also be adjusted from the layout, styles and advanced sections that handle more or less the same fields.

This is how in the provision section all the adjustments related to the position of the content, the width and the extension are handled. In style, colors, background layers, images or shapes for columns. And in advanced, the margins, fills and responsive version for devices.

Another of the most appreciated features of Elementor is that by clicking you can play with the width of the columns without having to go to the settings panel which can be much more comfortable and fast.

Columns are blocks that can be added within sections. You can create the amount you want and within them include the elements that you consider available in the layout.

As with the sections, the columns can also be adjusted from the layout, styles and advanced sections that handle more or less the same fields.

This is how in the provision section all the adjustments related to the position of the content, the width and the extension are handled. In style, colors, background layers, images or shapes for columns. And in advanced, the margins, fills and responsive version for devices.

Another of the most appreciated features of Elementor is that by clicking you can play with the width of the columns without having to go to the settings panel which can be much more comfortable and fast.

Gadgets are the different elements with which you are going to build your page. Adding a widget to a column is very simple, you just have to drag and drop. You will notice that when you drag the widget a blue line appears. This line indicates the place where it will be placed.

For many elements, some configuration options are repeated such as those related to the background and the borders, so they will not be explained for each of them so as not to repeat the information, but you already know that you can adjust them.

You can feature with this tool in our designs the page headers being able to create titles h1, h2, h3 etc.

You can also link each of the titles to any page we want, adjust their size, colors, typography, place borders around the title among other options.

I think it doesn’t need much explanation, but even so let’s clarify that it only allows you to add the image, you can’t add text about it.

You can choose any image you have uploaded in WordPress.

The size can be set depending on the theme and plugins. You have the complete options that will make it occupy the entire available or custom width where you can set the dimensions manually.

The alignment option allows you to determine if the image will appear centered, to the right or left.

If you want some text to appear below the image you can enter it in the legend option.

As for the style, you can apply a scale to the image, establish transparency and make an animation happen when you mouse over the image.

It is mainly used to include medium and long texts anywhere on the page using the same WordPress editor, which is an advantage for those who are already familiar with it.

You can choose the position of the text with total freedom within the columns or sections where you have included it.

If you want to include a video on your page with this tool you can do it very easily.

Include the url of a YouTube or Vimeo video and it will work in the section or column where you placed it.

Elementor allows you to make certain adjustments such as:

  • Choose the proportion of your video ((16: 9, 4: 3 or 3: 2).
  • Auto play the video.
  • Set the size of the Play button.
  • Choose whether or not suggested videos will be displayed at the end of playback
  • Show or hide player controls.
  • Choose a cover image for the video

DESIGN WITH ELEMENTOR

The buttons are basic elements of every page and with Elementor you can have many options to create and adjust them according to the design style you have in mind.

Let’s see how we can work with them and what adjustments can be made in their different options.

Type: Established designs can be used. Blue background for information, green background for success, orange background for warning and red background for danger.

Text: Include the text you want to appear on the button.

Link: Specifies the page to open when clicking on the button.

Alignment: Alignment of the button where it has been placed.

Size: You can select different sizes from those available.

Icon: If you wish it is possible to include an icon inside the button and configure if it will appear before or after the text.

You can customize your buttons as you like in the style option.

Organize your page as you want by simply dragging this widget to the part you want. You can avoid seeing everything very close, separating with it different sections or titles.

It is a horizontal bar that you can use to divide the content of your page in an elegant way that looks great.

You can choose between a solid, double, dotted or broken line.

You can also configure the thickness that the separator will have, choose the color and alignment.

With the gap option you determine the space that will exist above and below the line.

Although it is well known that in the case of the design of a page it is worth everything that the creativity of the designer can give, a kind of tacit standard for the separators has been established since it adapts perfectly to almost all the designs and fits quite well with the following Parameters: solid style, weight 2, color #ccc, width 60 and centered alignment.

Its function is the same as that of the separators with the difference that it separates by adding a blank space. While you can do this by setting the margins, this element is much faster and easier.

Obviously you don’t have much to adjust except the space you want it to have.

Elementor has earned more points than it had before with the ease of use of this widget.

By completing the following fields you can add a google map in the easiest way you could imagine.

Address: Enter the address (very specific) that you want to appear.

Zoom level: Set the zoom level with which you want the address to be displayed, for example, between 17 and 18.

Height: As the name implies, in this field you configure the height of the map. It’s not the same as altitude, be careful with that

Prevent scroll: Activating this option prevents manipulation of the map, that is, you cannot zoom or navigate it.

Maps are very important elements within the pages of companies or businesses that have a physical store, since they allow the user to locate them in a much easier way.

The icons are always very useful combining them with other elements making the design much more attractive.

From this element we can configure the following:

Icon style in the View option: With the default value the icon will appear alone. With the Stacked value the icon is displayed in a form and with some fill. If you select the Framed value, the icon will also appear in a shape with borders but no fill.

Icon: Select which icon you want to use. Take into account that the search engine is in English. You have many options to choose from.

Form: This option applies if you choose the Stacked or Framed value. You have two ways to choose from: circle or square.

Link: You can write a web address by converting the icon into a link with the option of opening the link in a new window.

You can also determine the alignment of the icon.

As for the style you have many new options to further customize the icons in terms of color, size and rotation as well as hover effect.

All the gadgets we’ve reviewed so far are the ones you can use with the free version of Elementor. How have you seen, then do very interesting things with them.

However, the PRO version offers other widgets that allow you to increase the potential of your page and that you can manage as easily as the previous ones, obtaining a totally professional result without needing to be an expert designer or be obliged to have knowledge about web programming.

DESIGN WITH ELEMENTOR

This element allows you to display the latest entries in your blog in many different ways.

Choose how many posts you want to appear, if you prefer a certain number of entries or all of them.

You can also play with the position of the highlighted image of the entry, placing it above or to the left of the text.

Determine if you want the content to be organized by category, author, sorted by date or by titles, as well as the number of columns, the size of the image and the number of words that will be displayed as a summary.

As for the style you have the possibility to customize the color, typography and spacing of the elements of the preview of the post such as images, the title of the post, content and pagination.

Like the other widgets you have the option of setting margins, using funds and modifying the responsive.

It is similar to the post with the difference that it is oriented to show the portfolio although it is also used to display the blog entries in a grid.

The truth is that it is an attractive photo system with which you can adjust the number of columns and entries per page, images according to size, choose to show the title or not, select colors as well as typography.

Elementor returns to add more points this time in its PRO version with the inclusion of this element that it has achieved is light affecting very little the loading time of the web, main reason why its use was not recommended.

You can select the number of sliders you like, each of them will have options for customization by inserting texts or links.

Choose the height of the slider box.

Select if you want to pause the image, auto play, speed, loop and animation, hide or show the arrows and navigation points among other settings.

It also allows you to choose colors, styles, fonts, hover effect and approach.

In general, it can be said that it is very complete and in the case that it has been possible to prevent the page load from being delayed so much, you can try to see how it goes.

Undoubtedly, the options offered by Elementor PRO in terms of forms are far superior to those of the rest of the models that were mostly limited to insert only basic fields with many editing restrictions.

With the Elementor forms you can choose the fields that are needed with just one click. Among the available fields are: name, email, message, number, checkbox, reCaptcha, calendar (with date and time).

It also includes the useful honeypot option, a security system that includes a hidden field to protect against hackers

It is possible to change the size, columns and icon of each field as well as texts, colors, messages, and fonts.

In terms of style and advanced options, similar characteristics to other widgets are handled.

Definitely another aspect in which Elementor looks and continues to convince.

Many pages require creating access for users and like all the above, you can do it in an incredibly easy way.

All users of the page including the administrator can access, register if they have not done so and also have the option to recover the password.

As you know, you can customize many aspects of the element to adapt it to the design of your page.

Many pages require displaying a price list, the typical example is the websites of restaurants that want to include the menu with their respective prices or service companies.

 

It is allowed to add the quantity of elements that you like, in addition to the title it is possible to add a small description and even some image.

Colors, typefaces, size and other aspects related to the style can also be customized as we have become accustomed with this layout.

Following the line of the previous element, this option is very useful when you want to show different price options for the same product or service.

 

You must create a section with as many columns as you need. Each of them can be customized in terms of style.

The prices are assigned in the currency that corresponds, in the position that you like and with the possibility of establishing the type of discount.

You can also set remarkable tags, links and many other interesting settings.

It is really very complete and is a very attractive way to show different payment plans and offers.

One of the aspects that most reinforce the trust of the users are the experiences and comments of people who have used the service or purchased the product offered on the page.

Elementor offers the possibility of including comments from clients or other professionals who have been satisfied.

This element is very useful when you want to focus attention and remember the date of an upcoming launch or event.

This is the typical countdown with the days remaining for the day on which the expected activity will take place.

Of course you can change the text that is displayed, the typography, the background color and other aspects of the style.

We all know the importance of social networks today and that the possibility of sharing information on our page in them is vital, since among other things it can increase the traffic of our website, in addition to approaching our target audience.

Elementor includes icons that allow you to share an article or page on the different networks by clicking on them.

Different options of shapes, colors and sizes are available with which a personalized approach can be given.

The carousel of images as you can assume is a set of images that is very useful to include logos of companies with which you have worked or is also a different way of presenting certain types of services. It all depends on the style of your website and the way you want to present the information.

It is possible to include all the images you want, adjust the size, insert an image or legend as well as work with the colors and advanced options.

When we described at the beginning of this tutorial the Elementor interface we said that at the bottom of the left panel is the icon to see what our design looks like on different devices, that is, on desktop, tablet or mobile versions.

Here is one of the wonders of Elementor that has captivated more than one user.

Perhaps you are wondering why, we will tell you that it is something more than a display.

By setting certain options the layout of your page will change depending on the size of the screen chosen.

You will not need to have advanced knowledge about media queries to adapt the content of your blog or page to mobile devices.

To see it more clearly, you can set for any design element that has certain margins for the desktop version, others if it is the Tablet version and if that were not a different one if it is for mobile devices.

It should be noted that no other plugin allows you to do this, which makes Elementor have a great advantage over other visual editors

DESIGN WITH ELEMENTOR

If you have reached this point, the most certain thing is that you have no doubt about why Elementor is considered the best layout artist to date.

But if among so much information you have missed a bit we will summarize what has been treated.

  • It is the most complete layout artist in the opinion of many designers.
  • It is very intuitive what makes its handling and learning simple and fast.
  • It has a clean code which favors web positioning.
  • It includes many features thanks to which you don’t have to download other plugins.
  • It is constantly updated.
  • Its benefits can be verified with the large number of downloads.

You can check the information about the changes and news on their YouTube channel and official blog.

In this guide we have tried to describe in the best possible way the characteristics of this powerful model maker but like everything in life so that you really know what it is, you must try it and surely you will not want to use another one.

Discover the full potential of Elementor Page Builder with this mega guide.

FEATURES AND OPERATION OF ELEMENTOR PAGE BUILDER

Below we share a guide with all the information related to Elementor Page Builder, which is an interesting visual layout that could be considered one of the best plugins developed for WordPress today and this is for many reasons.

We can mention in general terms, that within its features the loading of Elementor Page Builder is much faster than that of other visual editors. And not only that, but it is also fast to run and does not give failures or get hung up.

Elementor is also open source which means that it can be improved by any developer so that future updates can be made.

On the other hand, one of the most outstanding features of this visual editor is that it allows professional designs quickly and effectively without the need to touch CSS.

Another fundamental characteristic of Elementor is its ease of use. The set of elements available can be found in the left bar. And the only thing you have to do to display them on your website is to drag them to the right and drop them in the location you want. It doesn’t get much easier than that.

In Elementor, the whole process of designing the page and editing the text is done directly on the page, not in the WordPress editor, so all the changes you make will be seen in real time, which will save you a lot of time.

With Elementor you can control a large amount of CSS parameters to style any element that is used on a website, using fields to fill in, or elements that can be selected with a click of a mouse.

With Elementor Page Builder you control the Media Queries, that is the CSS code that makes the design change according to the function of the screen size of the device) in a totally visual way.

Elementor Page Builder is not only a free plugin, but there is also a paid version called Elementor Pro. The free version includes 30 widgets that will allow you to execute the most elaborate designs. In the premium or paid version many other features are added, but although it may seem unrealistic the free version of this plugin can be more powerful than other paid plugins.

Elementor is translated into many languages. Among them is Spanish, which makes it easier to use. Elementor is also compatible with the Generate Press template.

Elementor Page Builder is 3 years old and is highly valued by users who use WordPress. It was launched in June 2016 and in less than a year and a half it had more than 300,000 active installations, enormous numbers that only few plugins can achieve, and above all in such a short time. Its average rating in the official WordPress repository is 5 out of 5.  Since it was launched, its creators have regularly updated it with new features that improve the Plugin every day.

We can also point out as another of the characteristics of this plugin, is that it has a configuration designed for web positioning and SEO, meeting the main standards recommended by major search engines such as Google.

It can be said that this plugin is very complete, a true creator of live pages, with no design limits. A page generator that offers high-end page designs and advanced capabilities for WordPress.

We can also add that, apart from its multiple functions, Elementor differs from the rest of the visual layout systems for WordPress that exist today, because you can uninstall the plugin or change templates without leaving shortcodes in the source code of the pages.

Below we mention, with greater specificity, each of the main features that this plugin for WordPress called Elementor Page Builder has and later also the aspects related to its operation.

 

DETAIL OF THE CHARACTERISTICS OF ELEMENTOR

ELEMENTOR IS VERY FAST

The speed of the plugin is one of the key features of Elementor. It also has an instant drag and drop page generator, instant live editing, instant page loading. The speed of Elementor is not compared to any other page creator, neither free nor paid. This makes the interface fun and easy to work with, as well as reducing design time.

LIVE DESIGN.

Never again work on the backend (server connection) and discover how the frontend looks (user interaction). With Elementor Page Builder, you edit the page and, at the same time, see exactly how it looks in real time. Elementor features live design and online editing, so the entire process of writing and designing is done directly on the page, without the need to press refresh or go into preview mode. It also works p

Leave a Replay

Elementor Page Builder

Download model # 1 for WordPress and start designing your website today.

© All rights Reserved for BEN PINES - CEO POJO.ME . Design by DM

Headphones Logo.png

50% off

today

Share
Tweet
Pin