Elementor-Popups in WooCommerce erstellen

Wir sind alle große Fans von WooCommerce. Es ist einfach einzurichten und anzupassen. Das Paket enthält Funktionen, die das Erstellen und Verwalten eines dynamischen und leistungsstarken E-Commerce-Shops vereinfachen.

Um eine erfolgreiche E-Commerce-Seite zu erstellen, gehört jedoch mehr dazu, als nur beliebte Produkte hinzuzufügen. Alle Seiten müssen auch optisch ansprechend sein. Je optisch ansprechender und benutzerfreundlicher Ihre Website ist, desto größer ist die Wahrscheinlichkeit, dass Sie mehr Kunden gewinnen.

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

Obwohl WooCommerce den Warenkorb und die Checkout-Seite für Sie erstellt, wenn Sie Ihre Website erstellen, macht Elementor sie durch Anpassung attraktiver.

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 Mein Konto- und Nutzungsbedingungen-Seiten aktualisieren, können Sie die Herzen und Köpfe Ihrer Kunden gewinnen.

Die Drag-and-Drop-Funktionalität von Elementor in Kombination mit diesem Tutorial stellt sicher, dass Sie beim Erstellen Ihrer Seiten eine problemlose Erfahrung haben.

Nachdem Sie Ihren wooCommerce-Shop eingerichtet haben, möchten Sie ihn möglicherweise für Ihre Besucher und Kunden attraktiver machen. Das Hinzufügen von Popups gibt dem Benutzer einen anderen Eindruck und einen neuen Wunsch, in Ihrem Geschäft zu bleiben.

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

Sobald Sie auf ADD NEW POPUP geklickt haben (das ist ziemlich selbsterklärend), werden Sie gefragt werden , einen Namen zu geben und dann eine Vorlage aus dem premade ex wählen amp les angezeigt. 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, andere sind ideal, um Benutzer zu ermutigen, sich für etwas anzumelden. Es gibt sogar Ex amp les für die Nutzer von Cookies Gebrauch oder anderen BIPR Benachrichtigungen warnen. 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.

Sie werden zum Popup-Builder im WordPress-Backend weitergeleitet, nachdem Sie auf diese Schaltfläche geklickt haben.

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 eingerichtet ist, wie zu Hause fühlen. Es ist im Wesentlichen der gleiche Prozess wie das Erstellen von Elementor-Seitenvorlagen in WordPress.

Auf der rechten Seite des Bildschirms befindet sich der Hauptbereich, der 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 die Steuerelemente und Einstellungen in der Seitenleiste links angezeigt, zusammen mit der Option zum Veröffentlichen Ihrer Arbeit.

Konfiguration des Popup-Fensters

 In diesem Fall sollten Sie eine Vorschau Ihres Popups sehen – entweder eine leere Tafel oder die von Ihnen ausgewählte Vorlage.

Die Popup-Einstellungen, die standardmäßig immer geöffnet sind, ermöglichen es Ihnen, die Funktionsweise des Popup-Zeichenbereichs selbst anzupassen. Sie sind wie folgt:

• Hier verbringen Sie die meiste Zeit, da Sie hier verschiedene Arten von Popups erstellen können. Mit anderen Worten, durch die Anpassung dieser Einstellungen können Sie die folgenden Effekte erzielen:

• Modale Popups sind eine Art modales Fenster.
• Slide-Ins, Benachrichtigungsleisten und so weiter.

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

Die folgenden Optionen stehen auf der Registerkarte Einstellungen zur Verfügung :

• Ändern Sie die Höhe und Breite des Bildes.
• Ändern Sie die vertikale oder horizontale Ausrichtung des Objekts (zB amp le, könnten Sie beheben es nach oben oder unten eine Benachrichtigungsleiste zu erstellen)
• Entscheiden Sie, ob Sie ein Overlay verwenden möchten oder nicht (damit können Sie z. amp den Hintergrund ausgrauen, wenn das Popup aktiv ist)
• Deaktivieren Sie die Schließen-Schaltfläche Ihres Browsers.
• Fügen Sie eine Animation für den Eingang hinzu.

