Textumbruchbilder sind eine gängige Designtechnik, die typischerweise in Printmedien wie Zeitschriften und Zeitungen verwendet wird. Aber auch im Web, insbesondere bei Blogbeiträgen, findet man diese Verwendung. Das Umbrechen von Text um ein Bild ist eigentlich ein ziemlich normaler Teil von WordPress, der eine einfache Ausrichtungsanpassung im WYSIWYG-Editor beinhaltet. Das einzige Problem ist, dass es schwierig ist, Ihre Seite mit dem standardmäßigen WordPress-Editor zu gestalten. Das ist da Divi kann helfen !

Obwohl sich dieses Tutorial auf Bilder konzentriert, können Sie denselben Prozess tatsächlich verwenden, um Text in jedem Modul umzubrechen. Divi.

Übersicht

Hier ist ein Blick auf das Hauptdesign, das wir heute bauen werden.

Divi Design Vorschau

In diesem Beispiel werde ich Ihnen zeigen, wie Sie zwei Textspalten um ein zentriertes Bildmodul wickeln. Auf diese Weise können Sie ein einzigartiges Layout im Magazin- oder Zeitungsstil erstellen. Da es jedoch keine CSS-Eigenschaft "float: center" gibt, benötigen wir ein wenig Kreativität beim Layout, damit dieses Design funktioniert.

Hier ist, wie es geht.

Erstellen von Inhalten in der oberen Reihe mit einem zentrierten Bild

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer Zeile aus einer Spalte. Fügen Sie dann Ihrer Zeile ein Bildmodul hinzu. Laden Sie ein Bild mit einer Größe von 400 x 250 Pixel hoch. Die Größe muss für dieses Design genau sein.

Aktualisieren Sie dann die Entwurfsparameter wie folgt:

Maximale Breite: 400px (Desktop), 100% (Tablet)
Ausrichtung des Moduls: Mitte
Benutzerdefinierte Polsterung: 2% oben, 2% unten, 2% links, 2% rechts

Ändern Sie den Divi-Modulstil

Speichern Sie dann Ihre Einstellungen und öffnen Sie die Zeileneinstellungen. Ziehen Sie die Polsterung am unteren Rand der Reihe heraus.

Benutzerdefinierte Polsterung: 0px unten

Divi Line Einstellungen

Erstellen Sie die zweispaltige Textzeile

Erstellen Sie unterhalb der Zeile mit dem Bild eine neue Zeile mit einem zweispaltigen Layout.

Divi Abschnitt mit zwei Spalten

Fügen Sie in Spalte 1 einen Textbaustein mit a hinzu Inhalt Dummy.

Fügen Sie das Textfeld divi 1 hinzuKopieren Sie dann den Textbaustein und fügen Sie ihn in die 2-Spalte für eine zweite Textspalte ein.

Divi-Textmodul einfügen

Leeren Raum mit schwebenden Trennwänden schaffen

Um den Platz zu schaffen, den wir für das Bild benötigen, können wir Teilungsmodule verwenden. In der linken Spalte erstellen wir ein Teilermodul, das halb so groß wie das Bild ist, und schweben es nach rechts, sodass unser Textmodul den Teiler umschließt. Als nächstes erstellen wir in der rechten Spalte ein weiteres Trennzeichen, das halb so groß wie das Bild ist, und schweben es nach links.

Erstellen Sie dazu ein Trennmodul und platzieren Sie es direkt über dem Textmodul in der 1-Spalte.

Aktualisieren Sie dann die Einstellungen des geteilten Moduls wie folgt:

Show Divider: NO
Breite: 200px
Höhe: 250px

Stellen Sie sicher, dass die Höhe der zuvor erstellten Höhe entspricht und dass die Breite genau die Hälfte der Breite des Bildes beträgt.

Divi Breitenabschnittseinstellung

Für Handys möchten wir Trennzeichen auf Tablet und Telefon deaktivieren. Aktualisieren Sie dazu die Sichtbarkeitseinstellungen, um die Anzeige des Tablets und des Telefons auszuschalten.

Deaktivieren am

Nachdem unser erster Separator erstellt wurde, kopieren Sie das Separationsmodul und fügen Sie es über dem Textmodul in die 2-Spalte ein.

Divi Separator Modul

Als nächstes müssen wir unsere Trennwände schweben lassen. Öffnen Sie dazu die Teilereinstellungen in Spalte 1 und fügen Sie dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:

float: right;

Fügen Sie die Eigenschaft divi float hinzu

Öffnen Sie dann die Einstellungen des Teilermoduls in Spalte 2 und fügen Sie dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:

float: left;

Linker Schwimmerteiler 1

Verschieben Sie das Bild mit einem benutzerdefinierten Rand

Jetzt müssen wir nur noch unser Bild in der ersten Reihe reduzieren, damit es in den Raum passt, den wir mit unseren Trennwänden geschaffen haben.

Öffnen Sie die Einstellungen des Bildmoduls und fügen Sie die folgenden benutzerdefinierten Ränder hinzu:

Benutzerdefinierter Rand: Niedrig - 250px (Desktop), 20px (Tablet)

Hier ist das bisherige Ergebnis.

Aktuelle Designabteilung

Fügen Sie dem Abschnitt einen Titel hinzu

Dieser letzte Schritt ist optional. Wenn Sie dem Abschnitt jedoch einen Titel hinzufügen möchten, erstellen Sie ein Textmodul und positionieren Sie es über dem Bild.

Dann fügen Sie die hinzu Inhalt Folgendes zum Textbaustein:

Erfahren Sie mehr darüber, wie man gibt

Aktualisieren Sie dann die Texteinstellungen wie folgt:

Hintergrundfarbe: #000000
Titel 2-Schriftart: Playfair-Anzeige
Titel 2-Textausrichtung: Zentraler Titel
2-Textfarbe: #ffffff
Titel 2 Zeilenhöhe: 2em

So spenden Sie ein Textmodul

Begründen Sie Text für ein saubereres Textumbruchdesign

Wenn Sie Text mit Bildern umgeben, insbesondere wenn der Text auf diese Weise zentriert ist, ist es immer eine gute Idee, den umgebenden Text zu rechtfertigen. In diesem Fall ändern Sie einfach die Ausrichtung des Textes in rechtfertigen die zwei Textbausteine ​​mit unseren Inhalt des Umbruchs von Text.

Divi ausgerichteter Text

Endergebnis

Hier ist das Endergebnis.

Zentralisiertes Bild und gerechtfertigter Text

Abschließende Gedanken

Wenn Sie wissen, wie Sie Text effektiv mit Bildern umgeben, können Sie Ihre Inhalte wirklich professionell und leicht lesbar aussehen lassen. Das Konzept ist recht einfach. Alles, was Sie tun müssen, ist, Ihr Bild nach rechts oder links zu verschieben und dann zum Puffern einen benutzerdefinierten Abstand um das Bild herum zu verwenden. Und was mir gefällt, ist, dass Sie jedes Modul (nicht nur Bilder) verwenden können, um Text in jede Art von Inhalt einzufügen Divi. Ich hoffe, das gibt Ihnen ein wenig Inspiration für Ihr nächstes Projekt.

Ich hoffe, von Ihnen in den Kommentaren zu hören.