Modal Box erstellen

  1. Klicken Sie im Wordpress Dashboad auf den Reiter „Modal Boxen“. Klicken Sie im Anschluss auf „Erstellen“ um eine neue Modal Box anzulegen.
  2. Setzen Sie zunächst den Titel für Ihre Modal Box. Dieser wird sowohl in der Modal Box-Übersicht, als auch im Frontend als Headline verwendet. Wählen Sie im Anschluss Ihren gewünschten Modal Box-Typ. Sie haben 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 einbilden eines Videos
    – Verspielte Darstellung des Hintergrundes mit: Hintergrund-Symbol, Hintergrund „Blubbel“ und Hintergrund „Kreise“.
  3. Im Textfeld der Modal Box haben Sie einige Schaltflächen mit unterschiedlichen Einstellungsmöglichkeiten:
    – Dateien hinzufügen: Zum hinzufügen von Bildern
    – Formulare: hierbei haben Sie 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önnen sie reguläre Buttons in Ihre 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önnen Sie auswählen, wie Ihre Modal Box dem Benutzer erscheinen soll. Sie können 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. Klicken Sie nach der Fertigstellung auf „Veröffentlichen“, um Ihr Modal zu veröffentlichen. Sobald das Modal veröffentlichst ist, wird Ihnen ein Anker-Link angezeigt, den Sie auf jeglichen Unterseiten verwenden können.
    Sie können diesen Link z.B. in einem Button, in einem Text-Link oder auch im Menü verlinken. 
  6. So würde Ihr Standard-Modal auf Ihrer Seite erscheinen.
  1. Diese Art von Modal ermöglicht es Ihnen, zusätzlich zu Ihrem 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 Sie die Option „Bild“ wählen, erscheint eine neue Schaltfläche, über die Sie das gewünschte Bild auswählen können. Klicken Sie darauf, um auf die Medien zuzugreifen und wählen Sie das Bild Ihrer Wahl.
  3. So würde Ihr Bild-Modal auf Ihrer Seite erscheinen.
  1. Möchten Sie in Ihrem Modal ein Video abspielen lassen, verwenden Sie den Typ „Video“.
  2. Wenn Sie ein Video direkt aus Ihrer Mediathek auswählen möchten, wählen Sie „Hochladen“. Klicken Sie dann auf „Datei hinzufügen“ um ein Video aus Ihrer Mediathek hinzuzufügen.
  3. Wenn Sie jedoch lieber ein Video verwenden möchten, das von einer anderen Website wie z.B. YouTube stammt, wählen Sie unter „Video-Typ“ die Auwahl „Video-Link“. Gehen Sie zu der Seite, auf der sich das gewünschte Video befindet, kopieren Sie die Embed-URL des Videos und fügen Sie diese ein.
  4. Unter Autoplay können Sie auswählen, ob Ihr Video starten soll, sobald es auf der Seite erscheint, oder nicht.
  5. Auf der gewählten Seite wird Ihr Modal wie folgt erscheinen:
  1. Diese Art von Modal verändert lediglich das Aussehen Ihrer Modal Box. Wählen Sie hier Ihren gewünschten Hintergrund-Typ – Ihnen stehen drei Optionen zur Verfügung: Hintergrund-Symbol, Hintergrund-Blubbel und Hintergrund-Kreise.
  2. Auf Ihrer Website wird Ihr Modal so aussehen, wenn Sie das „Hintergrund-Symbol“ wählen:
  3. Wenn Sie den „Hintergrund-Blubbel“ wählen:
  4. Und wenn Sie schließlich die „Hintergrund-Kreise“ wählen, sieht es so aus:

Modal Box automatisieren

Wenn Sie einrichten möchten, dass eine Modal Box automatisch geöffnet wird können Sie das in den Modal Auslöse-Bedingungen einstellen. Diese finden Sie direkt unter der Einstellung des Typs:

1.Wählen Sie die Art der Auslöse-Bedingung aus die Sie nutzen möchten. Zum Beispiel „Auf einer bestimmten Seite laden“

2.Wählen Sie die dazugehörige Einstellung aus, in diesem Fall ist es 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. Speichern Sie die Einstellungen.

4. Wichtig! Denken Sie daran die Cookie-Opt-in Einstellungs-Seite unter Canvayo > Cookie-Opt-In nochmal zu speichern, um die Funktion zu aktivieren.

Modal Box einbinden

  1. Sobald Sie das Modal erstellt haben, gehen Sie zu der Seite auf Ihrer Website, auf der Sie die Modal Box einfügen möchten.
  2. Wählen Sie 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üssen Sie auf „Link-Typ“ klicken und „Modalbox“ auswählen.
  4. Wenn Sie dann auf das Feld „Call-to-Action-Link (Modal)“ klicken, erscheinen die Namen Ihrer zuvor angelegten Modal Boxen. Wählen Sie diejenige aus, die auf der Seite erscheinen soll.
  5. Klicken Sie vor der Veröffentlichung auf „Vorschau der Änderungen“, um eine Vorschau der Seite anzuzeigen und zu testen, ob Ihre Schaltfläche funktioniert.
  6. Sobald Sie auf die Schaltfläche für den gewählten Block in Flexible Content klicken, sollte Ihr Modal auf der Seite erscheinen. Vergessen Sie nicht, Ihre Website unter „Aktualisieren“ zu aktualisieren oder zu Veröffentlichen.

Zusätzlicher Tipp:

  1. Sie werden einige Stellen auf Ihrer Website haben, an denen die Modal Boxen nicht als automatisch generierter Link zur Auswahl angezeigt werden. Wenn dies bei Ihnen der Fall ist, gehen Sie zu „Modal Boxen“ und klicken Sie auf „Alle Modal Boxen“, dann wählen Sie die entsprechende Modal Box aus, die auf Ihrer Website erscheinen soll.
  2. Ganz oben auf der Seite, neben dem Namen des Modals, sehen Sie dieses Feld:

  3. Kopieren Sie den Namen des Modals.
  4. Wählen Sie nun in dem von Ihnen gewählten Inhaltsbereich die Option „Modal“ und fügen Sie den kopierten Text in dieses Feld ein:
  5. Testen Sie die Seite vor der Aktualisierung auf die gleiche Weise. Wenn beim Anklicken der Schaltfläche Ihr Modal erscheint, ist es an der Zeit die Seite zu aktualisieren.

Modal Boxen global automatisieren

Neben der Automatisierungsmöglichkeit bei jeder einzelnen Modalbox, können Sie auf zentral in den Canvayo Settings globale Automatisierungs-Einstellungen für Modal-Boxen vornehmen..

  1. In der Seitenleiste wechseln Sie zu dem Punkt Canvayo > Canvayo und wählen Sie den Unterpunkt „Modalboxen“
  2. Wählen Sie unter „Gesteuert“ die ModalBox, die auf Ihrer Seite erscheinen soll.

  3. Unter „Auslöser“ wählen Sie aus, wie Ihr 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. Sie können aber auch nach der Anzahl der Aufrufe wählen – dies ist bereits eine gute Idee, wenn der Nutzer ein häufiger Besucher Ihrer Website ist. Je nachdem, welche der beiden Möglichkeiten Sie wählen, müssen Sie die Zeit in Sekunden oder die Anzahl der Zugriffe auf Ihre Website angeben.

  4. Sobald Sie Ihr Modal ausgewählt und konfiguriert haben, klicken Sie auf „Aktualisieren“. Um einen schnellen Test durchzuführen, öffnen Sie Ihre Website in einem anonymen Tab und sehen Sie nach, ob ModalBox erschienen ist.

Video Tutorial