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:
The widget display will be controllable, giving an ability to alter it’s looks, for instance:
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
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.
A sample script serves more as an example of how to load the script rather than any functional code.
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.
- https://elementor.github.io/elementor-icons/ – Elementor Icons to choose from, used the get_icon method
- https://developers.elementor.com/docs/widgets/widget-data/ – Base information of the Widget structure
- https://developers.elementor.com/docs/controls/ – Elementor Controls documentation