Standardmäßig ermöglichen es nur ein paar Module Inhalte in einer Lightbox zu öffnen.
Fügen Sie zunächst eine Sektion für den Inhalt hinzu, den Sie in einer Lightbox öffnen möchten. Dieser Abschnitt wird standardmäßig ausgeblendet und erscheint nur, wenn Sie auf eine Schaltfläche klicken. Der Abschnitt ist jedoch unter dem Divi Builder immer sichtbar, sodass Sie ihn nach Ihren Wünschen ändern können.
Sie können einen beliebigen Hintergrund auf den Abschnitt und andere Stile anwenden, wie Sie es normalerweise tun, wenn Sie andere Divi-Module ändern. In meinem Fall habe ich Schwarz mit 80% Deckkraft für den Abschnitt definiert. Der Abschnitt wird sich beim Öffnen im Vollbildmodus erweitern.
Jetzt müssen Sie einen Link hinzufügen, damit der Abschnitt beim Anklicken als Leuchtkasten geöffnet wird.
Wichtig ist, dass sich die Schaltfläche nicht in demselben Abschnitt befindet, in dem Sie den Inhalt für das Leuchtpult hinzugefügt haben. Fügen wir einen neuen Abschnitt für das Schaltflächenmodul hinzu, definieren wir die Klasse et-lb-btn-1 und # Platzhalterlink, wie Sie unten sehen können:
Diesen Code in die css-Datei des Child-Themes einfügen
body:not(.et-fb-root-ancestor) [class*='et-lb-content'] {
position:fixed;
visibility:hidden;
top:0px;
z-index:999999;
min-height:100%;
transition:all .2s 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; /* COLOR OF THE CLOSING ICON*/
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;
}Dieses script in den headbereich bei Divi einfügen
<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.
Hinweis: Wenn Sie das Schließsymbol nicht sehen, ändern Sie bitte die Farbe des Symbols. Standardmäßig ist es weiß. Ändern Sie diese Zeile, wie Sie möchten:
color:#fff; /* COLOR OF THE CLOSING ICON*/
Wenn Sie mehrere Leuchtkasten-Abschnitte auf der Seite benötigen, können Sie den entsprechenden CSS-Klassen einfach eine Nummer zuweisen. Wenn Sie zum Beispiel ein zweites Leuchtkasten-Formular hinzufügen, fügen Sie für die Schaltfläche CSS-Klasse hinzu:
et-lb-btn-2
und für den Leuchtkasten-Abschnitt, der durch die Schaltfläche geöffnet werden soll:
et-lb-content-2
Beispiel
In diesem Beispiel verwende ich das Informationstext-Modul, in dem gibt es standardmäßig keine Lightboxoption.
Das ist ein Informationstext
