Hai mai desiderato presentare una scheda prodotto con Elementor ?
Questo è ciò che ti mostreremo in questo tutorial. Per avere un'idea abbastanza precisa di cosa parleremo oggi, vi invitiamo a guardare il seguente video:
Questo tutorial riguarda la presentazione di prodotti che sono scarpe evidenziando le loro taglie, colori e il pulsante di acquisto di ciascuno. Quando passi il mouse su ciascuna delle carte, queste informazioni appariranno. Ecco un breve riassunto di ciò che faremo.
Per seguire questo tutorial, ti invitiamo a trovare immagini di scarpe e ad avere una versione Pro di Elementor. Se non lo hai ancora, fai clic su questo link per ottenerlo.
Ma torniamo al motivo per cui siamo qui.
Creiamo una pagina e la modifichiamo con Elementor.
In questo scegliamo una struttura con 3 colonne. sistemiamolo hauteur su altezza minima , l'altezza minima su VH e posizionare il cursore su 100
Nella scheda Stile, scegli il colore di sfondo da #130640
Nella colonna centrale inserire a Widget immagine selezionando un'immagine di scarpa dalla tua libreria.
Vai alla scheda Stile e nella proprietà dell'immagine imposta la larghezza su 80
Quindi trascina un Widget del titolo e inserisci il titolo scarpe Nike - Questo è un esempio, potrebbe essere tutta un'altra marca -
Leggi anche: Come ottimizzare il layout del tuo sito web con Elementor
Imposta il tag HTML su H3 e centra l'allineamento
Vai alla scheda Stile e cambia il colore del testo in colore bianco
Cambia anche la tipografia
Quindi trascina un Widget Sezione interna sotto il Widget del titolo che hai inserito sopra.
Per impostazione predefinita, questo widget ti offrirà 2 colonne, eliminane una. In questo Widget Sezione interna, Inserisci a Widget del titolo.
Datelo come titolo Formato : e imposta il tag HTML su Durata.
Nella scheda Stile, cambia il colore del titolo, la dimensione in 15 e il grasso in 300
Nella scheda Avanzate, imposta solo il Margine destro su 5 e nella proprietà posizionamento selezionare In linea (automatico).
Aggiungi nella stessa sezione interna un widget Pulsante con per il testo 8 e la spaziatura delle icone su 0.
Leggi anche: Come scorrere un'immagine lunga di un portfolio con Elementor
Nella scheda Stile, cambia il colore del testo e il colore di sfondo del pulsante rispettivamente in Bianco e Nero e nel Margine Interno inserisci 6-10-6-10 rispettivamente per i margini Interni In Alto-Destra-Basso -Sinistra.
Nella scheda Avanzate impostare solo il margine sinistro su 5 e nella proprietà Posizionamento selezionare In linea (automatico).
Duplica questo pulsante 3 volte e cambia il testo degli ultimi 3 pulsanti in 9,10,11 - puoi farlo anche usando le lettere S, M, L, XL, XXL-
Fare clic sulla sezione Modifica e impostare Allineamento orizzontale su Centro
Quindi duplica questa sezione interna -Sezione interna- e modifica Dimensione per colore rimuovi 3 pulsanti e su quello che rimarrà cancella il testo del pulsante.
Nella scheda Contenuto del pulsante, seleziona l'icona Cerchio dalla libreria di icone, fai clic su Inserisci per aggiungerla al pulsante.
Nella scheda Stile, dai la dimensione 24 alla tipografia e collega i Margini interni e inserisci 0. Nel colore di sfondo imposta la trasparenza su min e quindi puoi cambiare il colore del testo in blu, ad esempio.
Quindi duplica questo pulsante 3 volte e cambia i colori degli altri due in giallo e rosso. Quindi fare clic sulla sezione interna per modificarla e nella scheda Avanzate impostare i margini superiore e inferiore su -5 e 10.
Ora aggiungeremo un widget Pulsante sotto il secondo widget Sezione interna, inserisci come testo Acquista ora e Allineamento al centro. Nella scheda Stile, imposta il pulsante su Bianco e il testo del pulsante su Nero, quindi imposta tutti i raggi del bordo su 20.
Seleziona la colonna principale su cui abbiamo lavorato e imposta l'allineamento Verticale su Mezzo, nella scheda Stile, scegli il tipo di sfondo come Degradato e come Tipo select Radiale quindi sul colore principale imposta la trasparenza e la posizione su 94. Per il secondo colore, imposta la posizione su 77 e il raggio dei bordi superiore a 10.
Nella scheda Avanzate, imposta i margini su 0-35-0-35 e i margini interni su 50-20-50-20.
Puoi quindi nascondere il pannello per vedere come appare il tuo lavoro. Vedrai che la tua carta è molto carina, ma la daremo vita animando alcune sezioni. E per questo animeremo la Dimensione, il Colore e il pulsante Acquista.
Vedi anche: Come cambiare l'intestazione sullo scorrimento della pagina su Elementor
Sezioniamo prima la prima sezione Interna che mostra la taglia del prodotto e nella scheda Avanzate, definiamo Dissolvenza in entrata come effetto movimento - Animazione entrata e ritardo animazione attivati 300.
Facciamo lo stesso con la sezione interna che mostra i colori ma con un ritardo di animazione di 800. Per il pulsante di acquisto, il suo ritardo sarà di 1000
Ora assegniamo la classe nascondi prima Sezione interna e pulsante Acquista. Seleziona la prima Sezione interna, nella scheda Avanzate e nella proprietà Avanzate inserisci hide-first nel campo Classi CSS. Fai lo stesso per l'altra sezione interna e per il pulsante Acquista.
Andremo quindi ad aggiungere il codice CSS che animerà l'intera colonna. Copia il seguente codice:
selettore {
altezza: 400px;
Display: flettere;
}
/ * CSS per Mostra / Nascondi * /
selettore .hide-first {
display: none;
}
selettore: hover .hide-first {
blocco di visualizzazione;
}
/ * Trasformazione dell'immagine * /
selettore img {
transizione: facilità 5 secondi;
}
selettore: passa il mouse img {
trasforma: trasla (-20px, -40px) ruota (-25deg) scala (1.4);
}
/ * Panoramica cellulare * /
@media (larghezza massima: 767 px) {
selettore: passa il mouse img {
trasforma: trasla (-20px, 0px) ruota (-10 gradi) scala (1);
}
selettore {
margine: 50px 10px;
}
}
Seleziona la colonna per modificarla e vai alla scheda Avanzate e nel campo CSS personalizzato, incolla questo codice.
NB: Dovresti sapere che questa opzione è disponibile solo se hai la versione Pro diElementor.
Se è fatto, la tua mappa si animerà al passaggio del mouse mentre per impostazione predefinita nasconde le dimensioni, i colori e il pulsante Acquista.
Per quanto riguarda la spiegazione del codice, la parte dei commenti fornisce una panoramica. Ma modificando i valori capirai a cosa serve ogni istruzione.
Vedi anche: Come aggiungere due pulsanti affiancati nella stessa colonna con Elementor
Se tutto funziona normalmente, duplica questa colonna due volte ed elimina le altre colonne vuote.
Tutto quello che devi fare è sostituire le immagini e i titoli degli altri blocchi e finalmente visualizzare in anteprima il tuo lavoro.
Hai appena creato una bellissima scheda prodotto.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo tutorial che ti mostra come creare una scheda prodotto con Elementor. Se hai dubbi su come arrivarci, faccelo sapere nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
