Entfesseln Sie die Leistungsfähigkeit des Textmoduls von Divi für kreative Listendesigns

Das Erstellen einzigartiger Listendesigns ist ein wichtiger Aspekt des Webdesigns. Leser schätzen die Struktur und Ästhetik einer gut gestalteten Liste, weil sie Informationen viel schneller verarbeiten können.

Mit dem Textmodul von Divi haben Sie alles, was Sie brauchen, um gewöhnliche Listen in schöne Kunstwerke zu verwandeln. Die Textmoduleinstellungen von Divi ermöglichen es Ihnen, verschiedene HTML-Elemente in Ihrem Inhalt – einschließlich Listen – gezielt zu gestalten und zu gestalten. Und mit ein paar Designtechniken können Sie die Leistungsfähigkeit dieser Optionen nutzen, um Ihre Listen auf überraschende Weise anzupassen.

In diesem Tutorial zeige ich Ihnen, wie Sie in Divi einzigartige Listendesigns erstellen können.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf die vier Listendesigns, die wir in diesem Tutorial erstellen werden.

Inspiriert von den Textmoduleinstellungen

Wenn Sie wie ich sind, übersehen Sie möglicherweise einige der „versteckten“ Optionen, die tief im Divi Builder lauern. Ein Modul mit einigen verborgenen Schätzen ist das Textmodul. Die Einstellungen für das Textmodul haben mehrere Registerkarten, die Stiloptionen für verschiedene HTML-Elemente enthalten. Dies kann ein äußerst praktisches und kreatives Designwerkzeug sein. Diese Registerkarten enthalten Optionen für Textkörper, Links, ungeordnete Listen, geordnete Listen und Blockzitate.

Und es gibt ein paar versteckte Juwelen unter diesen Registerkarten, an die Sie möglicherweise nicht gedacht haben, in Ihrem Design zu verwenden. Wussten Sie beispielsweise, dass Sie die Listenstiloptionen für ungeordnete Listen ändern können? Es stehen eine Reihe einzigartiger Optionen zur Verfügung (18 um genau zu sein), einschließlich römischer Ziffern und Dezimalzahlen mit einer führenden Null.

Diese mögen unbedeutend erscheinen, aber wenn Sie die Designoptionen nutzen, können Sie einige wirklich kreative Designs erstellen.

Sie können auch den Stil verschiedener Überschriftenebenen (oder Tags) auf den einzelnen Registerkarten unter den Überschriftenstiloptionen auswählen.

Diese Möglichkeit, mehrere HTML-Elemente in Ihren Inhalten anzusprechen, eröffnet einige wunderbare Möglichkeiten. Hoffentlich werden sie Sie auch inspirieren.

Weitere Informationen dazu finden Sie im Funktionsupdate, das einige dieser wunderbaren Textoptionen erklärt.

Erstellen Ihrer HTML-Liste

Eine HTML-Liste kann entweder „geordnet“ (mit Zahlen, römischen Ziffern usw.) oder „ungeordnet“ (mit quadratischen Symbolen, Kreissymbolen usw.) sein. Bei ungeordneten Listen werden die Listenelemente in ein „ul“-Tag eingeschlossen („ul“ steht für „ungeordnete Liste“). Bei geordneten Listen werden die Listenelemente in ein „ol“-Tag eingeschlossen („ol“ steht für „geordnete Liste“). Jedes Listenelement ist in ein „li“-Tag („li“ für „Listenelement“) eingeschlossen.

Hier ist die Grundstruktur einer geordneten Liste:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

Was standardmäßig wie folgt aussieht:

1. Listenpunkt
2. Listenpunkt
3. Listenpunkt

Sie können tatsächlich eine HTML-Liste mit dem wysiwyg-Editor innerhalb eines Divi-Textmoduls erstellen. Stellen Sie sicher, dass Sie im visuellen Tab bearbeiten und geben Sie einfach Ihre Listenelemente ein, um sicherzustellen, dass es nach jedem einen Zeilenumbruch (drücken Sie die Eingabetaste) gibt. Markieren Sie dann den Inhalt und klicken Sie oben im Editor auf eines der Listensymbole.

Gehen Sie nun zum Text-Tab, um zu sehen, wie der HTML-Code aussieht:

Dies funktioniert gut für einfache Listen, aber wenn Sie verschachtelte Listen (eine Liste in einer Liste) erstellen möchten, erstellen Sie sie besser mit HTML (mit der Textregisterkarte), um die Kopfschmerzen beim Versuch zu vermeiden, dies im wysiwyg . zu tun Editor (visuelle Registerkarte).

Hier ist die Grundstruktur einer verschachtelten Liste, die eine geordnete Liste hat, wobei jedes Listenelement eine verschachtelte ungeordnete Liste hat.

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Standardmäßig sieht diese verschachtelte HTML-Liste so aus:

