Pop-up (Modal Box)

1. Klickt im WordPress-Dashboard auf den Reiter „Modal Boxen“. Klickt im Anschluss auf „Erstellen“, um eine neue Modal Box anzulegen.
   
2. Setzt zunächst den Titel für eure Modal Box. Dieser wird sowohl in der Modal Box-Übersicht als auch im Frontend als Headline verwendet. Wählt im Anschluss euren gewünschten Modal Box-Typ. Ihr habt dabei mehrere Optionen für unterschiedliche Bedürfnisse:
   – Standard: Ohne Hintergrund, für Texte oder Formulare
   – Bild: Für die Darstellung eines zusätzlichen Bildes
   – Video: Zum Einbinden eines Videos
   – Verspielte Darstellung des Hintergrundes mit: Hintergrund-Symbol, Hintergrund „Blubbel“ und Hintergrund „Kreise“.
   
3. Im Textfeld der Modal Box habt ihr einige Schaltflächen mit unterschiedlichen Einstellungsmöglichkeiten:
   – Dateien hinzufügen: Zum Hinzufügen von Bildern
   – Formulare: Hierbei habt ihr die Möglichkeit, vorgefertigte Formulare via Formidable-Shortcode direkt im Modal anzeigen zu lassen
   – Iframe Shortcode einfügen: Iframes für Buchungen, Wetter oder andere Anbindungen können so eingebunden werden
   – Call-to-Action-Button-Shortcode einfügen: Hier könnt ihr reguläre Buttons in eure Modalbox einbinden
   – Spalten-Shortcode einfügen: Um Text und Bild übersichtlich und geordnet in verschiedenen Spalten anzuzeigen
   Jede dieser Schaltflächen hilft bei der Formatierung des hinzugefügten Inhalts.
    
4. Unter „Modal Auslöse-Bedingungen“ könnt ihr auswählen, wie eure Modal Box dem Benutzer erscheinen soll. Ihr könnt zwischen Zeit, der Anzahl der Zugriffe des Benutzers auf die Seite, dem Laden des Modals auf einer bestimmten Seite und dem Laden für Seiten, die eine Zeichenfolge enthalten, wählen.
   
5. Klickt nach der Fertigstellung auf „Veröffentlichen“, um euer Modal zu veröffentlichen. Sobald das Modal veröffentlicht ist, wird euch ein Anker-Link angezeigt, den ihr auf allen Unterseiten verwenden könnt.
   Ihr könnt diesen Link z. B. in einem Button, in einem Text-Link oder auch im Menü verlinken. 
   
6. So würde euer Standard-Modal auf eurer Seite erscheinen.
   

1. Diese Art von Modal ermöglicht es euch, zusätzlich zu eurem Inhalt aus dem Textfeld ein großflächiges Bild zu verwenden. Das Bild wird hier automatisch in die Seite eingefügt, ohne dass ein HTML-Code erforderlich ist.
2. Wenn ihr die Option „Bild“ wählt, erscheint eine neue Schaltfläche, über die ihr das gewünschte Bild auswählen könnt. Klickt darauf, um auf die Medien zuzugreifen, und wählt das Bild eurer Wahl.
   
3. So würde euer Bild-Modal auf eurer Seite erscheinen.
   

1. Möchtet ihr in eurem Modal ein Video abspielen lassen, verwendet den Typ „Video“.
   
2. Wenn ihr ein Video direkt aus eurer Mediathek auswählen möchtet, wählt „Hochladen“. Klickt dann auf „Datei hinzufügen“, um ein Video aus eurer Mediathek hinzuzufügen.
   
3. Wenn ihr jedoch lieber ein Video verwenden möchtet, das von einer anderen Website wie z. B. YouTube stammt, wählt unter „Video-Typ“ die Auswahl „Video-Link“. Geht zu der Seite, auf der sich das gewünschte Video befindet, kopiert die Embed-URL des Videos und fügt sie ein.
   
4. Unter Autoplay könnt ihr auswählen, ob euer Video starten soll, sobald es auf der Seite erscheint, oder nicht.
   
5. Auf der gewählten Seite wird euer Modal wie folgt erscheinen:
   

1. Diese Art von Modal verändert lediglich das Aussehen eurer Modal Box. Wählt hier euren gewünschten Hintergrund-Typ – euch stehen drei Optionen zur Verfügung: Hintergrund-Symbol, Hintergrund-Blubbel und Hintergrund-Kreise.
   
2. Auf eurer Website wird euer Modal so aussehen, wenn ihr das „Hintergrund-Symbol“ wählt:
   
3. Wenn ihr den „Hintergrund-Blubbel“ wählt:
   
