Laden Sie eine KOSTENLOSE Buchvorschau herunter Divi Landing Page Layout mit Ankerlinks und CTAs

Egal, ob Sie ein physisches Buch oder ein E-Book verkaufen, eine effektive Zielseite dafür kann Wunder bewirken. Sie können sich dieser Landingpage auf herkömmliche Weise nähern oder sie in eine Landingpage für die Buchvorschau umwandeln. Eine Landingpage für die Buchvorschau ermöglicht es Benutzern, bestimmte Teile oder Kapitel Ihres Buches im Voraus zu lesen. Es ist auch mit Ankerlinks ausgestattet, die das Navigieren durch die verschiedenen Teile oder Kapitel nahtlos machen. Um das Ganze abzurunden, möchten Sie auch einen CTA ins Rampenlicht stellen, der den Verkehr dorthin führt, wo Sie Ihr Buch verkaufen.

In diesem Tutorial erstellen wir mit Divi eine atemberaubende Landingpage für die Buchvorschau von Grund auf neu. Sie können das Layout-JSON auch kostenlos herunterladen, wenn Sie es sofort zu Ihrer Website hinzufügen möchten.

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 Landing Page Layout der Buchvorschau KOSTENLOS herunter

Um das kostenlose Landingpage-Layout für die Buchvorschau 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!

Abonnieren Sie unseren Youtube-Kanal

Neuen regulären Abschnitt hinzufügen

Abstand

Erstellen Sie zunächst eine neue Seite und fügen Sie einen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle benutzerdefinierten oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Zeile hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Spalte 3 Hintergrund mit Farbverlauf

Fügen Sie auch der dritten Spalte einen Verlaufshintergrund hinzu.

• Farbe 1: #6a30ff
• Farbe 2: #a202ff
• Spalte 3 Gradiententyp: Linear
• Spalte 3 Gradientenrichtung: 166deg

Größe

Gehen Sie dann zu den Größeneinstellungen und lassen Sie die Zeile die gesamte Breite des Bildschirms einnehmen, indem Sie die folgenden Größeneinstellungen hinzufügen:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fahren Sie mit den Abstandseinstellungen fort und entfernen Sie die benutzerdefinierten oberen und unteren Abstände der Zeile. Fügen Sie auch der ersten und dritten Spalte einige Füllwerte hinzu.

• Obere Polsterung: 0vw
• Untere Polsterung: 0vw
• Spalte 1 obere Polsterung: 15vw (Desktop), 10vw (Tablet & Telefon)
• Spalte 2 untere Polsterung: 15vw (Desktop), 10vw (Tablet & Telefon)
• Spalte 1 linke Polsterung: 7vw

Spalte 2 CSS-ID

Wie Sie in der Vorschau dieses Beitrags sehen können, ist an der zweiten Spalte eine Bildlaufleiste angebracht. Wenn Sie diese Bildlaufleiste später im Beitrag gestalten möchten, fügen Sie der zweiten Spalte eine CSS-ID hinzu.

• Spalte 2 CSS-ID: style-scrollbar

Spalte 2 Hauptelement

Als nächstes lassen wir die Spalte scrollbar, indem wir die folgenden CSS-Codezeilen zum Hauptelement von Spalte 2 hinzufügen:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Nachdem wir nun alle Zeileneinstellungen geändert haben, können wir mit dem Hinzufügen der Module beginnen! Beginnen Sie mit einem Textbaustein in Spalte 1 und fügen Sie Inhalte Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie zu den Texteinstellungen des Moduls und nehmen Sie einige Änderungen vor.

• Textschriftart: Lato
• Farbe: #666666
• Textgröße: 1,6 vw (Desktop), 3 vw (Tablet), 4 vw (Telefon)
• Textzeilenhöhe: 2vw

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Das nächste Modul, das wir hinzufügen werden, ist ein Divider-Modul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe.

• Farbe: #5802ed

Größe

Spielen Sie auch mit den Größenwerten herum.

• Teilergewicht: 4px
• Breite: 3vw (Desktop), 6vw (Tablet), 9vw (Telefon)
• Höhe: 0px

Abstand

Und fügen Sie einige benutzerdefinierte obere und untere Polster hinzu, um Platz zu schaffen.

• Obere Marge: 1vw (Desktop), 3vw (Tablet), 4vw (Telefon)
• Unterer Rand: 7vw

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Weiter zum dritten Modul, einem weiteren Textmodul. Hier haben wir dem Inhaltsfeld ein Symbol (►) gefolgt vom ersten Kapiteltitel hinzugefügt.

Link hinzufügen

Wir verknüpfen dieses gesamte Modul mit einer Anker-ID, die wir später in diesem Beitrag hinzufügen werden.

• Modul-Link-URL: https://ihrewebsite.com/pagetitle/#chapter-1

Texteinstellungen

Fahren Sie fort, indem Sie zu den Texteinstellungen gehen und den Inhalt genau so gestalten, wie Sie es möchten.

• Textschriftart: Lato
• Schriftstärke des Textes: Leicht
• Textfarbe: #666666
• Textgröße: 1,3 vw (Desktop), 2 vw (Tablet), 3,3 vw (Telefon)

Abstand

Fügen Sie auch einige benutzerdefinierte obere und untere Polster hinzu.

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw

Textmodul #2 zweimal klonen

Wenn Sie mit dem Ändern des Textmoduls fertig sind, klonen Sie es zweimal (oder bis zu so viele Kapitel, wie Sie freigeben möchten).

