Wie man mit Divi . eine kreative Produktvergleichstabelle entwirft

Eine Produktvergleichstabelle kann eine äußerst effektive Möglichkeit sein, neue Produkte zusammen mit ihren verbesserten Funktionen zu bewerben. Der visuelle Aspekt eines Diagramms ist für Benutzer ansprechender als einfacher Text. Und die Struktur eines Side-by-Side-Vergleichs ermöglicht es Benutzern, den Unterschied zwischen den einzelnen Produktmerkmalen leicht zu erkennen.

In diesem Tutorial zeige ich Ihnen, wie Sie mit Divi eine kreative Produktvergleichstabelle erstellen. Und dieses Design-Layout kann verwendet werden, um fast alles zu vergleichen. Ich kann mir zum Beispiel vorstellen, dass dies auch ein perfektes Layout für Fallstudien ist.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf die Vergleichstabelle, die ich in diesem Tutorial erstellen werde.

Was Sie für dieses Tutorial benötigen

Für dieses Tutorial benötigen Sie Folgendes:

• Divi-Theme (installiert und aktiv)
• Zwei Bilder (ca. 800 x 450 Pixel), die als Ihre Produktbilder in der Vergleichstabelle dienen.

Erstellen Sie Ihre Überschrift und Produktbilder

Erstellen Sie zunächst eine neue Seite, stellen Sie den Visual Builder bereit und entscheiden Sie sich dann dafür, Ihre Seite von Grund auf neu zu erstellen.

Fügen Sie als Nächstes ein einspaltiges Layout zu Ihrer Zeile Ihres Abschnitts hinzu.

Bevor wir ein Modul hinzufügen, gehen wir zur Abschnittseinstellung und aktualisieren Folgendes:

Hintergrundfarbe: #222222
Hintergrundfarbe links: rgba(242,90,71,0.14)
Hintergrundfarbe rechts: rgba(255,255,255,0)
Verlaufstyp: Radial
Farbverlauf über dem Hintergrundbild platzieren: JA

Einstellungen speichern. Öffnen Sie nun Ihre Zeileneinstellungen und geben Sie Ihrer Zeile eine benutzerdefinierte Breite von 100 %.

Fügen Sie dann Ihrer einspaltigen Zeile einen Textbaustein mit den folgenden Einstellungen hinzu:

Geben Sie für den Inhalt diesen HTML-Code ein:

<h2>Compare</h2>
VS

Textschriftart: Montserrat
Schriftstärke des Textes: Ultra Bold
Textschriftart: TT (Großbuchstaben)
Text Textfarbe: rgba(255,255,255,0.3)
Text Textgröße: 3vw
Textzeilenhöhe: 1.8em
Textausrichtung: Mitte

Aktualisieren Sie als Nächstes die Designoptionen für die h2-Überschrift und geben Sie Ihrem Modul einen benutzerdefinierten unteren Rand, um den Überlappungseffekt zu erzielen.

Überschrift 2 Schriftart: Montserrat
Überschrift 2 Textfarbe: rgba(255,255,255,0.3)
Überschrift 2 Textgröße: 13vw
Überschrift 2 Buchstabenabstand: 1vw
Benutzerdefinierter Rand: -13vw unten

Ein Teil Ihres Textes wird vorerst ausgeblendet, wird jedoch angezeigt, sobald wir den anderen Inhalt hinzufügen.

Zwei erstellen unsere zweite Zeile, duplizieren die erste Zeile und löschen dann das Textmodul innerhalb der duplizierten Zeile. Aktualisieren Sie dann die Spaltenstruktur in eine zweispaltige Zeile.

Fahren Sie fort und aktualisieren Sie Ihre Zeileneinstellungen wie folgt:

Benutzerdefinierte Dachrinnenbreite: 1
Spalte 1 Benutzerdefinierte Polsterung: 2vw Rechts
Spalte 2 Benutzerdefiniertes Padding: 2vw Left

Hier stellen wir die Bilder unserer beiden Produkte ein, die wir vergleichen möchten. Fügen Sie in der linken Spalte unserer Zeile Ihr Bild mit dem Bildmodul hinzu. Für dieses Beispiel verwende ich ein PNG-Bild, das 800 x 459 Pixel groß ist. Aktualisieren Sie dann die Bildmoduleinstellungen wie folgt:

Breite: 70%
Modulausrichtung: Rechts
Benutzerdefinierte Polsterung: 40px unten

Kopieren Sie dann das Modul und fügen Sie es in die rechte Spalte ein. Ändern Sie das Bild und passen Sie dann die Modulausrichtung nach links an.

