Um den Off Canvas Builder zu verwenden, gehe zu Avada -> Off Canvas in der WordPress-Seitenleiste oder im Menü des Avada Dashboards. Hier kannst du alle deine Off Canvas-Kreationen erstellen und verwalten. Gebe deinem neuen Off Canvas einen Namen und klicke auf „Neues Off Canvas erstellen“. Je nachdem, ob der Avada Builder automatisch aktiviert ist oder nicht, wirst du entweder direkt zum Avada Builder oder zum WordPress Editor weitergeleitet.

Klicke auf den gewünschten Builder, entweder Avada Builder oder Avada Live, um mit der Erstellung zu beginnen. Du hast die Möglichkeit, einen Container hinzuzufügen und den Off Canvas Inhalt von Grund auf zu bauen. Alternativ kannst du auch über das Avada Studio eine vorgefertigte Off-Canvas Vorlage importieren.

Die Erstellung eines Off Canvas besteht aus zwei Schritten: dem Aufbau und der Konfiguration. Der Inhalt wird aus dem Avada Builder genommen, sodass die Inhalte des Off Canvas mit verschiedenen Designelementen versehen werden können. Der Off Canvas Builder ermöglicht die Erstellung von Popups sowie Slide-Ins (Schiebeleisten), Flyout-Menüs und Push-Menüs.

Die Konfiguration erfolgt über die Off-Canvas-Optionen in den Avada-Seitenoptionen. In Avada Live befindet sich die Konfiguration in der Seitenleiste und ist während des Erstellungsprozesses aktiv. In Avada Builder befindet sich die Konfiguration im unteren Bereich der Seite. Du solltest beachten, dass die Konfiguration und der Erstellungsprozess gleichzeitig stattfinden, da einige Optionen die Optik der Off-Canvas-Seite beeinflussen. Es gibt verschiedene Registerkarten für die Konfiguration, die nacheinander durchgegangen werden können.

Unter „View Dynamic Content As“ legst du fest, wie oder wann das Off Canvas aktiv wird. Hier kannst Du z.B. den Inhaltstyp Seite wählen und darunter entweder alle veröffentlichten Seiten oder eine ganz spezielle Seite definieren.

Der Allgemein Tab beinhaltet die Hauptkonfiguration des Off Canvas. Hier kannst Du Typ (Popup oder Sliding Bar) einstellen und Breite, Höhe sowie verschiedene andere Ausrichtungsoptionen anpassen. Für jeden Off-Canvas-Typ gibt es eigene Optionen zum einstellen.

Im Bereich des Design Tab kannst du dein Off Canvas konfigurieren. Zur Auswahl stehen Hintergrundfarbe oder -Bild, Randoptionen sowie Margins und Paddings, Z-Index und Box Shadow.

Im Overlay Tab steuerst du die Gestaltung des Seiteninhalts im Hintergrund, wenn das Off Canvas aktiv ist. Du kannst sie vollständig deaktivieren oder mit Farbe, Bildlaufleisten und sogar Hintergrundbildern gestalten. Bei Farbe bietet es sich an, einen dunklen halbtransparenten Ton zu wählen, um den Inhalt des Off Canvas hervorzuheben und den Inhalt der Webseite dahinter abzudunkeln.

Im Tab Schließen kannst du konfigurieren, wie dein Off-Canvas geschlossen wird. Du kannst die Schaltfläche zum Schließen mit Symbol, Symbolgröße, Farbe und Rändern usw. anpassen.

Im Animation Tab konfigurierst du die Eingangs- und Ausgangs Animation für dein Off Canvas. Für die Entrance und Exit Animationen stehen folgende Effekte zu Auswahl: Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, Light Speed.

Wenn ein Off Canvas erstellt wird, ist es standardmäßig nicht aktiv. Das Off Canvas befindet sich im Wesentlichen in einem Entwurfszustand, so dass du entscheiden kannst, wann, wo und wie das Off Canvas aktiviert wird. Dies wird im Tab Bereich Conditions erreicht. Wenn du die Option Enable Conditions aktivieren auf Ja setzt, wird das Off-Canvas aktiv und global, d. h. es wird auf jeder Seite angezeigt.

