In the previous tutorial, I covered the basics of creating a custom yet simple Elementor widget. In this part of the series, I’ll cover more advanced topics on extending our Elementor custom widget, that is:

  • Adding controls to the Style section (which will allow a dynamic preview of the changes)
    • changing the colors of the text
    • altering the layout of the wrapper (flex row or column)
    • modifying the width and margin of the elements
  • Adding dynamic (conditional) controls
    • display different control depending on the choice of a former control
  • We will load custom, default scripts and styles, associated with our Widget

After the tutorial, the widget will have the Style section available and will have the following controls:

Elementor Widget Styles
Elementor Widget Styles

The widget display will be controllable, giving an ability to alter it’s looks, for instance:

CUSTOM POST ROW LAYOUT
ROW LAYOUT
CUSTOM POSTS COLUMN LAYOUT
COLUMN LAYOUT

Now then, let’s head to the code directly. I will not cover the previous code, nor will I explain it. Feel free to see the last tutorial for a more in-depth explanation of the code. Similarly to the previous article, I’ve commented on the code directly instead of going through each part of the code separately:

FINAL WIDGET PHP CODE

STYLE CODE

The styles are pretty simple here. We’re forcing the container to flex, imposing a max-width onto it. Each element has a default max-width set. These, however, are altered by the inline code edits we’ve introduced under the Style tab.

SCRIPT CODE

A sample script serves more as an example of how to load the script rather than any functional code.

CODE STRUCTURE

Custom Elementor Widget Code Structure

Let me know in the comments below if you need any help or extra explanation regarding this part of the tutorial. I’ll be more than happy to offer my support here.

Resources

  1. https://elementor.github.io/elementor-icons/ – Elementor Icons to choose from, used the get_icon method
  2. https://developers.elementor.com/docs/widgets/widget-data/ – Base information of the Widget structure
  3. https://developers.elementor.com/docs/controls/ – Elementor Controls documentation

ARTICLE BY RAFAŁ GICGIER

Rafal Gicgier