Iscriviti a un canale mi:
Ciao ragazzi
Oggi vedremo come creare una galleria nel modello Divi che mostra un testo quando ci si passa sopra e ha anche un collegamento.
Questo è utile se vogliamo creare un portfolio personalizzato, ricette di cucina o qualsiasi altra idea che ci viene in mente.
Il risultato sarà il seguente:
Per fare ciò utilizzeremo il costruttore DIVI e l'aspetto finale che l'editor deve avere è il seguente:
Il primo passo è configurare la riga, è la sezione verde dell'immagine precedente, quando fai clic sulle tre linee orizzontali vedrai la seguente schermata e devi lasciare le opzioni come vedi qui:
Ora aggiungiamo il modulo galleria con le seguenti opzioni:
Per aggiungere le immagini dobbiamo fare clic sul pulsante "Aggiorna Galleria" e scegliere le immagini che aggiungeremo:
Ora dobbiamo aggiungere in ogni immagine il testo che vogliamo che appaia quando passiamo con il mouse nell'immagine.
Lo aggiungeremo nel campo della legenda quando si fa clic su ciascuna immagine:
Nell'esempio ho aggiunto il seguente link con titolo e sottotitolo:
<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>
L'abbiamo quasi pronta, ma in assenza di aggiungere il foglio di stile sembra che siamo molto lontani dal risultato finale:
Ora non ci resta che aggiungere il CSS. Per fare ciò, clicchiamo sulle opzioni del costruttore, come mostrato nell'immagine seguente:
Aggiungiamo il css nella schermata seguente:
Il CSS che devi aggiungere è:
/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/ /*Hide the image title and default overlay effect*/ .et_pb_gallery_item h3, .et_overlay { display: none; } /*Set the position and size of the images and add an extra pixel to get rid of white space between images*/ .et_pb_gallery_grid .et_pb_gallery_image { position: absolute; width: calc(100% + 1px) !important; } .et_pb_gallery_caption { margin: 0 !important; } /*Set the colour of the caption text*/ .et_pb_gallery_caption a { color: #fff; } /*Set the font size and case for the title*/ b { font-size: 20px; text-transform: uppercase; } /*Set the position of caption text so it displays on to of the image on hover and add an outline*/ p.et_pb_gallery_caption { position: relative; background: rgba(0, 0, 0, .5); /*This is the colour of the image overlay on hover*/ border: none; outline: 5px solid rgba(255, 255, 255, .5); /*This is the colour of the border*/ outline-offset: -20px; /*This moves the border in a little from the edge*/ text-align: center; padding: 25% 5%; /*Adjust the first value if using more or less text*/ cursor: pointer; opacity: 0; /*Hide the caption until hover*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } /*Show the caption on hover*/ p.et_pb_gallery_caption:hover { opacity: 1; } /*Media queries: You will need to adjust these values if using more or less text*/ @media only screen and (max-width:1366px) { p.et_pb_gallery_caption { padding: 23.7% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1280px) { p.et_pb_gallery_caption { padding: 19% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1024px) { p.et_pb_gallery_caption { padding: 15% 5%; /*Adjust the first value if using more or less text*/ } } /*This media query make the gallery display as two columns rather than three on tablets in portrait*/ @media only screen and (min-width: 768px) and (max-width: 980px) { .et_pb_column .et_pb_grid_item:nth-child(2n+1) { clear: both !important; } .et_pb_gutters1 .et_pb_grid_item:nth-child(n) { width: 50% !important; margin: 0 !important; clear: none; } p.et_pb_gallery_caption { padding: 26.5% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 480px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 24.8% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 320px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 19.4% 5%; /*Adjust the first value if using more or less text*/ } }
E abbiamo ottenuto il risultato che cercavamo 😉
Ciao…Il dolce è buono, vedo una certa spartizione di Óscar…Heh heh. In ogni caso, è il mio framework per fare web. Quali differenze pensi tra Genesis e Divi? Come vedi entrambi capaci di fare gli stessi progetti? Saluti!
Ciao Sergio,
Mi è piaciuta la cosa della "divisione". Me lo avete chiesto in tanti ed è per questo che lo faccio 😉
Genesis e Divi sono visioni molto diverse. Divi è molto più facile da progettare ma secondo me Genesis più robusto, sì, molto più complicato.
Saluti 😉
Oscar
totalmente d'accordo Oscar, la genesi è incredibile! e Divi è fantastico per via di quanto sia facile fare alcune cose che normalmente sono difficili. beh, fantastico questo video, eh? Grazie mille.
Grazie mille per le tue parole Txomin 😉
pienamente d'accordo con il tuo commento
Un abbraccio!
Buongiorno Oscar, una domanda, quando ci si iscrive e si scarica il template Divi, come funzionano gli aggiornamenti? Poiché per poter aggiornare, di solito vengono richiesti i codici Product Key
Ciao Roberto,
Carico gli aggiornamenti nella zona premium e devi aggiornarlo manualmente.
Saluti 😉
ummMMMmm non so cosa sto sbagliando, ma non funziona, è la seconda volta che provo. Ciao Oscar 🙂
Ascolta, se hai un momento, è un sito di prova, lo uso per un progetto.
Sto usando immagini con le stesse dimensioni che usi nel video 748px per 421px.
Ho provato a farli meno alti, più stretti e non capisco eheh
È vero che la versione di Divi non è la stessa di quella del video, ma non credo ci sia niente a che fare.
esempio qui:
ht — tps://txurrut.appbera.com/
Grande Oscar, continuiamo ad imparare con i tuoi tutorial su wordpress
Grazie mille amico 😉
Un abbraccio!