How to use Elementor - Beginner's Guide
Elementor is a WordPress plugin that allows you to create modern and visually stunning websites without having to deal with CSS or HTML coding. With Elementor, you get a drag-and-drop visual editor. You create pages simply by adding individual elements (called widgets) from the widget panel to the canvas area. With Elementor, you can customize both the look and feel of pages and posts on your blog.
How to use Elementor: getting started
Before you start creating pages, familiarize yourself with 3 basic elements, that you can find in Elementor:
- Widget: Design element (e.g. Button, Icon box)
- Section: Container/area in which you can find columns
- Column: Smaller container/area within the Section for placing individual widgets
To start using Elementor, simply create a new page in WordPress (Pages -> Add New). Give your page a name and click on the Edit with Elementor (Edit with Elementor). This will open the Elementor editor.
How to edit the desired section. To do this, click on the plus button on the canvas.
When adding a new section, you can select the structure and number of columns. Elementor works with a structure of up to 12 columns.
Do you have the section and columns ready? You can start adding widgets. Elementor in its free version offers more than 40 widgets, which you can find in the widget panel - the menu on the left ;). To add one, simply drag the widget from the widget panel to the selected column in the area of the canvas.
Edit section, column and widget
You can edit sections, columns and widgets in the widget panel.
Edit section
To select the section you want to edit, click on the section handle. This puts the widget panel on the left into edit mode.
Once a section is switched to edit mode, you can edit it in the widget panel.
There are three tabs that you will work with:
- Layout/Content
- CSS (in earlier versions of Style)
- Advanced (Advanced)
Each tab consists of several edit blocks and each block contains several settings options.
Let's take an example.
Let's say you want to add a Shape Divider effect. Select the section you want to add the divider to, go to the CSS tab, and open the Shape Divider block. Set the location of the divider (top or bottom) and select the desired shape. Once the divider is selected, you can set its color, width, and height.
If you want to adjust the padding and margin settings, you'll find them under the Advanced tab.
Edit column
Before you can edit a column, you must - like a section - switch the column to edit mode. To do this again, click on the column handle.
Again, there are three main tabs you can work with - Layout, CSS and Advanced.
You can adjust the column width on the Layout tab > Layout block > under Column Width. Or (and this is the magic of drag-n-drop editors) you can change the column width directly on the Elementor canvas by simply dragging the column border left or right.
Change the background columns or sections on the CSS tab in the Background block. You can change the color, insert an image, slideshow or even a video (you just need its YouTube link).
Widget modifications
Before you start editing the widget, first switch it to right mode. Yes, you can do this again by clicking on the blue handle 😉
The available configuration options vary for each widget.
Below you can see an example on the Form widget, which has 5 blocks to set under the Content tab.
And here are the settings options for the Button widget, which has only one block.
To customize the widget's appearance (colors, font, borders), go to the CSS tab. Again, the options and number of blocks to edit vary depending on the widget you are editing. The more components a widget has, the more blocks and styling options it offers.
Let's see an example.
Let's say you want to change the text color and text type of the Button widget.
Click on the button widget catch and go to the CSS tab in the widget panel. To change the typography (font size, font style, and font), click the pencil icon next to the Typography option. To adjust the text color, click the color picker next to Text Color.
TIP
To make it easier to move between sections, columns and widgets, use the Navigator. In the Navigator, you can switch to edit mode by simply clicking on a section, column or widget. The Navigator is very useful if you have a complex page structure that consists of several sections and dozens of widgets. You can invoke the navigator by clicking on its icon at the bottom of the widget panel.
Elementor allows you to preview the page for three different types of devices (desktop, tablet and mobile). Click on the device icon next to the eye icon to select the type of device you want to preview your page on.
You don't have to publish the page immediately, but you can save it as a draft. To do so, click the arrow next to the PUBLISH button and click Save as a draft.
To return to the WordPress administration, click the three-line icon in the top left corner of the widgets panel and click Exit to dashboard.
Music
is medicinal
the power of the universe
Music
in the soul can be heard by the universe.