Popups | Sitely-Dokumentation

Pop-ups sind ein wertvolles Hilfsmittel, um die Übersichtlichkeit Ihrer Website zu wahren, indem sie es Ihnen ermöglichen, wichtige Informationen zu präsentieren, ohne Ihre sorgfältig gestalteten Seiten zu überladen. Sie eignen sich für Aufgaben wie die Anzeige von Kontaktformularen, die Bewerbung von Sonderangeboten oder die Erstellung interaktiver Navigationselemente, insbesondere auf Mobilgeräten. Auch wenn einige Benutzer Pop-ups als störende Hindernisse für den Zugriff auf Webseiteninhalte empfinden, müssen sie das nicht sein. Mit kreativer und strategischer Umsetzung können Pop-ups die Benutzererfahrung verbessern und als nützliches Element in Ihrem Website-Toolkit dienen.

Wie man ein Popup erstellt

Popups sind nichts anderes als Mini-Webseiten, die von Benutzern bei Bedarf aufgerufen und angezeigt werden können. Sie können auch so eingestellt werden, dass sie nach einer vordefinierten Zeitspanne automatisch erscheinen. Sie fügen Ihrer Website ein Popup mit dem Popup-Tool hinzu, entweder aus der Toolbox von Sitely oder durch Klicken auf das Popup-Tool oben links auf der Sitely-Arbeitsfläche. Das Tool sieht wie folgt aus.

Wenn Sie ein Popup zum ersten Mal hinzufügen, sieht es auf der Leinwand so aus.

Es handelt sich um ein quadratisches Feld, das auf der Leinwand zentriert ist und dessen Hintergrund abgedunkelt ist. Es handelt sich im Wesentlichen um eine kleine, leere Webseite mit einer bereits in der oberen rechten Ecke hinzugefügten Schaltfläche zum Schließen. Sie können die Größe des Feldes durch Ziehen der Ziehpunkte ändern und es an einer beliebigen Stelle neu positionieren. Das Feld selbst befindet sich über allen vorhandenen Webseiteninhalten, die Sie möglicherweise hinzugefügt haben. Es handelt sich um eine völlig unabhängige Mini-Webseite, die vorhandene Seiteninhalte nicht beeinträchtigt.

Sie können das Feld über das Stil-Panel nach Belieben gestalten, einschließlich Hintergrundfarbe, Rahmen, Abrundung und aller anderen Optionen, die Sie auf ein normales Feldelement anwenden können. Hier sind die grundlegenden Stilelemente eines Popups.

Im ersten Abschnitt können Sie entscheiden, welche Art von Popup Sie erstellen möchten. Zur Auswahl stehen:

Die Modal/Lightbox-Option ist wahrscheinlich die häufigste Art von Popup. Sie erstellt in der Regel ein Popup, das auf der Seite zentriert ist und einen abgedunkelten Hintergrund über der Webseite hat. Das Scrollen der Webseite ist deaktiviert, wenn diese Option verwendet wird. Mit der Option „Fixed in Window“ können Sie das Popup an einer bestimmten Position im Browserfenster platzieren, ohne dass der Hintergrund abgedunkelt wird. Diese Art von Popup bleibt an einer bestimmten Position, während der Rest der Seite dahinter gescrollt wird. Mit der Option „Normal“ wird das Popup erstellt und Sie können ihm eine bestimmte Seitenposition zuweisen, an der es verbleibt, auch wenn gescrollt wird. Diese Option blendet den Seitenhintergrund nicht aus. Wir werden uns diese Optionen etwas später ansehen.

Die nächste Option, „Immer im Vordergrund“, teilt Sitely einfach mit, dass das Pop-up immer über allen anderen Elementen auf der Webseite angezeigt wird.

Mit „Automatisch öffnen“ können Sie ein Pop-up erstellen, das ohne Benutzereingriff angezeigt wird. Dies kann nach einer bestimmten Zeitspanne, beim Verlassen der Seite mit der Maus, beim Erreichen einer bestimmten Bildlaufposition oder nur einmal über mehrere Website-Besuche hinweg geschehen.

To see the different types, click the buttons below.

Normales Popup

Modal Lightbox

Fixed in Window

Es gibt auch die Option, das Popup nur zwischen bestimmten Daten erscheinen zu lassen – ideal für zeitlich begrenzte Werbeaktionen.

Jeder der Popup-Typen hat einen bestimmten praktischen Nutzen. Normalerweise wird der Modal-/Lightbox-Typ verwendet, wenn Sie Ihr Popup isoliert anzeigen möchten – mit anderen Worten, das Scrollen der Seite wird angehalten, bis das Popup geschlossen wird. Aus diesem Grund hat diese Art von Popup einen abgedunkelten Hintergrund – dies zeigt den Benutzern an, dass das Popup geschlossen werden muss, bevor sie weiter auf Ihrer Website surfen können.

Die Option „Fixed in Window“ (Fest im Fenster) wird in der Regel verwendet, wenn Sie Benutzern erlauben möchten, weiter auf Ihrer Website zu surfen, während das Popup geöffnet ist. Es bleibt im Browserfenster fixiert, bis es geschlossen wird, und der gesamte Seiteninhalt wird dahinter angezeigt.

Die normale Option ermöglicht es Ihnen, wirklich kreativ zu werden, insbesondere wenn Sie Ihrer Seite etwas wie ein Mega-Menü hinzufügen möchten. Wenn Sie beispielsweise auf einen Hauptmenü-Link klicken, kann ein normales Popup-Fenster mit Ihren anderen Menüoptionen geöffnet werden. Dieses bleibt geöffnet und mit Ihrem Hauptnavigationslink verbunden, bis es geschlossen wird.

