So erstellen Sie ein scrollbares Textvorschau-Tablet mit Divi

Veröffentlicht: 2017-08-08

Im heutigen Tutorial zeigen wir Ihnen, wie Sie ein scrollbares Textvorschau-Tablet auf Ihrer Website erstellen. Die Textvorschau wird auf einem Tablet dargestellt, auf dem die Besucher innerhalb des Tablets scrollen können, um einige der freigegebenen Kapitel zu lesen.

Das Hinzufügen eines Textvorschau-Tablets zu Ihrer Website ist eine hervorragende Möglichkeit, Ihre Besucher zu ärgern. Sie geben ihnen die Möglichkeit, einen Teil der von Ihnen erstellten Inhalte zu erkunden. Sobald sie den Inhalt gelesen haben und sich von ihm fasziniert fühlen, ist die Wahrscheinlichkeit höher, dass sie auch den Rest lesen wollen. Die Verwendung eines Textvorschau-Tablets kann beispielsweise in folgenden Fällen interessant sein:

  • Beim Verkauf eines Buches
  • Wenn Sie ein kostenloses E-Book mit Ihren Besuchern teilen und sie ermutigen möchten, die vollständige Version herunterzuladen (durch Abonnieren)
  • Wenn Sie Fallstudien oder Erfahrungsberichte teilen

Um Ihnen zu zeigen, was wir genau meinen, haben wir ein Beispiel erstellt, das wir Ihnen Schritt für Schritt zeigen, wie Sie es nachbauen:

Sie können dem Tablet beliebig viele Inhalte hinzufügen. Die Bildlaufleiste ermöglicht es Ihren Besuchern, einfach durch den Inhalt zu scrollen.

So erstellen Sie ein scrollbares Textvorschau-Tablet mit Divi

Abonnieren Sie unseren Youtube-Kanal

Abschnitt erstellen und ändern

Das erste, was wir brauchen, um das Beispiel, das wir erstellt haben, neu zu erstellen, ist ein Abschnitt. Der Einfachheit halber fügen wir diesen Abschnitt zu einer neuen Seite hinzu und wechseln zum Visual Builder, um alle Schritte zu erklären, die verwendet werden, um das Ergebnis zu erstellen.

Eine neue Seite hinzufügen

Um eine neue Seite hinzuzufügen, gehen Sie zu Ihrem WordPress-Dashboard > Seiten > Neu hinzufügen . Nachdem Sie die neue Seite hinzugefügt haben, aktivieren Sie den Divi Builder und wechseln Sie sofort zum Visual Builder.

Einen Abschnitt mit einer zweispaltigen Zeile hinzufügen

Für das Beispiel, das wir neu erstellen, benötigen wir nur einen Abschnitt. Fügen Sie einen Standardabschnitt hinzu und erstellen Sie innerhalb dieses Abschnitts eine zweispaltige Zeile. Wir benötigen die linke Spalte, um das Textvorschautablett zu platzieren, und die zweite Spalte, um Informationen zu geben und einen Aufruf zum Handeln zu setzen.

Den Verlaufshintergrund hinzufügen

Der nächste Schritt, den wir erklären werden, ist der Verlaufshintergrund. Wir haben uns für etwas wirklich Einfaches entschieden, aber das bringt einen schönen Mehrwert in die Sektion. Um den Hintergrundverlauf wiederherzustellen, gehen Sie zu den Einstellungen Ihres Abschnitts. Verwenden Sie dann die folgenden zwei Farben für Ihren Verlaufshintergrund in der Hintergrundunterkategorie:

  • #e02b20
  • #f2f2f2

Die Einstellungen, die wir für den Verlaufshintergrund verwendet haben, sind die folgenden:

  • Verlaufstyp: Linear
  • Verlaufsrichtung: 143deg
  • Startposition: 28%
  • Endposition: 28%

Erste Spalte: Codemodul und Textvorschau-Tablet hinzufügen

