So gestalten Sie auffällige Buchbesprechungen für Ihre Divi Ebook Landing Page

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie auffällige Buchbesprechungen für Ihre kommende E-Book-Landingpage nur mit dem Ebook-Layout-Paket von Divi und den integrierten Optionen von Divi gestalten können. Dies ist eine großartige Möglichkeit, Ihren Landingpages Social Proof hinzuzufügen, die Glaubwürdigkeit zu erhöhen und die Kurzbewertungen der Leute auf elegante Weise zu teilen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout der Buchbesprechungen KOSTENLOS herunter

Um das Layout der kostenlosen Buchbesprechungen in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Beginnen wir mit der Neuerstellung!

Laden Sie das Zielseitenlayout des Ebook-Layout-Pakets auf eine neue Seite hoch

Das erste, was Sie tun müssen, ist eine neue Seite mit dem Zielseitenlayout des Ebook Layout Packs zu erstellen, das Sie in den vorgefertigten Layouts finden.

Neuen Abschnitt hinzufügen

Scrollen Sie im Seitenlayout nach unten und fügen Sie dort, wo die Buchbesprechungen angezeigt werden sollen, einen neuen Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Spalte 1 Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie der ersten Spalte einen Verlaufshintergrund hinzu.

• Farbe 1: #ffffff
• Farbe 2: #f4f4f4
• Spalte 1 Startposition: 12%
• Spalte 1 Endposition: 12%

Spalte 2 Hintergrundfarbe

Fügen Sie auch der zweiten Spalte eine benutzerdefinierte Hintergrundfarbe hinzu.

• Spalte 2 Hintergrundfarbe: #9400ff

Größe

Wechseln Sie zur Registerkarte Design und entfernen Sie den gesamten benutzerdefinierten Abstand zwischen den Spalten mit den folgenden Einstellungen:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Wir ändern auch die Einstellungen für den Zeilenabstand.

• Oberer Rand: 100px
• Unterer Rand: 100px
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Bildmodul zu Spalte 1 hinzufügen

1:1 Bild hochladen

Sobald Ihre Zeileneinstellungen vorgenommen wurden, können Sie mit dem Hinzufügen der verschiedenen Module beginnen, beginnend mit einem Image-Modul in der ersten Spalte. Laden Sie ein Bild Ihrer Wahl hoch, aber stellen Sie sicher, dass das Bildverhältnis 1:1 beträgt. Das bedeutet, dass Höhe und Breite den gleichen Wert haben sollten.

Bildausrichtung

Wählen Sie auf der Registerkarte "Design" die linke Bildausrichtung aus.

• Bildausrichtung: Links

Größe

Wir ändern auch die Breite dieses Moduls für verschiedene Bildschirmgrößen.

• Breite: 20 % (Desktop & Tablet), 30 % (Telefon)

Abstand

Um eine Überlappung auf der linken Seite der Reihe zu ermöglichen, fügen wir in den Abstandseinstellungen des Bildmoduls einen negativen Wert für den linken Rand hinzu.

• Linker Rand: -30px

Grenze

Um das Bilddesign zu vervollständigen, fügen wir in den Rahmeneinstellungen auch '50vw' zu jeder der Ecken hinzu. Dadurch wird sichergestellt, dass das Bild seine kreisförmige Form über verschiedene Bildschirmgrößen hinweg behält.

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Sternsymbole zum Inhaltsfeld hinzufügen

Weiter zum nächsten Modul, dem Bewertungs-Textmodul. Um die Sternebewertungen zu präsentieren, werden wir Symbole verwenden. Kopieren Sie die folgenden Symbole und fügen Sie sie in das Inhaltsfeld eines neuen Textmoduls ein: ★★★★✰.

Hintergrundfarbe

Ändern Sie als nächstes den Hintergrund des Moduls.

• Hintergrundfarbe: #9400ff

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie auch die Texteinstellungen.

• Textschriftart: Montserrat
• Schriftstärke des Textes: Schwer
• Textgröße: 45px (Desktop), 30px (Tablet), 25px (Telefon)
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Größe

Fahren Sie fort, indem Sie die Breite des Moduls ändern.

• Breite: 35%

Abstand

Und fügen Sie einige benutzerdefinierte Abstände hinzu.

• Linker Rand: 50px
• Rechter Rand: 50px
• Obere Polsterung: 20px
• Untere Polsterung: 20px

Box Schatten

Um das Bewertungsfeld hervorzuheben, fügen wir einen subtilen Feldschatten hinzu.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.3)

Transformieren Übersetzen

Und zu guter Letzt werden wir das Textmodul mit einigen benutzerdefinierten Transformationsübersetzungswerten neu positionieren. Sie können diesen Schritt verschieben, bis Sie auch alle Module zu Ihrer Spalte hinzugefügt haben.

• Rechts: 360 Pixel (Desktop), -84 Pixel (Tablet), -70 Pixel (Telefon)
• Unterseite: -113px (Desktop), 190px (Tablet), 141px (Telefon)

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir in Spalte 1 benötigen, ist ein weiteres Textmodul. Fügen Sie den Inhalt Ihrer Wahl hinzu und verlinken Sie den Rezensenten und das Buch.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Montserrat
• Textgröße: 18px

