Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

Ti piacerebbe imparare a creare una carta con l'effetto di un portfolio? In questo nuovo tutorial, ti mostreremo come farlo con Elementor.

Se non hai idea di cosa vogliamo parlare oggi, ti invitiamo a guardare il seguente video:

crea una carta con effetto portfolio

Quindi torniamo al perché siamo qui.

Per completare questo tutorial, avrai bisogno la versione Pro di Elementor, poiché utilizzeremo il codice CSS personalizzato che è supportato solo da questa versione di Elementor.

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.

Sezione a 3 colonne

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 ristoranti, Selezionare H4 per il tag HTML e Centro per l'allineamento.

Nella scheda avanzato del widget Titolo, entriamo 30 per Margine superiore

crea una carta con effetto portfolio

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

crea una carta con effetto portfolio

Lasciamo perdere Widget immagine nella Sezione Interna e inserisci un'immagine dalla nostra libreria. selezioniamo Totale per Dimensione dell'immagine et Centro per Allineamento.

crea una carta con effetto portfolio

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

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

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.

crea una carta con effetto portfolio

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.

crea una carta con effetto portfolio

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.

crea una carta con effetto portfolio

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)

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

Ora se passi il mouse sulla nostra mappa avrai un'animazione di zoom

crea una carta con effetto portfolio

Selezioniamo il nostro primo Widget Immagine (il più basso) e nella sua scheda avanzato, prendiamo front-img per Classi CSS.

Per il secondo Widget immagine, scriviamo metà img per le classi CSS.

Per il terzo widget immagine, scriviamo last-img per le classi CSS.

Vedi anche: Come creare una galleria di immagini a schede con Elementor

Passando il mouse sopra la nostra colonna ora vedremo una bella animazione del contenuto della nostra Sezione Interna.

crea una carta con effetto portfolio

Mostriamo la nostra pagina in modalità tablet Vedremo che le immagini non verranno visualizzate correttamente.

crea una carta con effetto portfolio

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.

crea una carta con effetto portfolio

Mostriamo a priori la nostra pagina anche in modalità Smartphone non presenta nessun problema. Ma, se ce n'è, 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.

crea una carta con effetto portfolio

Modifichiamo i Titoli di queste colonne poi cambiamo le immagini

Dovrai avere una magnifica sezione di cui ecco i risultati:

crea una carta con effetto portfolio

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.

...