Visuals speak first. That's why having a slick and aesthetically pleasing website is something that is non-negotiable. The easiest way to create a website that looks good is to use the help of a page builder. One of the most commonly used page builders is Elementor.
In this article, you can learn
how to use Elementor. You can also find complete information about what
elementor is, its advantages and disadvantages, and also web elements that this
page builder can make.
This article will be a bit long.
So, without further ado, let's get started!
What is Elementor?
Elementor is a page builder
specially created for WordPress-based websites. By adding this plugin to the
web, you can practice how to create a landing page. You are also free to change
and redesign the appearance of the web.
How to? Briefly explained, this
is roughly how Elementor works:
- Elementor helps you change the look with a system called drag and drop. There are a number of web element buttons such as text, videos, galleries, spacers, etc. that you can click, place, and arrange as you wish.
- Elementor gives you the option to change every page on the website. Starting from posts, custom post types, to pages can be redesigned. This option allows you the freedom to adjust the feel of the display with specific content.
- This plugin works on the front-end of the website. That is, what you see when customizing your website will be what visitors see. This method makes you more effective in designing. Especially when compared to the back-end system design which is a bit complicated and time-consuming.
- You don't need HTML or PHP skills to design a website. The only thing you need is creativity.
Yes, that's roughly how Elementor
works. Now is the time to explore what can be made with this one plugin.
What Can You Make with
Elementor?
Previously mentioned, Elementor
can be used to design every page on a website. However, what can you do if you
already know how to use Elementor? Here's the answer:
- Landing pages - special pages to invite visitors to take certain actions. Whether it's by filling out forms, subscribing to websites, or making transactions for products or services.
- Opt-in forms - special forms provided to visitors. By filling in their name and email address, visitors can get access to premium content or website subscriptions. You can place opt-in forms anywhere you want: sidebars, headers, footers, or in the content itself.
- Widget - a variety of additional elements to complete the functionality of the page. For example, login forms, recommendations for similar content, maps, and so on. Also read the recommendations for the best widgets for WordPress websites.
- Pop-ups - promotional messages or advertisements that appear suddenly when opening a website.
- Custom header and footer - elements that contain identity and specific information about the website. Located at the top of the web (header) and at the bottom (footer).
- Custom post types - are basically plain content pages. With Elementor, the content page can be customized according to your wishes.
- Global widgets - widgets that can be designed once and used on multiple parts of the web at once.
That's a lot, isn't it? If you
want an easy solution for web design, then Elementor is definitely the answer.
How to use it is easy. Also, there are many customizations that can be done.
Getting to Know the Sections
in Elementor Page Builder
Elementor promises one complete
solution for web design. There are many features and components included in the
plugin.
At first glance this is good news
for WordPress users. This means that you don't need to install any additional
applications to back up Elementor.
However, the very full features
can also be a bit of a hassle. As a beginner, you can be confused by the many
options and elements that can be added.
To make things easier for you, in
this section we will introduce the elements in Elementor. That way, you can
feel more familiar in using this one plugin.
For ease of explanation, we will divide this section into three points. The three points are:
1.
Options tab;
2.
Page settings;
3.
Elements library.
Again, we remind you, the
discussion of this section will be very long. However, we hope this lengthy
info will be useful. Apart from that, we are sure, there is no other website
that contains a tutorial as complete as this.
Well. Let's begin to describe one
by one the parts of Elementor.
The options tab is located at the
bottom of the Elementor side panel. Viewed from the browser, this panel is
located on the left side of the page.
To be honest, Elementor didn't
release an official name for this section. However, for convenience, we will
call it the options tab. Because, this section does consist of tab-shaped
options.
Tab names from left to right:
settings, navigator, history, responsive mode, and preview changes. Short
description as follows:
- Settings - contains general settings about the page (title, publication status, featured image, hide title option, and page layout); page style settings (background style options, background color, images, and padding), and custom CSS.
- Navigator - a kind of table of contents that lists what Elementor components are used on a page. These tabs make it easy for you to browse and organize page views.
- History - lists any changes made to the page. You can easily undo or redo an action.
- Responsive mode - preview the web display on three different screens, namely desktop, tablet, and mobile. Change directly to fit the display at the desired screen resolution.
- Preview changes - see the results of web designs before they are saved and published to the public.
2. Page settings
This section contains the basic
Elementor settings. Consists of three different options, namely Style,
Settings, and Go To.
In the style
options, you can customize the appearance of the colors and fonts of the
website. There is a default color and default font that can be changed freely.
To get the right color, there is also a color picker feature.
The settings option
loads the WordPress and Elementor settings. Settings in WordPress are more
about activating features in Elementor. As for Elementor settings, you can
adjust the distance between content, content width, and photo and gallery
views.
In the Go To
section, there are three things you can do. Finder is used to quickly and
easily find content elements in Elementor. You don't need to search manually by
scrolling in the element library.
Then, the View Page option is the
same as Preview changes. The other option lets you take a peek at the page
before saving or publishing it. Finally, the Exit Dashboard is a button that
can be clicked when you decide to return to the Dashboard page.
3. Elements library
The Elements library contains all
the elements you can add to a web page. There are three types of elements that
you can choose from, namely basic, general, and WordPress. We'll break down a
description of each element below:
Basic contains simple
elements contained in each content.
General contains more advanced widgets than basic widgets. There are more elements that can be added.
WordPress is the default widget
option from WordPress. More or less the content is the same as in Elementor. If
you add a plugin like Jetpack, the widgets from that plugin will also appear.
How to Use Elementor
Now that you're quite familiar
with its various features and parts, it's time for you to learn how to use
Elementor. In this section, you will know at least three things.
First, how to install Elementor.
Second, how to use Elementor for web design. Third, how to design a web page
from scratch.
How to Install Elementor
1. Click the Plugins menu >
Add New. Then enter the keyword Elementor in the search field on the right.
2. Click the Install Now
button.
3. Wait a few moments until the
button changes to Activate. Then click the button and the plugin is ready to
use.
How to Use Elementor for Web
Design
1. As soon as the plugin is
active, you can see the Elementor menu on the Dashboard. In addition, the Edit
with Elementor button will appear on every page of the website. To edit the
page, you just click the button.
2. Pay attention to the right
side of the side panel. In that section, you can change the appearance and add
the desired features.
3. To create a page from a
template, press the folder picture button.
4. You will find a special page
containing templates. There are templates in the form of blocks or arrangements
for text on the page. Then there are Pages, which are templates for the entire
page.
5. When you find the design you
want, click the Insert button below the design.
6. The design in question will
appear on the desired page. Now you just change the contents. You can also add
elements to the parts that you feel are necessary.
7. After the customization is
sufficient, you can save the design that has been made. Just click the little
arrow button to the right of the Publish button. Then click Save Draft.
You can also click Save as
Template to make the design as a template. This way you don't have to
redesign the exact look of another page anymore. Just load the template and
customize the content easily.
How to Design from Scratch
1. To design a page from a blank
canvas, click the + button on the left.
2. This button will direct you to
the page structure option.
3. After selecting a suitable
structure, the page will be filled with an outline or section. In this section
you can add elements that are in the library.
4. When the design process is
complete, you can Save Draft, Save as Template, or Publish.
Elementor Advantages and
Disadvantages
Are you already interested in
using Elementor? Not yet? If so, let's list the advantages and disadvantages of
Elementor.
Advantages of Elementor Page
Builder
As a WordPress add-on, Elementor offers a lot of advantages. At least this is how you feel when you use Elementor to design a website:
- Full-featured and very easy to use.
- There are tons of elements to add to a web page. Starting from simple features such as text, headings, images, spacers, and so on. But there are also more advanced elements such as tabs, menu anchors, accordions, toggles, and many others.
- You can change the view freely. You can even add details that are not available in WordPress themes.
- See display changes in real-time.
- There are options for customizing the display on three different screen types: desktop, tablet, and mobile.
- Any changes made to the page are well recorded. You can revert to the previous version with one click.
- The features offered for the free version are very complete. Especially compared to other page builder plugins.
Disadvantages of Elementor
Page Builder
Of course Elementor is not
without its shortcomings. If you have concerns about this, we try to give an
overview of things that might make you less satisfied.
- Elementor does not allow you to customize the appearance of the URL.
- Sometimes the display of the font and text is out of sync.
- Important features such as Mailchimp, Confirmation Email, Hubspot and so on are only available in the Pro version.