Du kannst auch auf Manage Conditions klicken, um das Dialogfeld Bedingungen zu öffnen, in dem du genau festlegen kannst, für welche Teile deiner Website das Off-Canvas aktiv sein soll. Bei dieser Methode musst du auswählen, welche Seiten und Beitragstypen du mit dem Off-Canvas aktivieren und deaktivieren möchtest.

Auslöser des Off Canvas werden in dem Tab „Trigger“ verwaltet. Hier kannst du eine Reihe automatischer Auslöser wie „Beim Laden der Seite“, „Zeit auf der Seite“, „Beim Scrollen“ usw. festlegen. Es besteht auch die Möglichkeit, einen Element-Selektor für die manuelle Auslösung deines Off-Canvas durch einen Button oder einen anderen Auslöser festzulegen.

Außerhalb des Triggers Tab gibt es noch einige weitere Möglichkeiten, ein Off-Canvas auszulösen. Die erste Möglichkeit ist die Verwendung eines Avada Special Menu Items. Durch Hinzufügen des speziellen Menüpunkts Off Canvas Toggle zu einem Menü kannst du einen Menü-Link hinzufügen, um einen bestimmten Off Canvas umzuschalten. Weitere Informationen zu dieser Methode findest du in der Dokumentation für Avada Special Menu Items. https://avada.com/documentation/avada-special-menu-items

Im Tab Regeln kannst du Regeln für die Anzeige deines Off-Canvas konfigurieren. Dazu gehört, dass das Off-Canvas erst nach einer bestimmten Anzahl von Seitenaufrufen, Sitzungen oder Minuten angezeigt wird, oder sogar, wenn deine Nutzer von einer bestimmten Seite kommen oder eine bestimmte Seite verlassen. In Kombination mit den Bedingungen und den Triggern erhältst du so ein sehr leistungsfähiges System zur Steuerung der Anzeige deines Off-Canvas.

Wie auch bei den Seitenoptionen gibt es auch hier die Möglichkeit, deine Einstellungen für das Off Canvas zu exportieren und zu importieren.

Als Beispiel für das dynamische auslösen deines Off Canvas Inhalts, benutze ein Button Element.
Im Button Element klicke unter Button URL auf das graue Tonnen-Symbol (1. im Bild). Dann wählst du unter „Select Dynamic Content“ weiter unten Open Off Canvas (2. im Bild). Danach wählst du dann dein zuvor erstelltes Off Canvas (3. im Bild) im Dialogfeld Open Off Canvas.

Neben den klassischen Popups für Newsletter oder Bookings, kann ein Off Canvas auch für Slide-Ins genutzt werden. So könnte am rechten Seitenrand eine Symbolleiste stehen, die bei hover mit der Maus sich ausklappt um Social Media Kanäle oder ein kurzes Kontaktformular zu zeigen.

Dazu sei aber auch erwähnt, das dynamische Popups nicht immer beliebt sind bei den Benutzern. Daher setze ein Off Canvas mit bedacht ein. Auch eigene Mobile Menüs lassen sich mit einem Off Canvas Element z.B. via Bürger-Menü-Icon auslösen.

Die vollständige englische Dokumentation inkl. Video zum Off Canvas findest du hier:
https://avada.com/documentation/how-to-use-the-off-canvas-builder/

Mit dem Funktionsumfang des Avada Off Canvas lassen sich tolle Popups oder Slide-ins in kurzer Zeit erstellen. Zu Anfang muss man sicherlich erst einmal das Prinzip und die Abhängigkeiten ausprobieren. Aber allein durch das dynamische einbinden und aufrufen eines Off Canvas, auch im zusammenhang mit einem Woocommerce Onlineshop, lassen sich Call-to-Actions schnell realisieren. Trotz dem sei aber noch einmal am Schluss gesagt, das automatisierte Pop-Ups nicht bei jedem Besucher deiner Webseite gern gesehen sind. Hier musst du abwegen, auf welchen Seiten du ein Pop-Up einsetzen möchtest.