So verwenden Sie die Text- und Listenstiloptionen von Divi für einzigartige Toggle- und Akkordeon-Inhaltsdesigns
Veröffentlicht: 2019-07-24Die Text- und Listenstiloptionen von Divi sind eine gängige Funktion, die in den meisten Divi-Modulen verfügbar ist. Dies eröffnet neue Möglichkeiten, kreative Inhalte und Listendesigns innerhalb von Modulen (wie dem Toggle- und Akkordeon-Modul) zu gestalten, die bisher nur innerhalb des Textmoduls möglich waren. Der Trick besteht darin, Ihren Inhalt mit dem entsprechenden HTML-Code einzurichten, damit Sie diese Elemente mithilfe der integrierten Designeinstellungen gezielt ansprechen können.
In diesem Tutorial zeige ich Ihnen, wie Sie Divis Text- und Listenstiloptionen für einzigartige Umschalt- und Akkordeon-Inhaltsdesigns verwenden. Dies ist praktisch, wenn Sie verschiedene Textdesigns integrieren möchten, ohne CSS-Klassen oder Inline-CSS verwenden zu müssen.
Lass uns anfangen.
Vorgeschmack
Hier ist ein kurzer Blick auf die Designs, die wir mit den Text- und Listenstiloptionen von Divi erstellen werden.
Laden Sie die Listenstil-Designs für Toggles und Akkordeon-Layout KOSTENLOS herunter
Um die Designs aus diesem Tutorial 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.
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.
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!
Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.
Kommen wir zum Tutorial, sollen wir?
Was Sie brauchen, um loszulegen
Um zu beginnen, benötigen Sie Folgendes:
- Das Divi Theme installiert und aktiv
- Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
- Bilder, die für simulierte Inhalte verwendet werden sollen
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Teil 1: Verwenden von Listenstilen in Toggle-Modulen
In diesem ersten Teil des Tutorials werden wir drei Umschalter erstellen, deren Inhalt jeweils mit Listenstiloptionen entworfen wurde. Dies ist nützlich, um Ihre Listenelemente in separate Umschalter zu trennen, fast wie bei einem benutzerdefinierten Inhaltsverzeichnis.
Erstellen Sie zunächst einen regulären Abschnitt mit einer dreispaltigen Zeile. Aktualisieren Sie dann die Zeileneinstellungen wie folgt:
Dachrinnenbreite: 2
Breite: 100%
Maximale Breite: 90vw
Hinzufügen eines Umschaltmoduls
Fügen Sie als Nächstes ein Umschaltmodul zu Spalte 1 hinzu. Dies ist das erste von drei Umschaltmodulen, die zu jeder der drei Spalten hinzugefügt werden.
Fügen Sie den Toggle-HTML-Inhalt hinzu
Der HTML-Inhalt ist der Schlüssel zu diesem Design. Damit wir die verschiedenen Listenstile in den Divi-Umschalteinstellungen nutzen können, müssen wir unserer Inhaltsbox HTML-Listen hinzufügen.
Fahren Sie fort und fügen Sie den folgenden HTML-Code in das
Inhaltsfeld des Körpers.
<ol start="1">
<li>
<ul style="margin-top: -1.5em;">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
Jetzt erstellt dieser HTML-Code eine geordnete Liste mit dem ol-Tag. Die geordnete Liste hat nur ein Listenelement (li), das eine verschachtelte ungeordnete Liste (ul) mit einem Listenelement (li) ist, das einen Scheininhalt hat. Unter der geordneten Liste befindet sich ein einfacher Textabschnitt.
Mit diesem Setup können wir jedes dieser Tags (ol, ul, p) für verschiedene Stile verwenden, indem wir Divis eingebaute Textstile verwenden, die Listenstile enthalten.
Beachten Sie, dass das beginnende ol-Tag start=”1″ enthält. Dies teilt der Liste mit, mit welcher Nummer sie beginnen soll, indem sie die Nummern der geordneten Liste mit jedem Listenelement auflistet. Technisch ist dies für die erste Zahl nicht notwendig, da diese standardmäßig automatisch mit 1 beginnt. Aber wir werden es für die nächsten Toggles brauchen, die wir hinzufügen werden.
Außerdem hat das ungeordnete Listen-Tag ein gewisses Inline-Styling, um den ul-Inhalt mit negativem Rand etwas nach oben zu bringen. Auf diese Weise überlappen wir die Nummer der geordneten Liste mit dem Text der ungeordneten Liste im Design.
Den Inhalt gestalten
Jetzt können wir mit den integrierten Einstellungen und Listenstilen einige Farben und Schriftstile hinzufügen. Aktualisieren Sie die Designeinstellungen des Umschalters wie folgt:
Symbolfarbe: #ff3d97
Symbolschriftgröße: 26px
Open Toggle Hintergrundfarbe: #ffffff
Hintergrundfarbe geschlossen: #ffffff
Titeltextfarbe öffnen: #333333
Titeltextfarbe: #333333
Titelschriftart: Oswald
Titeltextgröße: 18px
Höhe der Titelzeile: 3em
Schriftart der ungeordneten Liste: Oswald
Schriftstärke der ungeordneten Liste: Leicht
Textfarbe der ungeordneten Liste: #333333
Textgröße der ungeordneten Liste: 36px
Ungeordneter Listenstiltyp: Keine
Schriftart der geordneten Liste: Kameron
Schriftstärke der geordneten Liste: Fett
Textfarbe der geordneten Liste: rgba(255,61,151,0.34)
Textgröße der geordneten Liste: 100px
Zeilenhöhe der bestellten Liste: 1,1 em
Duplizieren Sie das erste Toggle-Modul, um die anderen Toggles zu erstellen
Um die Umschalter für Spalte 2 und 3 zu erstellen, duplizieren wir das Umschaltmodul, das wir gerade fertig entworfen haben. Dann können wir diese in jede Spalte ziehen, sodass jede Spalte das gleiche Umschaltmodul hat.
Aktualisieren Sie die Startnummern der Bestellliste
Für den Duplikat-Umschalter in Spalte 2 müssen wir die sortierte Liste mit der Zahl „2“ statt mit „1“ beginnen lassen. Um dies zu ändern, öffnen Sie die Einstellungen des Toggle-Moduls und ändern Sie die Startnummer im ol-Tag auf „2“.
Außerdem müssen Sie den Schalter in Spalte 3 mit der geordneten Listenstartnummer „3“ aktualisieren.
Endgültiges Design
Schauen wir uns nun das endgültige Design an.
Teil 2: Verwenden von Listenstilen in Akkordeonmodulen
In diesem zweiten Teil des Tutorials zeige ich Ihnen eine schnelle und einfache Möglichkeit, die Inhaltsdesigns im Listenstil vom Umschaltmodul in ein Akkordeonmodul zu übertragen. Der Vorgang ist einfach, da Sie die gleichen Text- und Listenstile in einem Akkordeon-Modul (oder so ziemlich jedem Modul) verwenden können, die wir in unseren vorherigen Umschaltern verwendet haben. Erstellen Sie dazu zunächst einen neuen Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile ein Akkordeonmodul hinzu.
Dann duplizieren Sie eines der beiden Standard-Akkordeons auf der Registerkarte "Inhalt", um insgesamt drei Akkordeons zu erhalten. Aktualisieren Sie dann den Inhalt für jedes einzelne Akkordeon mit dem gleichen exakten Umschalt-HTML-Inhalt in jedem der drei zuvor erstellten Umschalter.
Toggle Styles auf das Akkordeon erweitern
Eine schnelle Möglichkeit, das Styling von den von uns erstellten Umschaltern auf das Akkordeon-Modul zu übertragen, besteht darin, die Funktion zum Erweitern von Stilen zu verwenden. Öffnen Sie dazu eines der Toggle-Module und klicken Sie mit der rechten Maustaste auf die Symbolstilkategorie und wählen Sie im Rechtsklickmenü „Symbolstile erweitern“. Wählen Sie dann aus, um die Stile dieses Symbols auf „Alle Akkordeons“ auf „Diese Seite“ zu erweitern.
Machen Sie dann dasselbe für jede der Designkategorien, die ein benutzerdefiniertes Design haben, das auf das Akkordeonmodul erweitert werden muss. Dazu gehören das Styling für „Toggle“, „Titeltext“ und „Body Text“.
Dann sehen Sie sich das Endergebnis für das Akkordeon-Design an.
Teil 3: Verwenden von Listenstilen zum Erstellen von Inhalten mit mehreren Spalten in einem Umschaltmodul
In diesem dritten Teil des Tutorials zeige ich Ihnen, wie Sie mehrere Inhaltsspalten für Ihre Listenstil-Designs erstellen können.
Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile. Kopieren Sie dann eines der zuvor erstellten Umschaltmodule und fügen Sie es in die Zeile ein.
Aktualisieren Sie dann den Inhalt des Toggle-Moduls wie folgt mit etwas neuem HTML:
<ol style="column-count: 2">
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
</ol>
Beachten Sie das Inline-Stilattribut „column-count:2“, das dem beginnenden ol-Tag hinzugefügt wurde. Dadurch kann der geordnete Listeninhalt in zwei Spalten statt in einer unterteilt werden. Sie können dies bei Bedarf in eine beliebige Zahl für weitere Spalten ändern.
Und beachten Sie, wie wir die integrierten Designeinstellungen von Divi für die Titel-, Link- und Listenstile verwenden können.
Den Linktext gestalten
Da die Titel- und Listenstile bereits aus dem vorherigen Design vorhanden sind, müssen wir nur noch etwas Design für den Linktext hinzufügen.
Öffnen Sie die Umschalteinstellungen und aktualisieren Sie Folgendes:
Link-Schriftstärke: Halbfett
Link-Schriftart: Unterstreichen
Linktextfarbe: #ff3d97
Linktextgröße: 15px
Und da wir mit diesem Design keinen Text überlappen, geben Sie den geordneten Listenstilnummern wie folgt eine hellere Farbe:
Textfarbe der geordneten Liste: #ff3d97
Fügen Sie dem Umschalter einen Hintergrund hinzu
Um das Design abzuschließen, können wir unserem Umschalter einen benutzerdefinierten Hintergrund hinzufügen. Aktualisieren Sie dazu die folgenden Umschalteinstellungen:
Hintergrundbild: [Bild Ihrer Wahl hochladen]
Hintergrundfarbe links: rgba(255,255,255,0.92)
Hintergrundfarbe rechts: rgba(255,255,255,0.8)
Verlaufsrichtung: 90deg
Startposition: 50%
Endposition: 0%
Farbverlauf über dem Hintergrundbild platzieren: JA
Responsive Elemente zum zweispaltigen Umschalter hinzufügen
Da der Inhalt des Umschalters jetzt aus zwei Spalten besteht, aktualisieren wir das Design mit einigen responsiven Stilen, damit es auf Mobilgeräten gut skaliert werden kann.
Aktualisieren Sie zunächst die Zeileneinstellungen wie folgt:
Breite: 100%
Max. Breite: 89vw (Desktop), 90vw (Tablet und Telefon)
Öffnen Sie die Umschalteinstellungen und aktualisieren Sie Folgendes:
Symbolschriftgröße: 5vw
Titeltextgröße: 4vw
Textgröße der ungeordneten Liste: 26 Pixel (Desktop), 18 Pixel (Tablet), 14 Pixel (Telefon)
Einzug der ungeordneten Listenelemente: 1px
Textgröße der bestellten Liste: 8vw
Endgültiges Design des mehrspaltigen Toggle-Inhalts
Hier ist das Design auf Tablet- und Telefondisplays.
Und hier ist das gleiche Design mit dunklerem Hintergrund und weißen Textfarben.
Abschließende Gedanken
In den meisten Fällen haben Toggles und Akkordeons grundlegende Körperinhalte, die wirklich kein kreatives Design erfordern. Aber wenn die Zeit kommt, in der Sie Ihre Umschalt- und Akkordeoninhalte aufpeppen möchten, können Sie die integrierten Text- und Listenstiloptionen von Divi nutzen. Sobald Sie Ihr HTML eingerichtet haben, können Sie diese HTML-Tags auf verschiedene Designs ausrichten, ohne externes benutzerdefiniertes CSS oder Klassen verwenden zu müssen. Dies ist auch eine großartige Möglichkeit, kreative Listenstile in jedem Modul mit dem Divi-Builder anzuzeigen, da dieselben Listenstiloptionen in allen Modulen verfügbar sind.
Viel Spaß beim Entdecken neuer Designs.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!