1. Geordneter Listenartikel
   • Ungeordnetes Listenelement
2. Geordneter Listenartikel
   • Ungeordnetes Listenelement
3. Geordneter Listenartikel
   • Ungeordnetes Listenelement

Sie können der Liste auch andere HTML-Tags hinzufügen. Beispielsweise können wir das geordnete Listenelement in ein h5-Tag einschließen. Das Ergebnis wird wie folgt aussehen:

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Keine Sorge, das ist so kompliziert, wie ich es für dieses Tutorial bekommen werde. Was Sie jedoch beachten müssen, ist, dass diese Struktur drei verschiedene Tags (ol, ul und h5) hat, die mit den leistungsstarken Designeinstellungen von Divi in ​​einem Textmodul unabhängig voneinander gestaltet werden können.

Wir werden diese Struktur etwas später brauchen, aber jetzt lassen Sie uns unsere Seite zum Laufen bringen, um unser Design im Visual Builder zu starten.

Abschnitt und Zeile für die Listen erstellen

Erstellen Sie eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie dann die Option „Seite von Grund auf erstellen“. Erstellen Sie dann einen regulären Abschnitt mit einer zweispaltigen Zeile.

Erstellen der HTML-Liste in einem Textmodul

Fügen Sie in der ersten Spalte Ihrer Zeile einen neuen Textbaustein hinzu. Geben Sie im Inhaltsfeld in den Texteinstellungen die folgende HTML-Liste ein:

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>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.</li>
</ul>
</li>
</ol>

Diese Struktur sollte Ihnen von früher bekannt vorkommen. Der h5-Kopfzeilentext ist die geordneten Listenelemente und der "lorem ipsum"-Dummy-Text sind die verschachtelten ungeordneten Listenelemente.

Standardmäßig sieht es ungefähr so ​​aus:

Bisher nicht allzu beeindruckend, ich weiß. Aber mit diesem Inhalt können wir jetzt mit dem lustigen Teil der Gestaltung unserer Liste mit Divi beginnen!

Wichtiger Hinweis: Da jedes Design eine modifizierte Version des ersten Designs ist, ist es am besten, mit dem ersten Design in diesem Tutorial zu beginnen und sie in Ordnung zu halten.

Listendesign #1

Für den Anfang geben wir unserem Textmodul wie folgt einen Verlaufshintergrund:

Hintergrundfarbe links: rgba(0,0,0,0.04)
Verlaufshintergrund rechts Farbe: rgba(255,255,255,0)
Verlaufsrichtung: 90deg
Startposition: 25%
Endposition: 0%

Die geordneten Listenelemente gestalten

Gehen Sie nun über die Registerkarte "Design" und wählen Sie unter dem Schalter "Text" die Registerkarte "Ordnete Liste" aus.

Aktualisieren Sie dann Folgendes:

Schrift der geordneten Liste: Abril Fatface
Schriftstärke der geordneten Liste: Fett
Bestellliste Textfarbe: #559cad
Textgröße der bestellten Liste: 45px
Zeilenhöhe der bestellten Liste: 1,6em
Art der geordneten Liste: Dezimal-führende Null
Position des geordneten Listenstils: Außerhalb
Geordneter Listenelementeinzug: 2vw

Sie werden feststellen, dass h5 und die verschachtelte ungeordnete Liste den Stil der übergeordneten geordneten Liste erben. Keine Sorge, Sie können den Stil der anderen Elemente überschreiben.

Die ungeordneten Listenelemente gestalten

Klicken Sie nun auf die Registerkarte geordnete Liste, um die folgenden Einstellungen zu ändern:

Schriftart der ungeordneten Liste: Montserrat
Schriftstärke der ungeordneten Liste: Leicht
Textfarbe der ungeordneten Liste:
Textgröße der ungeordneten Liste: 18px
Ungeordneter Listenstiltyp: Keine
Einzug der ungeordneten Listenelemente: 0.01px

Styling des H5-Headers

Das letzte Element, das wir stylen müssen, ist der H5-Header. Gehen Sie dazu zu den Optionen unter Überschriftentext und klicken Sie auf die Registerkarte H5. Aktualisieren Sie dann Folgendes:

Überschrift 5 Schriftart: Montserrat
Überschrift 5 Schriftstärke: Leicht
Überschrift 5 Schriftstil: Großbuchstaben (TT)
Überschrift 5 Textfarbe: #4f6d7a
Überschrift 5 Textgröße: 5vw (Desktop), 70px (Tablet), 40px (Smartphone)

Um das Design unseres Textmoduls abzuschließen, fügen Sie die folgenden benutzerdefinierten Paddings hinzu:

