Wie man Text um Bilder in Divi umbricht (3 Möglichkeiten)
Veröffentlicht: 2019-05-27Das Umschließen von Text um Bilder ist eine gängige Designtechnik, die am häufigsten in Printmedien wie Zeitschriften und Zeitungen verwendet wird. Aber auch im Web findet man dies, insbesondere für Blog-Beiträge. Das Umschließen von Text um ein Bild ist eigentlich ein ziemlicher Standardteil von WordPress, der eine einfache Ausrichtungsanpassung im WYSIWYG-Editor beinhaltet. Das einzige Problem ist, dass es schwierig ist, den Stil Ihrer Seite mit dem Standard-WordPress-Editor anzupassen. Hier kann Divi helfen!
In diesem Tutorial zeige ich Ihnen 3 Möglichkeiten, wie Sie Divi verwenden können, um Text um Bilder zu wickeln. Auf diese Weise können Sie klassische Druckstil-Layouts mit der Leistungsfähigkeit von Divi erstellen, um Ihnen beim Design zu helfen. Hier ist, was wir behandeln werden:
- Wie man Text um Bilder (und Blockquotes) in einem Textmodul mit dem WYSIWYG-Editor umbricht
- So wickeln Sie Text um ein Bild, indem Sie ein Bildmodul neben einem Textmodul in Divi . schweben lassen
- So wickeln Sie Text um ein zentriertes Bild für ein einzigartiges zweispaltiges Layout
Obwohl sich dieses Tutorial auf Bilder konzentriert, können Sie den gleichen Prozess tatsächlich verwenden, um Text um jedes Modul in Divi zu umbrechen.
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf das Hauptdesign, das wir heute bauen werden.
Lass uns anfangen!
Abonnieren Sie unseren Youtube-Kanal
Laden Sie das Wrapping Text Around Images-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.
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.
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!
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, sollen wir?
Was Sie brauchen, um loszulegen
Um loszulegen, brauchst du nur Divi und ein paar Bilder.
- Divi – Stellen Sie sicher, dass das Divi-Theme installiert und aktiv ist. Wir erstellen unsere Designs von Grund auf mit dem Divi Builder im Frontend (visueller Builder).
- Bilder – Stellen Sie außerdem sicher, dass Sie mindestens ein Bild mit einer Größe von 400 x 250 Pixel für das Tutorial haben.
Wenn Sie bereit sind, gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu Seiten > Neu hinzufügen. Geben Sie Ihrer neuen Seite einen Titel und stellen Sie den Divi Builder im Frontend bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Jetzt sind Sie bereit zu gehen!
Wie man Text um Bilder und Blockquotes innerhalb eines Textmoduls mit dem WYSIWYG-Editor umbricht
WordPress macht es einfach, Text mit dem standardmäßigen WordPress-Editor (WYSIWYG) um Bilder zu wickeln. Und da das Textmodul von Divi denselben integrierten WordPress WYSIWYG-Editor hat, können wir dieselbe Methode verwenden, die WordPress-Benutzer immer verwendet haben, um Text um Bilder zu wickeln.
So geht's.
Erstellen Sie einen regulären Abschnitt mit einer einspaltigen Zeile und fügen Sie dann der Zeile ein Textmodul hinzu.
Aktualisieren Sie den Inhalt des Textbausteins mit Ihrer Kopie. Im Moment verwende ich ein paar Absätze von Lorem ipsum.
Wählen Sie nun, falls noch nicht geschehen, die Registerkarte "Visuell" im Inhaltseditor aus. Stellen Sie dann sicher, dass Sie oben im Inhaltsbereich, in dem Sie ein Bild hinzufügen möchten, klicken und auf die Schaltfläche Medien hinzufügen klicken.
Wählen Sie im Popup-Fenster der Medienbibliothek das Bild aus, das Sie verwenden möchten. Und unter den Einstellungen für die Anhangsanzeige wählen Sie entweder links oder rechts für die Ausrichtungsoption. Für dieses Beispiel möchte ich das Bild nach links positionieren.
WordPress fügt Ihrem Bild eine Klasse hinzu (genannt „alignleft“), die das Bild nach links schweben lässt. Die hinzugefügte float-Eigenschaft ermöglicht es dem Text, um das Bild zu fließen. WordPress fügt auch einen Puffer um das Bild hinzu, indem Ränder verwendet werden, um einen geringen Abstand zwischen dem Bild und dem umgebenden Text zu schaffen.
Und wenn Sie dem Bild eine richtige Ausrichtung geben, schwebt das Bild natürlich nach rechts, sodass der Text um das Bild herum fließen kann.
Sie können eine ähnliche Technik auch verwenden, um Text um ein Blockzitate in einem Textmodul zu umbrechen. Erstellen Sie dazu mit dem Content-Editor ein Blockquote.
Stylen Sie dann das Blockquote mit den integrierten Textmoduleinstellungen für ein Blockquote.
Gehen Sie dann zurück zum Inhaltseditor und wechseln Sie zum Text-Tab. Fügen Sie dann dem Blockquote-Tag etwas Inline-Styling hinzu, um einen Abstand um das Blockquote zu schaffen, und lassen Sie es nach links schweben. Ihr Blockquote-HTML sollte in etwa so aussehen.
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
Jetzt wird der Text um das Blockzitate umgebrochen.
So wickeln Sie Text um ein Bild, indem Sie ein Bildmodul neben einem Textmodul in Divi . schweben lassen
Um Text um ein Bildmodul zu wickeln, können wir das gesamte Bildmodul neben einem Textmodul schweben lassen. Dies kann eine bevorzugte Methode zur Verwendung des obigen WordPress-Editors sein, da Sie mit den Divi-Builder-Einstellungen die volle Kontrolle über den Stil Ihres Bildes haben, anstatt einem Bild-Tag Inline-Styling oder externes CSS hinzuzufügen.
So geht's.
Erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile mit dem Bild Ihrer Wahl ein Bildmodul hinzu. Das Bild, das ich verwende, stammt aus dem Charity Layout Pack und ist 400 x 250 Pixel groß.
Fügen Sie dann unter dem Bildmodul ein Textmodul mit einigen simulierten Textinhalten hinzu.
Jetzt, da beide Module vorhanden sind, müssen wir das Bild links vom Textmodul schweben lassen. Öffnen Sie dazu die Bildmoduleinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:
float:left;
Aktualisieren Sie dann den benutzerdefinierten Rand des Bildes, um den Puffer zu erstellen, den wir für den Textumbruch um das Bild benötigen:
Benutzerdefinierter Rand: 2 % oben, 2 % unten, 2 % rechts
Hier ist das Ergebnis.
Und wenn Sie das Bild nach rechts schweben lassen möchten, öffnen Sie die Einstellungen des Bildmoduls und ersetzen Sie das CSS durch Folgendes:
float:right;
Und aktualisieren Sie den Randabstand wie folgt:
Benutzerdefinierte Marge: 2% oben, 2$ unten, 2% links
Hier ist das Ergebnis.
Verwenden dieses Designs für mehrere Spalten
Sie können dieses Setup auch in mehreren Spalten verwenden, um ein Textumbruchdesign für die Präsentation Ihrer Dienste zu erstellen. Ändern Sie dazu das Spaltenlayout Ihrer Zeile in zwei Spalten.
Geben Sie dem Bild dann einen Prozentwert für die maximale Breite, damit es auf unterschiedliche Browserbreiten reagiert.
Max. Breite: 33,33 % (Desktop), 100 % (Telefon)
Kopieren Sie das Bild- und Textmodul aus der ersten Spalte und fügen Sie es in Spalte 2 ein. Aktualisieren Sie dann den Inhalt und die Bilder nach Bedarf.
Das ist es. Hier ist das Ergebnis.
So wickeln Sie Text um ein zentriertes Bild oder Modul für ein einzigartiges zweispaltiges Layout
In diesem Beispiel zeige ich Ihnen, wie Sie zwei Textspalten um ein zentriertes Bildmodul wickeln. Auf diese Weise können Sie ein einzigartiges Layout im Zeitschriften- oder Zeitungsstil erstellen. Da es jedoch keine CSS-Eigenschaft "float: center" gibt, müssen wir mit dem Layout etwas kreativ werden, damit dieses Design funktioniert.
So geht's.
Erstellen des Inhalts der obersten Zeile mit einem zentrierten Bild
Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann Ihrer Zeile ein Bildmodul hinzu. Laden Sie ein Bild hoch, das 400 x 250 Pixel groß ist. Die Dimensionierung muss für dieses Design genau sein.
Aktualisieren Sie dann die Designeinstellungen wie folgt:
Max. Breite: 400px (Desktop), 100 % (Tablet)
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 2 % oben, 2 % unten, 2 % links, 2 % rechts
Speichern Sie dann Ihre Einstellungen und öffnen Sie die Zeileneinstellungen. Nehmen Sie die untere Polsterung der Reihe heraus.
Benutzerdefinierte Polsterung: 0px unten
Erstellen Sie die zweispaltige Textzeile
Erstellen Sie unter der Zeile mit dem Bild eine neue Zeile mit einem zweispaltigen Layout.
Fügen Sie in Spalte 1 ein Textmodul mit simuliertem Inhalt hinzu.
Kopieren Sie dann das Textmodul und fügen Sie es in Spalte 2 für eine zweite Textspalte ein.
Leeren Raum schaffen mit schwebenden Trennwänden
Um den Platz zu schaffen, den wir für das Bild benötigen, können wir Teilermodule verwenden. In der linken Spalte erstellen wir ein Teilermodul, das halb so groß ist wie das Bild und verschieben es nach rechts, sodass unser Textmodul um den Teiler wickelt. Dann erstellen wir in der rechten Spalte einen weiteren Teiler, der halb so groß ist wie das Bild und verschieben ihn nach links.
Erstellen Sie dazu ein Trennmodul und platzieren Sie es direkt über dem Textmodul in Spalte 1.
Aktualisieren Sie dann die Einstellungen des Teilermoduls wie folgt:
Teiler anzeigen: NEIN
Breite: 200px
Höhe: 250px
Stellen Sie sicher, dass die Höhe der Höhe des zuvor erstellten Bildes entspricht und die Breite genau der Hälfte der Breite des Bildes entspricht.
Für Mobilgeräte möchten wir die Trennwände auf Tablet und Telefon deaktivieren. Aktualisieren Sie dazu die Sichtbarkeitseinstellungen, um die Tablet- und Telefonanzeige zu deaktivieren.
Nachdem unser erster Teiler erstellt wurde, kopieren Sie das Teilermodul und fügen Sie es über dem Textmodul in Spalte 2 ein.
Als nächstes müssen wir unsere Teiler schweben lassen. Öffnen Sie dazu die Einstellungen des Teilers in Spalte 1 und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:
float: right;
Öffnen Sie dann die Einstellungen für das Trennmodul in Spalte 2 und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu:
float: left;
Verschieben des Bildes mit benutzerdefiniertem Rand
Jetzt müssen wir nur noch unser Bild in der ersten Reihe nach unten bringen, damit es in den Raum passt, den wir mit unseren Trennwänden geschaffen haben.
Öffnen Sie die Bildmoduleinstellungen und fügen Sie die folgenden benutzerdefinierten Ränder hinzu:
Benutzerdefinierter Rand: -250px unten (Desktop), 20px (Tablet)
Hier das bisherige Ergebnis.
Hinzufügen eines Titels zum Abschnitt
Dieser letzte Schritt ist optional, aber wenn Sie dem Abschnitt einen Titel hinzufügen möchten, erstellen Sie ein Textmodul und positionieren Sie es über dem Bild.
Fügen Sie dann dem Textbaustein folgenden Inhalt hinzu:
<h2>Learn more about how to give</h2>
Aktualisieren Sie dann die Texteinstellungen wie folgt:
Hintergrundfarbe: #000000
Überschrift 2 Schriftart: Playfair Display
Überschrift 2 Textausrichtung: Mitte
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Zeilenhöhe: 2em
Ausrichten von Text für ein saubereres Textumbruchdesign
Beim Umbrechen von Text um Bilder, insbesondere wenn der Text so zentriert ist, ist es immer eine gute Idee, den umgebenden Text ausrichten zu verwenden. In diesem Fall müssen wir nur die Textausrichtung ändern, um für beide Textmodule zu rechtfertigen, die unseren Umbruchtext enthalten.
Endergebnis
Hier ist das Endergebnis.
Und hier ist es auf dem Tablet- und Telefondisplay.
Abschließende Gedanken
Wenn Sie wissen, wie Sie Text effektiv um Bilder wickeln, können Ihre Inhalte wirklich professionell und leicht lesbar aussehen. Das Konzept ist ziemlich geradlinig. Alles, was Sie tun müssen, ist, Ihr Bild nach rechts oder links zu verschieben und dann einen benutzerdefinierten Abstand um das Bild als Puffer zu verwenden. Und was ich liebe, ist, dass Sie jedes Modul (nicht nur Bilder) schweben lassen können, um Text um jede Art von Inhalt in Divi zu wickeln. Ich hoffe, das gibt Ihnen ein wenig Inspiration für Ihr nächstes Projekt.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!