Fügen Sie unter dem Bildmodul in der linken Spalte ein Textmodul mit folgendem Textinhalt hinzu: „Altes Produkt“.

Gehen Sie dann in das Textmodul in der ersten Zeile oben und kopieren Sie die Textstile.

Bewegen Sie dann den Mauszeiger über das neue Textmodul mit dem Text „Altes Produkt“ und fügen Sie die Textstile per Rechtsklick in das Modul ein.

Dies wird den Textstilen, die wir benötigen, viel schneller entsprechen. Jetzt müssen wir nur noch
Aktualisieren Sie die Textgröße und Ausrichtung:

Text Textgröße: 16px
Textausrichtung: Rechts

Gehen Sie nun zur Registerkarte "Erweitert" und geben Sie das folgende benutzerdefinierte CSS in das Eingabefeld "Hauptelement" ein:

text-align:right !important;

Dies ist notwendig, da Divi die Textausrichtung auf Smartphones standardmäßig auf links anpasst. Dieses CSS-Snippet überschreibt dies und stellt sicher, dass es auch auf dem Smartphone richtig ausgerichtet bleibt.

Einstellungen speichern. Kopieren Sie dann das Textmodul und fügen Sie es unter dem Bild in der rechten Spalte ein. Ändern Sie den Textinhalt in „Neues Produkt“ und aktualisieren Sie die Textausrichtung auf „Links“.

Hier ist, was wir bisher haben.

Erstellen der Produktvergleichstabelle

Um unser Vergleichsdiagramm zu erstellen, verwenden wir eine Folge von zwei Spaltenzeilen, die jeweils durch eine einspaltige Zeile getrennt sind. Die zwei Spaltenreihen werden unsere farbigen Balken enthalten. Und in der einspaltigen Zeile wird der Name des Merkmals angezeigt, das den Balkenwerten zugeordnet ist.

Erstellen Sie eine neue zweispaltige Zeile und aktualisieren Sie die Zeileneinstellungen wie folgt:

Benutzerdefinierte Breite: 100%
Dachrinnenbreite: 1
Benutzerdefinierte Polsterung: 0 Pixel unten
Spalte 1 Benutzerdefinierte Polsterung: 2vw Rechts
Spalte 2 Benutzerdefiniertes Padding: 2vw Left

Die benutzerdefinierte Auffüllung von Spalte 1 und 2 schafft den Platz, den wir in der Mitte unserer Balkendiagramme benötigen, die wir hinzufügen werden.

Fügen Sie in der linken Spalte ein Trennmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:

Hintergrundfarbe links: rgba(81,91,214,0.25)
Hintergrundfarbe rechts: rgba(255,255,255,0.15)
Verlaufsrichtung: 90deg
Startposition: 35%
Farbe: #515bd6
Teilergewicht: 23px (dieser Wert sollte dem Wert der Teilerhöhe entsprechen, der standardmäßig 23px beträgt, damit der Teiler die gleiche Breite wie der Hintergrund des Moduls hat)
Custom Padding: 70% Left (Dies schiebt den Teiler um 75% nach rechts, was zu einem Balkendiagrammwert von 25% von rechts führt)

Einstellungen speichern.

Kopieren Sie nun das Divider-Modul in die rechte Spalte derselben Zeile. Aktualisieren Sie dann die folgenden Einstellungen:

Hintergrundfarbe links: rgba(255,255,255,0.15)
Hintergrundfarbe rechts: rgba(242,90,71,0.25)
Startposition: 70%
Farbe: #f25a47
Custom Padding: 30% Right (Dies verschiebt den Teiler um 30% nach links, was zu einem Balkendiagrammwert von 70% von links führt.)

Nun, da Ihre erste Reihe von Balken vorhanden ist, müssen wir eine einspaltige Zeile darunter hinzufügen, um unser Produktmerkmalsetikett zu platzieren.

Erstellen Sie eine einspaltige Zeile mit einer benutzerdefinierten Auffüllung von 0px oben. Fügen Sie dann ein neues Klappenmodul hinzu und aktualisieren Sie die Klappenmoduleinstellungen wie folgt:

Inhalt: „Funktion“
Symbol verwenden: JA
Symbol: siehe Screenshot

Symbolfarbe: rgba(255,255,255,0.3)
Symbolschriftgröße verwenden: JA
Symbolschriftgröße: 30px
Textausrichtung: Mitte
Körperschriftart: Montserrat
Schriftstärke des Körpers: Ultra Bold
Textkörperfarbe: rgba(255,255,255,0.3)
Abstand des Hauptbuchstabens: 2px
Benutzerdefinierter Rand: -20px

