Vuoi imparare a creare un modulo di caricamento file in Elementor?
Come probabilmente saprai, la versione pro di Elementor include un widget Form che puoi utilizzare per creare moduli sul tuo sito Web WordPress. Con questo widget puoi creare quasi tutti i tipi di moduli. Ci sono circa 19 tipi di campi offerti da questo widget, incluso un campo per caricare un file.
In questo articolo, ti mostreremo come creare un modulo che consiste in un campo di caricamento file.
Ma prima di iniziare, assicurati di aver aggiornato la tua versione di Elementor alla versione Pro poiché, ancora una volta, il widget Form è disponibile solo su Elementor Pro.
Innanzitutto, crea una nuova pagina o pubblicala e modificala con Elementor.
Prima di iniziare a creare la pagina per aggiungere il modulo, definisci prima il layout. Per fare ciò, fai clic sull'icona a forma di ingranaggio nell'angolo in basso a sinistra del pannello di sinistra. Imposta il tuo layout preferito dal menu a discesa disposizione.
Aggiungi una nuova sezione facendo clic sull'icona più nella casella di modifica di Elementor. Puoi selezionare qualsiasi struttura in base al concetto di design che desideri creare. Scegliamo una struttura a colonna singola in questo esempio.
Aggiungi il widget Modulo trascinandolo dal pannello di sinistra all'area della tela.
Per impostazione predefinita, hai un modulo composto da tre campi: Nome, E-mail e Messaggio. Rimuovi un campo che non ti serve facendo clic sull'icona x sul campo.
In questo articolo creeremo un form composto da 4 campi: Nome, Email, Messaggio e Caricamento file. Poiché il modulo ha solo 3 campi per impostazione predefinita, è necessario aggiungere un nuovo modulo per il campo Caricamento file.
Fare clic sul pulsante AGGIUNGI UN ARTICOLO per aggiungere un nuovo campo. Definisci il tipo di campo su Carica file. Se vuoi definirlo come campo obbligatorio, attiva l'opzione Necessario. Imposta la dimensione massima del file dal menu a discesa su Dimensione massima del file.
Per definire i tipi di file consentiti, inserisci le estensioni dei file Tipi di file consentiti. Puoi accettare più tipi di file separando le estensioni dei file con una virgola. Se vuoi consentire ai tuoi visitatori di inviare più file, attiva l'opzione File multipli e imposta il numero massimo di file che possono scaricare.
Se desideri modificare l'ordine dei campi, puoi semplicemente trascinare ciascun campo verso l'alto o verso il basso. In questo esempio, posizioniamo il campo Caricamento file sopra il campo Messaggio.
Definizione di azione
Sarebbe fantastico se potessi connettere il tuo modulo Elementor con servizi di backend del modulo come getform ou Carrozzeria. Sfortunatamente, Elementor non supporta l'integrazione con alcun servizio di backend di moduli.
Quindi, in questo articolo, definiremo l'azione sull'e-mail. Ciò significa che gli invii inviati tramite il modulo verranno inviati tramite l'e-mail specificata.
Per impostazione predefinita, l'azione del modulo era impostata su e-mail. Puoi verificarlo dall'opzione Azioni dopo l'invio.
Quindi apri l'opzione E-mail e impostare l'indirizzo e-mail a cui verranno inviati gli invii del modulo. Definire anche l'oggetto dell'e-mail.
Sempre sotto l'opzione E-mail, imposta il corpo dell'email su opzione Messaggio.
Per personalizzare il corpo dell'e-mail, puoi incollare gli shortcode dei campi che desideri aggiungere al corpo. Li trovi nella scheda AVANZATE di ogni campo.
Puoi anche personalizzare i metadati del corpo della tua email nella sezione Meta Data. Rimuovi tutti i metadati che non vuoi includere.
I metadati stessi verranno visualizzati sotto il corpo dell'e-mail.
Nei campi da e-mail, Da Nome e Rispondi a, puoi lasciarli vuoti.
Personalizzazione del modulo
Finora, il tuo modulo è pronto per essere pubblicato. Prima di pubblicarlo, puoi personalizzare il modulo per renderlo più attraente. Per impostazione predefinita, ogni campo del modulo contiene un'etichetta. Se vuoi disattivarlo, puoi farlo da Opzione Campi modulo sous la scheda Contenuto.
Per creare opzioni di stile più avanzate, puoi accedere alla scheda Stile. Ecco alcune opzioni di stile che puoi impostare.
Definisci lo spazio tra le linee e la tipografia delle etichette
Per definire lo spazio tra le righe (campi) e la tipografia delle etichette, puoi aprire l'opzione Modulo.
Imposta l'interlinea sulla sezione Distanza tra le righe. Per definire la tipografia delle etichette (dimensione del carattere, stile del carattere e famiglia del carattere), è possibile fare clic sull'icona della matita di tipografia nella sezione Etichetta.
Definisci la tipografia del campo, il colore di sfondo, il colore del bordo, la larghezza del bordo e il raggio del bordo
Puoi aprire l'opzione Settore per definire la tipografia del controllo, il colore di sfondo del controllo, il colore del bordo, la larghezza del bordo e il raggio del bordo.
Pulsante Personalizza
Per personalizzare il pulsante, puoi aprire l'opzione Bottoni. Da lì puoi impostare il colore di sfondo, il colore del testo, la tipografia, il colore del bordo, il raggio del bordo, ecc ... Passa alla scheda HOVER per personalizzare il puntamento del pulsante.
Ci sono molte altre opzioni di personalizzazione che puoi impostare. Puoi giocare con il pannello di sinistra finché non sei soddisfatto dell'aspetto del tuo modulo. Una volta fatto, puoi fare clic sul pulsante PUBBLICARE per pubblicare il tuo modulo.
Potenziale errore
Quando si verifica il modulo, potrebbero essere visualizzati messaggi di errore. Di seguito è riportato un esempio di errore.
L'errore sopra riportato di solito si verifica se si utilizza un servizio di hosting web condiviso. La maggior parte dei provider di web hosting condiviso disattiva la funzione php send_mail, che viene utilizzato dalla funzionalità di WordPress wp_mail per inviare e-mail.
Ecco ! Questo è tutto per questo articolo che ti mostra come creare un modulo di caricamento file in Elementor.Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Hai bisogno di creare o aggiungere un sommario in Elementor?
Quando scrivi un articolo lungo, come un elenco di strumenti o luoghi, puoi aggiungere un sommario. In WordPress, ci sono un sacco di plugin che puoi usare per creare un sommario sul tuo articolo.
Ma con Elementor, non è necessario installare un plug-in TOC se si desidera aggiungere un TOC. Elementor ha un widget predefinito che ti consente di aggiungere un sommario al tuo post lungo. Lo copriremo qui.
Sommario è un nuovo widget di recenteintrodotto da Elementor. Con questo widget, puoi fornire una navigazione aggiuntiva sulla tua pagina di articolo lungo, consentendo ai tuoi visitatori di saltare facilmente tra le sezioni del tuo articolo.
Il widget Sommario di Elementor ti consente di scegliere i tag di intestazione esatti da visualizzare sul sommario. Puoi anche utilizzare le intestazioni di un contenitore specifico nella pagina.
Nota: Il sommario è un widget professionale. Devi installare la versione pro di Elementor per usarlo.
Come utilizzare il widget Sommario in Elementor
Esistono due modi ideali per utilizzare il widget Sommario in Elementor. Innanzitutto, puoi usarlo su Pagine e Post (pagine e post creati interamente con Elementor). In alternativa, puoi creare il widget Sommario sopra il modello di post univoco del tuo sito Web WordPress.
Ovviamente, il modello di post univoco deve essere fatto con Elementor. Implementando il widget Sommario sul modello di singolo post, verrà generato automaticamente un sommario sul tuo post purché il post contenga i tag di intestazione in base ai livelli di intestazione impostati sul widget Sommario.
Aggiungi il widget Sommario a un singolo modello di post
In questo articolo, ti mostreremo come aggiungere il widget Sommario a un singolo modello di post. Puoi creare un nuovo modello di post singolo o modificare il modello esistente. Creeremo un nuovo modello di post singolo in questo esempio.
Per iniziare, accedi alla dashboard di WordPress e vai a Modelli -> Generatore di temi. Nella pagina Generatore di temi, vai a Scheda singola e fare clic sul pulsante AGGIUNGI UN SINGOLO per creare un modello.
Nella sezione Seleziona la sezione tipo di modelli, selezionare Un messaggio singolo. Dai un nome al tuo modello e clicca sul pulsante CREA UN MODELLO.
Creeremo da zero il template del singolo post; chiudere la libreria dei modelli.
Aggiungi una nuova sezione facendo clic sul pulsante più nella casella di modifica di Elementor e seleziona la struttura a tre colonne.
Imposta la larghezza delle colonne con un confronto di circa 28%: 61%: 10%.
Aggiungi elementi comuni come titolo del post, informazioni sul post e contenuto del post nella seconda colonna e personalizza di conseguenza. Una volta fatto, aggiungi il widget Sommario alla prima colonna.
Definisci il titolo del tuo sommario nella sezione Titolo e imposta i livelli di intestazione che desideri includere nella sezione Ancore per tag.
Se hai conoscenze di CSS, puoi escludere i selettori CSS per evitare che appaiano nell'elenco dei contenuti.
Nella sezione Visualizzazione marker, puoi impostare l'indicatore per gli elementi di contenuto (punti elenco o numeri). Se selezioni i punti elenco, puoi impostare l'icona dalla libreria delle icone.
aperto aggiuntivo Opzioni per visualizzare altre opzioni di impostazione e selezionare le impostazioni desiderate.
Ora vai alla scheda Stile per personalizzare il tuo Sommario. Puoi impostare il colore di sfondo, il colore del bordo, la larghezza del bordo e il raggio del bordo nella sezione Box.
Mentre per impostare il colore dell'intestazione, la tipografia dell'intestazione e il testo dell'intestazione, puoi andare alla sezione Intestazione.
Nella sezione Elenco, Puoi impostare il colore del testo dell'elemento attivo, il colore del testo dell'elemento quando passi il mouse su di esso e il colore del testo degli elementi in modalità normale. Qui puoi anche impostare il colore del marker e la tipografia degli elementi di contenuto.
Per rendere il tuo sommario più utile, puoi renderlo visibile quando i tuoi visitatori scorrono verso il basso. Per fare ciò, apri la scheda avanzato e accedi all'opzione Effetto movimento. Definire l'appiccicosoin cima e imposta l'offset a circa 80. Se lo desideri, puoi anche impostare l'animazione di input nella sezione Animazione d'ingresso.
Puoi giocare con il pannello di sinistra finché non sei soddisfatto del tuo sommario. Una volta fatto, clicca sul pulsante PUBBLICAREe impostare le condizioni di visualizzazione.
Ecco un esempio di un sommario che abbiamo creato.
Se imposti la condizione di visualizzazione del modello di post singolo che hai creato sopra su Tutto singolare, avrai automaticamente un sommario ogni volta che scrivi un articolo lungo che contiene i tag di intestazione in base al livello di intestazione specificato.
Alla fine
L'aggiunta di un sommario a un articolo lungo fornisce un migliore esperienza utenteai tuoi visitatori. Possono facilmente passare da una sezione all'altra del tuo articolo facendo clic sugli elementi nel sommario. Con il nuovo widget di Elementor, non è necessario installare un plug-in aggiuntivo per aggiungere un sommario a un articolo.
Puoi utilizzare il widget Sommario quando crei una pagina o un post con Elementor. In alternativa, puoi anche aggiungere il widget Sommario sul modello di post unico del tuo sito Web WordPress in modo che ogni volta che scrivi un post lungo che contiene tag di intestazione, il sommario venga generato automaticamente.
Ecco ! Questo è tutto per questo articolo che mostra come aggiungere un sommario in Elementor.Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Hai bisogno di aggiungere l'impaginazione in Elementor?
Puoi utilizzare Elementor per creare quasi tutti i tipi di siti Web. Compresi siti web dinamici come riviste elettroniche o blog. Per siti web come riviste elettroniche o blog, uno degli elementi abbastanza cruciali è la navigazione.
L'impaginazione ti consente di dividere il contenuto del tuo sito web in più pagine. Supponiamo che tu abbia centinaia di articoli che desideri mostrare nella home page. Con l'impaginazione, puoi dividere questi articoli in più pagine. Puoi, ad esempio, visualizzare solo 10 articoli per pagina. Per visualizzare gli altri articoli, puoi utilizzare l'impaginazione.
La discussione sull'impaginazione potrebbe essere più ampia di quella che abbiamo menzionato sopra. Ma vogliamo concentrarci su questo contesto.
Elementor ti consente di aggiungere l'impaginazione al tuo sito web. Puoi trovare il parametro di impaginazione quando lavori con il widget Post e il widget Archivia i post. In questo articolo, ti mostreremo come aggiungere l'impaginazione quando lavori con questi widget.
Nota: I widget Post e Archivia post sono disponibili solo su Elementor Pro.
Come aggiungere l'impaginazione in Elementor con i widget Posts e Archive Posts
Per iniziare, puoi creare una nuova pagina/post e modificarla con Elementor. Puoi anche modificare una pagina esistente.
Quindi, nell'editor di Elementor, aggiungi il widget Post trascinandolo dal pannello di sinistra alla casella di modifica.
Una volta aggiunto il widget, vai al pannello di sinistra e apri l'opzione Impaginazione sotto la scheda Contenuto. Seleziona il tipo di impaginazione dal menu a tendina. In questo esempio, usiamo numeri.
Per impostazione predefinita, l'impaginazione limita le pagine a 5. Puoi modificare questa opzione a seconda del numero di articoli che hai. C'è una cosa cruciale che dovresti notare qui. Il limite di pagine è il numero massimo di pagine a cui il tuo visitatore può accedere.
Se hai un numero elevato di post (diciamo più di 100), dovresti impostare il limite di pagina su un numero più alto per consentire ai tuoi visitatori di vedere i post per pagina nella navigazione. Se imposti il limite di pagina su 5 sebbene imposti i post per pagina su 10, il tuo visitatore sarà in grado di vedere solo gli ultimi 50 post sul tuo sito web.
WordPress (o Elementor più precisamente) nasconderà i post più vecchi diversi dagli ultimi 50 post.
Per rendere la tua paginazione breve e ordinata, puoi attivare l'opzione Accorciare.
Personalizzazione dell'impaginazione
Per personalizzare la tua impaginazione, puoi aprire l'opzione Impaginazione sous la scheda Stile del pannello di sinistra.
Puoi impostare lo stile del carattere, la dimensione del carattere e la famiglia del carattere nella sezione Tipografia. Fare clic sull'icona a forma di matita per aprire l'impostazione tipografia.
Per impostare il colore dell'impaginazione, puoi fare clic sul selettore colori nella sezione Colori. Ci sono 3 colori che puoi impostare: NORMAL, HOVER e ACTIVE (la pagina attiva). Puoi impostare lo spazio tra i numeri di paginazione nella sezione Spazio in mezzo.
Una volta terminato, puoi fare clic sul pulsante PUBBLICARE per pubblicare la tua pagina. Oppure, se stai modificando una pagina, puoi fare clic sul pulsante AGGIORNARE per applicare le nuove modifiche.
Parole finali
L'impaginazione è abbastanza cruciale su siti Web dinamici come riviste elettroniche o blog. In Elementor puoi usare i widget Post per visualizzare gli articoli dal tuo sito web. Puoi anche usare il widget Archivia post per visualizzare gli archivi del tuo sito web.
Questi widget hanno opzioni per le impostazioni di impaginazione, che ti consentono di aggiungere la navigazione a qualsiasi parte del tuo sito web in cui li utilizzi.
Ecco ! Questo è tutto per questo articolo che mostra come aggiungere l'impaginazione in Elementor.Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Elementor ha appena rilasciato una nuova funzionalità, Color Picker. Questa funzione è abbastanza utile perché ora puoi utilizzare lo stesso colore su qualsiasi parte del tuo sito Web con un solo clic. Non è quindi più necessario incollare manualmente il codice esadecimale come prima.
Ma come si usa questa funzione? Continuate a leggere per scoprirlo.
Nel caso te ne fossi dimenticato, ci sono oltre 10 milioni di colori in questo mondo. Nel mondo del web, un colore può essere rappresentato con un codice esadecimale o con un codice RGB. Elementor stesso supporta entrambi i codici colore. Per utilizzare lo stesso colore, puoi copiare il codice esadecimale o il codice RGB del colore che desideri e incollare il codice in qualsiasi parte in cui desideri utilizzare il colore.
Era prima.
Con Elementor's Color Picker, ora puoi salvare un determinato colore e usarlo più e più volte ogni volta che lavori con Elementor Editor. Con un solo clic. Questa nuova funzionalità è piuttosto interessante perché trovare un colore adatto è uno dei compiti difficili del web design oltre alla scelta di un font.
Per utilizzare il selettore di colori di Elementor, aggiungi prima un widget come al solito. Una volta aggiunto il widget, vai alla scheda Stile sul pannello di sinistra. Scegli qualsiasi impostazione che coinvolga il colore (ad esempio, il colore del testo o il colore dello sfondo).
Scegli il tuo colore preferito nel selettore di colori. Una volta trovato un colore adatto, fai clic sul pulsante più all'interno del selettore di colori.
Ti verrà chiesto di confermare se desideri creare un nuovo colore globale. Inserisci un nuovo nome e fai clic sul pulsante Creare.
D'ora in poi, puoi riutilizzare il colore che hai appena aggiunto sopra ogni volta che vuoi impostare un colore su Elementor. Che si tratti del colore di sfondo, del colore del carattere o di altre impostazioni che coinvolgono il colore.
Nel web design, la scelta di un colore è uno dei compiti difficili oltre alla scelta di un font. Una volta trovato un colore adatto, in genere copi il codice esadecimale o il codice RGB per usarlo su altre parti della pagina su cui stai lavorando.
Con il selettore di colori di Elementor, questo vecchio metodo non si applica più. Ora puoi salvare un determinato colore e riutilizzarlo con un clic, invece di incollare il codice esadecimale.
Ecco ! Questo è tutto per questo articolo che mostra come utilizzare il selettore di colori in Elementor.Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Vuoi importare o esportare modelli Elementor per velocizzare il tuo flusso di lavoro?
L'esportazione dei modelli di pagina è una delle mie funzioni preferite su Elementor. Perché?
Perché mi fa risparmiare tempo dovendo creare lo stesso modello su un altro sito web. Devo solo esportare il modello di pagina e importarlo su un altro sito web.
In questo articolo, ti mostrerò come farlo.
Ma cosa succede se si verificano alcuni problemi nel processo?
Beh è facile e te lo mostrerò anche a te.
Come creare un modello
Basta andare al Modelli registrati sotto i modelli Elementor. Fare clic sul pulsante " aggiungere '.
Indica se desideri un modello di pagina o un modello di sezione o qualsiasi altro modello. Dagli un nome. Fare clic sul pulsante " Crea un modello '.
Basta selezionare uno dei modelli gratuiti facendo clic sull'icona della cartella Aggiungi un modello.
Seleziona un modello che ti piace e fai clic su " inserire ". Scaricherà il modello e lo inserirà nella pagina.
Premi " pubblicare "E poi" tornare a IL REDATTORE DI WORDPRESS '.
Dai un'occhiata ai tuoi modelli salvati e verifica che il tuo modello sia stato salvato.
Esporta un modello in Elementor
Ora, per esportare un modello, passa il mouse sul modello salvato e fai clic su "Esporta modello".
Scaricherà un file JSON sul tuo computer. Puoi rinominarlo se vuoi renderlo più facile da identificare.
Importa un modello in Elementor
Vai all'altro sito Web e vai ai tuoi modelli salvati. Fare clic sul pulsante "Importa modelli".
Seleziona il modello o il file JSON che hai scaricato e fai clic su "Importa ora".
Vedrai nei tuoi modelli salvati che il modello è stato importato.
Un altro modo per farlo è quando si crea un nuovo modello o si aggiunge un modello, c'è un'opzione per importare un modello.
Seleziona il modello o il file JSON che hai scaricato e verrà aggiunto alla tua libreria I miei modelli. Ora puoi inserire il modello nella pagina.
Errore durante l'importazione di un modello e come risolverlo
E se provassi a importare un modello e incontrassi un errore di file non valido?
Non preoccuparti. Questo è un errore comune e si verifica normalmente quando il modello che stai tentando di importare viene creato da una versione precedente di Elementor.
C'è una correzione per questo? Sì, ci sono certamente.
Quindi ecco cosa devi fare. Effettua il downgrade della tua versione di Elementor.
Come? Basta andare al Elenco dei plugin Elementore nella vista avanzata troverai la sezione Versione precedente in basso.
Ti suggerisco di selezionare e scaricare l'ultima versione stabile di Elementor.
Ora ci sono due modi per eseguire il downgrade della versione del plug-in.
Prima di tutto, devi andare su plugin. Disabilita e quindi elimina Elementor. Puoi quindi scaricare e attivare la vecchia versione che hai scaricato.
Secondo, puoi installare un plugin chiamato Aggiornamenti facili di temi e plugin. In realtà è uno dei miei plugin preferiti. Quello che fa è che anche se hai un plug-in installato, ti consente di installare un plug-in su di esso. Lo trovo molto comodo e lo uso su tutti i miei siti web.
Quindi, con questo plugin installato, puoi scaricare la vecchia versione di Elementor e sovrascrivere la versione corrente che hai. Attiva il plugin.
Vedrai che Elementor è stato declassato alla versione precedente.
Vai alla tua libreria Elementor e importa il modello creato dalla vecchia versione. Vedrai che è già importato nella tua libreria.
Torna ai plugin e aggiorna la tua versione di Elementor all'ultima versione. Quando aggiorni la tua dashboard, sarai in grado di vederlo nel tuo Modelli registrati, il modello è presente e importato correttamente.
Ecco ! Questo è tutto per questo articolo che mostra come importare o esportare modelli in Elementor.Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Ti piacerebbe imparare come creare una pagina personalizzata per un negozio WooCommerce con Elementor?
Come forse saprai, Elementor Pro è dotato di una funzione di creazione di WooCommerce che ti consente di creare un sito Web di e-commerce personalizzato con WooCommerce senza codifica. Questa funzione ti consente di creare pagine WooCommerce personalizzate utilizzando l'editor visivo di Elementor che offre un'interfaccia intuitiva.
Al momento della stesura di questo articolo, puoi creare pagine personalizzate per la pagina del negozio, la pagina del prodotto e le pagine dell'archivio del prodotto (tag e categorie). Presto sarai anche in grado di creare pagine personalizzate per la pagina di pagamento e la pagina del carrello.
In questo articolo, ti mostreremo come creare una pagina del negozio WooCommerce personalizzata utilizzando la funzione di creazione di WooCommerce di Elementor Pro.
La stessa pagina del negozio è una delle pagine predefinite in WooCommerce. Questa pagina funge da vetrina per mostrare i tuoi prodotti. Puoi accedere a questa pagina andando su tuosito.com/store. Per impostazione predefinita, la pagina del negozio WooCommerce mostra solo i prodotti WooCommerce.
Creando una pagina del negozio personalizzata utilizzando Elementor Pro, puoi aggiungere elementi per rendere la tua vetrina più attraente.
Come creare una pagina personalizzata di un negozio WooCommerce con Elementor
Esistono almeno due widget Elementor che puoi utilizzare per creare una pagina personalizzata di un negozio WooCommerce: Prodotti di archivio che collaborano con noi, attingono direttamente dalla storia e dalla tradizione veneziana Prodotti.
In questo esempio, usiamo quest'ultimo.
La funzione del widget Prodotti è abbastanza simile a quello del widget Messaggi. La differenza è che il widget Prodotti viene utilizzato per visualizzare i prodotti WooCommerce mentre il widget Post viene utilizzato per visualizzare i post del blog.
Tieni presente che puoi trovare il widget Prodotti solo quando il plug-in WooCommerce è installato e attivato.
Per iniziare a creare una pagina del negozio WooCommerce personalizzata utilizzando Elementor Pro, vai su Innanzitutto à Modelli -> Generatore di temi sulla dashboard di WordPress. Fare clic sulla scheda Prodotti Archivia della pagina Theme Builder, quindi fare clic sul pulsante ajouter un ARCHIVIO PRODOTTI.
Dai un nome al tuo modello e clicca sul pulsante CREA UN MODELLO.
Sono disponibili tre modelli di pagine del negozio personalizzate tra cui scegliere nel caso in cui si desideri creare la pagina del negozio personalizzata da un modello. Se vuoi creare la pagina del negozio personalizzata da zero, puoi semplicemente chiudere la libreria dei modelli.
In questo esempio, creeremo da zero la pagina del negozio personalizzata. Come accennato in precedenza, utilizzeremo il widget Prodotti per visualizzare i prodotti.
Prima di aggiungere il widget Prodotti alla casella di modifica, puoi definire il layout aggiungendo sezioni e colonne. Una volta che il layout è pronto, puoi semplicemente trascinare il widget Prodotti nella casella di modifica.
Come puoi vedere, il widget Prodotti carica e visualizza automaticamente gli ultimi prodotti WooCommerce. Puoi modificare la query aprendo il blocco domanda sotto la scheda Contenuto dal pannello delle impostazioni. Ci sono cinque opzioni tra cui scegliere:
Query corrente - Query corrente
Ultimi prodotti - Ultimi prodotti
Saldi - Saldi
In primo piano - In primo piano
Selezione manuale - Selezione manuale
Puoi anche impostare l'ordine in cui vengono visualizzati i prodotti o escluderne alcuni
Per impostare il numero di colonne e righe, puoi aprire il blocco del Pacco sotto la scheda Soddisfare. Da questo blocco puoi anche attivare il paginatura.
Puoi giocare con il pannello delle impostazioni finché non ottieni le migliori impostazioni per il widget Prodotti. Una volta terminato con il widget Prodotti, puoi aggiungere altri widget alla tua pagina.
Una volta terminata la modifica della pagina, puoi fare clic sul pulsante PUBBLICARE nella parte inferiore del pannello delle impostazioni.
Aggiungi una condizione di visualizzazione facendo clic sul pulsante aggiungere una condizione. Poiché desideri creare una pagina del negozio personalizzata, seleziona l'opzione Negozio Pagina. Fare clic sul pulsante SALVA E CHIUDI per salvare la modifica.
Finora, hai creato con successo la pagina del negozio WooCommerce personalizzata utilizzando Elementor Pro. Puoi andare sul tuo sito.com/negozio per controllare il risultato.
Personalizza il widget Prodotti
Prima di pubblicare la tua pagina, puoi personalizzare il widget Prodotti per renderlo più attraente. Per fare ciò, fai clic sul widget nella casella di modifica e vai alla scheda Stile dal pannello delle impostazioni. Ci sono quattro blocchi che puoi aprire come segue:
Prodotti
Puoi aprire questo blocco per definire lo spazio tra colonne e righe. Da questo blocco puoi anche impostare la tipografia (famiglia di caratteri, dimensione del carattere, ecc.) nonché il colore del testo degli elementi del prodotto come titolo del prodotto, prezzo del prodotto, valutazione del prodotto, prodotto, ecc. Puoi anche impostare il bordo dell'immagine del prodotto,
Box
In questo contesto, Box si riferisce al contenitore di ciascun prodotto. Puoi aprire il blocco Box per definire la larghezza del bordo del contenitore, il raggio del bordo, l'ombra della scatola, il colore di sfondo, il colore del bordo, ecc.
Impaginazione
Se attivi l'opzione Impaginazione dal blocco Soddisfare, puoi aprire il blocco Impaginazione sotto la scheda Stile per personalizzare l'impaginazione. Puoi impostare cose come spaziatura, colore del bordo, colore di sfondo, ecc.
È inoltre possibile definire parametri diversi su ogni stato (normale, puntato e attivo).
Vendita Flash
Quando aggiungi un nuovo prodotto in WooCommerce, puoi impostare un attributo del prezzo di vendita per mostrare ai tuoi visitatori che il prodotto associato è scontato. Per enfatizzare ciò, puoi visualizzare l'attributo di vendita nella pagina del negozio in modo che i prodotti scontati abbiano un badge di vendita.
Puoi aprire il blocco Vendita Flash per personalizzare il badge di vendita. Puoi definire elementi come colore del testo, colore di sfondo, tipografia, raggio del bordo, dimensione (larghezza e altezza), distanza, ecc….
Alla fine
WooCommerce Builder è una delle funzionalità offerte da Elementor Pro. Ti consente di creare un sito Web di eCommerce personalizzato e unico con WooCommerce e senza codifica. Non è necessario installare un tema WordPress che afferma di essere progettato per WooCommerce. Invece, puoi creare pagine WooCommerce personalizzate utilizzando l'editor visivo di Elementor.
Fino alla versione 3.2.2, Elementor Pro ti consente solo di creare pagine di negozio personalizzate, pagine di prodotti singoli personalizzati e pagine di archivio di prodotti personalizzati. Ma Elementor ha annunciato che nella prossima versione di Elementor Pro sarai anche in grado di creare una pagina del carrello personalizzata, una pagina di pagamento personalizzata e una pagina dell'account cliente personalizzata.
Ecco ! Questo è tutto per questo articolo che ti mostra come creare una pagina personalizzata per un negozio WooCommerce con Elementor.Se hai dubbi su come arrivarci ffacci sapere in commentaires.
Riservatezza e cookies: questo sito utilizza cookies. Continuando a navigare su questo sito, acconsenti al nostro utilizzo.
Per saperne di più, compreso come controllare i cookie, vedere quanto segue:
Politica sui cookie