4. Und wenn ihr schließlich die „Hintergrund-Kreise“ wählt, sieht es so aus:
   

Wenn ihr einrichten möchtet, dass eine Modal Box automatisch geöffnet wird, könnt ihr das in den Modal Auslöse-Bedingungen einstellen. Diese findet ihr direkt unter der Einstellung des Typs:

1. Wählt die Art der Auslöse-Bedingung aus, die ihr nutzen möchtet. Zum Beispiel „Auf einer bestimmten Seite laden“

2. Wählt die dazugehörige Einstellung aus, in diesem Fall die Seite, auf der die Modal Box geöffnet werden soll, und ob die Modal Box bei jedem Besuch der Seite oder nur einmalig geöffnet werden soll.

3. Speichert die Einstellungen.

4. Wichtig! Denkt daran, die Cookie-Opt-in-Einstellungsseite unter CANVAYO > Cookie-Opt-In noch einmal zu speichern, um die Funktion zu aktivieren.

Unter „Modal Auslöse-Bedingungen“ legt ihr fest, wann sich eine Modal Box von selbst öffnet. Ohne Auslöse-Bedingung öffnet sie sich nur über einen Link oder Button.

• Nach Zeit: „X Sekunden nach dem ersten Besuch der Website laden“. Tragt unter „Laden nach einer bestimmten Zeit“ die Sekunden ein, mindestens 1. Die Box öffnet sich, sobald jemand so lange auf einer Seite eurer Website ist.
• Nach Seitenaufrufen: „Nach X Seitenaufrufen laden“. Tragt unter „Website-Navigation“ ein, auf der wievielten aufgerufenen Seite die Box erscheint. Mit 1 erscheint sie gleich beim ersten Besuch, mit 3 auf der dritten Seite, die jemand aufruft.
• Nach Adresse: „Für Seiten laden, deren URL eine Zeichenkette behinhaltet“. Tragt unter „Auslösung bei URL-Übereinstimmung“ einen Teil der Adresse ein, zum Beispiel veranstaltungen. Die Box erscheint dann auf jeder Seite, deren Adresse diesen Teil enthält. Groß- und Kleinschreibung spielen keine Rolle. Tragt je Box einen Adressteil ein.

Für genau eine Seite nehmt den letzten Teil ihrer Adresse mit beiden Schrägstrichen, zum Beispiel /kontakt/. So passt er nur auf diese Seite.

Einmal oder bei jedem Aufruf

Eine automatische Box erscheint jedem Besucher einmal. Danach merkt sich die Website, dass sie schon zu sehen war. Bei der Bedingung nach Adresse könnt ihr zusätzlich „Immer auslösen, wenn die entsprechende Seite geladen wird“ einschalten. Dann öffnet sich die Box bei jedem Aufruf einer passenden Seite.

Automatische Boxen starten, sobald Besucher ihre Auswahl im Cookie Banner getroffen haben. Wer die Website zum ersten Mal öffnet, sieht also zuerst den Cookie Banner und danach die Box.

Mehrere Pop-ups auf derselben Seite

Je Seitenaufruf öffnet sich höchstens eine Box von selbst. Sind mehrere fällig, kommt die mit dem höchsten Vorrang. Eine Box, die nur einmal erscheint, macht danach Platz für die nächste. Eine Box mit „Immer auslösen …“ behält ihren Platz. Plant für dieselben Seiten deshalb höchstens eine Box, die bei jedem Aufruf erscheint. Welche Box Vorrang hat, richten wir auf Wunsch für euch ein.

Ein Pop-up nur für eine bestimmte Zeit zeigen

Für einen Hinweis auf Betriebsferien oder eine Aktion:

1. Legt die Box an und stellt die Auslöse-Bedingung ein.
2. Soll sie ab einem bestimmten Tag erscheinen, klickt im Feld „Veröffentlichen“ neben dem Kalender-Symbol auf „Bearbeiten“, tragt Datum und Uhrzeit ein, klickt auf „OK“ und dann auf „Planen“. Sonst klickt direkt auf „Veröffentlichen“.
3. Ist der Zeitraum vorbei, öffnet die Box unter „Modal Boxen“, klickt im Feld „Veröffentlichen“ bei „Status“ auf „Bearbeiten“, wählt „Entwurf“, klickt auf „OK“ und dann auf „Aktualisieren“.

Die Box bleibt so gespeichert. Für die nächsten Ferien ändert ihr nur den Text und veröffentlicht sie wieder.

Setzt automatische Boxen sparsam ein. Ein Fenster, das sich von selbst öffnet, unterbricht beim Lesen, besonders mit Screenreader oder Bildschirmlupe. Was nicht dringend ist, steht besser in einer Meldung.

