Erstellen einer Produktbewertungsseite mit Extra – Teil 4

Willkommen zu Teil 4 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 1 legen wir unsere Theme-Optionen und Customizer-Einstellungen fest. In Teil 2 haben wir unsere Beiträge hinzugefügt und ein Beitragslayout erstellt, um unsere Produktbewertungen anzuzeigen. In Teil 3 dieser Serie haben wir zwei Kategorie-Layouts für unsere Produktbewertungsseite erstellt – eines für unsere Homepage und eines für die Seite „Alle Kategorien“.

Heute werden wir unsere Produktbewertungsseite fertigstellen, indem wir unser Standard-Kategorie-Layout, unser Menü und unsere Fußzeile erstellen. Das Highlight des heutigen Beitrags wird das benutzerdefinierte Menü sein, das Menülinks enthält, die der Farbe der entsprechenden Kategorieseiten entsprechen. Ich werde Ihnen auch zeigen, wie Sie die integrierten Mega-Menüoptionen von Extra bereitstellen und einige eigene Anpassungen hinzufügen.

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

Lass uns anfangen.

Erstellen einer Produktbewertungsseite mit Extra – Teil 4

Abonnieren Sie unseren Youtube-Kanal

Erstellen der Standardkategorieseite

Extra wird mit einer bereits installierten Standardkategorieseite geliefert. Die Standardkategorieseite ist das Layout, das verwendet wird, wenn eine Kategorieseite angezeigt wird, für die kein bestimmtes Kategorielayout ausgewählt ist. In Teil 3 dieser Serie haben wir ein Kategorie-Layout für unsere Homepage festgelegt und unsere Seite „Alle Kategorien“ der spezifischen Kategorie „Alle Kategorien“ zugeordnet. Für den Rest unserer Kategorieseiten für Produktbewertungen verwenden wir dieses Standardkategorielayout.

Um unser Standard-Kategorie-Layout anzupassen, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Extra > Kategorie-Generator. Bewegen Sie dann den Mauszeiger über die "Standardkategorie" und klicken Sie auf den Link Bearbeiten.

Standardmäßig enthält Ihre Standardkategorie zwei übereinander gestapelte Module in einer einspaltigen Reihe eines Standardabschnitts. Bevor wir Änderungen am Layout vornehmen, stellen Sie sicher, dass Sie die Option "Dieses Layout als Standardlayout verwenden?" auswählen. im Feld Layoutverwendung in der rechten Seitenleiste.

Ersetzen Sie zuerst den oberen Featured Posts Slider durch ein Posts Carousel Module. Aktualisieren Sie dann die Moduleinstellungen, indem Sie „Aktuelle Kategorie/Tag/Taxonomie“ als Kategorie für dieses Modul markieren. Jetzt zeigt dieses Posts-Karussell-Modul nur die Produkte der besuchten Kategorieseite an. Ziemlich schlau, oder?

Sicherer Ausgang

Sie können die Standardeinstellungen des Blog-Feed-Masonry-Moduls belassen. Stellen Sie einfach sicher, dass jedem Kategoriemodul, das Sie dieser Seite in Zukunft hinzufügen, die Kategorie „Aktuelle Kategorie/Tag/Taxonomie“ zugewiesen ist.

Um nun den h1-Titel Ihrer Kategorieseite zu gestalten, müssen Sie das folgende benutzerdefinierte CSS zum zusätzlichen CSS im Theme Customizer hinzufügen. Stellen Sie sicher, dass Sie es in eine Medienabfrage mit einer Mindestbreite von 980px einfügen.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

Das war's für das Standard-Kategorie-Layout. Schauen wir uns auf meiner Küchenkategorieseite an, wie unser Standardlayout aussieht.

Nachdem wir nun unser Standard-Kategorie-Layout eingerichtet haben, lenken wir unsere Aufmerksamkeit auf einen der wichtigsten Teile unserer Website – das Navigationsmenü.

Unser grundlegendes Header-Styling haben wir bereits in Teil 1 dieser Serie eingerichtet. Aber heute werden wir unser primäres Navigationsmenü erstellen und gestalten.

Navigieren Sie in Ihrem WordPress-Dashboard zu Darstellung > Menüs und wählen Sie dann Menüs . Wählen Sie oben auf der Seite den Link „Neues Menü erstellen“ und geben Sie als Menünamen den Namen „Kategorien-Menü“ ein. Wählen Sie dann im Abschnitt Menüeinstellungen als Anzeigeort „Primary Menu“ aus.

Jetzt können wir damit beginnen, unsere Menüpunkte zu unserer Speisekarte hinzuzufügen. Klicken Sie links auf der Seite auf den Schalter Kategorien. Wählen Sie in den angezeigten Optionen "Alle anzeigen", um sicherzustellen, dass Sie alle verfügbaren Kategorien sehen können. Haken Sie alle 5 Kategorien ab, die Sie erstellt haben (nicht unkategorisiert) und klicken Sie auf die Schaltfläche Zum Menü hinzufügen, um sie zum Abschnitt mit der Menüstruktur rechts auf der Seite hinzuzufügen. Jetzt können Sie jeden der anzuzeigenden Menüpunkte in der folgenden Reihenfolge anklicken und ziehen:

• Elektronisch
• Kleidung
• Küche
• Gesundheit
• Alle Kategorien

Bevor wir die Menüelemente bearbeiten, wählen Sie den Link Bildschirmoptionen oben auf der Seite aus. Stellen Sie im sich öffnenden Abschnitt mit den erweiterten Menüeigenschaften sicher, dass Sie das Kontrollkästchen neben "CSS-Klassen" aktivieren. Auf diese Weise können wir jedem unserer Menüpunkte eine benutzerdefinierte CSS-Klasse hinzufügen.

Gehen Sie zurück zu Ihrem Menü. Beginnen Sie mit dem Menüpunkt Elektronikkategorie, klicken Sie auf , um die Konfigurationsoptionen zu öffnen. Fügen Sie im Feld CSS-Klassen eine Klasse mit dem Namen „grün“ hinzu. Und für die Option Extra Mega Menu wählen Sie "Mega Menu 3 Featured".

Damit werden zwei Dinge erreicht. Zuerst wird die Klasse „grün“ verwendet, um den Menüpunkt beim Schweben grün zu machen. Zweitens fügt die Option Mega-Menü 3 drei ausgewählte Elemente als Mega-Menü hinzu, wenn Sie mit der Maus über den Menüpunkt fahren.

Fügen Sie für den Menüpunkt Bekleidungskategorie-Menü die Klasse „blau“ hinzu und wählen Sie die Option „Mega-Menü 3 Featured“ .

Fügen Sie für den Menüpunkt Kitchen Category Menu die Klasse „pink“ hinzu und wählen Sie die Option „Mega Menu 3 Featured“ .

Fügen Sie für das Kategoriemenü „ Gesundheit & Fitness “ die Klasse „lila“ hinzu und wählen Sie die Option „Mega Menu 3 Featured“ .

Der Menüpunkt „Alle Kategorien“ wird etwas anders aussehen. Fahren Sie fort und lassen Sie das Textfeld CSS-Klassen leer. Und für die Mega-Menü-Option wählen Sie „Mega-Menüliste“. Diese Art von Megamenü ist ein traditionelleres Megamenü, das eine Liste von Untermenüpunkten erstellt. Das Ziel dieses Mega-Menü-Links ist es, alle Kategorien mit einer Liste ihrer Produkte darunter anzuzeigen.

Gehen Sie zurück und öffnen Sie das Kategorienfeld und wählen Sie die gleichen vier Kategorien (Elektronik, Kleidung, Küche und Gesundheit & Fitness) aus und fügen Sie sie dem Menü hinzu. Ziehen Sie dann jede der soeben hinzugefügten Kategorien um eine Ebene unter den Mega-Menüpunkt „Alle Kategorien“.

Schalten Sie die Konfigurationsoptionen für jedes dieser Kategoriemenüelemente um und fügen Sie jedem die gleichen CSS-Klassen hinzu, wie Sie es zuvor getan haben. Hier sind die Kategorien mit der Klasse, die Sie hinzufügen müssen:

Elektronik – grün
Kleidung – blau
Küche – rosa
Gesundheit & Fitness – lila

Als nächstes fügen wir unser eigenes benutzerdefiniertes Bild hinzu, das als unser vorgestelltes Kategoriebild für jede Kategorie im Mega-Menü dient.

Verwenden Sie einen Fotoeditor, um jedes Bild auf eine Breite von 500 Pixel und eine Höhe von 300 Pixel zu verkleinern und zuzuschneiden.

Fügen Sie sie zur WordPress-Medienbibliothek hinzu oder ziehen Sie sie.

Gehen Sie nun zurück zur Menüseite in WordPress Admin.

In diesem Beispiel ist der oberste Kategorielink in meinem Megamenü „Elektronik“. Klicken Sie auf den Pfeil rechts neben dem Punkt „Elektronik“. Fügen Sie im Feld Navigation Label das gewünschte Bild mit dem HTML-Img-Tag direkt vor dem Text „Elektronik“ hinzu. Das Image-Tag sollte wie folgt aussehen:

<img src="Insert Image Url" width="100%" />

Um die URL zum Bild zu finden, gehen Sie zu Medien → Bibliothek. Klicken Sie auf das Bild, das Sie hinzufügen möchten. Suchen Sie im Popup-Fenster Anhangsdetails die URL im Abschnitt rechts, markieren Sie sie und verwenden Sie dann Strg+C, um sie in Ihre Zwischenablage zu kopieren.

Gehen Sie nun zurück zum Menüpunkt „Elektronik“ auf der Menüseite und ersetzen Sie den Text „Bild-URL einfügen“, indem Sie die URL Ihres Bildes mit Strg+V einfügen.

Wiederholen Sie den gleichen Vorgang für die nächsten 3 Menüpunkte der Kategorie.

Sobald Sie alle vier Bild-Tags zu jedem Ihrer Kategorie-Menüelemente hinzugefügt haben, ist es an der Zeit, Ihre einzelnen Posts-Menüelemente (Links zu Ihren Produktbewertungen) unter jeder ihrer jeweiligen Kategorien hinzuzufügen.

Klicken Sie, um das Posts-Feld auf der linken Seite zu öffnen, und wählen Sie die Registerkarte "Alle anzeigen". Wählen Sie dann alle 12 Ihrer Produkte aus und klicken Sie auf Zum Menü hinzufügen. Ziehen Sie dann jeden der Post-Menüelemente eine Ebene unter jede ihrer Kategorien.

Menü speichern

Bevor wir unser neues Menü ausprobieren, müssen wir einige benutzerdefinierte CSS hinzufügen, um unserem Menü den letzten Schliff zu geben.

Gehen Sie zu Theme Customizer > Additional CSS und geben Sie das folgende CSS ein:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

Speichern und veröffentlichen Sie Ihre Einstellungen.

Schauen wir uns jetzt unsere neue Speisekarte an. Beachten Sie die Farben der Menüpunkte, wenn Sie mit der Maus darüber fahren. Die Farben entsprechen der entsprechenden Kategoriefarbe.

Erstellen der Fußzeile

Um die Fußzeile für unsere Produktbewertungsseite zu erstellen, werden wir die integrierten Widgets von Extra nutzen, um die neuesten Produktbewertungen und eine Kategorieliste anzuzeigen.

Zuerst müssen wir zu Theme Customizer > Footer Settings gehen. Klicken Sie dann auf Layout und wählen Sie ein 2-Spalten-Layout aus.

Gehen Sie zurück und wählen Sie Typografie aus und aktualisieren Sie Folgendes:

Überschriftstextgröße: 32
Körper-/Linktextgröße: 16
Widget-Textfarbe: rgba(255,255,255,0.6)
Farbe des Widget-Links: #ffffff
Widget-Überschriftsfarbe: #ffffff

Speichern & veröffentlichen

Gehen Sie zurück zum Hauptmenü des Theme Customizers und wählen Sie Widgets. Wählen Sie dann Footer Sidebar Left und klicken Sie auf die Schaltfläche zum Hinzufügen eines Widgets. Wählen Sie das Widget Extra – Letzte Bewertungen

Gehen Sie zurück zum Widgets-Menü und wählen Sie Footer Sidebar Right und fügen Sie das Kategorien-Widget hinzu.

Gehen Sie zum Abschnitt Zusätzliches CSS und fügen Sie das folgende benutzerdefinierte CSS für Ihre Fußzeile hinzu.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Speichern und veröffentlichen Sie die Theme Customizer-Einstellungen und sehen Sie sich Ihre Fußzeile an.

Das ist es. Sie haben Teil 4 erfolgreich abgeschlossen und die Serie zum Aufbau einer Produktbewertungsseite mit Extra abgeschlossen.

Finale CSS

Je nachdem, wo Sie in die Serie gekommen sind, müssen Sie möglicherweise Ihr benutzerdefiniertes CSS überprüfen, um sicherzustellen, dass alles richtig eingegeben wurde. Hier ist der endgültige CSS-Code, der in den Theme Customizer eingegeben werden muss.

.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;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
comment box background
*****************************/
#comment-wrap {
padding: 75px 40px;
background: #fff;
border-radius: 3px;
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);
}
@media (min-width: 980px) {

.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;
}

/***************************
Post Header Size
****************************/
h1.entry-title {
font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
text-align: center;
padding-bottom: 0px;
}
.fancy span {
display: inline-block;
position: relative;
line-height: 1.3em;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 4px solid #333;
border-top: 4px solid #333;
top: 40%;
width: 100%;
max-width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title {
display: block;
font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Einpacken

Ich hoffe, es hat Ihnen Spaß gemacht, die Leistungsfähigkeit von Extra beim Aufbau einer Produktbewertungsseite mit mir zu erkunden. Wenn überhaupt, bin ich zuversichtlich, dass Sie zumindest eine neue Wertschätzung für dieses herausragende Thema und ein wenig Inspiration haben, um mehr daraus zu machen. Das eingebaute Bewertungssystem, intelligente Kategorie-Layouts und die Leistungsfähigkeit des Divi Builder machen es zu einer hervorragenden Lösung für eine Produktbewertungsseite.

Ein Thema, das ich nicht angesprochen habe (speichern für einen zukünftigen Beitrag), ist der Umgang mit Affiliate-Links mit Extra. Schließlich ist für die meisten Menschen das Endziel ihrer Produktbewertungsseite, Geld zu verdienen. Fühlen Sie sich frei, Ihre Gedanken zu diesem Thema unten in den Kommentaren zu teilen.

Ich freue mich darauf, von dir zu hören.