Heute zeige ich Ihnen, wie Sie ein Design für auffällige Buchbesprechungen entwerfen ebook Nur Divi Layout Pack und integrierte Divi-Optionen. Dies ist eine großartige Möglichkeit, Ihren Landingpages Social Proof hinzuzufügen, die Glaubwürdigkeit zu erhöhen und kurze Bewertungen anderer auf elegante Weise zu teilen.
Beginnen wir mit dem Design
Laden Sie das Layout der Zielseite des E-Book-Packs hoch
Als erstes erstellen Sie eine neue Seite mit dem Landingpage-Layout derebook Layout Pack, das Sie unter Vorgefertigte Layouts finden.
Einen neuen Abschnitt hinzufügen
Scrollen Sie im Layout nach unten und fügen Sie einen neuen Abschnitt hinzu, in dem Sie die Buchbesprechungen anzeigen möchten.
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
1 Column Gradient Background
Öffnen Sie die Linieneinstellungen, ohne weitere Module hinzuzufügen, und fügen Sie der ersten Spalte einen Hintergrund mit Farbverlauf hinzu.
- 1-Farbe: #ffffff
- 2-Farbe: #f4f4f4
- Spalte 1 Startposition: 12%
- Spalte 1 Endgültige Position: 12%
Spalte 2-Hintergrundfarbe
Fügen Sie der zweiten Spalte auch eine benutzerdefinierte Hintergrundfarbe hinzu.
- Spalten-2-Hintergrundfarbe: #9400ff
Sizing
Wechseln Sie zur Registerkarte Design und entfernen Sie den gesamten benutzerdefinierten Platz zwischen den Spalten mithilfe der folgenden Einstellungen:
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
Abstand
Wir ändern auch die Einstellungen für den Zeilenabstand.
- Oberer Rand: 100px
- Unterer Rand: 100px
- Top Polsterung: 0px
- Polsterung unten: 0px
Fügen Sie Spalte 1 ein Bildmodul hinzu
1 hochladen: 1-Image
Sobald Ihre Zeileneinstellungen vorgenommen wurden, können Sie die verschiedenen Module hinzufügen, beginnend mit einem Bildmodul in der ersten Spalte. Laden Sie ein Bild Ihrer Wahl hoch, stellen Sie jedoch sicher, dass das Seitenverhältnis 1: 1 beträgt. Dies bedeutet, dass Höhe und Breite den gleichen Wert haben sollten.
Bildausrichtung
Wählen Sie die Ausrichtung des linken Bildes auf der Registerkarte Design.
- Bildausrichtung: links
Sizing
Wir ändern auch die Breite dieses Moduls für verschiedene Bildschirmgrößen.
- Breite: 20% (Desktop und Tablet), 30% (Telefon)
Abstand
Um eine Überlappung auf der linken Seite der Linie 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 Design des Bildes zu vervollständigen, fügen wir außerdem jeder Ecke in den Rahmeneinstellungen '50vw' hinzu. Dadurch wird sichergestellt, dass das Bild über verschiedene Bildschirmgrößen hinweg seine Kreisform beibehält.
Fügen Sie den Textbaustein # 1 in die Spalte 1 ein
Fügen Sie dem Inhaltsbereich Sternsymbole hinzu
Fahren wir mit dem nächsten Modul fort, dem Ranking-Textmodul. Um die Anzahl der Sterne hervorzuheben, verwenden wir Symbole. Kopieren Sie die folgenden Symbole und fügen Sie sie in das Feld ein Inhalt eines neuen Textbausteins: ★★★★.
Hintergrundfarbe
Ändern Sie dann die Unterseite des Moduls.
- Hintergrundfarbe: # 9400ff
Texteinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie auch die Texteinstellungen.
- Textschrift: Montserrat
- Schriftgröße des Textes: Schwer
- Textgröße: 45px (Desktop), 30px (Tablet), 25px (Telefon)
- Höhe der Textzeile: 1em
- Textausrichtung: Mitte
Sizing
Fahren Sie fort, indem Sie die Breite des Moduls ändern.
- Breite: 35%
Abstand
Und fügen Sie einen benutzerdefinierten Abstand hinzu.
- Linker Rand: 50px
- Rechter Rand: 50px
- Top Polsterung: 20px
- Polsterung unten: 20px
Schattenkiste
Um das Bewertungsfeld hervorzuheben, fügen wir einen subtilen Schatten hinzu.
- Box Shadow Blur Force: 50px
- Schattenfarbe: rgba (0,0,0,0,3)
Transformator Übersetzen
Schließlich positionieren wir das Textmodul mithilfe benutzerdefinierter Übersetzungskonvertierungswerte neu. Sie können diesen Schritt verschieben, bis Sie auch alle Module zu Ihrer Spalte hinzugefügt haben.
- Rechts: 360px (Desktop), -84px (Tablet), -70px (Telefon)
- Unten: -113px (Desktop), 190px (Tablet), 141px (Telefon)
Fügen Sie den Textbaustein # 2 in die Spalte 1 ein
Inhalt hinzufügen
Das nächste Modul, das wir in Spalte 1 benötigen, ist ein weiteres Textmodul. Ergänzen Sie die Inhalt Ihrer Wahl und einen Link zum Rezensenten und zum Buch.
Texteinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:
- Textschrift: Montserrat
- Textgröße: 18px
Einstellungen für Textlinks
Ändern Sie auch die Farbe des Linktexts.
- Link-Textfarbe: #9400ff
Abstand
Gehen Sie dann zu den Abstandseinstellungen und positionieren Sie das Element mithilfe benutzerdefinierter Randwerte neu.
- Oberer Rand: -100px (Desktop), 0px (Tablet und Telefon)
- Linker Rand: 200px (Desktop), 50px (Tablet), 20px (Telefon)
- Rechter Rand: 50px (Tablet), 20px (Telefon)
Fügen Sie den Textbaustein # 3 in die Spalte 1 ein
Fügen Sie H3-Inhalte hinzu
Fahren wir mit dem nächsten Modul fort, bei dem es sich um ein Textmodul handelt, das den Titel der H3-Revision enthält.
H3-Texteinstellungen
Gehen Sie zur Registerkarte Design und ändern Sie die H3-Texteinstellungen.
- Überschrift 3-Schriftart: Montserrat
- Titel 3 Schriftgröße: fett
- Titel 3 Textfarbe: #000000
Abstand
Fügen Sie auch einen benutzerdefinierten Rand hinzu.
- Oberer Rand: 80px (Desktop), 50px (Tablet und Telefon)
- Linker Rand: 50px (Desktop und Tablet), 20px (Telefon)
- Rechter Rand: 50px (Desktop und Tablet), 20px (Telefon)
Fügen Sie das 4-Textmodul zur 1-Spalte hinzu
Inhalt hinzufügen
Fahren wir mit dem nächsten und letzten benötigten Modul in der 1-Spalte fort, einem weiteren Textmodul mit der aktuellen Revision.
Abstand
Gehen Sie zu den Abstandseinstellungen dieses Moduls und wenden Sie die folgenden Einstellungen an:
- Oberer Rand: 20px
- Unterer Rand: 50px
- Linker Rand: 50px (Desktop und Tablet), 20px (Telefon)
- Rechter Rand: 50px (Desktop und Tablet), 20px (Telefon)
Fügen Sie Spalte 2 ein Bildmodul hinzu
Ändern Sie die CSS-Einstellungen der 2-Spalte
Wir werden die Flex-Eigenschaften verwenden, um das Bild an der Mitte auszurichten:
Anzeige: Flex;
Laden Sie das Titelbild des Buches herunter
In der zweiten Spalte benötigen wir zwei Module, beginnend mit einem Bildmodul mit dem Cover des Buches. Für dieses Tutorial verwenden wir die Buchumschläge, die im Divi-Übersichtsbuch enthalten sind. Sie können jedoch auch Ihren eigenen Buchumschlag hinzufügen.
Sizing
Gehen Sie zur Registerkarte Design des Bildmoduls und ändern Sie die Breite.
- Breite: 79% (Desktop), 40% (Tablet und Telefon)
Erweitertes Primärelement
Hier werden wir versuchen, das Bild in der Mitte auszurichten.
- align-self: center;
Klonen Sie das Design so oft Sie möchten
Sobald Sie die erste Buchbesprechung erstellt haben, können Sie die gesamte Zeile so oft klonen, wie Sie möchten. Dies hängt davon ab, wie viele Besprechungen auf Ihrer Zielseite angezeigt werden sollen.
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie fantastische Buchrezensionen für Ihre nächsten E-Book-Veröffentlichungsseiten entwerfen können. Dies hilft Ihnen, Ihrer Seite soziale Beweise hinzuzufügen und zu überzeugen Besucher die Glaubwürdigkeit Ihres Buches. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten!
