Trick # 513 | Dieser Beitrag beinhaltet 680 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Mit einem «Sticky-Widget» können Sie Ihrem Theme Widgets hinzufügen, die auch dann angezeigt werden, während der Benutzer auf der Seite nach unten scrollt. Wir zeigen Ihnen, wie Sie dem Divi-Theme einen «Sticky-Widget»-Bereich für die Seitenleiste hinzufügen.
Eine «Sticky-Widget»-Seitenleiste bietet Ihnen die Möglichkeit, Widgets zu platzieren, die beim Herunterscrollen auf dem Bildschirm an Ort und Stelle bleiben sollen. Dies eignet sich zum Beispiel hervorragend für die Anzeige von Social-Media-Symbolen, aber es gibt auch viele andere Verwendungsmöglichkeiten. Zum Beispiel könnte es eine Biografie, eine Newsletter-Anmeldung oder Details zu einem zeitlich begrenzten Angebot enthalten.
Dabei ist es gar nicht notwendig, den Sticky Widget-Bereich in ein Divi-Sidebar-Modul zu platzieren (und der Code würde so gar nicht funktionieren). Stattdessen fügt sich die Seitenleiste direkt in die Website ein, ohne mit dem Page-Builder zu interagieren. Durch den Code wird die Seitenleiste angezeigt, auch wenn Sie sie nicht explizit hinzugefügt haben.
Zunächst registrieren wir einen neuen Widget-Bereich mit dem Namen «Sticky Sidebar», indem wir den folgenden Code in die functions.php einfügen – Sie können die Datei unter Design/Theme-Datei-Editor bearbeiten:
function prefix_widget_area() {
register_sidebar(array(
'name' => 'Sticky Sidebar',
'id' => 'prefix-widget-area',
'before_widget' => '<div id="%1$s" class="prefix_widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'prefix_widget_area');
function prefix_load_jquery() {
wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'prefix_load_jquery');
function prefix_add_floating_sidebar() { ?>
<div id="prefix-widget-area-wrap"><?php dynamic_sidebar('prefix-widget-area'); ?></div>
<script>
jQuery("#et-main-area").prepend(jQuery("#prefix-widget-area-wrap"));
</script>
<?php
}
add_action('wp_footer', 'prefix_add_floating_sidebar');Der Widget-Bereich existiert nun bereits. Sie können nun die gewünschten Widgets via Design/Widgets in die neue (vorderhand noch leere) Seitenleiste «Sticky Sidebar» einfügen.
Jetzt müssen wir die Seitenleiste so gestalten, dass sie an Ort und Stelle bleibt und immer auf dem Bildschirm angezeigt wird. Hier ist der CSS-Code, um dies zu erreichen – fügen Sie ihn in das CSS-Stylesheet Ihrer Website in. Unter Design/Customizer/Zusätzliches CSS:
@media only screen and ( min-width: 981px ) {
#prefix-widget-area-wrap {
z-index:1000;
display:block !important;
float:left; position:fixed;
background-color:white;
margin-top:2px;
}
.prefix_widget {
padding:16px;
}
}
@media only screen and ( max-width: 980px ) {
#prefix-widget-area-wrap { display:none; }
}Nun noch die Platzierung: Wenn Sie den Widget-Bereich z.B. um 20px nach unten und um 10px nach rechts verschieben wollen, können Sie das folgende CSS verwenden, welches Sie wiederum dem CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS) hinzufügen:
#prefix-widget-area-wrap {
margin-top: 20px !important;
margin-left: 10px !important;
}Das war’s dann. Die Website zeigt nun einen Widget-Bereich an, der sich automatisch beim Scrollen mitbewegt.
Werbung
Werbung
