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.
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
Speichern Sie dann Ihre Einstellungen und öffnen Sie die Zeileneinstellungen. Ziehen Sie die Polsterung am unteren Rand der Reihe heraus.
Benutzerdefinierte Polsterung: 0px unten
Erstellen Sie die zweispaltige Textzeile
Erstellen Sie unterhalb der Zeile mit dem Bild eine neue Zeile mit einem zweispaltigen Layout.
Fügen Sie in Spalte 1 einen Textbaustein mit a hinzu Inhalt Dummy.
Kopieren Sie dann den Textbaustein und fügen Sie ihn in die 2-Spalte für eine zweite Textspalte ein.
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.
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.
Nachdem unser erster Separator erstellt wurde, kopieren Sie das Separationsmodul und fügen Sie es über dem Textmodul in die 2-Spalte ein.
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;
Öffnen Sie dann die Einstellungen des Teilermoduls in Spalte 2 und fügen Sie dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:
float: left;
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.
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
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.
Endergebnis
Hier ist das Endergebnis.
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.
Guten Tag,
Ich versuche, dieses Tutorial so anzupassen, dass es ein Video umgibt ... aber ich kann nicht.
Ist das Verfahren mehr oder weniger dasselbe?
Danke gute Nacht. Stef