So erstellen Sie 3 atemberaubende Monospace-Schriftdesigns in Divi

Monospaced-Schriften sind eine wunderbare Bereicherung für das Webdesign. Sie sind besonders nützlich, um Designs zu erstellen, die eine schöne Symmetrie und Ausgewogenheit aufweisen. Eine monospaced Schriftart besteht aus Buchstaben und Zeichen, die jeweils die gleiche Breite (oder horizontalen Abstand) haben. Als solche bieten sie eine konsistente und elegante Struktur für die Anzeige von Text. Aus diesem Grund werden bei der Codierung häufig Monospace-Schriften verwendet.

In diesem Tutorial werden wir drei atemberaubende Monospace-Schriftdesigns in Divi erstellen. Wir werden erklären, wie man Textmodule richtig anpasst, um monospaced Schriftarten auf eine ziemlich einzigartige Weise zu positionieren und zu gestalten und vieles mehr.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kurzer Blick auf die Designs, die wir in diesem Tutorial erstellen werden.

Monospace-Schriftdesign Nr. 1: Logo-Stil

Beginnen Sie mit dem Bauen von Design Nr. 1

Monospaced Font Design #2: Große Buchstabenblöcke

Beginnen Sie mit dem Bauen von Design #2

Monospaced Font Design #3: Kreuzworträtsel

Beginnen Sie mit dem Bauentwurf #3

Laden Sie das Monospaced Font Designs 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.

Laden Sie die Dateien herunter

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.

HERUNTERLADEN

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!

Abonnieren Sie unseren Youtube-Kanal

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, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das installierte Divi Theme (oder das Divi Builder Plugin, wenn Sie das Divi Theme nicht verwenden).
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Laden Sie ein paar simulierte Bilder in die Medienbibliothek hoch, um sie für das Tutorial zu verwenden. Wir verwenden ein 200 x 200 Pixel großes Bildlogo aus dem HVAC-Layoutpaket und zwei Hintergrundbilder (mindestens 1920 Pixel breit) aus dem Cake Maker Layout Pack und dem Home Improvement Layout Pack.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Monospace-Schriftdesign Nr. 1: Logo-Stil

Beginnen wir mit einem einfachen Monospace-Schriftdesign, das die symmetrische Balance der Buchstaben hervorhebt. Da die Buchstaben gleichmäßig verteilt sind, eignen sich Schriftarten mit Monospace hervorragend für Grafiken und Logos. Hier ist ein kurzes Beispiel, wie Sie die Monospace-Schrift mit einem einfachen Bildsymbol integrieren können, um eine schöne Grafik zu erstellen.

Erstellen Sie zunächst einen regulären Abschnitt mit einer einspaltigen Zeile.

Bevor wir das Textmodul hinzufügen, fügen wir dem Abschnitt einen Hintergrund hinzu. Der Hintergrund besteht aus einem zentrierten Symbolbild mit einem dunkelgrauen Hintergrund. Das von uns verwendete Symbolbild stammt aus dem HVAC Layout Pack. Stellen Sie sicher, dass das Bildsymbol ungefähr 200 x 200 Pixel groß ist, da wir die tatsächliche Größe als Hintergrundbild verwenden.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #121212
• Hintergrundbild: [200px x 200px Bildsymbol einfügen]
• Hintergrundbildgröße: Tatsächliche Größe
• Position des Hintergrundbilds: Mitte

Fügen Sie das Textmodul hinzu

Wenn der Abschnitt fertig ist, fügen Sie der einspaltigen Zeile ein Textmodul hinzu.

Hier fügen wir den Text mit einer monospaced Schriftart hinzu. Der Vorteil von einzeiligen Buchstaben besteht darin, dass Sie den mittleren Buchstaben des Textes leicht auf der Seite zentrieren können, da jeder Buchstabe die gleiche Breite hat. Dies erleichtert die Ausrichtung mit dem Hintergrundbildsymbol, das wir dem Abschnitt hinzugefügt haben.

Öffnen Sie die Textbaustein-Einstellungen und aktualisieren Sie den Body-Inhalt mit dem Wort „elegant“. Eigentlich können Sie fast jedes Wort verwenden, das eine ungerade Anzahl von Buchstaben hat, so dass wir einen mittleren Buchstaben haben, der das Hintergrundbild-Symbol schön überlappt.

Hinzufügen des Monospaced-Schriftdesigns

Divi hat ungefähr 12 verschiedene monospaced Schriftarten, die im Divi-Builder enthalten sind, aus denen wir wählen können. Um sie zu sehen, können wir auf eine Textschriftart klicken und „mono“ in die Suchleiste eingeben. Dies zeigt die Liste der verfügbaren monospaced Schriftarten.

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Textschriftart: Droid Sans Mono
• Text Textgröße: 5vw
• Text Buchstabenabstand: 1.3em
• Textzeilenhöhe: 1em