Auf der Registerkarte "Erweitert" können Sie den Standardrand unter dem Klappensymbol entfernen, indem Sie das folgende benutzerdefinierte CSS im Feld "Blurb-Bild-CSS" hinzufügen:

margin-bottom: 0px;

Nachdem Sie nun Ihr erstes funktionierendes Beispiel für eine Produktvergleichsfunktion haben, müssen Sie nur noch die beiden Zeilen duplizieren, aus denen sich die Vergleichsfunktion zusammensetzt (die Zeile mit den beiden Balken/Teilern und die Zeile mit dem Klappenmodul). Ich finde, dass es am einfachsten ist, Strg + c (oder Befehl + c) zu verwenden, um jede Zeile zu kopieren und dann Strg + v (oder Befehl + v), um sie untereinander einzufügen. Aktualisieren Sie dann einfach den benutzerdefinierten Abstand für die duplizierten Teiler, um unterschiedliche Balkendiagrammwerte anzuzeigen.

Sie können auch die Start- und Endposition des Farbverlaufs je nach dem von Ihnen gewählten benutzerdefinierten Abstandswert anpassen. Wenn Sie beispielsweise Ihrem linken Spaltenteiler eine Auffüllung von 60% Left geben, können Sie die Startposition Ihres Farbverlaufs auf 30% (genau den halben Abstand der Auffüllung) einstellen.

Als letzten Schliff können Sie Ihrem Abschnitt einen Trennhintergrund hinzufügen. Für dieses Beispiel füge ich Folgendes hinzu:

Oberteiler: Siehe Screenshot
Teilerfarbe: rgba (255,255,255,0,05)
Teilerhöhe: 19vw

Hier ist das Endergebnis.

Ich mag auch das Aussehen des Designs, wenn ich die Hintergrundfarbe des Abschnitts in #000314 ändere.

Das Design ansprechend gestalten

In Divi wird jede zweispaltige Zeile auf Mobilgeräten automatisch übereinander gestapelt. Dies wird natürlich das Design auf dem Handy zerstören. Um dies zu beheben, müssen wir zwei Dinge tun. Zuerst müssen wir einen kleinen Ausschnitt aus benutzerdefiniertem CSS im Theme-Anpasser hinzufügen.

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

Dieser Code passt die Spaltenbreite jeder Zeile mit der CSS-Klasse „disable-break“ auf 50 % an. Dadurch wird sichergestellt, dass wir unsere zweispaltige Struktur auf mobilen Geräten beibehalten, damit das Design nicht kaputt geht. Vergessen Sie nicht, Ihre Änderungen zu veröffentlichen.

Sobald das CSS vorhanden ist, müssen wir die CSS-Klasse zu jeder Zeile hinzufügen, die eine zweispaltige Struktur hat.

Lassen Sie uns zunächst die CSS-Klasse der zweispaltigen Zeile hinzufügen, die unsere beiden Produktbilder enthält. Öffnen Sie die Zeileneinstellungen und gehen Sie zur Registerkarte Erweitert. Geben Sie dann „disable-break“ in das Eingabefeld CSS-Klasse ein.

Klicken Sie dann mit der rechten Maustaste auf die Option CSS-Klasse und klicken Sie auf „CSS-Klasse kopieren“.

Jetzt müssen Sie nur noch mit der rechten Maustaste auf jede Zeile klicken, die eine zweispaltige Struktur hat (alle Zeilen mit den Teilern / Balken) und auf "CSS-Klasse einfügen" klicken.

Jetzt behalten Ihre Spalten die zweispaltige Struktur auf mobilen Geräten bei und halten das Design konsistent.

Abschließende Gedanken

Das Erstellen einer Produktvergleichstabelle in Divi ist einfach, sobald Sie einige Designtechniken kennen. Der Trick besteht darin, Ihre zweispaltigen Zeilen mit einer Breite von 100% und einer Bundstegbreite von 1 einzurichten. Danach können Sie das Trennmodul verwenden, um einige einzigartige Balkendiagrammdesigns zu erstellen. Und wenn Sie Ihr zweispaltiges Layout auf Mobilgeräten beibehalten möchten, benötigen Sie lediglich ein kleines benutzerdefiniertes CSS-Snippet. Ich würde erwarten, dass dieses Vergleichsdiagramm-Layout auf viele verschiedene Arten verwendet werden kann. Fühlen Sie sich frei, einige Ideen mit der Divi Nation zu teilen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!