Jak dodać linki w galerii w szablonie DIVI i pokazać tytuł po najechaniu na niego kursorem (Najedź)

Cześć chłopaki,

Dzisiaj zobaczymy, jak stworzyć galerię w szablonie Divi, która pokazuje tekst po najechaniu na niego, a także ma link.

Jest to przydatne, jeśli chcemy stworzyć spersonalizowane portfolio, przepisy kulinarne lub jakikolwiek inny pomysł, który przyjdzie do głowy.

Jeśli nie masz szablonu DIVI, możesz kup tutaj za 69 $, lub Jeśli jesteś subskrybentem Strefy Premium, możesz pobrać ją bezpłatnie z obszaru członków. możesz dać zapisz się za 10 €/miesiąc tutaj

Wynik będzie następujący:

Aby to zrobić, użyjemy konstruktora DIVI, a ostateczny aspekt, który musi mieć edytor, jest następujący:

Pierwszym krokiem jest skonfigurowanie wiersza, jest to zielona sekcja poprzedniego obrazu, po kliknięciu trzech poziomych linii zobaczysz następujący ekran i musisz pozostawić opcje, jak widać tutaj:

Teraz dodajemy moduł galerii z następującymi opcjami:

Aby dodać obrazy, musimy kliknąć przycisk „Aktualizuj galerię” i wybrać obrazy, które zamierzamy dodać:

Teraz musimy dodać w każdym obrazie tekst, który chcemy wyświetlić po najechaniu kursorem na obraz.
Dodamy go w polu legendy po kliknięciu każdego obrazu:

W przykładzie dodałem następujący link z tytułem i podtytułem:

<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>

Mamy go już prawie gotowy, ale z powodu braku dodania arkusza stylów wydaje się, że jesteśmy bardzo daleko od ostatecznego rezultatu:

Teraz wystarczy dodać CSS. Aby to zrobić, klikamy opcje konstruktora, jak pokazano na poniższym obrazku:

Dodajemy css na poniższym ekranie:

CSS, który musisz dodać, to:

/*---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*/
    }
}

I otrzymaliśmy wynik, którego szukaliśmy 😉