Springe zum Hauptinhalt

So erstellen Sie mit Divi ein ideales Design für die eBook-Vorschau

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Heute zeige ich Ihnen, wie Sie mit dem Ebook Layout Pack von Divi und den integrierten Divi-Optionen ein Design für auffällige Buchbesprechungen entwerfen. Auf diese Weise können Sie Ihren Zielseiten soziale Beweise hinzufügen, die Glaubwürdigkeit erhöhen und auf elegante Weise kurze Erfahrungsberichte von Benutzern austauschen.

Beginnen wir mit dem Design

Übertragen Sie das Zielseitenlayout des E-Book-Pakets

Das erste, was Sie tun müssen, ist, eine neue Seite unter Verwendung der Präsentation der Zielseite des Ebook Layout Packs zu erstellen, die Sie in den vordefinierten Layouts finden.

Einen neuen Abschnitt hinzufügen

Scrollen Sie durch das Layout und fügen Sie einen neuen Abschnitt hinzu, in dem Sie 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 auch der zweiten Spalte eine benutzerdefinierte Hintergrundfarbe hinzu.

  • Spalten-2-Hintergrundfarbe: #9400ff

Sizing

Wechseln Sie zur Registerkarte Entwurf, und entfernen Sie den gesamten benutzerdefinierten Abstand zwischen den Spalten, indem Sie die folgenden Parameter verwenden:

  • 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 der 1-Spalte ein Bildmodul hinzu

1 hochladen: 1-Image

Sobald Ihre Linienparameter festgelegt sind, können Sie die verschiedenen Module hinzufügen, beginnend mit einem Bildmodul in der ersten Spalte. Laden Sie ein Bild Ihrer Wahl hoch, aber stellen Sie sicher, dass das Bildverhältnis 1: 1 ist. Dies bedeutet, dass Höhe und Breite den gleichen Wert haben müssen.

Bildausrichtung

Wählen Sie die Ausrichtung des linken Bildes auf der Registerkarte Design.

  • Ausrichtung des Bildes: links

Sizing

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

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

  • 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 Bilddesign zu vervollständigen, fügen wir in den Rahmeneinstellungen an jeder Ecke "50vw" hinzu. Dadurch wird sichergestellt, dass das Bild über verschiedene Bildschirmgrößen hinweg seine kreisförmige Form behä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 Rangfolgetextmodul. Um die Anzahl der Sterne hervorzuheben, verwenden wir Symbole. Fahren Sie fort, kopieren Sie die folgenden Symbole und fügen Sie sie in den Inhaltsbereich eines neuen Textbausteins ein: ★★★★.

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 Auswertungsfeld hervorzuheben, fügen wir einen subtilen Schatten hinzu.

  • Box Shadow Blur Force: 50px
  • Schattenfarbe: rgba (0,0,0,0,3)

Transformator Übersetzen

Zuletzt positionieren wir den Textbaustein mit benutzerdefinierten Übersetzungskonvertierungswerten 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 der 1-Spalte benötigen, ist ein weiteres Textmodul. Fügen Sie den Inhalt Ihrer Wahl und einen Link zur Rezension und zum Buch hinzu.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Texteinstellungen

Gehen 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

Wechseln Sie dann zu den Abstandseinstellungen und positionieren Sie das Element mit benutzerdefinierten Randwerten 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

Greifen Sie auf die Abstandseinstellungen für dieses Modul zu 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 der 2-Spalte ein Bildmodul hinzu

Ändern Sie die CSS-Einstellungen der 2-Spalte

Wir werden die Flex-Eigenschaften verwenden, um das Bild in 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 Umschlag des Buches. Für dieses Tutorial verwenden wir die mit dem Divi Presentation Book gelieferten Buchumschläge. Sie können jedoch auch Ihren eigenen Buchumschlag hinzufügen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Sizing

Wechseln 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 großartige Buchbesprechungen für Ihre nächsten E-Book-Publishing-Seiten entwerfen. Auf diese Weise können Sie Ihrer Seite einen sozialen Beweis hinzufügen und die Besucher von der Glaubwürdigkeit Ihres Buches überzeugen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
3 Aktien
Aktie3
tweet
Registrieren