Diese Kombination aus der Längeneinheit vw für die Textgröße und der Längeneinheit em für den Buchstabenabstand und die Zeilenhöhe stellt sicher, dass der Text perfekt auf alle Browsergrößen reagiert.

Abstand

Nachdem die Schriftart fertig ist, fügen Sie dem Textmodul etwas Abstand hinzu, um sicherzustellen, dass der Text perfekt zentriert ist. Wir können sehen, dass der Text aufgrund des Buchstabenabstands etwas außermittig ist. Wir können dies leicht beheben, indem wir einen linken Abstand hinzufügen, der dem Wert entspricht, den wir für den Buchstabenabstand hinzugefügt haben.

Aktualisieren Sie Folgendes:

• Rand: 0px unten
• Polsterung: 2em oben, 2em unten, 1,3em links

Ändern Sie die Farbe des mittleren Buchstabens

Eine einfache Möglichkeit, die Farbe eines einzelnen Buchstabens in Divi zu ändern, besteht darin, die Inline-Stiloptionen zu verwenden, wenn Sie den Builder am Frontend verwenden.

Markieren Sie einfach den Buchstaben, den Sie ändern möchten, und klicken Sie in der Menüleiste auf das Symbol für die Textfarbe.

Fügen Sie dann den folgenden Farbcode hinzu: rgba(248, 142, 96, 0.54)

Das ist es!

Zeile auf volle Breite machen

Wir müssen etwas Platz für den Text schaffen, der hinzugefügt wird, also fahren Sie fort und machen Sie die Zeile in voller Breite, indem Sie die Zeileneinstellungen öffnen und Folgendes aktualisieren:

• Breite: 100%
• Maximale Breite: 100%

Endergebnis

Hier ist das Endergebnis.

Und wenn Sie möchten, können Sie im Text ein Leerzeichen für das mittlere Zeichen hinzufügen, um das Hintergrundbildsymbol für den leeren Raum zu verwenden. So würde das aussehen.

Monospaced Font Design #2: Große Buchstabenblöcke

Dieses nächste Design zeigt die blockartige Schriftstruktur, die mit monospaced Schriftarten möglich ist. Im Gegensatz zu normalen Schriftarten (mit variabler Breite) stapeln sich monospaced Schriftarten übereinander für ein ausgewogenes Design, das modern und ansprechend für das Auge ist.

So geht's.

Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Bevor Sie ein Modul hinzufügen, aktualisieren Sie den Abschnitt wie folgt mit einem Hintergrunddesign:

• Hintergrundfarbe links: #fcd1e5
• Hintergrundfarbe rechts: rgba(255,255,255,0)
• Steigungsrichtung: 135deg
• Startposition: 50%
• Endposition: 76%

Fügen Sie dann ein Hintergrundbild hinzu. Ich verwende einen aus dem Cake Maker Layout Pack.

Zeilenbreite hinzufügen

Aktualisieren Sie als Nächstes die Zeilenbreite wie folgt:

• Breite: 100%
• Maximale Breite: 100%

Fügen Sie das Textmodul hinzu

Sobald Sie eine Zeile mit voller Breite haben, fügen Sie der Zeile ein Textmodul hinzu.

Aktualisieren Sie dann den Hauptteilinhalt wie folgt:

<p>dividesign<a href="#">learnmore</a></p>

Dann formatieren Sie den Absatztext wie folgt:

• Textschriftart: Overpass Mono
• Textschriftart: TT
• Text Textfarbe: #2e298f
• Text Textgröße: 15vw
• Text Buchstabenabstand: 0.16em
• Textzeilenhöhe: 1em

Wir werden dem Linktext wie folgt einen anderen Stil hinzufügen:

• Link-Schriftart: Unterstreichen
• Linktextfarbe: #2e298f
• Linktextgröße: 3.5vw
• Link-Buchstaben-Abstand: 0em

Abstand

Nachdem der Text formatiert wurde, aktualisieren Sie den Abstand wie folgt:

• Rand: 0px unten
• Polsterung: 0.16em links, 3em rechts

Danach speichern Sie die Einstellungen. Verwenden Sie dann die Inline-Stiloptionen, um die Farbe der Buchstaben zu ändern, wie wir es im ersten Designbeispiel weiter oben im Beitrag getan haben.

Markieren Sie dazu die oberen vier Buchstaben und ändern Sie die Farbe in Weiß.

Ändern Sie die Farbe des zweiten Buchstabens wie folgt: #f34a43

Markieren Sie zuletzt die ersten fünf Buchstaben im Linktext („lernen“) und ändern Sie die Farbe wie folgt: #f34a43.