Benutzerdefinierte Polsterung (Desktop): 3vw oben, 3vw unten
Benutzerdefinierte Polsterung (Tablet): 2vw links
Benutzerdefinierte Polsterung (Smartphone): 50 Pixel links

Einstellungen speichern.

Kopieren Sie nun den Textbaustein und fügen Sie ihn in die zweite Spalte der Zeile ein. Möglicherweise stellen Sie fest, dass die Listennummern im duplizierten Textbaustein angepasst werden müssen, damit er von der vorherigen Liste fortgesetzt wird. Wir möchten, dass unsere zweite Textbausteinliste mit der Zahl 4 (statt 1) ​​beginnt. Dazu müssen wir unserer HTML-Liste eine kleine Änderung hinzufügen. Gehen Sie in den Textmoduleinstellungen zum Inhaltsfeld und ersetzen Sie das öffnende „ol“-Tag durch Folgendes:

<ol start="4">

Schauen wir uns nun das Endergebnis an.

Listendesign #2

Für dieses zweite Beispiellistendesign werde ich den ersten Abschnitt, den wir erstellt haben, duplizieren, um uns einen Vorsprung zu verschaffen. Ich werde auch einen coolen Hintergrund für das Listendesign mit Hintergrundverläufen einführen.

Erstellen eines benutzerdefinierten Hintergrundverlaufsdesigns

Aktualisieren Sie im duplizierten Abschnitt die Abschnittseinstellung mit dem folgenden Farbverlaufshintergrund:

Hintergrundfarbe mit Farbverlauf links: #ffffff
Verlaufshintergrund rechts Farbe: rgba(155,29,32,0.08)
Steigungsrichtung: 45deg
Startposition: 50%
Endposition: 0%

Einstellungen speichern.

Aktualisieren Sie nun Ihre Zeileneinstellungen mit dem folgenden Hintergrundverlauf:

Hintergrundfarbe links: rgba(155,29,32,0.08)
Verlaufshintergrund rechts Farbe: rgba(255,255,255,0)
Steigungsrichtung: 45deg
Startposition: 25%
Endposition: 0%

Spalte 2 Hintergrundfarbe links: rgba(255,255,255,0)
Spalte 2 Farbverlauf Hintergrund Rechte Farbe: #ffffff
Spalte 2 Gradientenrichtung: 45deg
Spalte 2 Startposition: 65%
Spalte 2 Endposition: 0%

Der Schlüssel zu diesen Hintergrundverlaufsdesigns ist, dass sie alle die gleiche Verlaufsrichtung von 45 Grad haben. Dann können Sie die Startposition verwenden, um das Design gleichmäßig zu verteilen.

Stileinstellungen für Listendesign #2

An dieser Stelle können wir wirklich Spaß daran haben, die Designs unserer Listen auf einzigartige Weise zu optimieren. In diesem zweiten Beispiel zeige ich Ihnen, wie einfach es ist, Ihr Design mit nur wenigen kleinen Änderungen zu verändern. Gehen Sie zum Textbaustein in der ersten Spalte und aktualisieren Sie die Einstellungen wie folgt:

Löschen Sie zuerst den Hintergrundverlauf.
Schriftstärke der ungeordneten Liste: Mittel
Textfarbe der ungeordneten Liste: rgba(0,0,0,0.5)
Schriftstärke der geordneten Liste: Regular
Textfarbe der geordneten Liste: #9b1d20
Überschrift 5 Schriftstärke: Dünn
Überschrift 5 Textfarbe: rgba(0,0,0,0.8)
Überschrift 5 Textgröße: 5vw (Desktop)

Kopieren Sie nun die Modulstile in das Textmodul in der rechten Spalte.

Hier ist das endgültige Design unseres zweiten Beispiels.

Listendesign #3

Für das dritte Beispiel dachte ich, es wäre gut, ein Beispiel für ein zentriertes, einspaltiges Listendesign zu geben. Um dieses Design zu erstellen, duplizieren Sie den zweiten Beispielabschnitt. Ändern Sie im neuen duplizierten Abschnitt die Zeilenstruktur in eine Spalte und löschen Sie dann den zweiten Textbaustein.

Aktualisieren Sie nun die Abschnittseinstellungen mit neuen Verlaufshintergrundfarben:

Verlaufshintergrund links Farbe: #559CAD
Farbverlauf Hintergrund Rechte Farbe: #4f6d7a

Aktualisieren Sie die Zeileneinstellungen mit einer neuen Hintergrundfarbe für den linken Farbverlauf:

Verlaufshintergrund links Farbe: #4f6d7a

Dann fügen Sie einen neuen Hintergrund Gefälle zum Textbaustein.

Hintergrundfarbe links: rgba(255,255,255,0)
Farbverlauf Hintergrund Rechte Farbe: #559cad
Steigungsrichtung: 45deg
Startposition: 75%
Endposition: 0%

