Pop-ups erstellen
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-up erstellen
Fügst du ein neues Pop-up hinzu, hast du die Wahl, dein Pop-up direkt mit automatischen Einstellungen anzulegen oder zuerst manuelle Einstellungen zu treffen.
Ein automatisches Pop-up erhält einen simplen Auto-Auslöser, der auf deinen ausgewählten Seiten erscheint. Zudem wird automatisch ein simples Schließverhalten eingestellt. Du kannst diese Einstellungen jederzeit bearbeiten. Nachdem du das automatische Pop-up gewählt hast, wirst du direkt zum Pop-up-Editor weitergeleitet.
Bei einem manuellem Pop-up werden diese Einstellungen von dir geregelt. Bist du bereit, dein Pop-up zu gestalten, kannst du über den Button "Pop-up-Editor öffnen" den Editor öffnen.
Die Standard-Einstellungen für ein automatisches Pop-up sind:
- Automatischer Auslöser ohne Verzögerung auf den ausgewählten Seiten
- Das Pop-up wird über den Schließen-Button geschlossen
- Das Pop-up wird erst wieder angezeigt, nachdem der Browser geschlossen wurde
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.
Pop-up-Auslöser
Über einen Auslöser bestimmst du, wann und wo dein Pop-up ausgelöst wird.
Wie soll das Pop-up ausgelöst werden?
Hier stellst du ein, welche Bedingung erfüllt werden muss, damit dein Pop-up auslöst: automatisch, beim Erscheinen eines Seitenelements oder wenn die Maus die Seite verlässt.
Mit einer 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.
Auf welchen Seiten soll das Pop-up (nicht) ausgelöst werden?
Hier stellst du ein, auf welchen Seiten dein Pop-up ausgelöst werden kann. Mit "Gewählte Seitenarten ausschließen" kannst du die Bedingung umdrehen.
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.
Pop-ups schließen
Das Schließverhalten bestimmt, wann und wie dein Pop-up geschlossen wird. Zudem wird hier festgesetzt, wann ein geschlossenes Pop-up wieder auslösen darf.
Schließmechanismen
Hier bestimmst du, wie das Pop-up geschlossen wird: über den Schließen-Button, einen Klick außerhalb des Pop-ups oder wenn die Maus das Pop-up verlässt.
Status "Pop-up geschlossen" merken
Hier legst du fest, wann das Pop-up wieder auslösen darf: nachdem der Browser geschlossen wurde oder nach einer bestimmten Anzahl an Tagen, die du anschließend definierst.
Unter "Weitere Schließmechanismen" kannst du genauere Schließmechanismen festlegen. Sie funktionieren gleich wie Pop-up-Auslöser.
Pop-ups bearbeiten
Wenn du auf ein Pop-up in der Listenansicht klickst, hast du die Wahl, Inhalt und Aussehen direkt im Editor oder Pop-up-Einstellungen zu bearbeiten.
Du wirst automatisch an die relevante Ansicht weitergeleitet.
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.