Linktext-Einstellungen

Ändern Sie auch die Linktextfarbe.

• Linktextfarbe: #9400ff

Abstand

Gehen Sie dann zu den Abstandseinstellungen und positionieren Sie das Element mit benutzerdefinierten Randwerten neu.

• Oberer Rand: -100px (Desktop), 0px (Tablet & Telefon)
• Linker Rand: 200 Pixel (Desktop), 50 Pixel (Tablet), 20 Pixel (Telefon)
• Rechter Rand: 50px (Tablet), 20px (Telefon)

Textmodul #3 zu Spalte 1 hinzufügen

H3-Inhalt hinzufügen

Weiter zum nächsten Modul, das ein Textmodul ist, das den H3-Rezensionstitel enthält.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Montserrat
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: #000000

Abstand

Fügen Sie auch einen benutzerdefinierten Rand hinzu.

• Oberer Rand: 80px (Desktop), 50px (Tablet und Telefon)
• Linker Rand: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)
• Rechter Rand: 50px (Desktop & Tablet), 20px (Telefon)

Textmodul #4 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Weiter zum nächsten und letzten Modul, das wir in Spalte 1 benötigen, ist ein weiteres Textmodul mit der eigentlichen Überprüfung.

Abstand

Gehen Sie zu den Abstandseinstellungen dieses Moduls und wenden Sie die folgenden Einstellungen an:

• Oberer Rand: 20px
• Unterer Rand: 50px
• Linker Rand: 50 Pixel (Desktop und Tablet), 20 Pixel (Telefon)
• Rechter Rand: 50px (Desktop & Tablet), 20px (Telefon)

Bildmodul zu Spalte 2 hinzufügen

Buchcover-Bild hochladen

In der zweiten Spalte benötigen wir zwei Module, beginnend mit einem Bildmodul, das den Bucheinband trägt. Für dieses Tutorial verwenden wir die Buchcover, die mit Divis Ebook Layout Pack geliefert werden, aber Sie können stattdessen auch Ihr eigenes Buchcover hinzufügen.

Größe

Wechseln Sie zur Registerkarte Design des Bildmoduls und ändern Sie die Breite.

• Breite: 79 % (Desktop), 40 % (Tablet & Telefon)

Abstand

Ändern Sie auch die Abstandseinstellungen.

• Oberer Rand: 60px
• Unterer Rand: 60px

Box Schatten

Und fügen Sie einen Kastenschatten hinzu, um das Buchcover hervorzuheben.

• Vertikale Position des Kastenschattens: 40px
• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -20px
• Schattenfarbe: rgba(0,0,0,0.8)

Schaltflächenmodul zu Spalte 2 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in Spalte 2 benötigen, ist das Button-Modul. Fügen Sie ein Exemplar Ihrer Wahl hinzu und verlinken Sie zu der Seite, auf der die Leute Ihr Buch kaufen können.

Tastenausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Passen Sie die Schaltflächeneinstellungen an das Erscheinungsbild des Layoutpakets an.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 16px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Montserrat
• Schriftstärke der Schaltfläche: Fett

Abstand

Und beenden Sie das Design der ersten Buchrezension, indem Sie der Schaltfläche einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung: 16px
• Untere Polsterung: 16px
• Linke Polsterung: 38px
• Rechte Polsterung: 38px

Klonen Sie die Reihe so oft wie gewünscht

Nachdem Sie die erste Buchrezension erstellt haben, können Sie die gesamte Zeile beliebig oft klonen, je nachdem, wie viele Rezensionen Sie auf Ihrer Zielseite anzeigen möchten.

Anderes Bild hochladen

Ändern Sie das Bild des Prüfers.

Buchcover ändern

Zusammen mit dem Buchcover, wenn nötig.

Kopie ändern

Und ändern Sie auch die gesamte Kopie.

Hintergrundfarbe von Spalte 2 in Zeile suchen und ersetzen

Wie Sie in der Vorschau dieses Beitrags feststellen können, verwenden wir für diese zweite Überprüfung eine andere Farbpalette. Um es uns einfach zu machen, öffnen wir die Zeileneinstellungen und klicken mit der rechten Maustaste auf den Hintergrund von Spalte 2 und dann auf Suchen & Ersetzen.

Ändern Sie die violette Farbe, die in der Zeile verwendet wird, und Sie sind fertig! Stellen Sie sicher, dass Sie diese Schritte für jede der doppelten Buchbesprechungen wiederholen, die Sie zu Ihrer Seite hinzufügen.

• Innerhalb: Diese Reihe
• Ersetzen durch: #31d190

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie atemberaubende kurze Buchrezensionen für Ihre kommenden E-Book-Landingpages erstellen können. Auf diese Weise können Sie Ihrer Seite Social Proof hinzufügen und die Besucher von der Glaubwürdigkeit Ihres Buches überzeugen. Dieses Use-Case-Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas Besonderes in Ihre Design-Toolbox zu legen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.