Auf der Registerkarte 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 Schließen-Schaltfläche 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 zum 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 ausgerichtet haben, verhindert dies, 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 rechte untere Ecke des Fensters ändern:

Sehen Sie sich an, wie das Popup jetzt in der unteren rechten Ecke dauerhaft fixiert ist. Mit einem Scroll-Trigger 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 abgeschlossen haben, können Sie mit der Gestaltung des eigentlichen Inhalts Ihres Popups beginnen, indem Sie Elemente per Drag-and-Drop in die visuelle Drag-and-Drop-Oberfläche ziehen.

Sie können jedes beliebige Elementor-Widget verwenden, das Ihnen viel Kontrolle über das endgültige Design gibt. Das Formular-Widget ist das einzige, was Sie unbedingt einschließen müssen, da es das einzige ist, mit dem Sie Ihr E-Mail-Opt-In-Formular 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 Aussehen des Senden-Buttons. Für die Ex - amp le:

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

Wie bereits erwähnt, haben Sie eine große Kontrolle über das Erscheinungsbild Ihrer Website und haben außerdem Zugriff auf einige nützliche Widgets, mit denen Sie Ihre Conversion-Rate erhöhen können.

Veröffentlichungseinstellungen

Wenn Sie mit dem, was Sie erstellt haben, zufrieden sind, möchten Sie es mit der Welt teilen. Nach dem Drücken des PUBLISH-Buttons werden Ihnen eine Reihe von Fragen präsentiert. Als Illustration:

Ist es möglich, die Bedingungen anzugeben, unter denen das Popup angezeigt werden soll? Sie können auswählen, welche Seiten Sie in Ihre Suchergebnisse ein- oder ausschließen möchten. Sie können so viele Bedingungen haben, 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 beim Laden der Seite, beim Scrollen oder beim Scrollen des Benutzers zu einem bestimmten Element sofort angezeigt werden soll oder nicht. Alle diese Optionen haben ihre Einstellungen, die eine vollständige Anpassung ermöglichen.

Zu guter Letzt sehen Sie einige erweiterte Regeln, wie z. B. das Anzeigen des Popups nur für wiederkehrende Besucher, das Anzeigen des Popups nur eine bestimmte Anzahl von Malen oder das Anzeigen des Popups möglicherweise nur, wenn ein Besucher von einer bestimmten Seite 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.

Vervollständigen Sie die Einstellungen wie gewünscht und klicken Sie dann auf SPEICHERN & SCHLIESSEN. Sie werden zu genommen werden , wie amp le von dem, was Ihr Popup wie nach dem Klicken auf diese Schaltfläche aussehen wird.

Popups können angepasst und dynamische Inhalte hinzugefügt werden.

Bringen Sie die Dinge auf die nächste Ebene, sollen wir? Bis zu diesem Punkt haben wir eine Vorlage ausgewählt und ein oder zwei Sitzungen optimiert, und das war es auch schon. Betrachten Sie das Szenario, in dem wir unser Popup weiter anpassen möchten.

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

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

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

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

Wir haben eine Vielzahl von Optionen zur Auswahl, darunter Informationen aus dem Beitrag selbst, Informationen aus der gesamten Website, Medieninformationen, Autoreninformationen und sogar WooCommerce-Informationen. Wir wählen einen Produkttitel aus, der als Ergebnis unserer Auswahl zu unserem Textinhaltsblock hinzugefügt wird.

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 (wenn die Datenbankdetails nicht richtig abgerufen werden).

Lassen Sie uns diesen Vorgang für die Schaltfläche duplizieren, die den Preis des Produkts anzeigt. Wir können den vorhergehenden 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 des Popup-Fensters selbst verwenden.

Wenn wir PUBLISH drücken, werden uns erneut die Veröffentlichungseinstellungen angezeigt, mit denen wir angeben können, dass das Popup nur auf WooCommerce-Seiten angezeigt werden soll. Wir setzen den Timer auf 15 Sekunden Inaktivität, um den Auslöser zu sein. So ist es am Ende herausgekommen:

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