Questa guida e rivolta a sviluppatori con conoscenze di PHP, HTML e CSS<\/strong>. Se non sei uno sviluppatore ma hai bisogno di widget personalizzati per il tuo progetto, il nostro team di realizzazione siti web<\/a> puo creare soluzioni su misura per le tue esigenze.<\/p>\n Ogni widget di Elementor e una classe PHP<\/strong> che estende la classe base La struttura consigliata per un plugin che contiene widget personalizzati:<\/p>\n Il file principale del plugin deve registrare i widget con Elementor attraverso il hook appropriato:<\/p>\n Ogni widget personalizzato deve implementare almeno questi metodi:<\/p>\n Restituisce il nome tecnico<\/strong> del widget (slug unico, senza spazi, in minuscolo). Questo identificativo viene usato internamente da Elementor:<\/p>\n Restituisce il titolo leggibile<\/strong> del widget come appare nel pannello:<\/p>\n Restituisce la classe della icona<\/strong> visualizzata nel pannello widget. Puoi usare qualsiasi classe Eicons (il set di icone di Elementor) o Font Awesome:<\/p>\n Definisce in quale categoria<\/strong> del pannello appare il widget. Puoi usare categorie esistenti o crearne di personalizzate:<\/p>\n Categorie predefinite disponibili: Il metodo Il metodo Il metodo Nota la differenza di sintassi: Se il tuo widget richiede fogli di stile o script personalizzati, registrali nei metodi dedicati:<\/p>\n Registra gli asset nel file principale del plugin:<\/p>\n Per organizzare i tuoi widget in una categoria dedicata nel pannello:<\/p>\n Una volta sviluppati e testati i widget, pacchettizza il tutto come un plugin WordPress standard<\/strong>:<\/p>\n Creare widget personalizzati per Elementor e un processo strutturato che richiede conoscenze di PHP e comprensione della architettura del page builder. Una volta padroneggiata la API, le possibilita sono praticamente illimitate<\/strong>: puoi creare widget per qualsiasi esigenza, da semplici box informativi a integrazioni complesse con API esterne.<\/p>\n Se hai bisogno di widget personalizzati per il tuo progetto ma non hai le competenze di sviluppo necessarie, contattaci<\/a> per una consulenza tecnica.<\/p>\n Creare Widget Personalizzati per Elementor: Guida Sviluppatori Elementor offre decine di widget predefiniti, ma in alcuni casi le esigenze specifiche di un progetto richiedono funzionalita…<\/p>\n","protected":false},"author":2,"featured_media":166404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Creare Widget Personalizzati per Elementor [2026]","_seopress_titles_desc":"Come creare widget personalizzati per Elementor con PHP e JavaScript. Struttura, controlli, rendering e best practice.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2643,2645,2560,2644],"class_list":["post-166544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-elementor-custom-widget","tag-elementor-developer","tag-sviluppo-elementor","tag-widget-personalizzati"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166544"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166544\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166404"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Architettura dei Widget di Elementor<\/h2>\n
Widget_Base<\/code>. La struttura segue un pattern chiaro e prevedibile:<\/p>\n\n
File System<\/h3>\n
my-elementor-widgets\/\n\u251c\u2500\u2500 my-elementor-widgets.php (file principale del plugin)\n\u251c\u2500\u2500 widgets\/\n\u2502 \u251c\u2500\u2500 cta-box.php (widget CTA Box)\n\u2502 \u251c\u2500\u2500 team-member.php (widget Team Member)\n\u2502 \u2514\u2500\u2500 pricing-table.php (widget Pricing Table)\n\u251c\u2500\u2500 assets\/\n\u2502 \u251c\u2500\u2500 css\/\n\u2502 \u2502 \u2514\u2500\u2500 widgets.css (stili dei widget)\n\u2502 \u2514\u2500\u2500 js\/\n\u2502 \u2514\u2500\u2500 widgets.js (script dei widget)\n\u2514\u2500\u2500 readme.txt<\/code><\/pre>\nRegistrare il Plugin e i Widget<\/h2>\n
<?php\n\/**\n * Plugin Name: My Elementor Widgets\n * Description: Widget personalizzati per Elementor\n * Version: 1.0.0\n * Requires PHP: 7.4\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) exit;\n\nfunction register_custom_widgets( $widgets_manager ) {\n require_once __DIR__ . '\/widgets\/cta-box.php';\n $widgets_manager->register( new CTA_Box_Widget() );\n}\nadd_action( 'elementor\/widgets\/register', 'register_custom_widgets' );<\/code><\/pre>\n![\"Pannello](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/editor-widgets.png\")
<\/p>\nLa Classe Widget_Base: Metodi Fondamentali<\/h2>\n
get_name()<\/h3>\n
public function get_name() {\n return 'cta_box';\n}<\/code><\/pre>\nget_title()<\/h3>\n
public function get_title() {\n return 'CTA Box Personalizzato';\n}<\/code><\/pre>\nget_icon()<\/h3>\n
public function get_icon() {\n return 'eicon-call-to-action';\n}<\/code><\/pre>\nget_categories()<\/h3>\n
public function get_categories() {\n return [ 'general' ];\n}<\/code><\/pre>\nbasic<\/code>, pro-elements<\/code>, general<\/code>, theme-elements<\/code>, woocommerce-elements<\/code>.<\/p>\nregister_controls(): Creare i Campi di Configurazione<\/h2>\n
register_controls()<\/code> definisce tutti i campi che appaiono nel pannello laterale quando il widget viene selezionato. Elementor offre decine di tipi di controllo:<\/p>\nControlli di Base<\/h3>\n
\n
Controlli di Stile<\/h3>\n
\n
Controlli Media<\/h3>\n
\n
Esempio Completo di register_controls()<\/h3>\n
protected function register_controls() {\n \/\/ SEZIONE CONTENUTO\n $this->start_controls_section(\n 'content_section',\n [\n 'label' => 'Contenuto',\n 'tab' => ElementorControls_Manager::TAB_CONTENT,\n ]\n );\n\n $this->add_control(\n 'title',\n [\n 'label' => 'Titolo',\n 'type' => ElementorControls_Manager::TEXT,\n 'default' => 'Titolo CTA',\n 'placeholder' => 'Inserisci il titolo',\n ]\n );\n\n $this->add_control(\n 'description',\n [\n 'label' => 'Descrizione',\n 'type' => ElementorControls_Manager::TEXTAREA,\n 'default' => 'Descrizione della call to action.',\n 'rows' => 5,\n ]\n );\n\n $this->add_control(\n 'button_text',\n [\n 'label' => 'Testo Pulsante',\n 'type' => ElementorControls_Manager::TEXT,\n 'default' => 'Scopri di piu',\n ]\n );\n\n $this->add_control(\n 'button_url',\n [\n 'label' => 'Link Pulsante',\n 'type' => ElementorControls_Manager::URL,\n 'placeholder' => 'https:\/\/tuosito.it',\n 'default' => [ 'url' => '#' ],\n ]\n );\n\n $this->add_control(\n 'image',\n [\n 'label' => 'Immagine',\n 'type' => ElementorControls_Manager::MEDIA,\n 'default' => [\n 'url' => ElementorUtils::get_placeholder_image_src(),\n ],\n ]\n );\n\n $this->end_controls_section();\n\n \/\/ SEZIONE STILE\n $this->start_controls_section(\n 'style_section',\n [\n 'label' => 'Stile',\n 'tab' => ElementorControls_Manager::TAB_STYLE,\n ]\n );\n\n $this->add_control(\n 'title_color',\n [\n 'label' => 'Colore Titolo',\n 'type' => ElementorControls_Manager::COLOR,\n 'selectors' => [\n '{{WRAPPER}} .cta-title' => 'color: {{VALUE}}',\n ],\n ]\n );\n\n $this->add_group_control(\n ElementorGroup_Control_Typography::get_type(),\n [\n 'name' => 'title_typography',\n 'label' => 'Tipografia Titolo',\n 'selector' => '{{WRAPPER}} .cta-title',\n ]\n );\n\n $this->end_controls_section();\n}<\/code><\/pre>\nrender(): Generare il Codice HTML<\/h2>\n
render()<\/code> genera il codice HTML che viene visualizzato nel frontend del sito. Qui accedi ai valori impostati nei controlli tramite $this->get_settings_for_display()<\/code>:<\/p>\nprotected function render() {\n $settings = $this->get_settings_for_display();\n $target = $settings['button_url']['is_external'] ? ' target=\"_blank\"' : '';\n $nofollow = $settings['button_url']['nofollow'] ? ' rel=\"nofollow\"' : '';\n\n echo '<div class=\"cta-box\">';\n if ( ! empty( $settings['image']['url'] ) ) {\n echo '<img src=\"' . esc_url( $settings['image']['url'] ) . '\" alt=\"\" class=\"cta-image\" \/>';\n }\n echo '<h3 class=\"cta-title\">' . esc_html( $settings['title'] ) . '<\/h3>';\n echo '<p class=\"cta-desc\">' . esc_html( $settings['description'] ) . '<\/p>';\n if ( ! empty( $settings['button_url']['url'] ) ) {\n echo '<a href=\"' . esc_url( $settings['button_url']['url'] ) . '\"' . $target . $nofollow . ' class=\"cta-btn\">';\n echo esc_html( $settings['button_text'] );\n echo '<\/a>';\n }\n echo '<\/div>';\n}<\/code><\/pre>\n![\"Funzionalita](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/settings-features.png\")
<\/p>\ncontent_template(): Anteprima Live nel Builder<\/h2>\n
content_template()<\/code> e opzionale ma fortemente consigliato. Genera la anteprima in tempo reale nel builder usando la sintassi Backbone.js<\/strong> (template JavaScript). Senza questo metodo, Elementor deve fare una chiamata AJAX al server per ogni modifica, rallentando la esperienza di editing:<\/p>\nprotected function content_template() {\n ?>\n <div class=\"cta-box\">\n <# if ( settings.image.url ) { #>\n <img src=\"{{ settings.image.url }}\" alt=\"\" class=\"cta-image\" \/>\n <# } #>\n <h3 class=\"cta-title\">{{{ settings.title }}}<\/h3>\n <p class=\"cta-desc\">{{{ settings.description }}}<\/p>\n <# if ( settings.button_url.url ) { #>\n <a href=\"{{ settings.button_url.url }}\" class=\"cta-btn\">\n {{{ settings.button_text }}}\n <\/a>\n <# } #>\n <\/div>\n <?php\n}<\/code><\/pre>\n{{ }}<\/code> per i valori con escape e {{{ }}}<\/code> per i valori senza escape (HTML grezzo).<\/p>\nCaricare CSS e JavaScript<\/h2>\n
public function get_style_depends() {\n return [ 'my-widget-styles' ];\n}\n\npublic function get_script_depends() {\n return [ 'my-widget-scripts' ];\n}<\/code><\/pre>\nfunction register_widget_assets() {\n wp_register_style( 'my-widget-styles', plugins_url( 'assets\/css\/widgets.css', __FILE__ ) );\n wp_register_script( 'my-widget-scripts', plugins_url( 'assets\/js\/widgets.js', __FILE__ ), [ 'jquery' ], '1.0.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'register_widget_assets' );<\/code><\/pre>\nCategorie Personalizzate<\/h2>\n
function add_custom_widget_category( $elements_manager ) {\n $elements_manager->add_category(\n 'my-custom-widgets',\n [\n 'title' => 'I Miei Widget',\n 'icon' => 'fa fa-plug',\n ]\n );\n}\nadd_action( 'elementor\/elements\/categories_registered', 'add_custom_widget_category' );<\/code><\/pre>\nPacchettizzare come Plugin<\/h2>\n
\n
did_action( 'elementor\/loaded' )<\/code>)<\/li>\nELEMENTOR_VERSION<\/code>)<\/li>\nreadme.txt<\/code> se intendi distribuirlo<\/li>\nConclusione<\/h2>\n
Guide Correlate della Serie Elementor<\/h2>\n
\n