So erstellen Sie ein Popup für Ihre Archivseite

Erstellen Sie ein Popup, das sich nahtlos in Ihre Produktarchivseiten einfügt, sodass sich das Popup wie ein natürliches Designelement anfühlt.

Sie erfahren, wie Sie ein Popup-Fenster erstellen, das:

1. Se integra naturalmente con su sitio Netz
2. Wird auf der entsprechenden Kategorie- / Produktarchivseite angezeigt

Entwerfen Sie Produktdateivorlagen

1. Gehen WooCommerce> Categorías und erstellen Sie Produktkategorien, falls Sie dies noch nicht getan haben.
2. Gehen Vorlagen> Theme Builder und erstellen Sie eine Dateivorlage für jede Produktkategorie. Stellen Sie sicher, dass das Bild in Ihrer Kategorie in einem Bereich platziert ist, der mit dem von Ihnen entworfenen Popup übereinstimmt, da es ein wesentlicher Bestandteil des gesamten animierten Effekts ist.

Festlegen von Veröffentlichungsoptionen für Produktarchivvorlagen

1. Stellen Sie für jede Vorlage die ein Anzeigebedingungen zu Einschließen: Produktkategorien > suchen und wählen Sie jeweils die entsprechende Kategorie aus

Diseñe la ventana emergente y su Inhalt

1. Gehen Vorlagen> Popups> Neu hinzufügen und geben Sie Ihrem neuen Popup einen Namen. (Eine alternative Methode ist das Drücken CMD + E. oder STRG + E. öffnen Entdecker, nach Popup suchen, wählen Neues Popup hinzufügenund gib ihm einen Namen.)
2. Wählen Sie eine vordefinierte Popup-Vorlage oder schließen Sie die Bibliotheksüberlagerung und gestalten Sie Ihr Popup von Grund auf neu. Da dieses Popup eng in das Design der Produktdateivorlagen integriert ist, ist es am besten, Ihr eigenes zu entwerfen.
3. Entwerfen Sie Popup-Inhalte unter Berücksichtigung der Kategorie. Lassen Sie oben im Popup-Fenster einen Bereich mit etwas Leerraum, damit sich das Dateivorlagenbild gut überlappen kann.
4. Im Popup-Einstellungen> Layout, installieren Eingangsanimation zu Nach links wischen.
5. Im Popup-Einstellungen> Erweitert, installieren Deaktivieren Sie das Scrollen von Seiten zu Ja.

Legen Sie die Veröffentlichungsoptionen fest

1. Gehen Einstellungen veröffentlichen> Bedingungenund etablieren Include> WooCommerce> Produktkategorien> Suchen Sie die entsprechende Kategorie und wählen Sie sie aus.
2. Gehen Löst aus und etablieren In Fahrtrichtung zu Nieder y Innerhalb 8% Verschiebung. Passen Sie den Prozentsatz natürlich an Ihr Layout an, sodass das Popup mit der Position Ihres Kategoriebilds auf der Produktarchivseite übereinstimmt.
3. Gehen Erweiterte Regeln und etablieren Auf Geräten anzeigen nur für Schreibtischda dieses Designkonzept auf Laptops oder Mobilgeräten nicht so gut funktioniert. Sie können jederzeit verschiedene Popups und Layoutschemata für diese Geräte erstellen, wenn Sie möchten.

Passen Sie die Produktdateivorlage an

1. Gehen Vorlagen> Theme Builder Zum Bearbeiten Ihrer Produktdateivorlage verwenden Sie dieses Popup-Fenster.
2. Bearbeiten Sie das Widget für das Kategoriebild und gehen Sie zu Ihrem Fortgeschrittene Registerkarte, und stellen Sie die Z ein-Index zu 10,000. Dadurch kann das Kategoriebild über dem Overlay- und Popup-Fenster angezeigt werden.

Wiederholen Sie die Schritte für jede Produktkategorie und erstellen Sie für jede ein relevantes Popup. Stellen Sie sicher, dass jedes Popup auf ein Produkt in der Kategorie ausgerichtet ist, das gut mit dem Bild in der Kategorie übereinstimmt. Verwenden Sie Bedingungen, um jedes Popup-Fenster, das Sie entwerfen, seiner Produktkategorie zuzuweisen.

Alles bereit. Besuchen Sie jetzt die Live-Produktkategorieseiten und sehen Sie, wie sich Ihre Popups nahtlos in Ihre Dateien einfügen.