Consultio - Weekly Best Selling WordPress Theme

Shop Now

How to make a Widget by Elementor

Elementor is now one of the most popular if not the best website builders. The best part of this builder lies in its various types of widgets that allow you to build websites easily while displaying content. However, sometimes you may need a custom widget for your website’s specific needs. In this article, you will know how to make a widget by Elementor easily.

How to Make Easily a Widget by Elementor

There are many users of Elementor; however, if someone asks “do you know how to make Elementor widgets?” Many will say, they don’t. It’s because most of the time you don’t need new tools besides the ones already within the builder. However, as mentioned above, sometimes it can’t be helped when you need something new, something special for your website. That’s when you notice how good it would be if you can create a new widget to help you with your website needs. 

After you are finished with this you will know how to make a widget by Elementor with a few simple steps. So without further ado, let’s begin. 

Widget Structure

Creating a new widget is similar to creating a WordPress widget. You’ll need to create an extended Widget_Base class and fill in the required methods. A normal widget structure will look like this:


class Elementor_Test_Widget extends \Elementor\Widget_Base {

    public function get_name() {}

    public function get_title() {}

    public function get_icon() {}

    public function get_categories() {}

    protected function _register_controls() {}

    protected function render() {}

    protected function _content_template() {}


Let’s find out what you can do with this:

Widget Name

This is a simple method, the public function get_name will allow you to set the name of the widget and return it using this method.

public function get_name() {

     return ‘Widget Name’;


Widget Title

You need to set a title for your widget that will be displayed as the label. With the public function get_title method, you will be able to set and return the title of the widget that will be shown in the labels.

public function get_title() {

     return __( ‘Widget Title’, ‘Plugin Name’ );


Widget Icon

How will you differentiate between your widget and the others? Simple, set up the icon that will be shown in the panel. The public function get_icon method, you can set the icon of the widget that will be shown in the panel. 

public function get_icon() {

     return ‘eicon-gallery-grid’;


Widget Categories

Setting up the categories will help you use your widget more efficiently. This public function get_categories method will allow you to set the category of your widget that will be in the panel. There are some default categories in the panel like basic, general, pro-elements, wordpress, etc. You can use them as examples.

public function get_categories() {

     return [ ‘basic’ ];


Or if you want, you can also create custom categories too. 


function create_custom_categories( $elements_manager ) {




         ‘title’ => __( ‘Custom Category’, ‘plugin-name’ ),

         ‘icon’ => ‘fa fa-plug’,




add_action( ‘elementor/elements/categories_registered’, ‘create_custom_categories’ );

Widget Controls

Each widget requires sections and controls to define them. Using the protected function _register_controls you can set the controls for your widget settings using this method. For example, you can use UI control (button, divider), Data controls (text, gallery), Multiple controls (Url, media), and many others.


This is basically the last part to create a new widget. The protected function render method is where you will be able to render the code and create the final HTML on the frontend with the PHP. 

Content Template

Before the final touch, you’ll want to see how your new widget looks. And the protected function _content_ template will let you generate a live preview of the widget in the editor with the Backbone JavaScript library.

Now you know how to make a widget by Elementor. There are many other methods you can use for different things; however, for a simple one this is all you need. Now Next, you can directly jump into the real thing. In short, creating a widget. 

720p at 1:45 PM

Pretty! This has been a really wonderful post. Many thanks for supplying this information. Marya Ian Amadis

Dev Sarkar at 1:14 PM


720p at 2:30 AM

Excellent pieces. Keep posting such kind of information on your page. Novelia Ilaire Eldwun

aksiyon at 3:54 PM

Hi mates, its wonderful paragraph about cultureand completely explained, keep it up all the time. Billi Laughton Melesa

turkce at 12:14 PM

Wonderful, what a weblog it is! This blog provides useful data to us, keep it up. Evangelia Francis Schick

erotik at 12:19 AM

Massa suspendisse lorem turpis ac. Pellentesque volutpat faucibus pellentesque velit in, leo odio molestie, magnis vitae condimentum. Lura Bendick Ferdy

best CBD for dogs at 10:04 AM

Excellent post but I was wondering if you could write
a litte more on this topic? I’d be very thankful if
you could elaborate a little bit further. Thanks!

Also visit my webpage … best CBD for dogs

buy CBD oil at 9:19 PM

Hello! I know this is kind of off topic but
I was wondering which blog platform are you using for this site?

I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.

I would be awesome if you could point me in the direction of a good platform.

Dev Sarkar at 3:03 PM


cbd for dogs at 11:32 PM

This is a topic that is close to my heart… Best wishes!
Where are your contact details though?

best cbd for dogs with anxiety at 12:40 AM

Hello there! This article could not be written any better!
Reading through this post reminds me of my previous roommate!
He constantly kept preaching about this. I will forward this
post to him. Pretty sure he will have a very good read.
Many thanks for sharing!

Upload Shell indir at 7:48 AM

What’s up, yes this article is in fact nice and I have learned lot of things from it about blogging.

Google Sıralama Yükseltme at 5:03 PM

Google sıralama yükseltme hizmeti ile %100 garantili SEO hizmeti edinin!

instagram takipçi satın al at 6:06 AM

Pretty section of content. I just stumbled upon your weblog and
in accession capital to assert that I acquire actually enjoyed account your blog
posts. Anyway I’ll be subscribing to your augment and
even I achievement you access consistently quickly

ilahi sözleri at 6:07 AM

My relatives every time say that I am wasting my time here at net, however I
know I am getting know-how all the time by reading thes
good articles.

Haberler at 6:10 AM

Greetings! I know this is somewhat off topic but I was wondering if you knew
where I could locate a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having trouble finding
one? Thanks a lot.!

Dev Sarkar at 12:56 PM

Hi, Haberler

Thanks you much

Ankeris Merz at 4:40 PM

The article is really excellent. Every time I read it, I get information again.
The best article I’ve read in a long time….

Dev Sarkar at 6:04 PM



Share Your Valuable Opinions