Erstellen Sie Elementor-Popups in WooCommerce

Wir sind alle große Fans von WooCommerce. Es ist einfach einzurichten und anzupassen. Funktionen, die die Erstellung und Verwaltung eines dynamischen und leistungsstarken Onlineshops vereinfachen, sind im Paket enthalten.

Für eine erfolgreiche E-Commerce-Seite reicht es jedoch nicht aus, einfach nur beliebte Produkte anzubieten. Alle Seiten müssen auch optisch ansprechend sein. Je ansprechender und benutzerfreundlicher Ihre Website gestaltet ist, desto größer ist die Wahrscheinlichkeit, mehr Kunden zu gewinnen.

• Konfiguration des Popup-Fensters
• Sie können Popups auch mithilfe des visuellen Editors in Elementor erstellen
• Veröffentlichungseinstellungen

Obwohl WooCommerce beim Erstellen Ihrer Website den Warenkorb und die Checkout-Seite automatisch generiert, macht Elementor diese durch individuelle Anpassungen attraktiver.

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

Mit einer ansprechenden Dankesseite und der Aktualisierung Ihrer Seiten „Mein Konto“ und „Nutzungsbedingungen“ können Sie die Herzen und Köpfe Ihrer Kunden gewinnen.

Die Drag-and-Drop-Funktionalität von Elementor sorgt in Kombination mit diesem Tutorial für ein problemloses Seitenerstellen.

Nachdem Sie Ihren WooCommerce-Shop eingerichtet haben, möchten Sie ihn vielleicht für Ihre Besucher und Kunden attraktiver gestalten. Das Hinzufügen von Pop-ups vermittelt dem Nutzer einen neuen Eindruck und weckt die Lust, länger in Ihrem Shop zu verweilen.

 Um ein Popup zu erstellen, gehen Sie in der Menüleiste auf Vorlagen > Popups. Es wird Ihnen eine Liste all Ihrer Popups angezeigt. Falls Sie noch keins erstellt haben, sehen Sie etwas Ähnliches wie das Folgende:

Nachdem Sie auf „Neues Popup hinzufügen“ geklickt haben (was selbsterklärend ist), werden Sie aufgefordert, einen Namen einzugeben und anschließend eine Vorlage aus den angezeigtenampauszuwählen. Es stehen verschiedene Vorlagen für unterschiedliche Zwecke zur Verfügung: Einige eignen sich für Ankündigungen, andere für Rabattaktionen und wieder andere sind ideal, um Nutzer zur Anmeldung zu animieren. Es gibt sogaramp, um Nutzer über die Verwendung von Cookies oder andere DSGVO-Hinweise zu informieren. Sobald Sie eine passende Vorlage gefunden haben, klicken Sie darauf, um eine größere Vorschau anzuzeigen, und drücken Sie dann die Schaltfläche „Einfügen“.

Nach dem Klicken auf diese Schaltfläche gelangen Sie zum Popup-Builder im WordPress-Backend.

Wenn Sie bereits mit Elementor gearbeitet haben, werden Sie sich mit der Benutzeroberfläche, den Optionen und der übersichtlichen Anordnung sofort zurechtfinden. Der Prozess ist im Wesentlichen derselbe wie beim Erstellen von Elementor-Seitenvorlagen in WordPress.

Auf der rechten Seite des Bildschirms befindet sich die Hauptarbeitsfläche, die eine Vorschau Ihrer aktuellen Arbeit anzeigt. Sie können jedes Element einzeln bearbeiten und anpassen, indem Sie es auswählen und dann „Bearbeiten“ > „Elemente bearbeiten“ wählen. Wenn Sie fertig sind, werden die Steuerelemente und Einstellungen in der Seitenleiste links angezeigt, zusammen mit der Option zum Veröffentlichen Ihrer Arbeit.

Konfiguration des Popup-Fensters

 An dieser Stelle sollten Sie eine Vorschau Ihres Popups sehen – entweder eine leere Seite oder die von Ihnen gewählte Vorlage.

Die standardmäßig immer geöffneten Popup-Einstellungen ermöglichen es Ihnen, die Funktionsweise des Popup-Fensters anzupassen. Sie lauten wie folgt:

• Hier sollten Sie die meiste Zeit verbringen, denn hier können Sie verschiedene Arten von Pop-ups erstellen. Mit anderen Worten: Durch Anpassen dieser Einstellungen können Sie folgende Effekte erzielen:

• Modale Popups sind eine Art von modalem Fenster.
• Einblendungen, Benachrichtigungsleisten und so weiter.

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

Registerkarte „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 (zampB. 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 Sieampden Hintergrund ausgrauen, wenn das Popup aktiv ist)
• Deaktivieren Sie die Schließen-Schaltfläche in Ihrem Browser.
• Füge eine Animation für den Eingang hinzu.

„Stil“ können Sie folgende Aktionen ausführen :

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

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

• Zeigen Sie die Schaltfläche „Schließen“ an oder lassen Sie das Popup sich nach einer bestimmten Zeit automatisch schließen.
• Durch Klicken auf das Overlay oder Drücken der Escape-Taste kann verhindert werden, dass sich das Fenster schließt.

