Erstellen einer Produktbewertungsseite mit Extra – Teil 2

Willkommen zu Teil 2 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 dieser Serie haben wir unsere Reise zum Aufbau einer Produktbewertungsseite begonnen, indem wir die Theme-Optionen und Theme-Anpasser-Einstellungen eingerichtet haben.

Heute werden wir durchstarten, indem wir unsere erste Produktbewertung als neuen Beitrag hinzufügen und das Beitragslayout für diesen Beitrag mit dem Divi Builder und den Extra-Themeneinstellungen anpassen. Sobald Sie dieses Tutorial abgeschlossen haben, haben Sie eine gespeicherte Beitragsvorlage, die Sie aus Ihrer Bibliothek ziehen können, um den Rest Ihrer Beiträge mit Leichtigkeit zu erstellen.

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

Vorbereiten der Designelemente

Da wir unsere Produkte in diesem Teil der Serie hinzufügen werden, benötigen Sie Ihre Produktbilder. Für dieses Tutorial werde ich 4 Kategorien mit 3 Produkten in jeder Kategorie haben, also werde ich insgesamt 12 Bilder verwenden. Ich verwende Bilder von Shutterstock mit weißem Hintergrund, um ein saubereres Aussehen zu erzielen.

Um das Post-Layout zu gestalten, verwenden wir den Visual Builder und ein wenig benutzerdefiniertes CSS.

Lass uns anfangen.

Erstellen einer Produktbewertungsseite mit Extra – Teil 2

Abonnieren Sie unseren Youtube-Kanal

Hinzufügen Ihrer ersten Produktbewertung als neuen Beitrag

Gehen Sie im WordPress-Dashboard zu Beiträge > Neu hinzufügen .

Jeder Beitrag wird Ihre Produktbewertung sein, daher sollte der Name Ihres Beitrags der Name Ihres Produkts sein. Da es sich bei meinem Produkt um einen Fitness-Tracker handelt, gebe ich als Titel meines Beitrags „Fitness-Tracker“ ein.

Hinweis : Wenn Sie es noch nicht getan haben, ist jetzt ein guter Zeitpunkt, Ihre Permalink-Einstellungen auf die Option "Post Name" zu setzen, damit Ihre URL nur den Produktnamen enthält (natürlich Ihre Präferenz).

Klicken Sie als Nächstes auf die Schaltfläche „Use Divi Builder“ und dann auf die Schaltfläche „Use Visual Builder“, um den Visual Builder bereitzustellen.

Fügen Sie im Visual Builder eine einspaltige Zeile ein und fügen Sie der Spalte ein Textmodul hinzu.

Geben Sie im Inhalts-Tab der Textmodul-Einstellungen den folgenden HTML-Code in das Inhaltsfeld ein (stellen Sie sicher, dass Sie im „Text“-Tab und nicht im „Visuellen“-Tab arbeiten):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Dies wird als unsere „ausgefallenen“ Untertitel für verschiedene Abschnitte dienen. Wir werden es später mit benutzerdefiniertem CSS gestalten.

Direkt unter dem h2-Tag können Sie Ihren Produktbeschreibungstext hinzufügen. Ich verwende momentan etwas „lorem ipsum“.

Fügen Sie unterhalb Ihrer aktuellen Zeile eine weitere einspaltige Zeile hinzu und fügen Sie darin ein weiteres Textmodul hinzu. Fügen Sie in den Textmodul-Einstellungen einen weiteren HTML-Untertitel hinzu, indem Sie den folgenden h2-Tag „Vor- und Nachteile“ in den Text-Tab Ihres Inhaltsbereichs einfügen.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

Dies ist der Beginn des Abschnitts Vor- und Nachteile Ihrer Produktbewertung.

Als nächstes fügen Sie eine halbe, halbe (zweispaltige) Zeile unter der vorherigen hinzu. Fügen Sie in der linken Spalte ein Textmodul hinzu und geben Sie einen h3-Titel mit dem Text „Pros“ ein.

Duplizieren Sie nun dieses Textmodul und ziehen Sie das duplizierte Modul in die rechte Spalte. Ändern Sie den h3-Titel im neuen Textbaustein in „Cons“.

