Come creare widget Elementor personalizzati senza alcuna conoscenza di codifica

I widget di Elementor aiutano ad aggiungere elementi di creazione della pagina come un menu di navigazione, un pulsante, una casella di immagine, una sezione FAQ e molto altro. Sebbene diversi componenti aggiuntivi di Elementor siano dotati di widget Elementor, è improbabile che tu ottenga tutti i widget richiesti in questi componenti aggiuntivi.

Qui è dove hai bisogno di widget Elementor personalizzati per soddisfare le tue esigenze. ElementsKit ha le funzionalità per aiutarti a creare i widget richiesti in pochissimo tempo.

Questo post ti guiderà su come creare un widget Elementor personalizzato senza codificare in un metodo minimalista.

Procediamo... ora!

Cos'è un widget?

Il widget si riferisce a una piccola applicazione GUI utilizzata per completare un'attività specifica. Un widget può essere qualsiasi elemento del tuo sito web come un pulsante, una casella di controllo, una finestra di dialogo, una barra di scorrimento, una casella di ricerca, una mappa, un orologio, un contatore dei visitatori, ecc.

Consideriamo come esempio il page builder Elementor. Questo generatore di pagine è dotato di numerosi widget integrati. Puoi aggiungere i migliori widget Elementor gratuiti per progettare la tua pagina web.

Tuttavia, puoi anche creare un widget personalizzato per Elementor, se necessario. E il Generatore di widget ElementsKit ti aiuterà a farlo!

Vantaggi dell'utilizzo di ElementsKit Widget Builder per creare widget personalizzati

Sappiamo tutti che i widget aggiungono funzionalità eccellenti ai siti Web. Ma trovare un widget adatto per svolgere la tua attività personalizzata è quasi impossibile. In tal caso, non hai altra scelta che creare un widget personalizzato.

Inoltre, i costruttori di widget rendono questo processo di creazione di widget personalizzati più semplice che mai. Diamo un'occhiata ai principali vantaggi dell'utilizzo di un generatore di widget.

• Crea widget personalizzati senza alcuna conoscenza di programmazione
• I widget sono completamente reattivi
• Crea visivamente i widget trascinando e rilasciando gli elementi
• Supporta contenuti strutturati
• Include un editor di codice autonomo
• Supporta più tipi di campo, ecc.

Questi sono i principali vantaggi del generatore di widget ElementsKit. 

Come creare widget Elementor personalizzati con ElementsKit (gratuito)?

Un widget completamente funzionale può potenziare la tua esperienza di creazione di siti web. Pertanto, è essenziale creare il tuo widget Elementor personalizzato per il tuo sito web.

Desideroso di sapere come creare un widget Elementor personalizzato? Ecco la procedura passo passo per creare un widget Elementor personalizzato gratuito utilizzando il generatore di widget ElementsKit.

Prerequisito

Per creare un widget personalizzato Elementor, avrai bisogno dei seguenti plugin:

• Elementor
• ElementsKit

Una volta installati e attivati questi strumenti sul tuo sito Web WordPress, è ora di iniziare a creare il widget personalizzato Elementor.

Passaggio #1: attiva il generatore di widget

Per avviare il processo di creazione del widget, assicurati di aver attivato il modulo Widget Builder dal pannello della dashboard.

Per attivarlo, procedi al pannello dashboard di ElementsKit, quindi fai clic su MODULI. Nella sezione dei moduli, individua il modulo "Widget Builder" e attivalo.

Ecco il processo per verificare se il generatore di widget è attivo o disattivato:

Accensione del generatore di widget

Non dimenticare di fare clic su "Salvare le modifichepulsante ' dopo aver acceso o spento un modulo.

Passaggio #2: crea un widget

Per creare un nuovo widget, procedere a ElementsKit > Generatore di widget. Nella nuova pagina noterai un nuovo pulsante chiamato "Aggiungere nuova”. Facendo clic su quel pulsante verrà creato un nuovo widget sul pannello sinistro di Elementor.

Creazione di un nuovo widget

Ora puoi personalizzare il titolo, l'icona e la categoria del widget da questa pagina. Inserisci il titolo e l'icona del widget sul tuo widget personalizzato. Puoi utilizzare qualsiasi icona dalla libreria di icone Font Awesome.

Personalizzazione del titolo e dell'icona del widget

Mentre dai un nome al tuo widget, assicurati di mantenerlo pertinente alla tua attività. E aggiungi un'icona pertinente al tuo widget.

Passaggio #3: personalizzazione del nuovo widget

Lo sviluppo del widget Elementor è terminato, ora è il momento della personalizzazione. Non hai bisogno di conoscenze approfondite di codifica per creare un nuovo widget personalizzato per Elementor. Il generatore di widget ElementsKit rende il processo più fluido che mai. 

Trascina semplicemente il widget ElementsKit dal pannello di sinistra e rilascialo sul pannello centrale. Il widget rilasciato creerà automaticamente una variabile sulla scheda destra.

Fai clic su quella variabile e verrà automaticamente inclusa nell'editor del codice. Se necessario, puoi aggiungere ulteriore markup HTML, CSS e JavaScript tramite l'editor di codice.

Dopo aver creato un nuovo widget o effettuato qualche personalizzazione, fai clic sul pulsante Salva e il gioco è fatto.

Ecco il processo dettagliato:

Creazione di un nuovo widget

Puoi aggiungere questi controlli anche alla scheda Stile o Avanzate.

Passaggio #4: modifica dei campi del widget

Durante la creazione del widget, puoi personalizzare tutti i campi o gli elementi del widget. Ad esempio, puoi personalizzare il nome dell'etichetta, il segnaposto, il valore predefinito, ecc.