Dies erzeugt eine dunklere Version des symmetrischen Hintergrunddesigns im Listendesign #2 für eine einspaltige Liste. Der Schlüssel zu diesem Design besteht darin, Hintergrundverläufe zu überlagern, indem Sie einen zum Abschnitt, der Reihe und dem Modul hinzufügen.

Stileinstellungen für Listendesign #3

In diesem dritten Beispiel möchte ich Ihnen zeigen, wie eine zentrierte Liste aussieht. Und für das geordnete Listenelement verwende ich einen traditionelleren Dezimal-/Zahlenstil.

Gehen Sie zu den Textmoduleinstellungen und aktualisieren Sie Folgendes:

Schriftart der geordneten Liste: Poppins
Schriftgewicht der bestellten Liste: Heavy
Textausrichtung der geordneten Liste: Mitte
Textgröße der geordneten Liste: 4vw (Desktop), 50px (Tablet)
Textfarbe der geordneten Liste: #f4f1bb
Art der geordneten Liste: Dezimal
Position des sortierten Listenstils: Innen
Geordneter Listenelementeinzug: 0vw

(Hinweis: Wenn Sie die Stilposition nach innen ändern, wird die Zahl über dem Kopfzeilentext gestapelt, was für dieses Design praktisch ist.)

Schriftstärke der ungeordneten Liste: Leicht
Textfarbe der ungeordneten Liste: #ffffff

Überschrift 5 Schriftart: Lato
Überschrift 5 Schriftstärke: Dünn
Überschrift 5 Buchstabenabstand: 6vw (Desktop), 70px (Tablet), 40px (Smartphone)
Überschrift 5 Textfarbe: #ffffff
Überschrift 5 Textgröße: 6vw

Benutzerdefinierte Polsterung (Desktop): 15 % links, 15 % rechts
Benutzerdefinierte Polsterung (Tablet): 5 % links, 5 % rechts

Sie sollten auch die benutzerdefinierte 50px linke Polsterung auf dem Smartphone für dieses Design entfernen.

Hier ist das endgültige Design.

Listendesign #4

Für dieses vierte Beispiel werde ich ein eher minimalistisches „Listen“-Design verwenden (sehen Sie, was ich dort gemacht habe?). Für die geordnete Liste verwende ich große römische Großbuchstaben in der Lato-Schriftart. Ich werde die Liste auch umrahmen, indem ich jedem Modul einen Kastenschatten hinzufüge.

Stileinstellungen für Listendesign #4

Um dieses Listendesign zu starten, duplizieren Sie den ersten Abschnitt mit Listendesign #1. Aktualisieren Sie dann die ersten Textbausteineinstellungen im neuen Abschnitt wie folgt:

Hintergrundverlauf löschen.

Schriftart der geordneten Liste: Lato
Schriftstärke der bestellten Liste: Leicht
Textfarbe der bestellten Liste: #000000
Textgröße der bestellten Liste: 6vw
Art der geordneten Liste: oberer Roman
Geordneter Listenelementeinzug: 0vw

Überschrift 5 Schriftart: Lato
Überschrift 5 Schriftstärke: Fett
Schriftstil für Überschriften: Unterstreichen
Überschrift 5 Unterstreichungsfarbe: rgba(0,0,0,0.14)
Überschrift 5 Unterstreichungsstil: doppelt
Überschrift 5 Textfarbe: #000000
Überschrift 5 Textgröße: 40px

Benutzerdefinierte Polsterung: 3vw links, 3vw rechts

Löschen Sie die benutzerdefinierte linke Polsterung für Tablets und Smartphones, die aus dem vorherigen Design übernommen wurden.

Horizontale Position des Kastenschattens: 6px
Vertikale Position des Kastenschattens: 6px
Stärke der Box-Schattenausbreitung: 0px
Stärke der Box-Schattenunschärfe: 0px
Schattenfarbe: #000000
Position des Boxschattens: Innerer Schatten

Kopieren Sie Modulstile in die zweite Spalte. Aktualisieren Sie dann die Position des Boxschattens auf den äußeren Schatten.

Hier ist das Endergebnis.

Das ist es!

Abschließende Gedanken

Nachdem Sie Ihre HTML-Listen in den obigen Beispielen erstellt und optimiert haben, sollten Sie besser verstehen, wie Sie die Leistungsfähigkeit der Textmoduleinstellungen wie ein Divi-Experte nutzen können. Sie müssen sich nicht mehr mit langweiligen Listendesigns in Ihren Inhalten zufrieden geben. Ich hoffe, diese Techniken werden Sie dazu inspirieren, erstaunliche Listendesigns für Ihr nächstes Projekt zu erstellen.

Ich würde mich freuen, einige Beispiele von Ihnen zu sehen, also zögern Sie nicht, in den Kommentaren zu teilen.

Danke schön!