Tipp : Im Visual Builder können Sie einfach auf das Textfeld klicken und den neuen Titel eingeben, anstatt die Einstellungen zu öffnen.

Als nächstes werden wir das Klappenmodul verwenden, um einige Unterpunkte unter den Vor- und Nachteilen hinzuzufügen.

Fügen Sie in der linken Spalte unter dem Textmodul „Profis“ ein Blurb-Modul hinzu. Fügen Sie auf der Registerkarte Inhalt der Blurb-Einstellungen eine Textzeile (ich verwende derzeit Dummy-Text) in das Inhaltsfeld ein.

Scrollen Sie dann nach unten und wählen Sie „Symbol verwenden“. Wählen Sie im angezeigten Feld Symbol das Pluszeichen aus.

Klicken Sie auf die Registerkarte Design und aktualisieren Sie Folgendes:

Symbolfarbe: #ffffff

Kreissymbol: JA

Kreisfarbe : #5bd999

Bild-/Symbolplatzierung: Links

Einstellungen speichern

Duplizieren (oder kopieren) Sie dieses Klappenmodul und ziehen (oder fügen Sie es ein) unter das Textmodul „Nachteile“. Aktualisieren Sie dann die Registerkarte Design der Blurb-Einstellungen mit der folgenden Kreisfarbe : #e6567a

Einstellungen speichern

Duplizieren Sie nun die Klappenmodule in jeder Spalte einige Male, da wir nicht wissen, wie viele Sie für ein bestimmtes Produkt benötigen.

Gehen Sie nun zu den Zeileneinstellungen, die Ihre Vor- und Nachteile enthalten. Aktualisieren Sie auf der Registerkarte "Inhalt" Folgendes:

Hintergrund von Spalte 1: #f8f8f8

Hintergrund von Spalte 2: #f8f8f8

Aktualisieren Sie auf der Registerkarte Entwurf Folgendes:

Benutzerdefinierte Dachrinnenbreite verwenden: JA

Dachrinnenbreite: 1

Spaltenhöhen ausgleichen: JA

Spalte 1-Padding: 20 Pixel (oben), 20 Pixel (rechts), 20 Pixel (unten), 20 Pixel (links)

Spalte 2 Auffüllen: 20px (oben), 20px (rechts), 20px (unten), 20px (links)

Fügen Sie auf der Registerkarte Erweitert das folgende benutzerdefinierte CSS zum Textfeld Hauptelement von Spalte 1 hinzu :

 border-top: 10px solid #5bd999; 

Fügen Sie das folgende CSS zum Textfeld Hauptelement von Spalte 2 hinzu :

 border-top: 10px solid #e6567a; 

Tipp : Wenn Sie eine aktualisierte Version von Extra haben, sollten Sie die Möglichkeit haben, die neuen Animationen auf Ihre Website anzuwenden. Fügen Sie der Zeile „Vor- und Nachteile“ eine Animation hinzu, indem Sie auf der Registerkarte „Design“ zu den Zeileneinstellungen gehen und den gewünschten Animationsstil auswählen. Dadurch wird Ihr Abschnitt mit den Vor- und Nachteilen angezeigt, wenn der Benutzer auf der Seite nach unten scrollt.

Einstellungen speichern

Duplizieren (oder kopieren) Sie die zweite Zeile, die den Untertitel „Vor- und Nachteile“ enthält, und ziehen (oder fügen Sie) sie unter die gerade fertige Zeile. Ändern Sie dann den h2-Header in „Spezifikationen“.

Duplizieren Sie die zweispaltige Zeile mit den Pro- und Contra-Listenelementen und legen Sie sie unter den neuen Textbaustein mit dem Titel „Spezifikationen“. Löschen Sie die beiden Textbausteine, die die Überschriften „Pros“ und „Cons“ enthalten, aus der Spalte.

Klicken Sie nun in der linken Spalte auf die Blurb-Einstellungen für das erste Klappenmodul.

Ändern Sie auf der Registerkarte Inhalt das Symbol in ein Häkchen.

Ändern Sie auf der Registerkarte Design die Kreisfarbe in #222222.

Einstellungen speichern