Für die erste Spalte fügen wir das Codemodul mit dem Textvorschautablett hinzu. Um das Textvorschau-Tablett fertigzustellen, müssen wir drei Dinge tun; Fügen Sie das Codemodul hinzu, fügen Sie die HTML-Codezeilen innerhalb des Codemoduls hinzu und fügen Sie die benötigten CSS-Codezeilen zur Seite selbst hinzu. Sie können die CSS-Codezeilen auch zu den Theme-Optionen oder zum Theme-Anpasser hinzufügen. Da dies in diesem Fall jedoch nicht erforderlich ist, fügen wir es nur der von uns erstellten Seite hinzu.

Das Codemodul hinzufügen

Beginnen Sie mit dem Hinzufügen eines Codemoduls zur ersten Spalte der von Ihnen erstellten Zeile.

Fügen Sie den HTML-Code hinzu

Öffnen Sie als Nächstes dieses Codemodul und fügen Sie die folgenden Zeilen in das Inhaltsfeld ein: 

<div id="tab-container">
<div class="tablet">
<div class="tab">

<h1 class="title">Chapter 1</h1>

<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

<h1 class="title">Chapter 2</h1>

<p>

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<footer>
 2017 *Author*
</footer>
</div>
</div>
</div>

Sie werden feststellen, dass unsere Textvorschau aus drei Teilen besteht; den Titel, die Absätze und die Fußzeile. Sie können die Textvorschau beliebig lang machen. Für dieses Beispiel haben wir zwei Kapitel hinzugefügt, die jeweils durch einen Titel und einen Absatz dargestellt werden. Natürlich können Sie auf dem Tablet beliebig viele Absätze und Überschriften hinzufügen.

Fügen Sie den benötigten CSS-Code hinzu

Nachdem Sie den HTML-Code an Ihre Bedürfnisse angepasst haben, können Sie den CSS-Code hinzufügen, der Ihrem Tablet das gewünschte Aussehen verleiht. Da wir dieses Tablet nur auf der Seite benötigen, die wir erstellen; wir werden den Code direkt zur Seite hinzufügen. Klicken Sie im Visual Builder Ihrer Seite auf das Einstellungssymbol:

Wechseln Sie als Nächstes zum CSS-Tab und fügen Sie die folgenden CSS-Codezeilen in das Feld Benutzerdefiniertes CSS ein: 

*{ box-sizing: border-box; }

.tablet {
position: relative;
background: #1c1c1c;
width: 100%;
height: 600px;
max-width: 450px;
max-height: 600px;
margin: 0 auto 0;
padding: 30px 24px 30px 24px;
border-radius: 18px;
border-top:2px solid #3C3F45;
border-right:2px solid #202227;
border-bottom:2px solid #202227;
border-left:2px solid #3C3F45;
box-shadow:11px 11px 24px rgba(0,0,0,0.5);
}

@media only screen and (max-width:768px) {
height: 400px;
}

.tablet .tab {
background: #f9f9f9;
color: black;
padding: 50px 40px 50px 40px;
overflow: scroll;
height: 100%;
text-align: justify;
}

.tablet .tab h1 {
font-size: 30px;
font-family: "Dancing script";
font-weight: bold;
font-style: italic;
text-align: center;
margin: 0 0 20px 0;
padding: 4px;
font-size: 25px;
}

.tablet .tab p {
margin: 0 0 20px 0;
font-family: "Arial";
font-size: 13px;
}

footer {
background: black;
color: white;
margin-bottom: 8px;
}

In diesen CSS-Codezeilen können Sie alle Dinge nach Bedarf ändern. Wie Sie in den Codezeilen sehen können, gibt es fünf Hauptteile, in denen Sie das Aussehen und Verhalten Ihres Textvorschautabletts ändern können.

  • Die äußere Optik des Tablets
  • Der innere Look des Tablets
  • Der Titel
  • Die Absätze
  • Die Fußzeile

Sie können das Tablet so anpassen, dass es auf jede Art von Seite passt, in die Sie das Textvorschau-Tablet integrieren.

