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 901.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]

Textumbruchbilder sind eine gängige Designtechnik, die normalerweise in Printmedien wie Zeitschriften und Zeitungen verwendet wird. Sie können dies aber auch im Web finden, insbesondere für Blog-Beiträge. Das Umschließen eines Bildes mit Text ist eigentlich ein Standardbestandteil von WordPress, der eine einfache Anpassung der Ausrichtung im WYSIWYG-Editor umfasst. 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 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.

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]

Divi Abschnitt mit zwei Spalten

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

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

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]

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.

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

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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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 Textmodule mit unserem Skin-Textinhalt.

Divi ausgerichteter Text

Endergebnis

Hier ist das Endergebnis.

Zentralisiertes Bild und gerechtfertigter Text

Abschließende Gedanken

Wenn Sie wissen, wie Sie Text in Bildern effektiv umgeben, können Ihre Inhalte professionell und leicht lesbar aussehen. Das Konzept ist recht einfach. Alles, was Sie tun müssen, ist, Ihr Bild nach rechts oder links zu schweben und dann einen benutzerdefinierten Abstand um das Bild für den Puffer 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 in Divi einzufügen. Ich hoffe, dies 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 1 Kommentar

  1. 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

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