Löschen Sie nun die anderen Klappenmodule und ersetzen Sie sie durch das gerade aktualisierte, indem Sie sie duplizieren und an die richtigen Stellen ziehen.

Gehen Sie nun zu den Zeileneinstellungen und ersetzen Sie das benutzerdefinierte CSS im Textfeld Hauptelement von Spalte 1 und Hauptelement von Spalte 2 durch Folgendes:

border-top: 10px solid #222222;

Einstellungen speichern

Das letzte, was wir diesem Post-Layout hinzufügen müssen, ist ein „Kaufen“-Button. Fahren Sie fort und erstellen Sie eine neue einspaltige Zeile und fügen Sie ein Schaltflächenmodul hinzu . Aktualisieren Sie dann die Einstellungen des Tastenmoduls wie folgt:

Unter der Registerkarte Inhalt…

Schaltflächentext: Jetzt kaufen

Schaltflächen-URL: [URL eingeben] (höchstwahrscheinlich wird dies schließlich ein Affiliate-Link zu einer Website eines Drittanbieters sein)

URL wird geöffnet: Im neuen Tab

Unter der Registerkarte Design…

Tastenausrichtung: Mitte

Textfarbe: Dunkel

Benutzerdefinierte Stile für Schaltfläche verwenden: JA

Schaltflächentextgröße: 30px

Schaltflächentextfarbe: #222222

Schaltflächen-Hover-Textfarbe: #5bd999

Schaltfläche Hover-Hintergrundfarbe: #ffffff

Farbe des Button-Hover-Rands: #5bd999

Das war's für den Inhaltsabschnitt Ihres Produktpost-Layouts. Stellen Sie sicher, dass Sie die Seite speichern . Nachdem Sie die Seite gespeichert haben, beenden Sie den Visual Builder, um den Beitrag über das WordPress-Dashboard zu bearbeiten.

Hinzufügen von Bewertungen zu Ihrem Beitrag

Scrollen Sie auf der Seite des Post-Editors nach unten und suchen Sie das Feld mit dem Titel "Box-Inhalt überprüfen" .

Mit dieser cleveren Ergänzung zu Extra können Sie Ihren Beiträgen eine Produktbewertung hinzufügen. Das Bewertungssystem ist so konzipiert, dass es eine oder mehrere Pannen aufweist. Eine Aufschlüsselung ist eine Komponente, die die Gesamtbewertung ausmacht. Wenn Sie beispielsweise eine Kamera bewerten möchten, umfassen Beispielaufschlüsselungen Dinge wie Design, Leistung, Akkulaufzeit usw. Dies sind Komponenten der Kamera, zu denen Sie einen separaten Bewertungsprozentsatz hinzufügen können. Extra berechnet dann den Gesamtbewertungsprozentsatz basierend auf diesen Komponenten und zeigt ihn im Überprüfungsfeld an. Das Überprüfungsfeld enthält außerdem hilfreiche Eingabebereiche für den Titel, die Zusammenfassung und den Zusammenfassungstitel des Überprüfungsfelds.

Um Ihre Bewertung hinzuzufügen, aktualisieren Sie den Inhalt des Bewertungsfelds wie folgt:

Titel des Bewertungsfelds: [Geben Sie den Titel für das Bewertungsfeld ein] (ich empfehle „Produktbewertung“ oder „Redaktionelle Bewertung“)

Zusammenfassung: [Zusammenfassung eingeben]

Zusammenfassungstitel: [Geben Sie einen Titel für die Zusammenfassung ein] (ich verwende nur "Zusammenfassung", um es einfach zu halten)

Fügen Sie als Nächstes vier Aufschlüsselungen mit einem Titel und einem Bewertungsprozentsatz wie folgt hinzu:

Aufschlüsselung #0

Titel: Design

Bewertung: 85%

Aufschlüsselung #1

Titel: Performance

Bewertung: 90%

Aufschlüsselung #2

Titel: Batterielebensdauer

Bewertung: 70%

Aufschlüsselung #3

Titel: Funktionen

Bewertung: 85%

Nachdem Sie nun Ihre Bewertung erstellt haben, können wir unseren Beitrag vor der Veröffentlichung noch einen letzten Schliff geben.

Weisen Sie Ihrem Beitrag eine Kategorie zu

