Springe zum Hauptinhalt

So erstellen Sie ein von Text umgebenes Bild auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Umschließen von Bildern mit Text ist eine gängige Designtechnik, die normalerweise in Printmedien wie Zeitschriften und Zeitungen verwendet wird. Man findet das aber auch im Web, insbesondere für Blogposts. Das Umbrechen eines Bildes mit Text ist eigentlich ein Standardbestandteil von WordPress, bei dem die Ausrichtung einfach im WYSIWYG-Editor angepasst wird. Das einzige Problem ist, dass es schwierig ist, den Stil Ihrer Seite mit dem Standard-WordPress-Editor anzupassen. Hier kann Divi helfen!

Obwohl sich dieses Tutorial auf Bilder konzentriert, können Sie auf die gleiche Weise Text in ein beliebiges Divi-Modul einbinden.

Übersicht

Hier ist eine Übersicht über das Hauptdesign, das wir heute bauen werden.

In diesem Beispiel zeige ich Ihnen, wie Sie zwei Textspalten um ein zentriertes Bildmodul wickeln. Auf diese Weise können Sie ein Layout im Magazinstil oder als Einzeljournal erstellen. Da es jedoch keine CSS-Eigenschaft "float: center" gibt, benötigen wir etwas Kreativität beim Layout, damit dieser Entwurf 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 Spaltenzeile. Fügen Sie dann Ihrer Zeile ein Bildmodul hinzu. Laden Sie ein Bild von 400-Pixeln auf 250-Pixel herunter. Die Dimensionierung muss für diesen Entwurf 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 Leitungseinstellungen. Entfernen Sie die Polsterung am unteren Rand der Reihe.

Benutzerdefinierte Polsterung: 0px unten

Erstellen Sie die zweispaltige Textzeile

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

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Fügen Sie in der 1-Spalte einen Textbaustein mit Dummy-Inhalten hinzu.

Kopieren Sie dann den Textbaustein und fügen Sie ihn in die 2-Spalte für eine zweite Textspalte ein.

Leeren Raum mit schwebenden Trennzeichen schaffen

Um den Platz zu schaffen, den wir für das Bild benötigen, können wir Unterteilungsmodule verwenden. In der linken Spalte erstellen wir ein Unterteilungsmodul mit der halben Größe des Bildes und verschieben es nach rechts, sodass unser Textmodul die Unterteilung umschließt. Dann erstellen wir in der rechten Spalte einen weiteren Separator, der zweimal kleiner als das Bild ist, und verschieben ihn 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 mit der zuvor erstellten Höhe übereinstimmt und dass die Breite genau der Hälfte der Breite des Bildes entspricht.

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

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Dann müssen wir unsere Teiler schweben lassen. Öffnen Sie dazu die Teilereinstellungen in der 1-Spalte und fügen Sie dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:

float: right;

Öffnen Sie dann die Parameter des Divisionsmoduls in der 2-Spalte und fügen Sie den folgenden benutzerdefinierten CSS-Code zum Hauptelement hinzu:

float: left;

Verschieben des Bildes mit einem benutzerdefinierten Rand

Wir müssen nur unser Image in der ersten Reihe verkleinern, damit es in den Raum passt, den wir mit unseren Separatoren 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 Ergebnis soweit.

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.

Fügen Sie dann dem Textbaustein den folgenden Inhalt hinzu:

<h2> Weitere Informationen zum Verschenken von </ h2>

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 den Text für einen saubereren Textumbruch

Wenn Sie Text mit Bildern umgeben, insbesondere wenn der Text auf diese Weise zentriert ist, ist es immer ratsam, den Text darum herum auszurichten. In diesem Fall ändern Sie einfach die Textausrichtung auf rechtfertigen die zwei Textbausteine ​​mit unserem Skin-Textinhalt.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Endergebnis

Hier ist das Endergebnis.

Abschließende Gedanken

Wenn Sie wissen, wie man Bildtext effektiv umgibt, sieht Ihr Inhalt wirklich professionell und leicht lesbar aus. Das Konzept ist recht einfach. Alles, was Sie tun müssen, ist, Ihr Bild nach rechts oder links zu verschieben und dann einen benutzerdefinierten Abstand um das Bild für den Puffer zu verwenden. Und ich mag es, dass Sie jedes Modul (nicht nur Bilder) verwenden können, um Text in eine beliebige Art von Inhalt in Divi einzufügen. Ich hoffe, das gibt Ihnen ein wenig Inspiration für Ihr nächstes Projekt.

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

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren