Ti piacerebbe imparare a creare una carta con l'effetto di un portfolio? In questo nuovo tutorial, ti mostreremo come farlo Elementor.
Se non hai idea di cosa vogliamo parlare oggi, ti invitiamo a guardare il seguente video:
Quindi torniamo al perché siamo qui.
Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, perché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione diElementor.
Leggi anche: Come visualizzare il testo sopra un'immagine con Elementor
Creiamo una nuova sezione con una struttura a 3 colonne, poi nel pannello definiamo il Hauteur su Altezza minimapoi Altezza minima clicchiamo su VH e imposta il cursore su 100.
Selezioniamo la colonna centrale e rilasciamo in questa colonna il file Widget Sezione Interna. Il widget Sezione interna è configurato con 2 colonne per impostazione predefinita. Sotto le 2 colonne, lasciamo cadere il widget titolo con il titolo Ristorante, Selezionare H4 per il tag HTML e Centro per l'allineamento.
Nella scheda avanzato del widget Titolo, entriamo 30 per Margine superiore
Selezioniamo ancora una volta la nostra Sezione Interna. Nel pannello, modifichiamolo Hauteur su Altezza minima e Altezza minima impostiamo il cursore su 380. Quindi, eliminiamo la colonna destra o sinistra della sezione Interna
Lasciamo perdere Widget immagine nella Sezione Interna e inserisci un'immagine dalla nostra libreria. selezioniamo Totale per Dimensione dell'immagine et Centro per Allineamento.
NB: Se vuoi avere pagine complete come la nostra, ti invitiamo a catturare le pagine con l'aiuto dell'estensione di Chrome GoFullPage ma puoi usarne anche un'altra.
Scopri anche: Come creare una galleria di immagini con Elementor
Poi nella Tab Style, clicca su PX de Larghezza, impostiamo il dispositivo di scorrimento su 260 e raggi di confine su 10
Quindi modifichiamo il Box Shadow cambiando il Blur a 40 e Diffuse a -10.
Nella scheda Avanzate, nella sezione posizionamento, Selezionare assoluto per Posizione, Orientamento orizzontale su Goffo, il Décalage su 0, TheOrientamento verticale su Basso.
Duplichiamo due volte il nostro widget Immagine. Inevitabilmente saranno tutti sovrapposti. Apriamo il Navigatore in modo da poter accedere agli altri widget nascosti dal primo.
Sostituiamo l'immagine del secondo Widget e nella sua Tab avanzato, modifichiamoli margini inferiori et Goffo entrando 30 per ciascuno. Ora vedrai un leggero ritardo,
Fai lo stesso per il terzo widget immagine, ma applica i margini di 60 per i margini Inferiore e Sinistro. Ora dovresti avere una panoramica di tutti e 3 i widget Immagine.
Selezioniamo il nostro widget Sezione interna, andiamo alla sua scheda avanzato e nella sezione CSS personalizzato, copia e incolla il seguente snippet di codice:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Se non hai questa sezione allora non hai la versione Pro, se vuoi continuare devi aggiornare la tua versione)
Ora se passi il mouse sulla nostra mappa avrai un'animazione di zoom
Selezioniamo il nostro primo Widget Immagine (il più basso) e nella sua scheda avanzato, prendiamo fronte-img per Classi CSS.
Per il secondo Widget immagine, scriviamo metà img per le classi CSS.
Per il terzo widget immagine, scriviamo ultima-img per le classi CSS.
Vedi anche: Come creare una galleria di immagini a schede con Elementor
Passando ora sopra la nostra rubrica vedremo una magnifica animazione del contenuto della nostra Sezione Interna.
Mostriamo la nostra pagina in modalità tablet Vedremo che le immagini non verranno visualizzate correttamente.
Seleziona il primo widget Immagine, nella sua scheda Stile, modifichiamo la larghezza facendo clic su PC e quindi inserendo 150 come larghezza. Facciamo lo stesso con gli altri 2 widget Immagine.
Selezioniamo la nostra Sezione Interna, nella sua sezione Contenuto, modifichiamo il Altezza minima su 225.
Visualizziamo la nostra pagina anche in modalità Smartphone, a priori non presenta alcun problema. Ma, se ne presenta, selezioniamo la nostra Sezione Interna, nella sua sezione Contenuto, modifichiamo l'Altezza minima.
Ora duplichiamo la nostra colonna centrale 2 volte, quindi eliminiamo le altre 2 colonne vuote.
Modifichiamo i Titoli di queste colonne poi cambiamo le immagini
Dovrai avere una magnifica sezione di cui ecco i risultati:
Ecco qua, hai appena svolto questo compito facilmente.
Ottieni Elementor Pro ora!
Conclusione
Ecco ! Questo è tutto per questo articolo che ti mostra come creare una carta con effetto portafoglio. Se hai dubbi su come arrivarci, faccelo sapere all'interno 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.
...