Stellen Sie sicher, dass Sie Ihrem Beitrag/Produkt die richtige Kategorie zuordnen, indem Sie das Kontrollkästchen neben der Kategorie aktivieren. Da dieser Beitrag für einen Fitnesstracker ist, wähle ich in diesem Fall die Kategorie „Gesundheit & Fitness“. Deaktivieren Sie außerdem das Kontrollkästchen für „nicht kategorisiert“.

Hier ist eine Aufschlüsselung der Produkte und deren Kategorien, die ich verwende:

• Kleidung
  • Schuhe
  • Betrachten
  • Coole Socken
• Küche
  • Küchenmesser
  • Rührgerät
  • Schneidbrett
• Gesundheit
  • Fitness-Tracker
  • Gewichte
  • Laufband
• Elektronik
  • Kamera
  • Kopfhörer
  • Laptop-Computer

Nicht weit unten auf der Seite finden Sie das Feld Extra Settings. Mit diesen Steuerelementen können Sie die Standarddesigneinstellungen für diesen bestimmten Beitrag überschreiben. Sie können dies natürlich nach Belieben anpassen, aber für dieses Beispiel setze ich die folgenden Kontrollkästchen an:

Featured Post (Dadurch kann das Produkt als Featured Post in bestimmten Kategoriemodulen gezogen werden.)

Autorenbox ausblenden

Schließlich fügen Sie Ihr vorgestelltes Bild hinzu. Stellen Sie sicher, dass es mindestens 1280 px breit ist, da wir für das vorgestellte Bild ein Layout mit voller Breite ohne Spalten verwenden.

Veröffentlichen Sie Ihren Beitrag.

Fahren Sie fort und speichern Sie diese Vorlage, damit Sie diesen Vorgang für alle Ihre Produkte/Beiträge duplizieren können. Um die Vorlage zu speichern, klicken Sie im Visual Builder-Menü unten auf der Seite auf das Symbol „In Bibliothek speichern“, geben Sie einen Vorlagennamen ein und klicken Sie auf „In Bibliothek speichern“.

Wenn Sie nun den Rest Ihrer Beiträge hinzufügen, können Sie diese Vorlage aus der Bibliothek laden und den Inhalt für die neue Produktbewertung ausfüllen. Der Prozess wird dann viel schneller.

Hinzufügen von benutzerdefiniertem CSS

Wir sind fast fertig. Wir müssen unserem Thema benutzerdefiniertes CSS hinzufügen, um einige Elemente des Beitrags zu gestalten. Gehen Sie dazu im WordPress-Dashboard zu Theme Customizer > Additional CSS und geben Sie Folgendes ein:

/****************************
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) {
/***************************
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;
}
}

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

Speichern & veröffentlichen

Schauen wir uns nun unser Ergebnis an.

Das Benutzerbewertungssystem

Beachten Sie, dass Sie am Ende des Beitrags ein Benutzerbewertungssystem haben.

Hier können Ihre Besucher eine Startbewertung für jedes Produkt abgeben, indem sie einfach mit der Maus über die Sternsymbole fahren und auf die Sternstufe ihrer Wahl klicken.

Die Gesamtbewertung des Nutzers wird in den Metadaten des Beitragsauszuges angezeigt.

Sie können diese Funktion jederzeit im Feld Zusätzliche Einstellungen deaktivieren.

Das war's. Ich hoffe euch hat Teil 2 dieser Reihe gefallen.

Demnächst: Erstellen von Kategorie-Layouts zur Anzeige Ihrer Produkte

In Teil 3 zeige ich Ihnen, wie Sie die Kategorie-Layouts für die Homepage und die Seite Alle Kategorien erstellen. Stellen Sie sicher, dass Sie Ihre neue Beitragsvorlage verwenden, um mindestens 3 Produkte für jede der 4 Kategorien hinzuzufügen, um sich auf Teil 3 der Serie vorzubereiten. Sie benötigen diese, um die Kategoriemodule zu füllen, die Ihre Produkte anzeigen.

Hier ist, was Sie in Teil 3 erwarten können:

Fühlen Sie sich frei, unten Fragen oder Kommentare zu senden. Ich freue mich darauf, von dir zu hören.