Checkliste: Das Pop-up erscheint nicht oder zu oft

• Schon einmal gesehen? Eine automatische Box erscheint jedem nur einmal. Zum Testen öffnet die Seite in einem privaten Fenster.
• Cookie Banner noch offen? Die Box startet erst nach der Auswahl im Cookie Banner.
• Cookie-Opt-in nach dem Anlegen gespeichert? Speichert unter „CANVAYO“ → „Cookie-Opt-In“ einmal neu, siehe oben unter „Modal Box automatisieren“.
• Adressteil passt nicht? Vergleicht ihn mit der Adresszeile des Browsers auf der Seite, auf der die Box erscheinen soll.
• Andere Box hat Vorrang? Auf derselben Seite ist schon eine andere automatische Box fällig.
• Erscheint bei jedem Aufruf? Schaltet „Immer auslösen, wenn die entsprechende Seite geladen wird“ aus.
• Status „Entwurf“ oder „Geplant“? Nur veröffentlichte Boxen erscheinen.

Kommt ihr nicht weiter, schreibt uns, wie die Box heißt, auf welcher Seite sie erscheinen soll und welche Auslöse-Bedingung ihr gewählt habt.

1. Sobald ihr das Modal erstellt habt, geht zu der Seite auf eurer Website, auf der ihr die Modal Box einfügen möchtet.
2. Wählt den Block, in dem das Modal ausgelöst werden soll. Als Beispiel wählen wir den Block „Text“.
   
3. Das Beispiel-Modal soll angezeigt werden, sobald der Benutzer auf einen Button klickt. Dazu müsst ihr auf „Link-Typ“ klicken und „Modalbox“ auswählen.
   
4. Wenn ihr dann auf das Feld „Call-to-Action-Link (Modal)“ klickt, erscheinen die Namen eurer zuvor angelegten Modal Boxen. Wählt diejenige aus, die auf der Seite erscheinen soll.
   
5. Klickt vor der Veröffentlichung auf „Vorschau der Änderungen“, um eine Vorschau der Seite anzuzeigen und zu testen, ob eure Schaltfläche funktioniert.
   
6. Sobald ihr auf die Schaltfläche für den gewählten Block in Flexible Content klickt, sollte euer Modal auf der Seite erscheinen. Vergesst nicht, die Seite über „Aktualisieren“ zu speichern oder sie zu veröffentlichen.

Zusätzlicher Tipp:

1. Ihr werdet einige Stellen auf eurer Website haben, an denen die Modal Boxen nicht als automatisch generierter Link zur Auswahl angezeigt werden. Wenn das bei euch der Fall ist, geht zu „Modal Boxen“, klickt auf „Alle Modal Boxen“ und wählt dann die entsprechende Modal Box aus, die auf eurer Website erscheinen soll.
2. Ganz oben auf der Seite, neben dem Namen des Modals, seht ihr dieses Feld:

   

3. Kopiert den Namen des Modals.
   
4. Wählt nun in dem von euch gewählten Inhaltsbereich die Option „Modal“ und fügt den kopierten Text in dieses Feld ein:
   
5. Testet die Seite vor der Aktualisierung auf die gleiche Weise. Wenn beim Anklicken der Schaltfläche euer Modal erscheint, ist es an der Zeit, die Seite zu aktualisieren.

Neben der Automatisierungsmöglichkeit bei jeder einzelnen Modalbox könnt ihr auch zentral in den CANVAYO-Einstellungen globale Automatisierungs-Einstellungen für Modal-Boxen vornehmen.

1. Wechselt in der Seitenleiste zum Punkt CANVAYO > CANVAYO und wählt den Unterpunkt „Modalboxen“
   
2. Wählt unter „Gesteuert“ die Modal Box, die auf eurer Seite erscheinen soll.

   

3. Unter „Auslöser“ wählt ihr aus, wie euer Modal angezeigt werden soll: Ob es auf dem Bildschirm erscheint, hängt von der Verweildauer des Nutzers auf der Seite ab – diese Strategie ist gut geeignet, um wichtige Informationen wie Werbeaktionen, Hinweise usw. anzusprechen. Ihr könnt aber auch nach der Anzahl der Aufrufe wählen – das ist eine gute Idee, wenn der Nutzer ein häufiger Besucher eurer Website ist. Je nachdem, welche der beiden Möglichkeiten ihr wählt, müsst ihr die Zeit in Sekunden oder die Anzahl der Zugriffe auf eure Website angeben.

   

4. Sobald ihr euer Modal ausgewählt und konfiguriert habt, klickt auf „Aktualisieren“. Um einen schnellen Test durchzuführen, öffnet eure Website in einem anonymen Tab und seht nach, ob die Modal Box erschienen ist.