Elementor’s Elements and Widgets Explained


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.

1. Heading

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.

2. Image

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.

Dynamic Content

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.

4. Video

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.

5. Button

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

Andrew Hewitt | Yoh Digital

Andrew Hewitt | Yoh Digital

I help creative agencies, project managers, and marketing consultants with building their client's web projects. I'm currently the owner of a small web development firm located in Winston-Salem, and I'm constantly on the lookout to connect with like-minded developers and creatives who love what they do.

Leave a Replay

Recent Posts

About Yoh Digital

Yoh Digital is on a mission to help creative agencies, project managers, and marketing consultants deliver quality web development projects that meet their client’s expectations.

We are passionate about helping our clients succeed, and we are grateful to be a part of their team.

Follow Us

Sign up for our Newsletter

What Type of Services?