{"id":371401,"date":"2023-04-07T16:08:00","date_gmt":"2023-04-07T13:08:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371401"},"modified":"2023-04-07T16:17:13","modified_gmt":"2023-04-07T13:17:13","slug":"come-creare-un-flusso-di-passaggi-utilizzando-elementor-process-widget","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/come-creare-un-flusso-di-passaggi-utilizzando-elementor-process-widget\/","title":{"rendered":"Come creare un flusso di passaggi utilizzando Elementor Process Widget"},"content":{"rendered":"\n<p>Qualunque sia il tipo di sito web che possiedi, \u00e8 essenziale non solo avere contenuti di qualit\u00e0 ma anche poterli visualizzare in modo accattivante. Fortunatamente, molti strumenti ci consentono di <strong>condividere un&#8217;ampia gamma di informazioni e dati in modo creativo<\/strong>. Puoi <a href=\"https:\/\/themewp.inform.click\/it\/come-aggiungere-leffetto-di-parallasse-elementor-in-modo-facile-e-veloce\/\" title=\"aggiungere un effetto di parallasse\">aggiungere un effetto di parallasse<\/a> per evidenziare il tono moderno del tuo sito, <a href=\"https:\/\/themewp.inform.click\/it\/come-creare-interruttori-e-fisarmoniche-in-wordpress\/\" title=\"utilizzare interruttori e fisarmoniche\">utilizzare interruttori e fisarmoniche<\/a> per ottenere una migliore struttura dei contenuti e i widget di elaborazione sono preziosi in quanto ci consentono di visualizzare dati complessi in modo chiaro, interessante e coinvolgente.<\/p>\n<p>Se si dispone di qualsiasi tipo di contenuto che implichi la visualizzazione di una sorta di processo, \u00e8 essenziale poterlo suddividere per i propri utenti in modo semplice, chiaro e conciso, senza per\u00f2 perdere alcun dettaglio importante ad esso correlato. I negozi online troveranno il widget di processo prezioso in quanto pu\u00f2 essere utilizzato per <strong>mostrare il processo di acquisto online passo dopo passo, le aziende possono condividere l&#8217;aspetto della procedura di assunzione nella loro azienda<\/strong>, i siti Web medici possono <strong>mostrare il processo di guarigione attraverso fasi<\/strong>, qualsiasi tipo di flusso di lavoro pu\u00f2 essere rappresentato visivamente attraverso fasi: le possibilit\u00e0 sono illimitate.<\/p>\n<p>In questo articolo ti mostreremo come impostare e personalizzare facilmente il widget di processo sul tuo sito web. Resta sintonizzato per saperne di pi\u00f9 su:<\/p>\n<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/colSjAmnAQU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Componenti aggiuntivi Qi per il widget di processo Elementor<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Addons per Elementor<\/a> \u00e8 uno strumento potente, versatile e <strong>molto facile da usare<\/strong> che aggiunge un&#8217;aria di eleganza oltre alla funzionalit\u00e0 al tuo sito web. Al momento, questo strumento \u00e8 la <strong>pi\u00f9 grande raccolta di componenti aggiuntivi gratuiti sul Web e include 60 widget gratuiti<\/strong> che rendono facile anche per i principianti assoluti arricchire i propri siti Web con elementi efficaci senza alcuna conoscenza di codifica necessaria. Oltre ai widget gratuiti, puoi trovare fantastici 40+ premium.<\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Il widget Process<\/a>, incluso gratuitamente, include <strong>numerose opzioni di personalizzazione e ti consente di creare splendide visualizzazioni di tutti i tipi di flussi di lavoro e processi<\/strong>, che si adattano perfettamente alle esigenze e allo stile del tuo sito web.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Dopo aver trascinato il widget del processo di lato, otterrai la sua vista predefinita che puoi modificare. \u00c8 importante notare che il widget utilizza i caratteri utilizzati dal tuo tema, quindi se vuoi uniformit\u00e0 in questa parte non dovrai cambiarlo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Le opzioni per impostare il widget Processo sono le opzioni Contenuto e Stile. Qui <strong>sceglieremo quale elemento vogliamo nel nostro widget di processo e determineremo come apparir\u00e0 in termini di stile<\/strong>. Ci sono molte impostazioni di personalizzazione ma sono cos\u00ec ben organizzate che troverai molto facile provare e sperimentare le opzioni.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h2>Widget di processo \u2013 Opzione scheda Contenuto<\/h2>\n<p>Qui ci sono Opzioni generali, Opzioni di animazione, Layout del processo e un utile strumento per sviluppatori, ma anche <strong>Aiuto dove puoi trovare istruzioni e supporto dall&#8217;autore del componente aggiuntivo stesso<\/strong>.<\/p>\n<h3>Opzioni generali<\/h3>\n<p>La prima cosa di cui avrai bisogno \u00e8 configurare le impostazioni generali del widget stesso.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Qui scegliamo il <strong>numero di colonne e se vuoi che tutti i tuoi elementi siano in una riga, selezionerai il numero di elementi per il numero di colonne<\/strong>. Altrimenti, se metti meno colonne dell&#8217;elemento, gli elementi saranno in 2 o pi\u00f9 righe, o se selezioni pi\u00f9 colonne dell&#8217;elemento, rimarrai con uno spazio vuoto nella riga.<\/p>\n<p>Probabilmente saprai quanti oggetti vuoi non appena inizi a costruirlo, quindi mi piace configurarlo subito e, naturalmente, puoi anche personalizzare queste impostazioni in seguito.<\/p>\n<p>Un&#8217;impostazione significativa \u00e8 <strong>Columns Responsive<\/strong> in cui <strong>modifichiamo l&#8217;aspetto del nostro processo su dispositivi di dimensioni diverse<\/strong>. Puoi selezionare Predefinito o Personalizzato, \u00e8 una tua scelta.<\/p>\n<p>In base alla nostra esperienza, la dimensione di 618-768px sembra migliore quando si utilizza una colonna, quindi la mettiamo in questo modo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p><strong>Gli elementi ovviamente servono per aggiungere un elemento al processo<\/strong>. Puoi aggiungerne quanti ne hai bisogno. C&#8217;\u00e8 un&#8217;opzione sia per <strong>copiare l&#8217;elemento che per eliminarlo<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p><strong>Ogni articolo viene personalizzato separatamente<\/strong>, vengono inserite le sue caratteristiche specifiche ed <strong>\u00e8 possibile impostare determinati articoli per ogni articolo in modo che ogni articolo abbia un aspetto diverso<\/strong>. Tuttavia, <strong>se vuoi che tutti gli articoli abbiano lo stesso aspetto, specifichi il loro stile nelle opzioni Stile, non in ogni articolo individualmente<\/strong>. Tutto ci\u00f2 che \u00e8 impostato nelle opzioni di stile si applica a tutti gli elementi di processo, ad eccezione di quelli in cui l&#8217;elemento stesso \u00e8 impostato in modo leggermente diverso rispetto alle impostazioni di stile. Tutto ti sar\u00e0 chiaro quando esamineremo le impostazioni.<\/p>\n<p>I campi <strong>Titolo<\/strong> e <strong>Testo vengono utilizzati per<\/strong> <strong>inserire il testo che accompagna una fase specifica del processo<\/strong>. Naturalmente, in questo caso \u00e8 naturale che ogni passaggio abbia un titolo e una descrizione diversi, quindi questo \u00e8 l&#8217;unico posto in cui \u00e8 possibile inserire questi valori.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Ecco come appare quando viene sostituito con il nostro testo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p><strong>Le opzioni dell&#8217;articolo si riferiscono alla parte dell&#8217;articolo che non \u00e8 il titolo e la descrizione<\/strong>. Usiamo <strong>Item Offset per posizionare un articolo<\/strong>. Il cerchio con l&#8217;unit\u00e0 e la linea che porta al passaggio successivo fanno parte di un elemento e regolando l&#8217;Offset oggetto <strong>spostiamo questi elementi in basso o in alto<\/strong>. Come puoi vedere nell&#8217;immagine, abbiamo impostato un po&#8217; di offset per il primo elemento e ora \u00e8 leggermente al di sotto del livello dell&#8217;elemento successivo.<\/p>\n<p>L&#8217;opzione di offset dell&#8217;elemento esiste anche nelle opzioni di stile, che, come accennato, qualsiasi cosa impostata l\u00ec si applica a tutti gli elementi del processo. Pertanto, se si desidera che tutti gli elementi si trovino su un piano diverso per ciascun elemento, si imposter\u00e0 l&#8217;offset separatamente.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p><strong>Item Holder Size<\/strong> \u00e8 la dimensione del campo in cui \u00e8 attualmente 1, ovvero il numero di passaggi, e pi\u00f9 avanti vedremo cos&#8217;altro si pu\u00f2 trovare qui. (Questa opzione si trova anche nelle opzioni di stile se vogliamo che tutti i portaoggetti abbiano le stesse dimensioni).<\/p>\n<p><strong>La tipografia dell&#8217;articolo<\/strong> si riferisce alle caratteristiche tipografiche del numero di passaggi.<\/p>\n<p>Lo <strong>sfondo<\/strong> serve ad <strong>assegnare il colore o lo sfondo appropriato all&#8217;elemento<\/strong>. Inoltre, possiamo impostare uno sfondo sfumato. Se vogliamo che tutti gli elementi abbiano lo stesso sfondo, lo regoleremo nelle opzioni di stile, se vogliamo che lo sfondo sia diverso per un elemento diverso, lo regoleremo tramite le impostazioni dell&#8217;oggetto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Per ora, aggiungeremo solo il colore di sfondo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Per impostazione predefinita, gli elementi vengono visualizzati come cerchi, ma se si desidera un quadrato o una forma con determinati angoli <strong>Portaoggetti Raggio<\/strong> \u00e8 il punto in cui lo regolerai. <strong>Quando il valore \u00e8 0 allora \u00e8 il quadrato degli angoli retti<\/strong>. Aggiungendo valori vedrai come cambiano gli angoli. Se elimini i valori, ottieni di nuovo un cerchio. Non tutti gli angoli devono essere uguali, puoi impostare un valore diverso per ogni angolo.<\/p>\n<p><strong>Tipo di bordo, Larghezza e Colore si riferiscono agli elementi del bordo<\/strong>. Quando non vuoi un bordo, Bordo \u00e8 Tipo Nessuno.<\/p>\n<p>Hai anche tutte queste impostazioni nelle opzioni di stile, se vuoi che tutti gli elementi siano uguali.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Abbiamo appena visto come modificare l&#8217;offset e ora abbiamo due opzioni che ci consentono di modificare la posizione solo della linea che porta al processo successivo. <strong>L&#8217; offset superiore della linea<\/strong> viene utilizzato per <strong>spostare la posizione della linea (su\/gi\u00f9)<\/strong> e <strong>la rotazione della linea viene utilizzata per ruotarla<\/strong>. Come puoi vedere nella nota qui sotto, abbiamo ruotato la linea e non \u00e8 pi\u00f9 ad angolo retto rispetto all&#8217;elemento. Hai queste impostazioni solo sull&#8217;elemento stesso.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Quello che ci \u00e8 mancato intenzionalmente all&#8217;inizio \u00e8 l&#8217; <strong>opzione Tipo icona<\/strong>, che ci serve per <strong>aggiungere un&#8217;icona dalla Libreria all&#8217;elemento o per caricare la nostra icona SVG<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Presta attenzione a ci\u00f2 che accade dopo, <strong>il numero ordinale di passaggi non \u00e8 pi\u00f9 scritto al centro dell&#8217;elemento ma come un cerchio aggiuntivo separato<\/strong>.<\/p>\n<p>Ora <strong>Tipografia<\/strong> oggetto e <strong>Colore oggetto si riferiscono all&#8217;icona stessa<\/strong>. Qui regoleremo la dimensione (nell&#8217;opzione dimensione tipografia) e il colore per ciascuna icona.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Un&#8217;altra cosa che non abbiamo esaminato pi\u00f9 in dettaglio sopra \u00e8 l&#8217;immagine di sfondo dell&#8217;elemento come nel caso del secondo elemento nell&#8217;esempio:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p><strong>Ogni immagine di sfondo porta con s\u00e9 alcune impostazioni<\/strong> riguardanti il \u200b\u200bposizionamento dell&#8217;immagine, la sua dimensione e se sar\u00e0 uno sfondo semplice o con un effetto di scorrimento (opzione di allegato). Avrai tutte queste opzioni quando usi un&#8217;immagine di sfondo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Dopo aver impostato le opzioni generali, il nostro widget di processo si presenta cos\u00ec:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h3>Visualizza le opzioni di animazione<\/h3>\n<p>Il widget del processo pu\u00f2 avere un&#8217;animazione: <strong>gli elementi vengono caricati uno dopo l&#8217;altro e appaiono nello stesso ordine<\/strong>, e questo \u00e8 il posto in cui regoleremo se lo vogliamo o meno.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h3>Opzioni di layout<\/h3>\n<p>Sono disponibili due opzioni di layout: <strong>visualizzazione orizzontale e verticale del processo<\/strong>. Finora, abbiamo mostrato tutto in orizzontale. Tuttavia, se si opta per la visualizzazione verticale, le opzioni sono esattamente le stesse. <strong>L&#8217;unica cosa a cui prestare attenzione \u00e8 il numero di colonne<\/strong> (ne abbiamo parlato nelle opzioni generali). Il processo verticale ha sempre una colonna se vogliamo che gli elementi siano disposti uno sotto l&#8217;altro in una colonna.<\/p>\n<p>Poich\u00e9 impostiamo tre colonne per il nostro esempio perch\u00e9 abbiamo 3 elementi, senza passare a una colonna il nostro widget appare cos\u00ec:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Naturalmente, se impostiamo una colonna tutto sar\u00e0 come dovrebbe essere:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h3>Strumenti di sviluppo<\/h3>\n<p>Questa opzione ci d\u00e0 la possibilit\u00e0 di <strong>vedere il widget in formato shortcode<\/strong> se ne abbiamo bisogno.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Come accennato, qui possiamo <strong>trovare documentazione e aiuto dall&#8217;autore<\/strong> degli addon per il widget stesso.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h2>Widget di processo \u2013 Opzione scheda Stile<\/h2>\n<p>La scheda stile fornisce <strong>opzioni per stilizzare parti del processo<\/strong>. Come abbiamo gi\u00e0 accennato, <strong>tutto ci\u00f2 che \u00e8 impostato qui si applicher\u00e0 a tutti gli elementi nel nostro processo, ad eccezione di quelli in cui \u00e8 impostato qualcosa di diverso sull&#8217;elemento stesso<\/strong>.<\/p>\n<h3>Opzioni di stile<\/h3>\n<p>Qui puoi trovare varie opzioni ripetute dagli elementi stessi, come quelle relative a colori, tipografia, offset.<\/p>\n<p>L&#8217;unica cosa non presente negli elementi \u00e8 <strong>Allineamento<\/strong> che specifica <strong>come verranno centrati il \u200b\u200btitolo e il testo<\/strong>.<\/p>\n<p>Se vuoi che tutti gli articoli siano uguali, regolerai lo stile qui. Nel nostro caso, abbiamo principalmente regolato gli articoli perch\u00e9 abbiamo diversi colori di sfondo, diverse dimensioni e posizioni. Quello che impostiamo qui \u00e8 <strong>Item color<\/strong>, ovvero il colore dell&#8217;icona che era grigia per impostazione predefinita e ora \u00e8 nera per noi.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h3>Opzioni stile linea<\/h3>\n<p>Stilizzazione della linea di processo: ne abbiamo <strong>diversi tipi<\/strong>, possiamo regolare il colore e lo spessore.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h3>Stile di spaziatura<\/h3>\n<p><strong>Spaziatura, spazio sopra il sottotitolo, sopra il testo e riempimento intorno al testo<\/strong>. Questo riempimento attorno al testo serve in un certo senso a &quot;restringere&quot; il contenuto inserendo il riempimento in un campo in cui non sar\u00e0 possibile visualizzare il testo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<h3>Stile aggiuntivo<\/h3>\n<p>Abbiamo queste impostazioni <strong>solo quando il nostro articolo contiene un&#8217;icona inserita, cio\u00e8 quando abbiamo questo campo aggiuntivo in cui si trova il numero<\/strong>. Le impostazioni si riferiscono a quel numero e al campo in cui si trova.<\/p>\n<p><strong>Colore titolare aggiuntivo<\/strong> \u00e8 il colore del campo in cui il numero e <strong>la Tipografia titolare aggiuntivo<\/strong> sono tutti correlati alla regolazione dell&#8217;aspetto del numero stesso. <strong>Additional Holder Size<\/strong> \u00e8 la dimensione del campo e con l&#8217;aiuto di Additional Holder Position possiamo cambiare la posizione del campo.<\/p>\n<p>Possiamo anche aggiungere uno sfondo per il campo dell&#8217;elemento normale, ma non possiamo aggiungerlo per ogni campo individualmente qui, verr\u00e0 applicato a tutti i campi in generale. Abbiamo aggiunto un&#8217;immagine di sfondo.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Vediamo se ci capiamo bene e in base alla presentazione possiamo vedere come sono stati eseguiti determinati processi. Questo pu\u00f2 aiutarti a crearne uno tuo e sapere immediatamente dove impostare cosa.<\/p>\n<p>Abbiamo gi\u00e0 mostrato un esempio di orizzontale. Quello che possiamo notare a prima vista \u00e8 che abbiamo 3 colonne e in esse, gli elementi in cui sono icone: un campo aggiuntivo con il numero ci dice che l&#8217;elemento \u00e8 un&#8217;icona e non un&#8217;immagine perch\u00e9 abbiamo detto che solo allora appare .<\/p>\n<p>Poich\u00e9 gli articoli hanno colori diversi, sappiamo che queste impostazioni sono state effettuate negli articoli stessi, non nelle opzioni generali.<\/p>\n<p>Potremmo anche notare che l&#8217;offset \u00e8 regolabile perch\u00e9 non tutti gli elementi sono sullo stesso piano.<\/p>\n<p>Tutte le icone e i testi hanno gli stessi colori che ci dicono che questo \u00e8 impostato nelle opzioni della scheda stile.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Il secondo esempio, sebbene sembri pi\u00f9 complicato, \u00e8 ancora pi\u00f9 semplice da eseguire. Qui, la riga sulla pagina \u00e8 divisa in due parti. A sinistra c&#8217;\u00e8 l&#8217;immagine ea destra il processo.<\/p>\n<p>Il processo ha un layout verticale, il che significa che il numero di colonne di quel processo \u00e8 1 e che tutti e 5 gli elementi sono posizionati uno sotto l&#8217;altro.<\/p>\n<p>Tutti gli elementi sono disposti simmetricamente uno sotto l&#8217;altro, il che significa che non \u00e8 impostato alcun offset.<\/p>\n<p>Tutti i testi hanno le stesse caratteristiche, quindi lo stile \u00e8 impostato nella scheda stile.<br \/>\nQui possiamo vedere che ogni articolo ha un&#8217;immagine di sfondo (e che non ci sono campi aggiuntivi per il numero), ma possiamo anche notare che il numero non \u00e8 al centro dell&#8217;articolo come avviene per impostazione predefinita.<\/p>\n<p>C&#8217;\u00e8 un trucco che puoi usare per nascondere il numero nel caso in cui non desideri che il numero venga visualizzato. Tutto quello che devi fare \u00e8 impostare Dimensione tipografia oggetto su 0px nella scheda Stile nelle Opzioni generali. In questo modo il numero non verr\u00e0 visualizzato.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" alt=\"Come creare un flusso di passaggi utilizzando Elementor Process Widget\"><\/a><\/p>\n<p>Questo pu\u00f2 essere utile se non vuoi mostrare il processo ma usa semplicemente questo widget per le altre tue esigenze e ti d\u00e0 fastidio visualizzare il numero o i passaggi.<\/p>\n<h2>Insomma<\/h2>\n<p>Aggiungere un widget di processo al tuo sito Web con i componenti aggiuntivi Qi per Elementor non \u00e8 solo facile, ma anche divertente e ti consente anche di esprimere la tua creativit\u00e0. Ti invitiamo a continuare a esplorare i modi in cui puoi arricchire il design e le funzionalit\u00e0 del tuo sito web. Se il tuo sito Web si concentra principalmente sui contenuti visivi, potresti anche essere curioso di saperne di pi\u00f9 <a href=\"https:\/\/themewp.inform.click\/it\/la-pagina-e-la-riga-a-larghezza-intera-di-elementor-spiegate-in-dettaglio\/\" title=\"sull&#039;aggiunta di pagine e righe a larghezza intera\">sull&#8217;aggiunta di pagine e righe a larghezza intera<\/a> al tuo sito Web WordPress, oppure se desideri ottenere una migliore struttura dei contenuti, potresti essere interessato a <a href=\"https:\/\/themewp.inform.click\/it\/come-creare-schede-wordpress-con-componenti-aggiuntivi-qi-per-elementor\/\" title=\"saperne di pi\u00f9 sulle schede di WordPress\">saperne di pi\u00f9 sulle schede di WordPress<\/a>. Come accennato, Qi Addons viene fornito con 60 widget gratuiti, quindi sperimentare e provare nuove possibilit\u00e0 non sar\u00e0 una minaccia per il tuo budget, ma potrebbe solo ispirarti a migliorare il tuo sito Web e aggiungere funzionalit\u00e0 pi\u00f9 utili ad esso.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un modo semplice e veloce per aggiungere il widget del processo Elementor e mostrare un flusso di passaggi su qualsiasi tipo di sito Web WordPress.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[571],"tags":[846],"class_list":["post-371401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nozioni-di-base-su-wordpress","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/371401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/comments?post=371401"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/posts\/371401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/media?parent=371401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/categories?post=371401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/it\/wp-json\/wp\/v2\/tags?post=371401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}