Erstellen Sie Elementor-Popups in WooCommerce

Wir sind alle große Fans von WooCommerce. Die Einrichtung und Anpassung ist unkompliziert. Im Paket sind Funktionen enthalten, die das Erstellen und Verwalten eines dynamischen und leistungsstarken E-Commerce-Shops vereinfachen.

Zum Erstellen einer erfolgreichen E-Commerce-Seite gehört jedoch mehr als nur das Hinzufügen beliebter Produkte. Alle Seiten müssen auch optisch ansprechend sein. Je optisch ansprechender und benutzerfreundlicher Ihre Website ist, desto größer ist die Wahrscheinlichkeit, mehr Kunden anzulocken.

• Konfiguration des Popup-Fensters
• Sie können Popups auch mit dem Visual Builder in Elementor erstellen
• Veröffentlichungseinstellungen

Obwohl WooCommerce beim Erstellen Ihrer Website den Warenkorb und die Checkout-Seite für Sie erstellt, macht Elementor sie durch die Anpassung ansprechender.

Sie haben die Möglichkeit, sie entweder neu zu gestalten oder von vorne zu beginnen. Sie können den Vorgang für alle anderen Seiten Ihrer Website wiederholen.

Indem Sie eine herzliche Dankesseite erstellen und Ihre Seiten „Mein Konto“ und „Nutzungsbedingungen“ aktualisieren, können Sie die Herzen und Köpfe Ihrer Kunden für sich gewinnen.

Die Drag-and-Drop-Funktionalität von Elementor sorgt in Kombination mit diesem Tutorial dafür, dass Sie beim Erstellen Ihrer Seiten problemlos arbeiten können.

Nachdem Sie Ihren WooCommerce-Shop eingerichtet haben, möchten Sie ihn möglicherweise für Ihre Besucher und Kunden attraktiver gestalten. Das Hinzufügen von Popups vermittelt dem Benutzer einen anderen Eindruck und weckt den Wunsch, in Ihrem Shop zu bleiben.

 Um ein Popup zu erstellen, gehen Sie in der Menüleiste zu Vorlagen > Popups. Ihnen wird eine Liste aller Ihrer Popups angezeigt. Wenn Sie noch keines erstellt haben, sehen Sie etwa Folgendes:

Sobald Sie auf NEUES POPUP HINZUFÜGEN geklickt haben (was ziemlich selbsterklärend ist), werden Sie aufgefordert, ihm einen Namen zu geben und dann eine Vorlage aus den angezeigten vorgefertigten amp auszuwählen. Es stehen verschiedene Vorlagen für verschiedene Zwecke zur Verfügung; Einige eignen sich für Ankündigungen, andere für die Werbung für einen Rabatt, wieder andere sind ideal, um Benutzer zu ermutigen, sich für etwas anzumelden. Es gibt sogar amp für Warnungen vor der Verwendung von Cookies oder andere DSGVO-Benachrichtigungen. Sobald Sie etwas gefunden haben, das Ihnen gefällt, klicken Sie darauf, um eine größere Vorschau anzuzeigen, und klicken Sie dann auf die Schaltfläche „Einfügen“.

Nachdem Sie auf diese Schaltfläche geklickt haben, gelangen Sie zum Popup-Builder im WordPress-Backend.

Wenn Sie in der Vergangenheit mit Elementor gearbeitet haben, werden Sie sich mit der Benutzeroberfläche, den Optionen und der Art und Weise, wie alles für Sie gestaltet ist, sofort zu Hause fühlen. Es handelt sich im Wesentlichen um den gleichen Vorgang wie beim Erstellen von Elementor-Seitenvorlagen in WordPress.

Auf der rechten Seite des Bildschirms befindet sich die Hauptleinwand, die eine Vorschau dessen anzeigt, woran Sie gerade arbeiten. Sie können jedes Element einzeln bearbeiten und anpassen, indem Sie es auswählen und Bearbeiten > Elemente bearbeiten auswählen. Wenn Sie fertig sind, werden in der Seitenleiste links die Steuerelemente und Einstellungen sowie die Option zum Veröffentlichen Ihrer Arbeit angezeigt.

Konfiguration des Popup-Fensters

 Dann sollten Sie eine Vorschau Ihres Popups sehen – entweder eine leere Tafel oder die von Ihnen gewählte Vorlage.

Mit den Popup-Einstellungen, die standardmäßig immer geöffnet sind, können Sie die Funktionsweise des Popup-Canvas selbst anpassen. Sie lauten wie folgt:

• Hier werden Sie am liebsten die meiste Zeit verbringen, denn hier können Sie verschiedene Arten von Popups erstellen. Mit anderen Worten: Durch Anpassen dieser Einstellungen können Sie die folgenden Effekte erzielen:

• Modale Popups sind eine Art modales Fenster.
• Slide-Ins, Benachrichtigungsleisten usw.

Darüber hinaus können Sie mehrere weitere wichtige Einstellungen anpassen.

„Einstellungen“ stehen folgende Optionen zur Verfügung :

• Ändern Sie die Höhe und Breite des Bildes.
• Ändern Sie die vertikale oder horizontale Ausrichtung des Objekts (z amp können Sie es oben oder unten fixieren, um eine Benachrichtigungsleiste zu erstellen).
• Entscheiden Sie, ob Sie ein Overlay verwenden möchten oder nicht (damit können Sie amp den Hintergrund ausgrauen, wenn das Popup aktiv ist).
• Deaktivieren Sie die Schaltfläche „Schließen“ in Ihrem Browser.
• Fügen Sie eine Animation für den Eingang ein.

„Stil“ können Sie Folgendes tun :

• Sie können die Hintergrundfarbe ändern, einen Farbverlauf erstellen oder ein Bild als Hintergrund verwenden.
• Wenn das Overlay aktiviert ist, konfigurieren Sie es.
• Falls Sie die Schaltfläche „Schließen“ aktiviert haben, müssen Sie sie konfigurieren.

Schließlich enthält die Registerkarte „Erweitert“ einige verschiedene Importeinstellungen, mit denen Sie beispielsweise Folgendes tun können:

• Zeigen Sie die Schaltfläche „Schließen“ an oder lassen Sie das Popup nach einer bestimmten Zeit automatisch schließen.
• Durch Klicken auf das Overlay oder Drücken der Escape-Taste können Sie das Schließen des Fensters verhindern.

• Deaktivieren Sie die Möglichkeit, auf der Seite nach unten zu scrollen.
• Vermeiden Sie mehrere Popups (wenn Sie mehrere Popups auf dieselbe Seite gerichtet haben, wird dies verhindern, dass Ihre Besucher verärgert werden).

Um Ihnen eine Vorstellung davon zu geben, wie sich diese Einstellungen auf Ihr Popup auswirken, sehen Sie hier, wie es aussieht, wenn Sie die Position in die untere rechte Ecke des Fensters ändern:

Sehen Sie sich an, wie das Popup jetzt dauerhaft in der unteren rechten Ecke fixiert ist. Durch die Verwendung eines Scroll-Triggers in Verbindung mit einer Eingangsanimation können Sie einen schönen, dezenten Slide-In-Effekt erzielen.

Sie können Popups auch mit dem Visual Builder in Elementor erstellen

Sobald Sie die grundlegenden Popup-Einstellungen vorgenommen haben, können Sie mit der Gestaltung des eigentlichen Inhalts Ihres Popups beginnen, indem Sie Elemente per Drag & Drop in die visuelle Drag-and-Drop-Oberfläche ziehen.

Sie können jedes beliebige Elementor-Widget verwenden, wodurch Sie viel Kontrolle über das endgültige Design haben. Das Formular-Widget ist das Einzige, was Sie unbedingt einschließen müssen, da es das einzige ist, mit dem Sie Ihr E-Mail-Anmeldeformular erstellen können.

Mit dem Formular-Widget haben Sie die vollständige Kontrolle über die Felder, die Sie anbieten möchten, sowie über den Text und das Erscheinungsbild der Schaltfläche „Senden“. Zum amp :

Darüber hinaus rate ich Ihnen dringend, sich mit allen Widgets und Gestaltungsmöglichkeiten von Elementor vertraut zu machen.

Wie bereits erwähnt, haben Sie weitgehende Kontrolle über das Erscheinungsbild Ihrer Website und haben außerdem Zugriff auf einige nützliche Widgets, die Ihnen dabei helfen können, Ihre Conversion-Rate zu steigern.

Veröffentlichungseinstellungen

Wenn Sie mit dem, was Sie geschaffen haben, zufrieden sind, möchten Sie es mit der Welt teilen. Nach dem Drücken der Schaltfläche „VERÖFFENTLICHEN“ werden Ihnen eine Reihe von Fragen angezeigt. Zur Veranschaulichung:

Ist es möglich, die Bedingungen anzugeben, unter denen das Popup angezeigt werden soll? Sie können auswählen, welche Seiten in Ihre Suchergebnisse einbezogen oder ausgeschlossen werden sollen. Sie können so viele Bedingungen festlegen, wie Sie möchten.

Was ist dann das Ereignis, das das Erscheinen des Popups verursacht? Sie können unter anderem wählen, ob das Popup sofort beim Laden der Seite, beim Scrollen oder wenn der Benutzer zu einem bestimmten Element scrollt, angezeigt werden soll. Alle diese Optionen verfügen über eigene Einstellungen, die eine vollständige Anpassung ermöglichen.

Zu guter Letzt sehen Sie einige erweiterte Regeln, z. B. das Anzeigen des Popups nur für wiederkehrende Besucher, das Anzeigen des Popups nur für eine bestimmte Anzahl von Malen oder das Anzeigen des Popups möglicherweise nur dann, wenn ein Besucher von einem bestimmten Ort auf Ihre Website verwiesen wird URL. Es gibt auch noch ein paar mehr. Diese Optionen können die Benutzererfahrung Ihres Popups erheblich verbessern, sodass Sie es mit echter Integrität und Rücksichtnahme auf Ihre Benutzer gestalten können.

Nehmen Sie die gewünschten Einstellungen vor und klicken Sie dann auf SPEICHERN & SCHLIESSEN. Nachdem Sie auf diese Schaltfläche geklickt haben, erhalten Sie eine amp Vorstellung davon, wie Ihr Popup aussehen wird.

Popups können angepasst und mit dynamischen Inhalten versehen werden.

Bringen wir die Dinge auf die nächste Ebene, sollen wir? Bisher haben wir eine Vorlage ausgewählt und ein oder zwei Sitzungen optimiert, und das war’s auch schon. Stellen Sie sich das Szenario vor, in dem wir unser Popup weiter anpassen möchten.

Wir befinden uns wieder in der Phase NEUES POPUP HINZUFÜGEN, in der wir erneut einen Titel angeben und eine Vorlage auswählen können.

Danach können wir es auswählen, alle notwendigen Änderungen an den Grundeinstellungen vornehmen und erneut auf VERÖFFENTLICHEN klicken.

Okay, jetzt wird es interessant. Wir können Elementor verwenden, um dynamische Daten aus unserer WordPress-Installation abzurufen und sie in das Popup selbst in unserem Popup einzufügen. Wir können Informationen wie den Namen des Benutzers, den Seitentitel usw. einschließen.

Stellen Sie sich das folgende Szenario vor: Wir betreiben WooCommerce und möchten einen Benutzer darüber informieren, dass für das spezifische Produkt, das er sich gerade ansieht, ein Rabatt verfügbar ist. Wählen Sie zunächst einen Textabschnitt aus der Vorlage aus und klicken Sie dann in der Seitenleiste auf Dynamisch:

Wir haben eine große Auswahl an Optionen, darunter Informationen aus dem Beitrag selbst, Informationen aus der gesamten Website, Medieninformationen, Autoreninformationen und sogar WooCommerce-Informationen. Wir wählen einen Produkttitel aus und dieser wird aufgrund unserer Auswahl zu unserem Textinhaltsblock hinzugefügt.

Angenommen, die Datenbankdetails werden nicht ordnungsgemäß abgerufen. In diesem Fall ist es möglich, einige vor dem Text, einige nach dem Text und einen Fallback-Text anzugeben (falls die Datenbankdetails nicht ordnungsgemäß abgerufen werden).

Lassen Sie uns diesen Vorgang also für die Schaltfläche duplizieren, die den Preis des Produkts anzeigt. Wir können den vorangehenden Text als „JETZT KAUFEN FÜR“ formulieren, um uns einen überzeugenden Aufruf zum Handeln zu geben:

Wir können sogar noch einen Schritt weiter gehen und das Produktbild als Hintergrund für das Popup-Fenster selbst verwenden.

Wenn wir auf VERÖFFENTLICHEN klicken, werden uns erneut die Veröffentlichungseinstellungen angezeigt, mit denen wir angeben können, dass das Popup nur auf WooCommerce-Seiten angezeigt werden soll. Als Auslöser stellen wir den Timer auf 15 Sekunden Inaktivität ein. So kam es am Ende:

Obwohl das Design verbessert werden könnte, können Sie sehen, dass wir den Produktnamen, seinen Preis und ein Bild des Produkts als Hintergrund des Popups anzeigen. Genial!