Tuttavia, le opzioni di personalizzazione non sono le stesse per ogni pannello. Diversi pannelli di controllo hanno campi di input diversi.

Personalizzazione dei campi del widget

Suggerimenti professionali: Quando si aggiunge lo stesso controllo più volte, il Nome deve essere univoco. Altrimenti, creerà un conflitto variabile.

Passaggio #5: visualizzare l'anteprima del widget appena creato

Il widget appena creato funziona in modo del tutto simile ai widget Elementor esistenti. Il widget personalizzato appena creato sarà disponibile sul pannello Elementor. Per controllare il nuovo widget, apri una nuova pagina web e trascina e rilascia il widget sulla nuova pagina web.

Controllo del nuovo widget

Suggerimenti professionali: Puoi aggiungere tutti i controlli ElementsKit per creare il widget personalizzato Elementor tramite il generatore di widget Elementor. Ottieni la versione ElementsKit pro per accedere a più controlli Elementor.

Guarda il video qui sotto per saperne di più sul generatore di widget ElementsKit.

Elenco dei campi di controllo supportati da ElementsKit

ElementKit offre molti campi di controllo per creare un widget personalizzato. Ecco l'elenco dei campi di controllo supportati:

• Testo – Il campo di testo viene utilizzato per ottenere l'immissione di testo.
• Numero – Gli utenti possono inserire numeri tramite il campo di controllo numerico.
• Area di testo – Il campo textarea viene utilizzato per inserire numeri, testi, simboli, ecc.
• WYSIWYG – È l'editor rich-text di WordPress TinyMCE.
• Codice – Questo controllo aggiungerà un editor di codice basato sull'editor Ace.
• Nascosto – Il campo di input nascosto viene utilizzato per salvare i dati direttamente nel database senza fornire un campo di input nel pannello di controllo.
• Interruttore – Uno Switcher è una rappresentazione fantasiosa di una casella di controllo. Viene utilizzato per mostrare/nascondere diversi blocchi o elementi di una pagina web.
• Selezionare – L'opzione di selezione fornisce più opzioni tra cui gli utenti possono scegliere. Mostra le opzioni in un menu a discesa. 
• Scegliere – Scegli viene utilizzato per mostrare un pulsante o un gruppo di pulsanti con icone e altre impostazioni di stile o allineamento.
• Colore – Abilita un campo di selezione colore ricco di uno slider Alpha.
• Font – Il controllo del carattere consente agli utenti di scegliere un carattere dalla libreria di caratteri di Google.
• Appuntamento – La libreria data-ora utilizza il file Libreria Flatpickr per scegliere una data e un'ora. 
• URL – Il campo URL fornisce un collegamento con un pulsante. Puoi impostare il pulsante per aprire il collegamento nella stessa scheda o in una nuova e renderlo nofollow.
• Media – Gli utenti possono scegliere diversi media utilizzando questa sezione. Mostra i file multimediali dalla libreria multimediale di WordPress.
• Icone – Il controllo delle icone consente agli utenti di aggiungere icone dalle librerie di icone Font Awesome ed ElementsKit lite. Gli utenti possono anche caricare la propria libreria di icone personalizzata dalla libreria multimediale di WordPress.
• Dispositivo di scorrimento – Il dispositivo di scorrimento è una scala trascinabile utilizzata per scegliere tra un intervallo di valori numerici.
• Dimensioni – Il controllo delle dimensioni è costituito da quattro pannelli di input per impostare una posizione adatta per un elemento. I pannelli di input sono in alto, a destra, in basso e a sinistra. 
• Confine – Consente all'utente di personalizzare il tipo, la larghezza e il colore del bordo.
• Sfondo – Il controllo dello sfondo consente agli utenti di aggiungere un'immagine di sfondo, un video e un colore. Puoi aggiungere colori statici o sfumati al video.
• Scatola Ombra – L'ombra della scatola offre cinque diversi tipi di ombre attorno alla scatola. Include ombra orizzontale, ombra verticale, sfocatura dell'ombra, diffusione dell'ombra e ombra colorata.
• Ombra del testo – Come il riquadro dell'ombra, anche il controllo dell'ombra del testo fornisce quattro diversi controlli. Si tratta di ombre orizzontali, ombre verticali, ombre sfocate e ombre colorate attorno ai testi.
• Tipografia – La tipografia consente agli utenti di personalizzare la famiglia di caratteri, la dimensione del carattere, il peso del carattere, lo stile del carattere, l'altezza della linea, la trasformazione del testo e la spaziatura delle lettere.
• Dimensione dell'immagine – Il controllo della dimensione dell'immagine è costituito dall'altezza e dalla larghezza dell'immagine e da un pulsante di applicazione.
• Seleziona2 – Crea anche un menu a discesa come il controllo di selezione ma con più stile e design.
• Animazione al passaggio del mouse – Questo controllo aggiunge animazione su diverse caselle di selezione basate sulla libreria Hover.css.
• Animazione d'ingresso – Il controllo dell'animazione dell'ingresso consente all'utente di personalizzare l'aspetto di un pulsante in base alla libreria Animate.css.

Questi sono i controlli del generatore di widget ElementsKit che puoi utilizzare durante la creazione di un widget Elementor personalizzato.

Parole finali

Ecco come puoi creare facilmente un widget Elementor personalizzato toccando ElementsKit. ElementsKit viene fornito con tantissimi widget integrati che probabilmente ridurranno al minimo i tuoi sforzi nella creazione di pagine di Elementor.

Allo stesso tempo, ti offre anche un metodo minimalista per creare i tuoi widget personalizzati Elementor preferiti. Ora tocca a te installare e ritirare ElementsKit e sfruttare i vantaggi del componente aggiuntivo nella creazione di widget personalizzati Elementor.