Verwenden des Textmoduls von Divi zum Erstellen von Blockelementen in Ihrem Divi-Seitendesign

Textmodule sind ein wesentlicher Bestandteil jedes Seitendesigns, das Sie mit Divi erstellen, da sind wir uns sicher alle einig. Normalerweise werden sie verwendet, um Text auf einfache Weise anzuzeigen. Sie können jedoch auch Textmodule verwenden, um beeindruckende Designelemente zu erstellen. In früheren Blogbeiträgen haben wir Ihnen bereits gezeigt, wie Sie Ihr Webdesign mit Text aufwerten.

In diesem Tutorial werden wir weiterhin Optionen hinzufügen, aus denen Sie beim Entwerfen einer Seite und der Verwendung von Textmodulen auswählen können. Wie Sie vielleicht wissen oder nicht, gibt es mehrere verschiedene Texttypen, die Sie innerhalb desselben Textbausteins kombinieren können. Außerdem kann ein Modul mehrere Überschriften, Absätze, Links und mehr enthalten. In diesem Beitrag werden wir all diese Texttypen zu unserem Vorteil nutzen, um beeindruckende Blockelemente in unserem Seitendesign zu erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Lass uns anfangen!

Neuen regulären Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzuzufügen. Öffnen Sie dann die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #000000

Abstand

Gehen Sie als nächstes zu den Abstandseinstellungen Ihres Abschnitts und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 280px (Desktop), 150px (Tablet & Telefon)
• Untere Polsterung: 280px (Desktop), 150px (Tablet & Telefon)

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen geändert haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne Module hinzuzufügen, und lassen Sie die Zeile in den Größeneinstellungen die gesamte Breite des Bildschirms einnehmen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Schließlich fügen Sie in den Abstandseinstellungen einige benutzerdefinierte Auffüllungen hinzu.

• Spalte 1 linker Abstand: 100 Pixel (Desktop und Tablet), 50 Pixel (Telefon)
• Spalte 2 Benutzerdefinierte Auffüllung: 50px
• Spalte 3 Benutzerdefinierter Padding: 50px

Titeltextmodul zu Spalte 1 hinzufügen

Inhaltsbox

Zeit, die verschiedenen Module hinzuzufügen! Das erste Modul, das wir in der ersten Spalte benötigen, ist ein Textmodul. Fügen Sie dem Inhaltsfeld H2-Inhalte hinzu.

H2-Texteinstellungen

Gehen Sie dann zu den H2-Texteinstellungen und nehmen Sie einige Änderungen vor:

• Überschrift 2 Schriftart: Source Code Pro
• Überschrift 2 Schriftstil: Großbuchstaben
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße: 100px
• Überschrift 2 Buchstabenabstand: 24px

Abstand

Reduzieren Sie den Platz oben, indem Sie einen negativen oberen Rand verwenden.

• Oberer Rand: -50px

Beschreibungstextmodul zu Spalte 1 hinzufügen

Texteinstellungen

Das zweite benötigte Modul in der ersten Spalte ist ein Beschreibungstextmodul. Nachdem Sie Ihren Inhalt hinzugefügt haben, gehen Sie zu den Texteinstellungen und nehmen Sie einige Änderungen vor:

• Textfont: Source Code Pro
• Textfarbe: #ffffff
• Textausrichtung: Begründen

Größe

Reduzieren Sie auch die Breite des Textmoduls.

• Breite: 68 %

Abstand

Und zu guter Letzt schaffen Sie in den Abstandseinstellungen etwas Abstand zwischen diesem Textmodul und dem vorherigen.

• Oberer Rand: 200 Pixel (Desktop), 100 Pixel (Tablet und Telefon)
• Unterer Rand: 100px (Tablet & Telefon)

Blocktextmodul zu Spalte 2 hinzufügen

Inhaltsbox

Es ist Zeit, zur zweiten Spalte überzugehen! Hier werden wir Textmodule verwenden, um Blockelemente zu erstellen. Ein wesentlicher Bestandteil dieser Arbeit ist die richtige Strukturierung der Inhaltsbox. Im Druckbildschirm unten sehen Sie, dass wir einen H3-Titel, einen H4-Titel, einen Absatz und einen Link verwenden. Zwischen dem H4-Titel und dem Absatz sorgen wir dafür, dass auch noch etwas Platz bleibt.

