Trick # 509 | Dieser Beitrag beinhaltet 1129 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Aus dem üblicherweise horizontalen Slider-Modul des Divi-Themes lässt sich ganz einfach ein vertikaler Slider machen. Sie benötigen bloss ein wenig CSS-Code.
Out of the box sieht ein Divi-Slider beispielsweise so aus wie hier:
Die Navigation der einzelnen Folien ist horizontal angelegt.
Diesen Slider rüsten wir nun zum vertikalen Slider um und versehen ihn mit entsprechenden Schaltflächen. Hierfür vergeben wir in unserem Biepiel die CSS-Klasse «vertical_slider». Diese können Sie im Tab «Erweitert» des Slider-Moduls unter «CSS-ID und Klassen» ins Feld «CSS-Klasse» eintragen.
In der Folge noch ein Block CSS-Code, den Sie dem CSS-Stylesheet Ihrer Divi-Website hinzufügen – dieses bearbeiten Sie unter Design/Customizer/Zusätzliches CSS:
#et-main-area {
overflow: hidden;
}
.vertical_slider {
overflow: visible;
}
.vertical_slider .et_pb_slide_description h2 {
color: #59B14B!important;
font-weight:800;
padding-bottom: 40px;
}
.vertical_slider .et-pb-controllers {
position: absolute;
z-index: 10;
width: 100%;
text-align: center;
color: #293280!important;
top: 7px;
bottom: auto;
left: 103%;
display: grid;
}
.vertical_slider .et-pb-controllers a {
display: inline-block;
width: 9px;
height: 9px;
margin-right: 10px;
padding: 0;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background-color: #ffffff;
text-indent: -9999px;
margin-bottom: 16px;
}
.vertical_slider .et-pb-controllers .et-pb-active-control {
background-color: #59B14B!important;
margin-bottom: 16px;
width: 14px;
height: 14px;
margin-left: -2px;
}
.vertical_slider .et-pb-arrow-next, .vertical_slider .et-pb-arrow-prev {
top: 0%;
margin-top: 0px;
opacity: 1;
color: #ffffff!important;
font-size: 35px;
}
.vertical_slider .et-pb-arrow-prev, .vertical_slider .et_pb_slider:hover .et-pb-arrow-prev {
top: 5px;
left: 5px!important;
background: #59B14B;
}
.vertical_slider .et-pb-arrow-next,.vertical_slider .et_pb_slider:hover .et-pb-arrow-next {
right: 5px!important;
background: #59B14B;
bottom: 5px;
top: inherit!important;
}
.vertical_slider .et-pb-arrow-prev:before {
content: "\32";
}
.vertical_slider .et-pb-arrow-next:before {
content: "\33";
}Das sieht dann so aus wie nebenan:
Im Code sind zahlreiche Stylings enthalten – auch solche, die gar nicht die vertikale Navigation betreffen. Spielen Sie mit den Werten und passen Sie insbesondere die Farben Ihrem Website-Design an.
Werbung
Werbung
