Möchten Sie einem scrollbaren Tablet auf Divi Teaser-Inhalte hinzufügen?
Hinzufügen von Teaser-Inhalten zu Ihrer Website kann eine Strategie sein Marketing Wirksam. Dies funktioniert besonders gut für fördern Dinge wie E-Books. Sie geben ihnen eine Vorschau des Inhalts, damit sie mehr wollen.
Im heutigen Tutorial zeigen wir Ihnen, wie Sie Teaser-Inhalte in einem Dropdown-Tablet in Divi präsentieren.
Dazu nutzen wir die integrierten Optionen von Divi, um eine Spalte in einen Dropdown-Container zu verwandeln (der so gestaltet ist, dass er wie ein Tablett aussieht), der jede Art von Inhalt enthalten kann, den Sie möchten.
Sie können es für verwenden fördern Sehen Sie sich die ersten Kapitel eines E-Books an, sehen Sie sich Beispieldesigns aus Ihrem Portfolio oder andere Arten von Inhalten an.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Blick auf das Tablet mit scrollbaren Inhalten, die wir in diesem Tutorial erstellen werden.
Erstellen Sie eine neue Seite mit Divi Builder
Gehen Sie im WordPress-Dashboard zu „Seiten > Neu hinzufügen“
Geben Sie einen für Sie sinnvollen Titel ein und klicken Sie dann „Verwenden Sie DiviBuilder“
klicken Sie dann auf „Start-Building“
Tablet-Design mit scrollbarem Teaser-Inhalt in Divi
Erstellen des Dropdown-Tablet-Containers mit einer Divi-Spalte
Fügen Sie eine Zeile hinzu
Erstellen Sie zunächst eine zweispaltige Zeile mit einem regelmäßigen Abschnitt.
Einstellungen für Spalte 1
Hintergrundfarbe
Öffnen Sie die Einstellungen für Spalte 1 und fügen Sie der Spalte einen weißen Hintergrund hinzu.
- Hintergrund: #ffffff
Grenze und Rand
Gehen Sie zur Registerkarte Design Dropdown-Option Abstand und ändern Sie die Einstellungen wie folgt:
- Polsterung (oben, unten, links und rechts): 25 Pixel (oben, unten, links, rechts)
Ziehen Sie dann die Option herunter Grenze und ändern Sie die Einstellungen entsprechend:
- Abgerundete Ecken: 20px
- Randbreite: 30px
- Randfarbe: #000000
Schattenkiste
Um dem Tablettdesign etwas Tiefe zu verleihen, ziehen Sie die Option nach unten Box Schatten und fügen Sie den folgenden Boxschatten hinzu:
- Box Shadow: siehe Screenshot
- Kastenschatten (horizontal und vertikal) Position: 5 px
- Schattenfarbe: #555555
Benutzerdefinierte Spaltenhöhe und -breite mit CSS
Der Schlüssel zum Scrollen von Spalteninhalten besteht darin, ihm eine definierte Höhe zuzuweisen. Dies führt dazu, dass der Inhalt die Spaltenhöhe überschreitet.
Wir möchten auch, dass das Seitenverhältnis des Tabletts konsistent bleibt, daher ist es eine gute Idee, der Spalte auch eine maximale Breite zu geben.
Um der Spalte eine benutzerdefinierte Höhe und Breite zu geben, gehen Sie zur Registerkarte Fortgeschrittener und aktualisieren Sie Folgendes:
Sous Benutzerdefinierte CSS, fügen Sie das folgende CSS für die Desktop-Anzeige (Hauptelement) hinzu:
height:650px;
max-width: 488px;
Aktivieren Sie dann die Registerkarte für andere Anzeige und fügen Sie das folgende benutzerdefinierte CSS für die Telefonanzeige des Hauptelements ein:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Vertikaler Überlauf: scrollen
Wie bereits erwähnt, hat die Spalte nun eine definierte Höhe, die zwangsläufig dazu führt, dass der Inhalt der Spalte vertikal überläuft.
Um sicherzustellen, dass überlaufender Inhalt angezeigt werden kann, indem Sie in der Spalte nach unten scrollen, stellen Sie die Option Sichtbarkeit vertikaler Überlauf auf ein "scrollen". Erweitern Sie dazu die Option Sichtbarkeit Tab Fortgeschrittener
- Vertikaler Überlauf: Blättern
Teaser-Inhalt zur Dropdown-Spalte hinzufügen
An diesem Punkt ist die Spalte (oder das Regal) bereit für den Inhalt. Sie können jedes Divi-Modul in dieser Spalte verwenden, um Ihren Vorschauinhalt zu erstellen.
In diesem Beispiel fügen wir Dummy-eBook-Inhalte hinzu, die aus einem Modul bestehen Klappentext (um den anfänglichen Call-to-Action anzuzeigen), ein Modul Bild (um das Buchcover anzuzeigen) und ein Modul Text (um einige Kapitel des E-Books anzuzeigen).
Scrollender CTA (Call to Action) mit Buchcover-Hintergrund
Das erste Teaser-Inhaltselement, das wir hinzufügen werden, ist ein Modul Klappentext die als Aufruf zum Handeln dienen „Zur Vorschau scrollen“.
Wir verwenden ein Präsentationssymbol, einen Titel und einen Hintergrund mit einem Buchcover als Hintergrundbild und einer Farbverlaufsüberlagerung.
Fügen Sie in der Tablet-Spalte ein Modul hinzu Klappentext.
Aktualisieren Sie den Inhalt wie folgt:
- Titel: Blättern Sie, um einen Auszug zu lesen
Drop-down-Option „Bild & Symbol“
- Symbol verwenden: Ja
- Symbol: siehe Screenshot
Ziehen Sie dann die Option herunter Hintergrund und einen Farbverlauf hinzufügen
- Farbe linke Seite: rbga(0,0,0,0,0.0)
- Farbe der rechten Seite: #ffffff
- Ausgangsposition: 20%
- Endposition: 85%
- Quadratische Steigung über Hintergrundbild: JA
Fügen Sie dann das Buchumschlagbild hinzu. Fügen Sie für beste Ergebnisse ein Bild mit einer Größe von etwa 600 x 850 Pixel hinzu .
Aktualisieren Sie auf der Registerkarte Design die folgenden Stile für das Symbol und den Titel:
- Symbolfarbe: #000000
- Symbolschriftgröße: 80 Pixel (Desktop und Tablet), 70 Pixel (Telefon)
- Titelschrift: Montserrat
- Ausrichtung des Titeltexts: zentriert
- Textfarbe: #000000
Dann können wir das Symbol und den Titel in der Spalte nach unten verschieben, indem wir einen oberen Rand hinzufügen.
Aktualisieren Sie Folgendes, um Größe und Abstand des Klappentexts festzulegen:
- Höhe: 100 %
- Rand: 25px (unten)
- Polsterung: 400 Pixel (Desktop und Tablet), 270 Pixel (Telefon)
Das Bild des Buchcovers
Der nächste Teaser-Inhalt wird ein Bild des Buchcovers sein. Um ein Bild hinzuzufügen, fügen Sie einfach ein Bildmodul unterhalb des Blurb-Moduls hinzu.
Laden Sie dann dasselbe Bild hoch, das Sie für den Klappentext-Hintergrund verwendet haben.
Der Inhalt der Textvorschau
Unser letzter Teaser-Inhalt wird der Text sein, der einige fiktive Kapitel aus unserem E-Book enthalten wird. Um den Text hinzuzufügen, fügen Sie ein neues Textmodul unter dem vorherigen Bild hinzu.
Fügen Sie dann den folgenden HTML-Code in die Registerkarte Textkörper ein:
<h3>Chapitre 1</h3>
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.
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?
<h3>Chapitre 2</h3>
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?
Aktualisieren Sie auf der Registerkarte Design den Überschriftenstil und -abstand wie folgt (Überschrift 3):
- Schrift: Montserrat
- Schriftstärke: Ultra Bold
- Textausrichtung: Zentriert
- Zeilenhöhe: 1,3 cm
- Polsterung: 10 % (oben und unten)
Ein paar letzte Handgriffe
Zeilenparameter aktualisieren
Nachdem der Inhalt vorhanden ist, müssen wir einige Anpassungen an der Zeile vornehmen, um das Design reaktionsfähiger zu machen. Öffnen Sie die Leitungseinstellungen und aktualisieren Sie Folgendes:
- Breite: 100 % (Desktop), 90 % (Tablet und Telefon)
- Maximale Breite: 1 Pixel (Desktop), 080 Pixel (Tablet und Telefon)
Fügen Sie Spalte 2 zusätzlichen Inhalt hinzu
An dieser Stelle können wir bei Bedarf zusätzliche Inhalte zu Spalte 2 hinzufügen. Für dieses Beispiel haben wir ein Textmodul und ein Schaltflächenmodul hinzugefügt und sie ähnlich dem in unserem E-Book-Layoutpaket gezeigten Design angepasst.
Laden Sie DIVI jetzt herunter!!!
Endergebnis
Nun sehen wir uns das Endergebnis an.
Schauen Sie sich die Dropdown-Inhalte an, die im Laptop-Tablet verfügbar sind.
Und so stapelt sich das Design auf dem Tablet- und Telefonbildschirm.
Zusammenfassung
Das Beste an diesem Scroll-Tablet-Design ist vielleicht seine Vielseitigkeit. Da das Tablet im Wesentlichen eine Divi-Spalte ist, können Sie eine beliebige Anzahl von Divi-Modulen (Text, Bild, Schaltfläche) verwenden, um den Inhalt zu gestalten, den Sie präsentieren möchten.
Ich hoffe, dies hilft Ihnen, wenn Sie das nächste Mal Teaser-Inhalte auf Ihrem präsentieren müssen Website.
Wenn Sie mehr über Divi erfahren möchten, zögern Sie nicht, unseren Katalog zu besuchen Divi-Tutorials. Sie können sich auch beraten So erstellen Sie die Blog-Seite mit dem Divi-Blog-Modul
Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.
Sie können sich aber auch beraten unsere Ressourcen, Wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber inzwischen, Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
