Divi Galerie: Titel und Beschreibung über Titel legen

von | Aug 21, 2023 | Allgemein | 0 Kommentare

Schlagwörter: DIVI

Im letzten Video habe ich ja gezeigt wie man eine Masonry Galerie in Divi erstellen kann, ohne das man zusätzlich ein neues Plugin installieren muss (Divi: Masonry Galerie erstelle ohne zusätzliches Plugin). Und heute zeige ich euch wie ihr nun die Titel und Beschreibung eines Bild über die Bilder legen könnt – und zwar mit dem Galerie Modul – also das könnt ihr mit der normalen Galerie in Divi machen wie auch mit der Masonry Galerie.

Diese kleine Trick pimpt eure Galerie massiv auf und ja auch diese Aktion braucht kein zusätzliches Plugin, nur ein wenig CSS und Javascript 🙂

Video

CSS Klassenname eingeben

Als erstes gebt ihr der Gallerie eine eigene CSS Klassennamen wie zb hier:

1
cb-text-ueber-gallery-bild

Javascript

Als nächstes geht ihr

1
2
3
4
5
6
7
8
9
<script>
(function ($) {
	$(document).ready(function () {
			$(".cb-text-ueber-gallery-bild .et_pb_gallery_item").each(function () {
				$(this).find(".et_pb_gallery_title, .et_pb_gallery_caption").wrapAll('<div class="pa-gallery-text"></div>');
			});
	});
})(jQuery);
</script>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*
Text über DIVI Gallerie Bilder legen 
*/
 
.cb-text-ueber-gallery-bild .et_pb_gallery_item {
	position: relative;
}
 
.cb-text-ueber-gallery-bild .et_pb_gallery_title {
	margin: 0 !important;
}
 
.cb-text-ueber-gallery-bild .et_overlay {
	z-index: 1;
}
 
.cb-text-ueber-gallery-bild .pa-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(17, 17, 17, 0.8);
	opacity: 0;
	transition: all .5s ease-in-out;
}
 
.cb-text-ueber-gallery-bild .et_pb_gallery_item:hover .pa-gallery-text {
	opacity: 1;
}
 
.cb-text-ueber-gallery-bild .et_overlay {
	pointer-events: all !important;
}




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Kurse / Webinare

Meine nächste Webinare / Kurse