Trick # 457 | Dieser Beitrag beinhaltet 1634 Wörter. – Geschätzte Lesezeit: ca. 9 Minuten.
Heute zeigen wir Ihnen einen hübschen Gestaltungs-Trick: Das beliebige Divi-Element, das sich in einer Lightbox öffnet. Das eröffnet tolle Möglichkeiten bei der Webgestaltung.
Standardmässig erlauben nur einige wenige Module des Divi-Themes das Öffnen von Inhalten in einer Lightbox – etwa das Galeriemodul oder das Bildmodul. Wenn Sie auch andere Module so öffnen möchten, können Sie die folgende Lösung anwenden.
- Fügen Sie zunächst eine separate Sektion für den Lightbox-Inhalt hinzu. Dieser Bereich soll standardmässig ausgeblendet werden und erscheint nur, wenn auf einen Button geklickt wird. Allerdings ist die Sektion im Backend und im Divi-Builder immer sichtbar, so dass Sie sie nach Belieben ändern können.
- Vergeben Sie dieser Sektion hierfür eine Klasse namens «et-lb-content-1». Den Klassennamen können Sie im Tab «Erweitert» der Sektion unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse» eintragen.
- Im Tab «Inhalt» der Sektion definieren Sie unter «Hintergrund» eine leicht transparente Farbe. Zum Beispiel grau mit 50% Transparenz. So sieht man dereinst in der Lightbox noch die ursprüngliche Website durchschimmern.
- Nun befüllen Sie die Sektion mit Inhalt: Bestimmen Sie Anzahl Spalten und fügen Module hinzu; texten Sie die Inhalte. Verwenden Sie nur kleine Umfänge, damit die Darstellung auf einem einzigen Monitor (ohne Scrollen) Platz findet.
- Nun müssen Sie noch ein Button-Modul hinzufügen, damit sich die Sektion als Leuchtkasten öffnet, wenn Sie darauf klicken. Wichtig ist, dass sich der Button nicht in derselben Sektion befindet, in welcher Sie den Inhalt für die Lightbox hinzugefügt haben.
- Definieren Sie die Klasse «et-lb-btn-1» im Tab «Erweitert» der Button-Einstellungen – unter «CSS-ID und Klassen» im Feld «CSS-Klasse».
- Als Platzhalterlink setzen Sie im Tab «Inhalt» des Buttons die Raute # ins Feld «Button-Link-URL».
Nun folgen zwei Codes: als erster der CSS-Block. Fügen Sie ihn in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) ein:
body:not(.et-fb-root-ancestor) [class*='et-lb-content'] {
position:fixed;
visibility:hidden;
top:0px;
z-index:999999;
min-height:100%;
transition:all .5s 0s;
width: 100%;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content'] .et_pb_row {
position:relative;
top:50px;
}
.et-lb-open {
visibility:visible!important;
width:100%;
}
span.et-lb-close {
font-size:46px;
right:-1vw;
margin-top:-51px;
display:block;
color:#fff; /* Farbe des Schliessen-Icons */
padding:10px;
cursor:pointer;
font-weight:bold;
font-family:etmodules;
z-index:99999999999999;
position:absolute;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content']:not(.et-lb-open) {
transform:scale(.3);opacity:0;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-btn'] {
cursor:pointer;
}Weiter geht’s mit einem Script. Dieses kopieren Sie in den <head>-Bereich Ihrer Divi-Website – im Backend unter Divhi/Theme-Optionen/Integration – oder wahlweise in ein Code-Modul auf derselben Seite, wo die Lightbox-Sektion dereinst aufpoppen soll:
<script>
(function($) {
$(document).ready(function() {
$('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"] > .et_pb_row:first-child');
$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
$("[class*='et-lb-btn']").each(function(index, element) {
var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
if (classes !== null) {
$(element).on('click', function(e){
e.preventDefault();
$('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
});
$('.et-lb-close').click(function(){
$("[class*='et-lb-content']").removeClass('et-lb-open');
});
}
});
});
})(jQuery);
</script>Das war’s dann auch. Wagen wir den Test: klicken Sie hierfür auf diesen Button:
Lorem ipsum dolor sit amet
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Werbung
Werbung
