Erstellen einer Produktbewertungsseite mit Extra – Teil 3

Willkommen zu Teil 3 dieser 4-teiligen Serie zur Entwicklung einer Produktbewertungsseite mit Extra. Wenn Sie sich den Kopf zerbrechen, wie Sie mit der Entwicklung einer Produktbewertungsseite beginnen können, ist diese Serie genau das Richtige für Sie. Mit seiner integrierten Bewertungsfunktion und der intelligenten Post-Kategorisierung ist Extra speziell ausgestattet, um in wenigen Minuten großartig aussehende Rezensionen, Produktpost-Vorlagen, Mega-Menüs und Kategorie-Layouts zu erstellen. Begleiten Sie mich, wenn wir die Kraft von Extra entdecken.

In Teil 2 dieser Serie haben wir unsere Beitragsvorlage für Produktbewertungen mit den integrierten Einstellungen von Extra und dem Visual Builder erstellt. Mit der neuen Beitragsvorlage konnten Sie weitere Beiträge hinzufügen und den jeweiligen Kategorien zuordnen.

Heute werden wir zwei Kategorie-Layouts mit dem Kategorie-Builder von Extra erstellen. Das erste Layout zeigt die Beiträge/Produktbewertungen auf Ihrer Homepage an und hebt die neuesten und beliebtesten Bewertungen hervor. Das zweite Layout zeigt alle Kategorien auf einer Seite mit dem Karussell-Slider-Modul. Sobald Sie dieses Tutorial abgeschlossen haben, haben Sie eine gute Grundlage für eine gut gestaltete Produktbewertungsseite.

Hier ist ein kleiner Vorgeschmack auf das, was wir bauen werden

Vorbereiten der Designelemente

Da die Kategorie-Layouts weitgehend vom Inhalt der Beiträge abhängen, stellen Sie sicher, dass genügend Beiträge hinzugefügt werden, damit Sie ein Gefühl dafür bekommen, wie die Website aussehen wird, wenn Sie Ihre eigenen Inhalte hinzufügen. Wie in Teil 2 dieser Serie besprochen, sind meine Kategorie-Layouts mit 4 Kategorien und mit 3 Produkten in jeder Kategorie gefüllt. Ich verwende Stock-Bilder von Shutterstock für die vorgestellten Bilder meiner Beiträge.

Um die Kategorie-Layouts zu entwerfen, verwenden wir den Kategorie-Generator von Extra und ein wenig benutzerdefiniertes CSS.

Lass uns anfangen.

Erstellen einer Produktbewertungsseite mit Extra – Teil 3

Abonnieren Sie unseren Youtube-Kanal

Erstellen des Kategorie-Layouts für die Homepage

Standardmäßig verwendet extra ein Kategorie-Layout für die Startseite. Um ein benutzerdefiniertes Layout zu erstellen, gehen Sie in der WordPress-Dashboard-Seitenleiste zu Extra > Kategorieerstellung . Suchen Sie dort bereits das Kategorie-Layout mit dem Namen "Homepage", fahren Sie dann mit der Maus darüber und wählen Sie Bearbeiten.

Klicken Sie anschließend im lila Builder-Menü auf „Layout löschen“, um das aktuelle Standardlayout zu löschen.

Jetzt können wir mit der Erstellung unseres benutzerdefinierten Layouts beginnen. Beginnen Sie damit, der Zeile im Standardabschnitt eine Zweidrittel-Ein-Drittel-Spalte hinzuzufügen.

Fügen Sie in der linken (zwei Drittel) Spalte einen Schieberegler für empfohlene Beiträge hinzu.

Aktualisieren Sie die Einstellungen des Slider-Moduls für empfohlene Beiträge wie folgt:

Unter der Registerkarte Inhalt…

Kategorien: Alle
Nur hervorgehobene Beiträge anzeigen: [Ich würde dies deaktivieren, bis Sie entscheiden, welche Beiträge Sie anzeigen möchten. Sie können einen bestimmten Beitrag im Feld „Zusätzliche Einstellungen“ auf der Seite „Beitragseditor“ als gekennzeichnet kennzeichnen.]
Autor anzeigen: OFF
Datum anzeigen: AUS

Unter der Registerkarte Design…

Farbe des Navigationspfeils: #ffffff
Navigationspfeil-Hintergrund: #000000
Untertitelhintergrund: rgba(255,255,255,0.4)
Titel Schriftgröße: 24px
Titeltextfarbe: #000000
Meta-Schriftgröße: 16px
Metatextfarbe: #000000
Benutzerdefinierter Rand: untere 0px

Unter der Registerkarte Erweitert…

Geben Sie das folgende benutzerdefinierte CSS in das Textfeld Hauptelement ein:

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Einstellungen speichern

Fügen Sie nun in der rechten (ein Drittel) Spalte ein Textmodul hinzu und aktualisieren Sie die Textmoduleinstellungen wie folgt:

Fügen Sie auf der Registerkarte "Inhalt" den folgenden HTML-Code zur Registerkarte "Text" des Inhaltsfelds hinzu:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

Der Link hier soll als simulierter CTA-Button dienen. Sie können es nach Belieben verwenden. Aktualisieren Sie einfach die URL und den Linktext.

Tipp : Sie können Bloom verwenden, um beim Klicken auf diesen CTA ein Popup-Fenster für die E-Mail-Anmeldung auszulösen. Auf diese Weise können Besucher mit Ihrer E-Mail-Marketingkampagne noch heute mit Produkten auf dem Laufenden bleiben. Dazu müssen Sie Bloom installieren, ein Popup-Formular hinzufügen und Ihren E-Mail-Anbieter integrieren. Wählen Sie dann aus, dass das Popup angezeigt wird, wenn Sie auf den CSS-Selektor „a.join-cta“ klicken, der der Link-Klasse im obigen HTML-Code entspricht.

Sie können auch mehr darüber lesen, wie Sie beim Klicken auf eine Schaltfläche das Bloom-Optin-Formular-Popup erstellen.

Nun zurück zu den Textmoduleinstellungen.

Unter der Registerkarte Design…

Schriftgröße des Textes: 40px (Desktop), 24px (Tablet und Smartphone)
Header-Schriftgröße: 42px (Desktop), 38px (Tablet), 28px (Smartphone)
Benutzerdefiniertes Padding: 40 Pixel (oben), 15 Pixel (rechts), 15 Pixel (unten), 15 Pixel (links)

Einstellungen speichern

Gehen Sie nun zu den Zeileneinstellungen, damit wir den Hintergrund der Zeile gestalten können.

Aktualisieren Sie dann Folgendes:

Unter der Registerkarte Inhalt…

Hintergrund: #ffffff

Unter der Registerkarte Design…

Machen Sie diese Zeile in voller Breite: JA
Spaltenhöhen ausgleichen: JA

Fügen Sie auf der Registerkarte " Erweitert" das folgende benutzerdefinierte CSS zum Eingabefeld "Hauptelement" hinzu:

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

Einstellungen speichern

Schauen Sie sich jetzt Ihren benutzerdefinierten Slider-Bereich an.

Sieht soweit gut aus.

Lass uns weitermachen. Gehen Sie zurück zum Kategorie-Generator und fügen Sie einen Standardabschnitt unter dem aktuellen Abschnitt hinzu und fügen Sie eine einspaltige Zeile mit einem Textmodul hinzu.

Aktualisieren Sie dann die Einstellungen des Textmoduls wie folgt:

Fügen Sie unter dem Inhalts-Tab diese HTML-Überschrift im Text-Tab des Inhaltsfelds hinzu:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

Unter der Registerkarte Design…

Textausrichtung: Mitte
Kopfzeilenschrift: B (fett)
Header-Schriftgröße: 48px (Desktop), 42px (Tablet), 36px (Smartphone)

Einstellungen speichern

Dies dient als Titel des Abschnitts unten, in dem Ihre Produktbewertungen angezeigt werden.

Fügen Sie als Nächstes einen Spezialbereich mit der folgenden Dreiviertel-Einviertel-Spaltenstruktur hinzu:

Fügen Sie im linken (drei Viertel) Abschnitt eine zweispaltige Zeile hinzu.

Fügen Sie in der linken Spalte dieser Zeile ein Posts-Modul hinzu

Aktualisieren Sie dann die Einstellungen des Posts-Moduls auf der Registerkarte Inhalt, indem Sie dem Modul eine Kategorie zuweisen. Auf diese Weise zeigt das Posts-Modul nur diese Kategorie an. Dazu wähle ich als Kategorie „Bekleidung“ aus.

Aktualisieren Sie dann Folgendes:

Autor anzeigen: NO
Datum anzeigen: NEIN

Einstellungen speichern

Duplizieren Sie dieses Posts-Modul, sodass Sie zwei Posts-Module in der linken Spalte und 2 in der rechten Spalte haben.

Aktualisieren Sie dann die Einstellungen in jedem Modul mit einer anderen Kategorie. Die Kategorien, die ich habe, sind Kleidung, Elektronik, Küche und Gesundheit & Fitness.

Wenn Sie ein Posts-Modul hinzufügen möchten, das Videorezensionen anzeigt, können Sie dies hier hinzufügen. Zuerst müssen Sie eine neue Beitragskategorie namens Video hinzufügen, der Kategorie die Farbe #222222 zuweisen. Erstellen Sie dann einen neuen Beitrag, wählen Sie „Video“ als Format und fügen Sie die Video-URL zum integrierten Videoformatoptionen-Feld von Extra hinzu.

Dann können Sie den Inhalt Ihres Bewertungsfelds hinzufügen, um ihn unter dem Video anzuzeigen.

Nachdem Sie einige Videos hochgeladen haben, stellen Sie sicher, dass Sie sie der Kategorie Video hinzufügen. Gehen Sie dann zurück zum Category Builder für Ihre Homepage und fügen Sie eine einspaltige Zeile unter der Zeile mit Ihren vier Posts-Modulen hinzu. Dann duplizieren Sie ein Posts-Modul aus der vorherigen Zeile und fügen Sie es der neuen Zeile hinzu. Wählen Sie in den Einstellungen des Posts-Moduls unter dem Inhalts-Tab die Kategorie „Video“. Jetzt haben Sie ein Posts-Modul, das Videos anzeigt.

Auf der rechten Seite (Seitenleiste) des Spezialbereichs werden wir zwei weitere übereinander gestapelte Posts-Module hinzufügen.

Aktualisieren Sie für die erste die Einstellungen des Posts-Moduls, um "Alle" Kategorien einzuschließen. Wählen Sie dann die Sortiermethode „Höchste Bewertung“.

Duplizieren Sie das Posts-Modul, so dass ein anderes darunter stapelt. Aktualisieren Sie dann die Sortiermethode für diese auf "Beliebtest".

Fahren Sie fort und aktualisieren Sie den Beitrag, um Ihre Einstellungen zu speichern. So sollte das Layout bisher aussehen.

Als nächstes duplizieren (oder kopieren) Sie den zweiten Hauptabschnitt, der das Textmodul mit dem Titel „Produktbewertungen“ enthält.

Ziehen (oder fügen) Sie dann den duplizierten Abschnitt unter den Spezialbereich. Aktualisieren Sie im neuen Abschnitt den Inhalt der Textmoduleinstellungen mit dem folgenden HTML-Code:

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Einstellungen speichern

Als Nächstes werden wir einen Blog-Feed hinzufügen, der alle Produktbewertungen anzeigt, beginnend mit der neuesten.

Fügen Sie unter dem gerade aktualisierten Textmodul ein Blog-Feed-Masonry-Modul zur Spalte hinzu. Wählen Sie in den Blog-Feed-Masonry-Moduleinstellungen auf der Registerkarte Inhalt alle Kategorien aus, die im Feed angezeigt werden sollen.

Einstellungen speichern

Und schließlich fügen Sie unter dem Blog-Feed-Masonry-Modul ein Posts Carousel-Modul hinzu. Aktualisieren Sie die Einstellungen des Posts-Karussell-Moduls auf der Registerkarte Inhalt, um alle Kategorien einzuschließen, und wählen Sie JA, um nur die vorgestellten Posts anzuzeigen.

Dieses Karussell soll nur die Beiträge anzeigen, die Sie beim Erstellen Ihrer Produktbewertungsbeiträge als hervorgehobene Artikel ausgewählt haben.

Sehen wir uns nun an, wie das endgültige Layout aussieht.

Ein paar Zeilen mit benutzerdefiniertem CSS hinzufügen

Um das Design zusammenzubringen, müssen wir ein paar Zeilen Custom CSS hinzufügen. Gehen Sie zu Theme Customizer > Additional CSS und fügen Sie am Anfang des bereits vorhandenen CSS-Codes Folgendes hinzu:

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

Fügen Sie dann innerhalb der Medienabfrageklammern, die auf eine Mindestbreite von 980px festgelegt sind, Folgendes hinzu:

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

Das erste CSS-Snippet fügt den Modulen einen etwas dunkleren Schatten und einen höheren oberen Rand hinzu. Die zweite passt die Schaltfläche "Jetzt beitreten" im oberen Bereich an.

Nun, das war's für das Homepage-Kategorie-Layout. So sieht das Endergebnis aus:

Lassen Sie uns zusätzlich zum Homepage-Kategorie-Layout ein weiteres einfaches Layout hinzufügen, um alle unsere Kategorien auf einer Seite anzuzeigen.

Erstellen des Layouts „Alle Kategorien“

Dieses Layout ist wirklich einfach zu erstellen, da Sie alle Ihre Beiträge geladen, Ihre Kategorien festgelegt und das Design des Themas festgelegt haben. Der Zweck dieses Layouts besteht darin, eine Seite zu erstellen, die alle Kategorien und Produkte auf einer Seite anzeigt. Dies kann auf viele verschiedene Arten erfolgen, aber mit Extra wollte ich das Posts-Karussell-Modul nutzen, um die Kategorien und Posts in einem Layout anzuzeigen, das dem auf Video-Streaming-Websites wie Hulu und Netflix ähnelt.

Um das Layout hinzuzufügen, scrollen Sie zum Anfang Ihres aktuellen Kategorie-Layouts und wählen Sie Neu hinzufügen. Fügen Sie mit dem Builder für Kategorie einem Standardabschnitt eine einspaltige Zeile hinzu. Fügen Sie dann der Zeile ein Textmodul hinzu. Aktualisieren Sie die Textmoduleinstellungen auf der Registerkarte Inhalt, um das folgende h1-Tag in das Inhaltsfeld aufzunehmen:

<h1 class="subtitle fancy"><span>All Categories</span></h1>

Einstellungen speichern

Fügen Sie dann unter dem Textmodul ein Posts Carousel Module hinzu. Wählen Sie in den Einstellungen des Posts-Karussell-Moduls Kleidung als Kategorie aus.

Einstellungen speichern

Fügen Sie dann ein Textmodul unter dem Postkarussell der Kategorie Kleidung hinzu. Fügen Sie in den Textmoduleinstellungen den folgenden Link zum Feld Inhalt auf der Registerkarte Inhalt hinzu:

<a href="/category/clothing">view all clothing reviews</a>

Die URL und/oder der Linktext müssen möglicherweise entsprechend Ihrer Website geändert werden, aber die Idee ist, auf die Kategorieseite für diese bestimmte Kategorie zu verlinken, um alle Produktbewertungen für diese Kategorie anzuzeigen.

Ändern Sie auf der Registerkarte "Design" die Textausrichtung auf "Rechts".

Einstellungen speichern

Um die nächsten drei Kategorien auf die gleiche Weise anzuzeigen, wiederholen Sie den Vorgang des Hinzufügens eines Posts Carousel-Moduls, das einer bestimmten Kategorie zugewiesen ist, gefolgt von einem Textmodul, das einen Link zur entsprechenden Kategorieseite enthält.

Fügen Sie im Kategoriefeld auf der rechten Seite des Builders eine neue Kategorie namens "Alle Kategorien" hinzu und wählen Sie sie für dieses Layout aus. Auf diese Weise wird jedes Mal, wenn wir auf die Kategorieseite "Alle Kategorien" verlinken, diese Vorlage angezeigt.

Das endgültige Layout sollte so aussehen, wenn Sie fertig sind.

Und so sieht das Kategorie-Layout auf der Website aus.

Sie können es jetzt schon daran erkennen, dass wir noch nicht viele Produkte hinzugefügt haben, aber dies wird schließlich eine bequeme Möglichkeit sein, Produkte für jede Kategorie mit dem Posts-Karussell-Slider-Modul zu durchsuchen.

Das war's für den heutigen Beitrag. Ich hoffe, Ihnen hat Teil 3 dieser 4-teiligen Serie über den Aufbau einer Produktbewertungsseite mit Extra gefallen.

Ich hoffe, Sie werden noch nicht müde, wir haben noch einen letzten Beitrag in unserer Serie.

In Kürze

Im letzten Beitrag unserer Serie werden wir die Kopfzeile und die Navigationselemente unserer Produktbewertungsseite anpassen. Zusätzlich zum Erstellen Ihres Menüs zeige ich Ihnen eine coole Möglichkeit, Ihren Menülinks Farben zuzuweisen, die den Kategoriefarben auf der gesamten Website entsprechen. Außerdem zeige ich dir, wie du mit wenigen Klicks Mega-Menüs erstellen kannst.

Ich freue mich darauf, den letzten Teil unserer Website gemeinsam aufzubauen.

Wie immer können Sie unten Kommentare abgeben.