Pop-ups erstellen

Inhaltsbereich

Pop-ups auf Websites sind kleine Fenster, die über den Inhalt eingeblendet werden und häufig genutzt werden, um wichtige Informationen anzuzeigen, Nutzeraktionen zu fördern oder spezielle Angebote zu präsentieren. In Smarda kannst du Design und Inhalt deines Pop-ups frei erstellen sowie individuelle Auslöser definieren. Für die inhaltliche Ausgestaltung deiner eigenen Pop-ups steht dir der komplette Editor mit allen Gestaltungselementen unter >Editor >Pop-ups zur Verfügung.

Pop-ups erstellen

Pop-ups werden wie Seiten mit Elementen aufgebaut. Über den Plus-Button erhälst du eine Übersicht über alle verfügbaren Elemente zur Gestaltung deines Pop-ups. Oben in der Mitte des Editors findest du die Pop-up-Einstellungen, die Namen, Basis-Stil, das Verhalten des Pop-ups festlegen.

Mit den Schließmechanismen kannst du bestimmen, welche Nutzeraktion dein Pop-up schließen:

  • Mauscurser verlässt Pop-up
  • Klick außerhalb des Pop-ups
  • Schließen-Button (fügt einen X-Button zum Pop-up hinzu)

Mit Status merken kannst du festlegen, ob der Browser sich das Schließen des Pop-ups merkt oder ob eine bestimmte Anzahl an Tagen vergehen muss, bevor das Pop-up erneut angezeigt wird:

  • Bis der Browser geschlossen wird
  • Eine bestimmte Anzahl von Tagen einstellen

Individuelles Megamenü mit Pop-ups erstellen

Als Smarda Partner kannst das Pop-up auch dafür verwenden, um ein individuell gelayoutetes Megamenü zu erstellen, das beim Klicken auf das Hamburger-Icon im Hauptmenü aufgeht. Da ein individuelles Megamenü-Design ein komplexeres Layout-Verständnis erfordert, steht diese Funktionalität nur Agenturen exklusiv zur Verfügung.

Für ein individuelles Megamenü-Pop-up gehst du so vor:

  • Gestalte ein eigenes Pop-up für das Megamenü. Du kannst dieses mit allen Seiten-Elementen individuell ausgestalten. Um deine Menüpunkte als Auflistungen darzustellen, verwendest du am besten das Menü-Element im Layout des Popups.
  • Wähle im Design ein passendes Header-Styling aus und definiere, wann dieses Megamenü beim Klick auf das Hambuger-Icon anstelle des Mobil-Menüs geöffnet werden soll.
  • So kannst du zB. festlegen, dass das individuelle Megamenü nur in der Desktop-Ansicht geöffnet werden soll, wo genügend Platz für ein komplexes Layout vorhanden ist.
Zu den Header-Einstellungen

Pop-up-Auslöser

Hast du ein Pop-up erstellt, kannst du einen Auslöser dafür definieren. Hierfür musst du separat einen Pop-up-Auslöser im Pop-up-Menü hinzufügen.

Über Aktion lässt sich einstellen, ob dein Auslöser das Pop-up öffnen oder schließen soll.

Der Auslöser-Typ bestimmt die Auslösebedingung. 

Im Feld Pop-up kannst du das Pop-up auswählen, das du auslösen möchtest.

Mit Verzögerung kannst du eine in Millisekunden gemessene Verzögerung zwischen dem Erfüllen der Auslösebedingung und dem Auslösen des Pop-ups einstellen.

Screenshot eines Pop-up-Konfigurationsfensters mit den Optionen zur Aktion, Auslöser-Typ, Verzögerung und Bedingungen für Seitentypen in deutscher Sprache.

Weitere Bedingungen für das Auslösen deines Pop-ups sind Seitenarten. Hier kannst du einstellen, auf welchen Seitenarten (z.B. Produktseiten oder Wunschliste) dein Pop-up auslösen soll.

Du kannst die gewählten Seitenarten auch ausschließen statt einschließen.

Pop-ups auslösen mit Buttons

Beim Erstellen eines Buttons kannst du als Link-Art "Pop-up" wählen. Anschließend musst du nur das Pop-up auswählen, das du per Button-Klick auslösen möchtest.

Beim Auslösen eines Pop-ups durch Buttons wird kein Pop-up-Auslöser benötigt.

Benutzeroberfläche für einen Button mit Eingabefeldern für Stil, Überschrift, Link-Art und Pop-up, in hellgrauem Design.

Stil-Einstellungen

Mithilfe des Stylings kannst du Design und Position deines Pop-ups genauer bestimmen.

Um dein Pop-up an ein anderes Element zu binden, werden Referenzen verwendet. Diese findest du für jedes Element unter "Erweitert", wo du Referenz-Tags erstellen kannst, die dann zum Verknüpfen von Elementen dienen. Beim Bearbeiten der Pop-up-Stilvorlage im Stilvorlagen-Editor kannst du unter den Einstellungen das gewünschte Element mithilfe des Seitenelement-Referenz-Tags ansprechen.

Pop-up stylen