Off Canvas Panel - TheSilverRings

Das Off Canvas Panel bietet zudem einen weiteren Platz, um Ihre Navigation hinzuzufügen. Mit Widget Areas und Hooks kann es mit zusätzlichen Elementen bestückt werden. Wie im Beitrag How the Show was made beschrieben, haben wir ein wenig Fancy-Arbeit geleistet, um einen Shop-Filter zu erstellen und unsere mobile Navigation bereitzustellen.

Sie sollten damit beginnen, sich mit dem Gremium vertraut zu machen. Read this for more information.

Table of Contents

Widgets

Widgets werden im Customizer > Layout > Widgets > Off Canvas Panel oder über das Dashboard > Appearance > Widgets hinzugefügt. Wir haben Woocommerce Widgets verwendet. Diese Arten von Widgets sind dynamisch. Beispielsweise werden die Preis- und Attributfilter nur auf der Shop- und der Archivseite angezeigt.

Ein wenig CSS, um die Woo Widgets zu ticken und sie mit einigen Rändern zu unterteilen:

.slideout-widget.woocommerce ul li {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}

.slideout-navigation .slideout-widget ul.product-categories li {
    grid-template-columns: 90% 10%;
}

.slideout-widget {
    border-top: 1px solid #ccc;
    padding-top: 2em;
}

No Desktop Navigation Toggle

Wie im Shop-Artikel beschrieben, wurde der Standard-Navigations-Toggle für den Desktop ausgeblendet, da wir ihn für unsere Filter-Widgets verwenden.