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:

<?php

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. 

<?php

function create_custom_categories( $elements_manager ) {

    $elements_manager->add_category(

        ‘custom-category’,

        [

         ‘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.

Render

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

Reply
Dev Sarkar at 1:14 PM

Thanks.

Reply
720p at 2:30 AM

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

Reply
aksiyon at 3:54 PM

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

Reply
turkce at 12:14 PM

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

Reply
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

Reply
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

Reply
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.

Reply
Dev Sarkar at 3:03 PM

Thanks

Reply
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?

Reply
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!

Reply
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.
thanks.

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

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

Reply
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

Reply
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.

Reply
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.!

Reply
Dev Sarkar at 12:56 PM

Hi, Haberler

Thanks you much

Reply
Lisa at 3:45 PM

Pretty part of content. I just stumbled upon your web site and in accession capital to claim that I acquire actually enjoyed account
your blog posts. Anyway I’ll be subscribing in your augment or even I success you get
right of entry to consistently rapidly.

Reply
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….

Reply
Dev Sarkar at 6:04 PM

Thanks

Reply
instagram takipçi satın al at 4:58 PM

you share great articles. thank you for your bblog

Reply
Dev Sarkar at 9:49 AM

Thanks

Reply
instagram takipçi satın al at 7:20 PM

your articles are very nice and well infformative. thanks.

Reply
best cbd oil for pain relief and inflammation at 5:34 AM

Without a doubt one of one of the most expertise filled blog sites I have actually stumbled upon.

Reply
instagram takipçi satın al at 5:38 AM

İnstagram takipçi satın al .. Takipçi satın al ve İnstagram takipçi satın al!

Reply
ps4 games when at 9:01 AM

I every time emailed this website post page to all my associates,
for the reason that if like to read it next my friends will too.

Reply
ps4 games when at 12:45 PM

Hi there, I think your website might be having internet browser compatibility issues.

When I take a look at your website in Safari, it
looks fine however, if opening in Internet Explorer, it’s got some overlapping issues.
I merely wanted to provide you with a quick heads up! Besides that,
excellent website!

Reply
Randy at 8:55 PM

I’d like to thank you for the efforts you have put in writing this site.
I am hoping to see the same high-grade blog posts from you in the future as well.
In truth, your creative writing abilities has encouraged
me to get my very own blog now 😉

Reply
for ps4 games at 11:15 AM

What i do not understood is in truth how you’re not really a lot more well-preferred than you may be
now. You are so intelligent. You recognize thus significantly relating to this subject, produced me individually consider it from so many varied
angles. Its like women and men aren’t interested until it’s something to
accomplish with Lady gaga! Your personal stuffs excellent.

Always take care of it up!

Reply
Mustafa Tugrul Yılmaz - Ellerini Kaldır ve TESLİM OL ! OROSPU CUCUGU at 8:50 PM

Mustafa Tugrul Yılmaz – Ellerini Kaldır ve TESLİM OL ! OROSPU CUCUGU

Reply

Share Your Valuable Opinions