DIVI: Galerie mit Text Navigation

von | Feb 1, 2024 | Allgemein | 0 Kommentare

Schlagwörter: DIVI

Ich bin immer auf der Suche nach neuen verrückten Design Ideen so auch bei den Galerien in Webseiten. Wir alle kennen diese Galerien – diese Slider wo das Bild ganz gross ist, links und rechts Pfeile sind (oder unten als Punkte) und wo die Bilder dann automatisch Wechseln.

Heute möchte ich euch zeigen wie ihr diese Navigation als Texte hinterlegen könnt. Ich finde es eine sehr schöne Idee die dafür sorgt, dass eine Galerie anders aussieht.

Video

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*** Galerie mit Text Menu ***/
 .et_pb_slider .et_pb_slides .et_pb_container {
     min-height: 100vh; /* fullscreen - height of slides */
}
 .et_pb_slider .et_pb_slider_container_inner {
     display: block; /* moves description to the top */
}
 .et_pb_slider .et_pb_slide_description {
     padding: 10% 6%; /* default is 16% 8% */
     -webkit-animation-name: none; /* entfernt animation */
     -ms-animation-name: none;
     animation-name: none;
}
 .et_pb_slider .et-pb-controllers {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     left: unset; /* links rechts anpassen */
     right: 0; /* links rechts anpassen */
     width: auto;
     height: 100%;
}
 .et_pb_slider .et-pb-controllers .et-pb-active-control {
     background-color: #fdb932; /* hintergrundfarbe des aktiven menu punkt */
}
 .et_pb_slider .et-pb-controllers a {
     border-radius: 50px;
     width: 110px; /* muss an deine texte und fonts evtl angepasst werden */
     height: 30px; /* muss an deine texte und fonts evtl angepasst werden */
     margin-right: 3rem;
     margin-bottom: 15px;
     color: transparent; 
     background-color: #A81010; /* huntergrundfarbe des normalen menu punkt*/
     opacity: 1;
}
 .et_pb_slider .et-pb-controllers a:before { /* text als menu punkte */
     display: block;
     color: #fff;
     font-size: 15px;
     font-weight: 600;
     line-height: 30px;
     text-indent: 0;
}
 .et_pb_slider .et-pb-controllers a:nth-child(1):before {
     content: 'Hund';
}
 .et_pb_slider .et-pb-controllers a:nth-child(2):before {
     content: 'Giraffe';
}
 .et_pb_slider .et-pb-controllers a:nth-child(3):before {
     content: 'Ente';
}
 .et_pb_slider .et-pb-controllers a:nth-child(4):before {
     content: 'Zebra';
}
 
.et-pb-arrow-prev, .et-pb-arrow-next {
	display:none!important;
}

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

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