DIVI şablonundaki bir Galeriye bağlantılar nasıl eklenir ve üzerine gelindiğinde bir başlık nasıl gösterilir (Vurgulu)

Selam millet,

Bugün Divi şablonunda, üzerine gelindiğinde bir metin gösteren ve ayrıca bir bağlantısı olan bir galerinin nasıl oluşturulacağını göreceğiz.

Kişiselleştirilmiş bir portföy, yemek tarifleri veya aklımıza gelen herhangi bir fikir oluşturmak istiyorsak bu kullanışlıdır.

DIVI şablonunuz yoksa, 69$'a buradan satın alın, veya Premium Bölgeye aboneyseniz, üyeler alanından ücretsiz olarak indirebilirsiniz. verebilirsin 10 €/ay için buradan kaydolun

Sonuç aşağıdaki gibi olacaktır:

Bunu yapmak için DIVI yapıcısını kullanacağız ve editörün sahip olması gereken son özellik şudur:

İlk adım satırı yapılandırmak, bir önceki görüntünün yeşil bölümüdür, üç yatay çizgiye tıkladığınızda aşağıdaki ekranı göreceksiniz ve seçenekleri burada gördüğünüz gibi bırakmanız gerekiyor:

Şimdi galeri modülünü aşağıdaki seçeneklerle ekliyoruz:

Görselleri eklemek için "Galeriyi Güncelle" butonuna tıklamamız ve ekleyeceğimiz görselleri seçmemiz gerekiyor:

Şimdi, görüntünün üzerine geldiğimizde görünmesini istediğimiz metni her görüntüye eklemeliyiz.
Her bir resme tıkladığınızda bunu efsane alanına ekleyeceğiz:

Örnekte, bir başlık ve alt başlık ile aşağıdaki bağlantıyı ekledim:

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

Neredeyse hazır, ancak stil sayfasını eklemediğimiz için nihai sonuçtan çok uzaktayız gibi görünüyor:

Şimdi sadece CSS'yi eklememiz gerekiyor. Bunu yapmak için aşağıdaki resimde gösterildiği gibi yapıcı seçeneklerine tıklıyoruz:

Aşağıdaki ekrana css ekliyoruz:

Eklemeniz gereken CSS:

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

Ve aradığımız sonucu aldık 😉