Erstellen des Popup-Inhalts

Sie erstellen Inhalte in Ihren Popups auf genau dieselbe Weise wie Ihre normalen Webseiten. Fügen Sie einfach Elemente zum Popup hinzu, gestalten Sie sie nach Ihren Wünschen und schon sind Sie fertig. Sie können Bilder, Schaltflächen, Videos, Text, Formulare und alles andere hinzufügen, was Sie einfügen möchten.

Wenn Sie mit der Bearbeitung des Inhalts fertig sind, können Sie das Popup aus der Arbeitsfläche entfernen, indem Sie auf die Schaltfläche „Schließen“ oben links in der Arbeitsfläche klicken. Dadurch wird es ausgeblendet, sodass Sie mit der Gestaltung des restlichen Teils Ihrer Webseite fortfahren können. Wenn Sie das Popup zu einem späteren Zeitpunkt erneut bearbeiten möchten, wählen Sie es einfach über das Popup-Symbol oben links in der Arbeitsfläche aus.

Popup auslösen

Damit Popups auf Ihrer Website angezeigt werden, müssen sie durch eine Aktion ausgelöst werden. In den meisten Fällen wird diese Aktion durch das Klicken eines Benutzers auf einen Link, sei es ein Menü, eine Schaltfläche oder ein Textlink, ausgelöst. Die Aktion beim Klicken ist „Popup öffnen“. Wenn Sie diese Option auswählen, wird eine zusätzliche Option angezeigt, mit der Sie das anzuzeigende Popup auswählen können.

Bereits geöffnete Pop-ups benötigen auch eine Art Auslöser, um sie zu schließen. Auch dies kann über einen Link erfolgen, der das Pop-up schließt. In den meisten Fällen kann derselbe Link zum Öffnen und Schließen eines Pop-ups verwendet werden. Klicken Sie einfach auf das Kontrollkästchen „Schließen, wenn erneut geklickt“ auf dem sich öffnenden Link.

Modal-/Lightbox-Popups können auch geschlossen werden, indem Sie außerhalb des Modals (auf den abgeblendeten Teil der Seite) klicken. In den meisten Fällen enthält das Popup selbst eine Schaltfläche zum Schließen (standardmäßig enthalten, wenn Sie ein neues Popup erstellen). Diese kann durch einen Textlink oder, falls gewünscht, durch eine normale Schaltfläche ersetzt werden. Unabhängig davon, für welchen Linktyp Sie sich entscheiden, ist die Aktion beim Klicken immer „Popup schließen“.

Verschachtelte Popups

Ein verschachteltes Popup ist ein Popup, das Links/Auslöser zu anderen Popups enthält. Ein Beispiel hierfür ist ein Popup, das einen Index von Bild- oder Videodateien anzeigt, oder eine Liste verschiedener Kontaktformulare für verschiedene Abteilungen. Durch Klicken auf diese Links wird ein weiteres Popup geöffnet, in das der Inhalt eingebettet wurde.

Open Popup

Um zu verhindern, dass mehrere Pop-ups gleichzeitig geöffnet werden, verwenden Sie Pop-up-Gruppen-IDs. Dies ist besonders wichtig, wenn Sie verschachtelte Pop-ups erstellen. Wenn Sie beispielsweise Pop-up A erstellen, das Links zu Pop-up B enthält, möchten Sie idealerweise, dass Pop-up B Pop-up A ersetzt, anstatt dass beide Pop-ups gleichzeitig geöffnet sind.

Wenn Sie beiden Pop-ups dieselbe Gruppen-ID zuweisen, stellen Sie sicher, dass jeweils nur ein Pop-up geöffnet wird. Wenn Sie jedoch absichtlich mehrere Pop-ups gleichzeitig öffnen möchten, können Sie jedem Pop-up eine eindeutige Gruppen-ID zuweisen.

Open Secondary Lightbox

Platzierung von Pop-ups

Die Optionen für die horizontale Platzierung sind:

Leinwandposition und -breite verwenden – das Pop-up wird an derselben Position und in derselben Breite geöffnet, an der bzw. in der Sie es auf der Leinwand platziert haben.
Horizontal zentrieren: Das Popup wird horizontal im Browserfenster zentriert.
Links ausrichten und Rechts ausrichten: Die Lightbox wird links oder rechts im Browserfenster ausgerichtet. Bei Auswahl dieser Option können Sie einen Rand links oder rechts vom Browserfenster festlegen.

Die Optionen für die vertikale Platzierung sind:

Leinwandhöhe verwenden: Das Popup wird in der Höhe angezeigt, in der es auf der Leinwand erstellt wurde.
An Browserhöhe anpassen: Das Popup wird auf die gesamte Höhe des Browserfensters erweitert. Bei Auswahl dieser Option können Sie einen oberen und unteren Browserrand festlegen.
Feste Höhe: Mit dieser Option können Sie eine exakte Pixelhöhe für das Popup festlegen.

Außerdem können Sie mit der Option „Vertikale Platzierung“ angeben, ob das Popup vertikal zentriert oder am oberen oder unteren Rand des Browserfensters ausgerichtet werden soll. Auch hier haben Sie die Möglichkeit, einen oberen oder unteren Rand festzulegen.

HINWEIS: Alle oben genannten Optionen gelten für Popups vom Typ „Modal/Lightbox“ und „Fixed in Window“ – sie sind beide relativ zur Größe des Browserfensters. Der Popup-Typ „Normal“ verwendet diese Optionen nicht, da normale Popups relativ zur Seite sind – nicht zum Browser. Daher werden sie immer dort angezeigt, wo sie auf einer Seite platziert sind.

HAST DU ES BEMERKT?