• Die Möglichkeit zum Scrollen auf der Seite deaktivieren.
• Vermeiden Sie mehrere Pop-ups (wenn Sie mehrere Pop-ups auf derselben Seite einblenden, verhindern Sie so, 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 nun fest in der unteren rechten Ecke positioniert ist. Durch die Verwendung eines Scroll-Triggers in Verbindung mit einer Eingangsanimation lässt sich ein eleganter, dezenter Einblendeffekt erzielen.

Sie können Popups auch mithilfe des visuellen Editors 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 einfügen.

Sie können jedes beliebige Elementor-Widget verwenden und haben dadurch umfassende Kontrolle über das endgültige Design. Das Formular-Widget ist das einzige, das Sie unbedingt einbinden müssen, da nur damit Sie Ihr E-Mail-Anmeldeformular erstellen können.

Mit dem Formular-Widget haben Sie die volle Kontrolle über die angebotenen Felder sowie über Text und Aussehen der Schaltfläche „Absenden“. Zumamp:

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

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

Veröffentlichungseinstellungen

Wenn Sie mit Ihrem Werk zufrieden sind, möchten Sie es sicher mit der Welt teilen. Nach dem Klicken auf den „Veröffentlichen“-Button werden Ihnen einige Fragen gestellt. Zum Beispiel:

Kann man die Bedingungen festlegen, unter denen das Popup erscheinen soll? Sie können auswählen, welche Seiten in die Suchergebnisse einbezogen oder ausgeschlossen werden sollen. Sie können beliebig viele Bedingungen festlegen.

Welches Ereignis löst also das Erscheinen des Popups aus? Sie können unter anderem festlegen, ob das Popup beim Laden der Seite, beim Scrollen oder beim Erreichen eines bestimmten Elements angezeigt werden soll. Alle diese Optionen verfügen über eigene Einstellungen und ermöglichen so eine umfassende Anpassung.

Nicht zuletzt finden Sie hier auch erweiterte Regeln, beispielsweise die Anzeige des Popups nur für wiederkehrende Besucher, die Begrenzung der Anzeigehäufigkeit oder die Anzeige nur, wenn ein Besucher über eine bestimmte URL auf Ihre Website gelangt. Es gibt noch weitere Optionen. Diese Möglichkeiten verbessern die Benutzerfreundlichkeit Ihres Popups erheblich und ermöglichen Ihnen ein Design, das die Bedürfnisse Ihrer Nutzer optimal berücksichtigt.

Nehmen Sie die gewünschten Einstellungen vor und klicken Sie anschließend auf SPEICHERN & SCHLIESSEN. Sie sehen dann eineamp, wie das Popup nach dem Klicken aussehen wird.

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

Wollen wir das Ganze auf die nächste Stufe heben? Bisher haben wir eine Vorlage ausgewählt und sie ein- oder zweimal angepasst, und das war's. Stellen wir uns nun vor, wir möchten unser Popup weiter individualisieren.

Wir sind wieder beim Schritt „NEUES POPUP HINZUFÜGEN“ angelangt, wo wir erneut einen Titel festlegen und eine Vorlage auswählen können.

Danach können wir es auswählen, gegebenenfalls Ä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 direkt in das Popup einzufügen. Wir können Informationen wie den Namen des Benutzers, den Seitentitel usw. einfügen.

Stellen Sie sich folgendes Szenario vor: Wir nutzen WooCommerce und möchten einen Nutzer darüber informieren, dass für das aktuell angezeigte Produkt ein Rabatt verfügbar ist. Wählen Sie dazu zunächst einen Textabschnitt aus der Vorlage aus und klicken Sie anschließend in der Seitenleiste auf „Dynamisch“

Wir bieten Ihnen eine Vielzahl von Optionen, darunter Informationen aus dem Beitrag selbst, Informationen von der gesamten Website, Medieninformationen, Autoreninformationen und sogar WooCommerce-Informationen. Wir wählen einen Produkttitel aus, der dann automatisch in unseren Textblock eingefügt wird.

Angenommen, die Datenbankdetails werden nicht korrekt abgerufen. In diesem Fall ist es möglich, einen Text vor dem eigentlichen Text, einen Text nach dem eigentlichen Text und einen Ausweichtext (falls die Datenbankdetails nicht korrekt abgerufen werden) anzugeben.

Wiederholen wir diesen Vorgang für den Button, der den Produktpreis anzeigt. Wir können den vorhergehenden Text als „JETZT KAUFEN FÜR“ formulieren, um einen überzeugenden Handlungsaufruf zu schaffen:

Wir können sogar noch einen Schritt weiter gehen und das Produktbild als Hintergrund des Popup-Fensters selbst verwenden.

Nach dem Klick auf „Veröffentlichen“ werden uns die Veröffentlichungseinstellungen erneut angezeigt. Hier können wir festlegen, dass das Popup nur auf WooCommerce-Seiten erscheinen soll. Als Auslöser stellen wir einen Timer auf 15 Sekunden Inaktivität ein. So sieht das Endergebnis aus:

Das Design könnte zwar verbessert werden, aber man sieht, dass wir den Produktnamen, den Preis und ein Produktbild als Hintergrund des Pop-ups anzeigen. Hervorragend!