Come aggiungere collegamenti in una galleria nel modello DIVI e mostrare un titolo passandoci sopra (passa con il mouse)

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.

Se non hai il modello DIVI, puoi compra qui per 69$, oppure Se sei abbonato alla Premium Zone puoi scaricarla gratuitamente dall'area membri. Puoi dare iscriviti qui per 10€/mese

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 😉