Hintergrundfarbe

Fügen Sie dem Textmodul eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Texteinstellungen

Wir werden jeden der Texttypen einzeln ändern. Beginnen Sie mit der Änderung der Absatzeinstellungen.

• Textfont: Source Code Pro
• Textausrichtung: Links
• Textfarbe: Hell

Linktext-Einstellungen

Nehmen Sie dann einige zusätzliche Änderungen an den Linkeinstellungen vor.

• Link-Schriftart: Großbuchstaben & Unterstrichen
• Farbe der Link-Unterstreichung: #ffffff
• Linktextfarbe: #edf000
• Linktextgröße: 16px
• Link-Buchstaben-Abstand: 3px

Überschrift 3 Texteinstellungen

Der H3-Titel in unserer Inhaltsbox benötigt die folgenden Einstellungen:

• Überschrift 3 Schriftstil: Großbuchstaben
• Überschrift 3 Textgröße: 33px

Überschrift 4 Texteinstellungen

Fahren Sie fort, indem Sie die H4-Texteinstellungen öffnen und auch dort einige Änderungen vornehmen.

• Überschrift 4 Textfarbe: #4f4f4f
• Überschrift 4 Textgröße: 19px
• Überschrift 4 Buchstabenabstand: -1px

Größe

Um genau die gewünschte Form zu erstellen, reduzieren wir als nächstes die Breite des Textmoduls.

• Breite: 88 % (Desktop), 60 % (Tablet), 90 % (Telefon)

Abstand

Wir müssen auch die Abstandseinstellungen ändern.

• Linker Rand: 200px (Tablet)
• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Fügen Sie dann dem Textmodul einen subtilen Rahmen hinzu.

• Randbreite: 2px
• Randfarbe: #424242

Box Schatten

Und zum Abschluss fügen Sie einen bunten Kastenschatten hinzu.

• Horizontale Position des Kastenschattens: 19px
• Vertikale Position des Kastenschattens: 16px
• Stärke der Box-Schattenausbreitung: -4px
• Schattenfarbe: #f2ff00

Blocktextmodul zweimal klonen und in Spalte 3 platzieren

Um Zeit zu sparen, klonen wir den Block Text Module, den wir zweimal erstellt haben, und platzieren beide Duplikate in der dritten Spalte der Zeile.

Modifikationen des roten Textmoduls

Linktextfarbe ändern

Öffnen Sie das erste Textmodul in der dritten Spalte und ändern Sie die Linkfarbe.

• Linktextfarbe: #e02b20

Abstand ändern

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einen oberen Rand hinzu.

• Oberer Rand: -150px (Desktop), -20px (Tablet), 50px (Telefon)

Feldschattenfarbe ändern

Ändern Sie die Boxschattenfarbe in dieselbe Farbe, die für den Linktext verwendet wird.

• Schattenfarbe: #e02b20

Modifikationen des blauen Textmoduls

Linktextfarbe ändern

Ändern Sie auch die Linkfarbe des zweiten Textbausteins in der dritten Spalte.

• Linktextfarbe: #0ff3ff

Größe ändern

Ändern Sie als nächstes die Größeneinstellungen.

• Größen: 67 % (Desktop), 60 % (Tablet), 90 % (Telefon)

Abstand ändern

Und um eine Überlappung zwischen diesem Modul und den beiden anderen Textmodulen zu erzeugen, spielen Sie mit den benutzerdefinierten Randwerten herum.

• Oberer Rand: -20px (Desktop), -30px (Tablet), 50px (Telefon)
• Linker Rand: -160px (Desktop), 200px (Tablet), 0px (Telefon)

Feldschattenfarbe ändern

Zum Abschluss ändern Sie die Schattenfarbe der Box in dieselbe blaue Farbe, die für den Linktext verwendet wird, und Sie sind fertig!

• Schattenfarbe: #0ff3ff

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

Sie werden erstaunt sein, wie viele einzigartige Designs Sie mit Textmodulen in Kombination mit den integrierten Optionen von Divi erreichen können. Kein zusätzlicher CSS-Code erforderlich. In diesem Beitrag haben wir Ihnen gezeigt, wie Sie verschiedene Texttypen verwenden, um beeindruckende Blockelemente in Ihrem Divi-Seitendesign zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!