Zweite Spalte: Fügen Sie zwei Textmodule und einen CTA hinzu

Als letztes fügen wir die Module in die rechte Spalte ein. Es ist wichtig, die Benutzer darüber zu informieren, was sie im Textvorschau-Tablet lesen werden. Es ist auch die ideale Gelegenheit, einen CTA zu nutzen. Je näher sich der CTA am eigentlichen Textvorschau-Tablett befindet und je auffälliger er ist, desto wahrscheinlicher werden die Leute nach dem Lesen der Textvorschau handeln.

Erstes Textmodul

Beginnen Sie mit dem Hinzufügen des ersten Textmoduls zur zweiten Zeile. Öffnen Sie die Einstellungen und schreiben Sie einen Titel in das Inhaltsfeld innerhalb der Unterkategorie Text des Inhalts. Gehen Sie außerdem auf die Registerkarte Design und nehmen Sie die folgenden Änderungen an der Unterkategorie Text vor:

  • Textschriftart: Tanzendes Skript
  • Textschriftart: Fett & Kursiv
  • Schriftgröße des Textes: 40 (Desktop), 35 (Tablet), 30 (Telefon)
  • Textfarbe:#1c1c1c
  • Textzeilenhöhe: 1.7em

Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie "40%" zur oberen Marge hinzu.

Zweites Textmodul

Fügen Sie außerdem den zweiten Textbaustein hinzu. Fügen Sie zunächst den Text im Feld Inhalt auf der Registerkarte Inhalt hinzu und gehen Sie zur Registerkarte Design. Nehmen Sie auf der Registerkarte Design auch die folgenden Anpassungen an der Unterkategorie Text vor:

  • Textschriftart: Arimo
  • Schriftgröße des Textes: 14
  • Textzeilenhöhe: 1.7em

Tastenmodul

Schließlich müssen wir der zweiten Spalte auch ein Schaltflächenmodul hinzufügen. Wir haben die Farben des CTA an den Hintergrund mit Farbverlauf angepasst. Fügen Sie zunächst das Schaltflächenmodul hinzu und öffnen Sie die Einstellungen. Fügen Sie dann den CTA und die URL auf der Registerkarte Inhalt hinzu. Fahren Sie fort, indem Sie zur Registerkarte Design wechseln und die folgenden Anpassungen an der Unterkategorie Schaltfläche vornehmen:

  • Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
  • Tastengröße Text: 14 (Desktop & Tablet), 12 (Telefon)
  • Schaltflächentextfarbe: #f9f9f9
  • Schaltflächenhintergrundfarbe: #e02b20
  • Breite des Tastenrahmens: 0
  • Knopfrandradius: 3
  • Schaltflächenschriftart: Arimo

Tipp: Wenn Sie Ihr E-Book über die Textvorschau bewerben, können Sie auch ein Opt-in-Formular für Trigger on Click Bloom verknüpfen, wie im folgenden Beitrag erläutert.

Das Ergebnis

Wenn Sie alle Schritte in diesem Beitrag befolgt haben, sollten Sie das folgende Ergebnis für Ihre Buchvorschau erhalten haben:

Einpacken

Mit dem Code-Modul können Sie so kreativ werden, wie Sie möchten. Dieser Beitrag war ein Beispiel dafür, wie vielfältig Sie Ihre Divi-Website gestalten können, wenn Sie einige Elemente Ihrer persönlichen Vorlieben integrieren. Wenn Sie diesem Beitrag Schritt für Schritt gefolgt sind, sollten Sie die Buchvorschau neu erstellen und auf Ihrer Website verwenden können. Sie können die Buchvorschau nicht nur für Autoren-Websites verwenden, sondern auch zur Vorschau eines E-Books, das Sie erstellt haben und aus dem Sie Ihre E-Mail-Liste erstellen möchten. Wenn Sie Fragen oder Anregungen haben; Schreiben Sie uns gerne einen Kommentar in den Kommentarbereich unten!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!