Endgültiges Design

Schauen wir uns nun das Endergebnis auf einer Live-Seite an.

Monospaced Font Design #3: Kreuzworträtsel

Dieses letzte Design nutzt monospaced Schriftarten, um ein Kreuzworträtsel-Layout für Ihren Text zu erstellen. So geht's.

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Öffnen Sie vor dem Hinzufügen von Modulen die Abschnittseinstellungen und fügen Sie ein Hintergrundbild mit einem Farbverlauf wie folgt hinzu:

• Hintergrundbild: [Bild einfügen]
• Hintergrundfarbe links:
• Hintergrundfarbe rechts:
• Verlaufsrichtung: 90deg
• Startposition: 25%
• Endposition: 0%
• Farbverlauf über dem Hintergrundbild platzieren: JA

Zeileneinstellungen

Sobald der Abschnittshintergrund fertig ist, öffnen Sie die Zeileneinstellungen mit einer neuen Breite und etwas Abstand.

• Breite: 100%
• Maximale Breite: 100%
• Polsterung: 22vw oben, 5vw links

Textbaustein hinzufügen

Nachdem die Zeile aktualisiert wurde, fügen Sie der Zeile ein neues Textmodul mit dem Wort „mono“ als Hauptinhalt hinzu.

Aktualisieren Sie dann das Textmodul-Design wie folgt:

• Textschriftart: Rubik Mono One
• Text Textfarbe: #faac00
• Text Textgröße: 8vw
• Text Buchstabenabstand: 0.15em
• Textzeilenhöhe: 1em

Duplizieren Sie das Textmodul

Um das Design unserer nächsten beiden Textblöcke zu beschleunigen, duplizieren wir das soeben entworfene Textmodul zweimal, sodass Sie insgesamt drei übereinander gestapelte Textmodule haben.

Textmodul #2 aktualisieren

Nachdem wir das Textmodul dupliziert haben, öffnen Sie die Einstellungen für das zweite (mittlere) Textmodul und ändern Sie den Fließtext in das Wort „fonts“.

Aktualisieren Sie dann Folgendes:

• Körper: "Schriften"
• Hintergrundfarbe: #dddddd
• Text Textfarbe: #930565
• Breite: 0,86em
• Rand: -3em oben, 2em links

Beachten Sie, wie eine Änderung der Breite des Textmoduls dazu führt, dass der Text vertikal angezeigt wird. Und weil es sich um eine Monospace-Schrift handelt, stapeln sie sich gleichmäßig. Und mit einer Breite, die der Größe jedes Buchstabenblocks entspricht, können wir den Textbaustein in Schritten von 1em verschieben. -3em oberer Rand bringt den Text also um genau 3 Buchstabenblöcke nach oben. Und 2em linker Rand verschiebt das Textmodul über genau 2 Buchstabenblöcke nach rechts. Dies macht es einfach, die Elemente in einem Kreuzworträtsel-Layout wie diesem zu positionieren.

Box Schatten

Fügen wir einen Boxschatten hinzu, um die Hintergrundgröße hinter dem Textmodul zu erhöhen.

• Box Shadow: siehe Screenshot
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 0px
• Stärke der Box-Schattenausbreitung: 0.08em
• Schattenfarbe: #dddddd (wie Hintergrundfarbe)

Z-Index

Um sicherzustellen, dass dieser Textblock über den anderen Textmodulen bleibt, aktualisieren Sie den z-Index wie folgt:

• Z-Index: 11

Textmodul #3 aktualisieren

Wenn Textbaustein #2 fertig ist, öffnen Sie die Einstellungen für den dritten Textbaustein und ändern Sie den Fließtext in das Wort „spaced“.

Verschieben Sie dann das Modul mit unseren magischen Em-Margin-Werten:

• Rand: -1em oben, 2em links

Endgültiges Design

Handy, Mobiltelefon

Da diese Designs mit vw- und em-Längeneinheiten erstellt werden, bleibt das Design für alle Browsergrößen konsistent. So sieht das Design auf dem Tablet- und Telefondisplay aus.

Hinweis: Das einzige Element, das nicht reagiert, ist das Hintergrundbild-Symbol im ersten Design. Sie können jedoch problemlos ein kleineres Hintergrundbild auf Tablet und Telefon hinzufügen, um dies zu beheben.

Abschließende Gedanken

Das Beste an der Erstellung von Monospace-Schriftdesigns in Divi ist vielleicht die Vielseitigkeit der Schriftstile. Schon ein paar kleine Handgriffe können einen großen Unterschied machen. Außerdem sind die Anwendungen für jede Website sehr praktisch.

Welches dieser drei Beispiele fandest du am vielversprechendsten?

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!