Möchten Sie in WordPress ein Popup pro Beitrags-Tag erstellen und anzeigen? Lesen Sie diesen Artikel also weiter.
Sicher kennen Sie bereits das kleine Fenster, das beim Surfen auf einer Website erscheint. Nun, es heißt Popup oder Popup. Popups können in unterschiedlichen Größen und Bildschirmpositionen auf einer Website erscheinen.
In WordPress gibt es viele Plugins zum Erstellen von Popups, wie z. B. Elementor Pro, JetPopup, Brizy Pro und mehr.
Wichtig ist, dass Pop-ups Ihre Website-Besucher nicht stören. Erstellen Sie daher ein Popup, das so einfach und attraktiv wie möglich ist.
Inhalt
Einige WordPress-Plugins zum Erstellen von Popups
Elementor Pro
Elementor Pro ist eine Elementor-Erweiterung mit Hunderten von Premium-Funktionen. Es bietet Ihnen leistungsstarke professionelle Tools, die Ihren Arbeitsablauf und Ihr Design beschleunigen. Elementor Pro gibt Ihnen die volle Kontrolle über das Layout und Design Ihrer Website. In diesem Fall können Sie das Design Ihres Popups frei anpassen.
Verwendung Elementor Pro Das Erstellen eines Popups per Post-Tag ist sehr einfach und benutzerfreundlich. Sie können die Anzeigebedingungen Ihres Popups ganz einfach und sehr präzise definieren.
JetPopup
Crocoblocks JetPopup ist eine Erweiterung für Elementor. Sie können es als eigenständiges Plugin oder im Bundle mit anderen Crocoblock-Plugins kaufen. Der Vorteil der Verwendung von JetPopup zum Erstellen eines Popup-Fensters besteht darin, dass es viele coole Funktionen bietet.
- Sie können mit den Popup-Fenster-Auslösern herumspielen.
- Sie können Animationen für das Popup-Fenster erstellen.
- Es steht eine große Anzahl von Popup-Vorlagen zur Verfügung.
Lesen Sie auch: 22 beste Premium-Addons für Elementor
Brizy Pro
Der Popup-Builder von Brizy Pro bietet Ihnen zwei Möglichkeiten. Das erste ist das durch Klicken aktivierte Popup und das zweite sind die automatischen Auslöser und Bedingungen.
- Öffnen per Klick: Ihr Popup kann einfach durch einen Klick auf die Elemente Ihrer Seite ausgelöst werden.
- Automatische Auslöser und Bedingungen: Sie können Besucheraktionen konfigurieren, die bestimmen, wann Popups angezeigt werden.
So erstellen und zeigen Sie Popups nach Post-Tag in WordPress mit Elementor an
Wie bereits erwähnt, haben Sie in WordPress mehrere Möglichkeiten, ein Popup zu erstellen. In diesem Tutorial zeigen wir Ihnen, wie Sie mit der Version ein Popup-Tag pro Beitrag erstellen und anzeigen Elementor ProStellen Sie also sicher, dass Sie bereits eines haben.
Schritt 1: Erstellen Sie die Popup-Vorlage
Als erstes müssen Sie eine neue Popup-Vorlage erstellen. Um eine neue Popup-Vorlage zu erstellen, gehen Sie zu Vorlagen > Popups in Ihrem WordPress-Dashboard und klicken Sie auf die Schaltfläche Neue hinzufügen.
Fügen Sie als Nächstes den Namen Ihres Popups hinzu und klicken Sie auf die Schaltfläche EIN MODELL ERSTELLEN.
Sie werden zur Vorlagenbibliothek weitergeleitet. Sie können eine Vorlage aus dem Bibliotheksfenster auswählen oder Ihre eigene Popup-Vorlage entwerfen. Um eine Vorlage aus der Bibliothek zu verwenden, klicken Sie einfach auf die Schaltfläche einfügen.
Aber in diesem Tutorial werden wir die Popup-Vorlage von Grund auf erstellen. Klicken Sie auf das Symbol X um die Vorlagenbibliothek zu schließen.
Schritt 2: Passen Sie die Popup-Einstellungen an
Wir müssen einige Anpassungen in den Popup-Einstellungen vornehmen, bevor wir mit der Erstellung einer Popup-Vorlage beginnen. Hier finden Sie die besten Einstellungen für Ihre Website. In diesem Tutorial zeigen wir Ihnen die Popup-Einstellungen Ihrer Wahl.
Klicken Sie auf das Zahnradsymbol in der unteren linken Ecke. Ändern Sie in den Popup-Einstellungen die Breite in 90 % der Breite der Ansicht (VW) Et die Position en Mitte unten.
Schritt 3: Entwerfen Sie das Popup
Als nächstes entwerfen Sie Ihre Popup-Vorlage. Fügen Sie einen neuen Abschnitt hinzu und wählen Sie die 5-Spalten-Struktur. Stellen Sie in den Abschnittseinstellungen die ein Breite auf 950. Sie können mit Ihren Einstellungen spielen.
Sie können beispielsweise auf die Registerkarte gehen Design Um den Hintergrund festzulegen, gehen Sie zur Registerkarte fortgeschritten um den Rand anzupassen und vieles mehr.
Nun zurück zu Ihren Kolumnen. Stellen Sie in der linken Spalte die Breite auf 33 % und für die anderen vier auf 16 % ein.
In der linken Spalte fügen wir ein Titel-Widget mit etwas Text hinzu. Sie können Text hinzufügen, der Ihre Website-Besucher dazu auffordert, andere Inhalte anzuzeigen, die für den aktuellen Inhalt relevant sind, oder einen beliebigen anderen Text Ihrer Wahl.
Rechts fügen wir ein Bild-Widget hinzu. Sie können Bilder aus Miniaturansichten/Featured-Bildern von Beiträgen hinzufügen oder diese manuell hochladen.
Jetzt ist die Struktur fertig. Geh zurück zu Popup-Einstellungen um Eintritts-, Austritts- und Randanimationen anzupassen. In diesem Tutorial setzen wir die Eingabe auf Abblenden und die Ausgabe an Verblassen. Gehen Sie dann zur Registerkarte fortgeschritten und setzen Sie den Rand auf 30 (üblicher Wert für Links).
Schritt 4: Veröffentlichen Sie das Popup
Nachdem das Design nun fertig ist, klicken Sie auf die Schaltfläche VERÖFFENTLICHUNG um Anzeigebedingungen und Auslöser festzulegen. Um die Anzeigebedingung festzulegen, klicken Sie auf die Schaltfläche BEDINGUNG HINZUFÜGEN und wählen Sie Ihre Option aus der Dropdown-Liste aus.
Da Sie das Popup per Post-Tag anzeigen möchten, können Sie die folgenden Anzeigebedingungen festlegen (siehe Animation).
Weiter klicken. In der Registerkarte Auslöser, stellen Sie den Auslöser auf Auf Scrollen den Schalter auf umlegen Ja. Definiere das Anleitung von Gering und Breite über 95 %. Weil wir möchten, dass das Popup erscheint, wenn Besucher das Ende unseres Artikels erreichen.
In diesem Tutorial werden wir nicht definieren Erweiterte Regeln. Also klicken Sie auf SPEICHERN UND SCHLIESSEN. Nun, jetzt sind wir fertig.
Mal sehen, wie es aussieht.
Hier haben Sie gerade Ihr Popup fertiggestellt. Siehe auch unsere verwandten Artikel:
- 6 praktische CSS-Snippets für das Posts-Widget von Elementor
- So erstellen Sie eine Listing-Seite mit Elementor Loop Builder
- So fügen Sie Geschäftszeiten zu Ihrer Elementor-Website hinzu
- So fügen Sie einen Zeilenumbruch im Text der Elementor-Schaltfläche hinzu
- So erstellen und bearbeiten Sie eine Fußzeile in Elementor
- So fügen Sie eine Bildmaske in Elementor hinzu
- Elementor oder Brizy: Welcher ist der beste WordPress-Seitenersteller?
In Verbindung stehende Artikel
- 22 beste Premium-Addons für Elementor
- Elementor vs. Beaver Builder: Detaillierter Vergleich der Seitenersteller
- Elementor Review 2024: Erfahrungen mit Elementor (Vor- und Nachteile, Funktionen und mehr)
- So erstellen Sie einen interaktiven Kreis in Elementor
- So erstellen Sie eine Elementor-Website superschnell: Vollständiges Tutorial
- So migrieren Sie eine Site zur Elementor Cloud
- Die 5 besten Instagram-Feed-Plugins für Elementor [Unsere Top-Tipps]
- So verwenden Sie erweitertes Akkordeon in Elementor