Trick # 356 | Dieser Beitrag beinhaltet 835 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Das Galeriemodul des Divi-Themes hat einige Einschränkungen. Der Titeltext und der Text der Bildunterschrift befinden sich standardmässig unterhalb des Bildes. Was aber, wenn Sie das ändern und den Text über/auf dem Bild platzieren möchten? Dafür gibt es im Modul keine Einstellungen. Hier erfahren Sie, wie Sie den Titel- und Bildunterschriftentext über dem Bild im Divi Gallery-Modul platzieren können. Das Verfahren ist sehr einfach.
So wie nebenan zeigt sich das Divi-Galeriemodul out of the box:
Angezeigt wird das Bild, dessen Titel und die Bildbeschriftung. Die beiden letzteren Elemente lassen sich auch über das Bild legen.
Frankreich
Der schiefe Turm von … Paris!
Jersey
Der Leuchtturm von La Corbière.
Tansania
Am Lake Lagarja schlafen Löwen auf den Bäumen.
Irland
Bitte klingeln!
Zunächst vergeben Sie dem Galerie-Modul eine CSS-Klasse. Bearbeiten Sie das Modul, wechseln Sie auf den Tab «Erweitert», klicken Sie auf «CSS-ID und Klassen» und fügen Sie den Passus «gallery-text-over-image» ins Feld «CSS-Klassen» ein.
Nun kopieren Sie das nachfolgende Script und füllen Sie es entweder in ein Code-Modul auf der Galerieseite oder in den <head>-Bereich Ihrer Website ein. Diesen Head-Bereich können Sie im Backend unter Divi/Theme-Optionen/Integration bearbeiten:
<script>
(function ($) {
$(document).ready(function () {
$(".gallery-text-over-image .et_pb_gallery_item").each(function () {
$(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").wrapAll('<div class="gallery-text"></div>');
});
});
})(jQuery);
</script>Als nächstes folgt ein wenig CSS-Code, den Sie im Backend unter Design/Customizer/Zusätzliches CSS einfügen können:
/* Galerie-Elemente positionieren */
.gallery-text-over-image .et_pb_gallery_item {
position: relative;
}/* Oberen Rand des Titels entfernen */
.gallery-text-over-image .et_pb_gallery_title {
margin: 0 !important;
}/* Z-Index des Overlays festlegen */
.gallery-text-over-image .et_overlay {
z-index: 1;
}/* Titel und Bildbeschreibung positionieren */
.gallery-text-over-image .gallery-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: rgba(256, 256, 256, 0.5);
opacity: 0;
transition: all .5s ease-in-out;
}/* Titel und Bildbeschreibung beim Hovern anzeigen */
.gallery-text-over-image .et_pb_gallery_item:hover .gallery-text {
opacity: 1;
}/* Galerie-Bilder in der Lightbox öffnen */
.gallery-text-over-image .et_overlay {
pointer-events: all !important;
}Nun zeigt sich das obige Divi-Galeriemodul wie nebenan:
Frankreich
Der schiefe Turm von … Paris!
Jersey
Der Leuchtturm von La Corbière.
Tansania
Am Lake Lagarja schlafen Löwen auf den Bäumen.
Irland
Bitte klingeln!
Werbung
Werbung