Inhalt ändern

Ändern Sie den Inhalt jedes der Duplikate.

Links ändern

Zusammen mit der Anker-ID am Ende der Modullink-URL. In diesem Fall bedeutet das, '#chapter-2' zum ersten Duplikat und '#chapter-3' zum zweiten hinzuzufügen.

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zur nächsten Spalte, die scrollbar ist. Hier werden wir Textmodule verwenden, um verschiedene Seiten der Buchvorschau hinzuzufügen. Beginnen Sie damit, das erste Textmodul mit einem Inhalt Ihrer Wahl hinzuzufügen.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Ändern Sie auch die Texteinstellungen.

• Textschriftart: Lato
• Textgröße: 0,8 vw (Desktop), 1,6 vw (Tablet), 2,1 vw (Telefon)
• Textzeilenhöhe: 1,7 vw (Desktop), 3,3 vw (Tablet), 3,8 vw (Telefon)

H2-Texteinstellungen

Spielen Sie auch mit den H2-Texteinstellungen herum.

• Überschrift 2 Schriftart: Lato
• Überschrift 2 Schriftstärke: Schwer
• Überschrift 2 Textfarbe: #5802ed
• Überschrift 2 Textgröße: 2vw (Desktop), 2.5vw (Tablet), 2.9vw (Telefon)
• Überschrift 2 Zeilenhöhe: 2.3vw

Abstand

Fahren Sie fort, indem Sie zu den Abstandseinstellungen gehen und die folgenden benutzerdefinierten Rand- und Abstandswerte hinzufügen:

• Obere Marge: 2vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Unterer Rand: 2vw (Desktop), 7vw (Tablet), 10vw (Telefon)
• Linker Rand: 5vw
• Rechter Rand: 5vw
• Obere Polsterung: 6vw
• Untere Polsterung: 6vw
• Linke Polsterung: 6vw
• Rechte Polsterung: 6vw

Box Schatten

Gestalten Sie das Textmodul, indem Sie einen subtilen Kastenschatten hinzufügen.

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

CSS-ID

Fahren Sie fort, indem Sie dem Textmodul eine CSS-ID hinzufügen. Stellen Sie sicher, dass Sie dieselbe CSS-ID wie diejenige verwenden, auf die Sie in der ersten Spalte der Zeile verlinkt haben.

• CSS-ID: Kapitel-1

Textmodul zweimal klonen

Nachdem Sie das Textmodul formatiert haben, können Sie es beliebig oft klonen.

Inhalt ändern

Ändern Sie den Inhalt jedes Textmodul-Duplikats.

CSS-IDs ändern

Zusammen mit den CSS-IDs.

• CSS-ID: Kapitel-2
• CSS-ID: Kapitel-3

Textmodul zu Spalte 3 hinzufügen

Inhalt hinzufügen

Auf zur nächsten und letzten Spalte! Fügen Sie ein Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie dann zur Registerkarte Design und ändern Sie die Texteinstellungen.

• Textschriftart: Lato
• Schriftstärke des Textes: Schwer
• Textfarbe: #ffffff
• Textgröße: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)
• Textzeilenhöhe: 2vw
• Textausrichtung: Mitte

Abstand

Fügen Sie als nächstes einige benutzerdefinierte linke und rechte Polster hinzu.

• Links: 2vw
• Rechts: 2vw

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Fahren Sie fort, indem Sie der dritten Spalte ein Button-Modul mit einer Kopie Ihrer Wahl hinzufügen.

Ausrichtung

Ändern Sie als nächstes die Ausrichtung der Schaltfläche.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Ändern Sie auch die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 1,5vw (Tablet), 2,4vw (Telefon)
• Schaltflächentextfarbe: #5802ed
• Hintergrundfarbe der Schaltfläche: #ffffff
• Breite des Tastenrahmens: 0px
• Knopfrandradius: 10vw
• Tastenabstand der Buchstaben: 0px
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Fügen Sie einige benutzerdefinierte Rand- und Abstandswerte hinzu, um das Modul zu formatieren und zu positionieren.

• Obere Marge: 2vw (Desktop), 4vw (Tablet), 5vw (Telefon)
• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 3vw (Desktop), 7vw (Tablet), 9vw (Telefon)
• Rechte Polsterung: 3vw (Desktop), 7vw (Tablet), 9vw (Telefon)

Stil-Bildlaufleiste

Seiteneinstellungen öffnen

Der letzte Teil dieses Tutorials ist der Gestaltung der Bildlaufleiste der zweiten Spalte gewidmet. Ob Sie die Spalten-Scrollleiste gestalten oder nicht, liegt ganz bei Ihnen. Ohne Styling ändert es nichts an der Funktionalität. Wenn Sie die Bildlaufleiste formatieren möchten, öffnen Sie die Seiteneinstellungen.

CSS-Code hinzufügen

Gehen Sie dann zur Registerkarte "Erweitert" und fügen Sie dem Feld "Benutzerdefiniertes CSS" benutzerdefiniertes CSS hinzu und Sie sind fertig!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

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 eine beeindruckende und effektive Landingpage für die Buchvorschau erstellen, mit Ankerlinks zu verschiedenen Teilen oder Kapiteln Ihres Buches und einem hervorstechenden CTA. Wir haben auch das JSON-Layout kostenlos zur Verfügung gestellt, damit Sie es sofort zu jeder Website hinzufügen können, die Sie erstellen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte 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.