Elementor gets its name from the ability to easily drag and drop elements and widgets directly within the page builder. The elements and widgets can be styled and designed directly in the Elementor Control Panel. I will explain the basics to editing elements and widgets and some of the most important elements and widgets that the user has access to with Elementor.
To get started, drag the widget you would like to use onto the page builder and edit the widget’s settings in the Elementor Control Panel.
5 Basic Elementor WIdgets and How to Use Them.
We will be skipping the inner section because that widget is a little more advanced. I will be explaining how to properly use the inner section in another blog post. But here are 5 basic Elementor elements and widgets and how to use them.
The first tab on the Heading widget is the “Content” tab. This is where you can change the text that appears in the widget, the URL for the heading, the default size, the HTML tag, and the text alignment.
Dynamic Heading Content
You can also make the title dynamic. For example, you can choose to have the page or post title to appear in the widget. Simply click the stack icon that has “Dynamic” next to it in the title area of the content tab. dynamic content is a little more advanced, and I will go into more detail regarding dynamic content in a later blog post.
Styling the Heading
Styling the heading widget is very similar to editing text in common design software like Photoshop, Sketch, Illustrator, etc. The user has the ability to select the text’s color, font-family, font-weight, font-decoration, line height, letter spacing, drop shadow, and blend mode. It is very easy and if you have any graphic design background at all, you will pick this up quickly.
Image elements can be easily added to your pages with Elementor’s image widget. Choose or upload your image with a simple click, and manipulate how it looks with graphic design software like settings.
Just like the heading widget, you can choose to have the image to be pulled from dynamic content, like the featured image set in the page’s setting in the WordPress backend.
Styling Images in Elementor
The image widget allows you to easily adjust the image’s width, max-width, opacity, hover styles, CSS filters, border, border-radius, and box-shadow.
3. Text Editor
The text editor is very straight forward. It is basically exactly like the WordPress text editor but right in Elementor’s Control Panel.
The video widget makes embedding videos from your favorite video sharing platforms like YouTube and Vimeo a breeze! Check out all the cool features and options below.
The button widget is definitely one of the most important widgets because have a great call to action buttons is key to high converting web design.
Style the Button Widget