Elementor ist ein leistungsstarker WordPress-Seitenersteller, mit dem Sie ganz einfach benutzerdefinierte Seitenlayouts mit einem Drag-and-Drop-Editor erstellen können. Für WooCommerce-Shops kann die Erstellung einer schönen und responsiven Produktkategorieseite die Benutzerfreundlichkeit erheblich verbessern und die Verkaufschancen erhöhen. In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie mit Elementor responsive Produktkategorieseiten erstellen und sicherstellen, dass Ihre Seiten sowohl auf dem Desktop als auch auf mobilen Geräten perfekt dargestellt werden.

Schritt eins:Installation und Aktivierung von Elementor und seiner Pro-Version

Um mit der Erstellung benutzerdefinierter WooCommerce-Produktkategorieseiten zu beginnen, müssen Sie Elementor und seine Pro-Version installieren. Die kostenlose Version von Elementor ist zwar leistungsstark und erfordert Pro Versionum WooCommerce und erweiterte Funktionen freizuschalten.

Schritt 2: Erstellen Sie eine neue Seite und fügen Sie eine Produktkategorie-Vorlage hinzu.

1. Neue Seite: Gehen Sie im WordPress-Dashboard zu Seiten > Neue Seite hinzufügen.
2. Benennung der Seite: Benennen Sie die Seite, z.B. "Produktklassifizierung" oder einen anderen geeigneten Namen, und klicken Sie dann auf die Schaltfläche Editieren mit Elementor Schaltfläche.

3. Wählen Sie eine Vorlage: Sobald Sie sich im Elementor-Editor befinden, klicken Sie auf die Schaltfläche Einstellungen (Zahnradsymbol)Auswahl Seitenlayout für "Elementor-Leinwand", um sicherzustellen, dass die Seite von Grund auf neu erstellt wird.

Schritt 3: Produktkategorie-Modul hinzufügen

1. Kategorie Titel hinzufügen: durch Ziehen und Ablegen Überschrift Widget, fügen Sie einen Seitentitel wie "Unsere Produktkategorien". Schriftarten, Größen und Ausrichtungen können im linken Bedienfeld geändert werden, um sie an den Stil Ihrer Website anzupassen.

2. WooCommerce Produktkategorie-Widget einfügen: Elementor Pro bietet Produktklassifizierung Widgets. Suchen "Produktklassifizierung"Widget und ziehen Sie es per Drag & Drop auf die Seite. Dieses Widget zeigt dynamisch alle Produktkategorien an, die Sie in WooCommerce erstellt haben.

3. Maßgeschneiderte Anzeige der Produktkategorie::
   • Im linken Bereich können Sie auswählen, welche Kategorien angezeigt werden sollen und wie die Kategorien sortiert werden sollen (nachName, letzte Aktualisierung(usw.).
   • Wählen Sie die Anzahl der anzuzeigenden Spalten und Zeilen und achten Sie darauf, dass das Layout sowohl auf Desktop- als auch auf Mobilgeräten ordentlich ist.
   • Passen Sie die Optionen für die Größe der Miniaturansicht, die Art des Kategorietitels und die Preisanzeige an.

Schritt 4: Responsive Design einrichten

Um sicherzustellen, dass Ihre Produktkategorieseiten auf allen Geräten richtig angezeigt werden, bietet Elementor leistungsstarke Tools für das responsive Design.

1. In den reaktionsschnellen Modus wechseln: Wählen Sie am unteren Rand des Elementor-Editors die Option Desktop, Tablet, Handy Modus zur Vorschau und Anpassung.

2. Anpassen der Stil-Einstellungen::
   • Stellen Sie sicher, dass Ihre Kategorien im Modus für mobile Geräte in einer oder zwei Spalten angezeigt werden und nicht in drei oder vier Spalten wie auf dem Desktop.
   • Ändern Sie die Größe von Überschriften, Text und Bildern, um sicherzustellen, dass Benutzer die Produktkategorien leicht lesen und darin navigieren können.
3. Unnötige Elemente ausblenden: Einige Elemente sind möglicherweise nicht für die Anzeige auf mobilen Geräten geeignet. Optional können Sie bestimmte Widgets oder Elemente ausblenden und sie nur auf Desktop- oder Mobilgeräten anzeigen.

Schritt 5: Benutzerdefinierte Filter und Suchfunktionen hinzufügen

Um das Benutzererlebnis weiter zu verbessern, fügen Sie Ihren Produktkategorieseiten benutzerdefinierte Produktfilter und Suchfunktionen hinzu.

1. ausnutzen WooCommerce Produktfilter nach WBW Plug-in (Softwarekomponente)Installieren und aktivieren Sie das WooCommerce Product Filter Plugin und verwenden Sie Elementor, um die Suchbegriff vielleicht (Maschinen-)Filter Widgets werden auf Produktkategorieseiten gezogen, damit die Benutzer die gewünschten Produkte schneller finden.

2. Benutzerdefinierte Filter einrichtenBenutzerdefinierte Filteroptionen über das Plugin ermöglichen es Benutzern, Produkte nach Preis, Marke, Farbe usw. zu filtern. Auch das Aussehen dieser Filter kann an das Design der Seite angepasst werden.

Sechster Schritt:Aufrufende Begriffe hinzufügen (CTA)und andere Erweiterungen

Fügen Sie am unteren Rand Ihrer Produktkategorieseite ein auffälliges Aufrufende Bezeichnung (CTA) Widgets wie z.B. "Jetzt kaufen"oder"Mehr Produkte anzeigen", die den Nutzer dazu bringen können, weiter zu stöbern oder zu kaufen.

1. Ziehen und Ablegen von Schaltflächen-Widgets: Wille Schaltfläche Widget Ziehen Sie es an den unteren Rand der Seite und setzen Sie seinen Text auf eine aussagekräftige Aktionsphrase, wie z.B. "Entdecken Sie unser gesamtes Produktsortiment".
2. Werbebanner hinzufügen: Verwendung Bildrahmen vielleicht Inline-Bilder Widgets, die ein auffälliges Werbebanner einfügen, das die Nutzer dazu verleitet, sich durchzuklicken, um das vergünstigte Produkt anzusehen.

Schritt 7: Vorschau und Veröffentlichung der Seite

Nachdem Sie das Design der Seite und die Optimierung der Reaktionsfähigkeit abgeschlossen haben, klicken Sie auf die Schaltfläche Vorschauen klicken, stellen Sie sicher, dass sich die Seite imAuf Desktop, Tablet und HandyAlles wird gut angezeigt. Wenn alle Einstellungen und Designs wie erwartet sind, können Sie auf die Schaltfläche Beitrag um sie online zu stellen.

Zusammenfassungen

Die Erstellung von responsiven Produktkategorieseiten für WooCommerce mit Elementor ist sowohl einfach als auch leistungsstark. Mit flexibler Drag-and-Drop-Bearbeitung, benutzerdefinierten Produktkategorielayouts und responsiven Designoptionen können Sie sicherstellen, dass Ihre Seiten auf allen Geräten ein großartiges Benutzererlebnis bieten. Vergessen Sie nicht, die Benutzerinteraktion mit CTA-Schaltflächen und Filtern weiter zu verbessern, was letztendlich die Konversionsrate Ihrer Website erhöht.