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 Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/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":168081,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"Creare Widget Personalizzati Elementor:","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\/168081"}],"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=\"Screenshot della dashboard WordPress con il plugin configurato\" 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=\"Screenshot della dashboard WordPress con il plugin configurato\" 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 su Creare Widget Personalizzati per<\/h2>\n
Guide Correlate della Serie Elementor \u2014 Leggi anche Creare Widget Personalizz<\/h2>\n
\n
Migliora il Tuo Sito WordPress<\/h3>\n
\n