Springe zum Hauptinhalt

So erstellen Sie Bildreflexionen 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]

Das Entwerfen von Reflexionen für Bilder und Text ist eine klassische Designtechnik, mit der Inhalte auf einer Webseite aufgepeppt werden können. Darüber hinaus erleichtert Divi die Erstellung dieser Reflexionen direkt aus Divi Builder, ohne dass ein Bildbearbeitungsprogramm verwendet werden muss.

In diesem Tutorial zeige ich Ihnen, wie Sie Reflexionen für Bilder auf Divi entwerfen. Der Schlüssel zum Durchführen von Reflexionen besteht darin, die Transformationsoption von Divi zu verwenden, um eine Spiegelversion eines Elements zu erstellen. Danach können Sie ein benutzerdefiniertes Overlay hinzufügen, das ich Ihnen zeigen werde, wie Sie es mit einem Textmodul verwenden.

Fangen wir an!

Übersicht

Hier ist eine Übersicht der Designs, die wir in diesem Tutorial erstellen werden.

Divi-Modul mit Reflexionen

Was Sie brauchen, um loszulegen

Für den Anfang brauchen Sie nur Divi. Stellen Sie sicher, dass das Divi-Design installiert und aktiv ist. Wir werden unsere Designs mit Divi Builder am Frontend (Visual Builder) von Grund auf neu erstellen. Für dieses Tutorial benötigen Sie auch einige Dummy-Bilder (ein Hintergrundbild von ca. 1920 x 600 Pixel und ein weiteres Bild von ca. 500 x 350 Pixel).

Wenn Sie fertig sind, gehen Sie zu Ihrem WordPress-Dashboard und gehen Sie zu Seiten> Hinzufügen. Geben Sie Ihrer neuen Seite einen Titel und stellen Sie Divi Builder im Frontend bereit. Wählen Sie die Option "Von Grund auf neu erstellen". Jetzt können Sie loslegen!

Die Grundidee für die Erstellung einer Bild- und Textreflexion in Divi

Die Grundidee zum Erstellen von Reflexionsmustern in Divi umfasst drei Schritte:

  1. Erstellen Sie ein Modul mit Ihrem Bild oder Text
  2. Duplizieren Sie das Modul und verwenden Sie die Transformationsskala, um das Spiegelbild oder den Text zu erstellen
  3. Fügen Sie dem gespiegelten Element mithilfe eines Teilers oder eines absolut positionierten Textmoduls eine Verlaufsüberlagerung hinzu.

Diese Entwurfstechnik ist nicht auf einzelne Module beschränkt. Mit dieser Methode können Sie ganze Zeilen in Divi mit Reflexionen versehen. Dies ist nützlich, um eindeutige Header-Designs zu erstellen. Wir werden später in diesem Tutorial einer Zeile unseres Textreflexionsdesigns eine Reflexion hinzufügen. Beginnen wir zunächst mit der Erstellung einer Bildreflexion.

So erstellen Sie eine Bildreflexion

Um eine Bildreflexion zu erstellen, erstellen wir zunächst einen neuen regulären Abschnitt mit einer Zeile aus einer Spalte.

Fügen Sie einen Divi-Abschnitt hinzu

Fügen Sie dann der Linie ein Bildmodul hinzu.

Divi Bildmodul

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]

Laden Sie das gewünschte Bild aus der Medienbibliothek in das Bildmodul herunter. Aktualisieren Sie dann die folgenden Bildeinstellungen:

Maximale Breite: 600px
Ausrichtung des Moduls: Mitte
Benutzerdefinierter Rand: 0px unten

Änderung des CSS-Stils

Erstellen Sie das Spiegelbild

Um den Reflexionseffekt zu erzeugen, müssen wir zuerst eine Kopie des Bildes direkt unter dem Bild erstellen.

Duplizieren Sie dazu das Bildmodul. Aktualisieren Sie dann die Einstellungen für doppelte Bilder wie folgt:

Deckkraft: 40%
X-Achse der Transformationsskala: -100%

Mit der Eigenschaft "Skalierung transformieren" wird das Bild auf magische Weise vertikal und horizontal gespiegelt, um eine gespiegelte Version des Bildes zu erstellen.

Machen Sie eine Divi-Reflexion

Dies unterstützt das grundlegende Reflektionsdesign. Für ein realistischeres Reflexionsdesign können wir unserem unteren Bild jedoch eine zusätzliche Verlaufsüberlagerung hinzufügen.

Fügen Sie mithilfe eines Textmoduls eine Verlaufsüberlagerung hinzu

Um unserem unteren Bild eine Verlaufsüberlagerung hinzuzufügen, können wir ein Textmodul verwenden. Wir können dem Textmodul eine absolute Position geben, so dass es über dem unteren Bild liegt. Dann können wir dem Textmodul einen Verlaufshintergrund hinzufügen. Wenn Sie ein Textmodul (anstelle eines Trennzeichens) verwenden, können Sie später auf Wunsch zusätzlich Inhalte über das Reflexionsbild hinzufügen.

Erstellen Sie ein Textmodul unter dem unteren Bild.

Fügen Sie ein Divi-Textmodul hinzu

Löschen Sie den Standardinhalt, damit der Textbaustein leer ist.

Divi Reflections für Text und Bilder

Aktualisieren Sie dann die Einstellungen des Textbausteins wie folgt:

Linke Hintergrundfarbe: rgba (255,255,255,0)
Hintergrundverlauf rechts Farbe: #ffffff

Breite: 100%
Höhe: 50%

Fügen Sie dann dem Hauptelement den folgenden benutzerdefinierten CSS-Code hinzu:

Position: absolut! wichtig; oben: 50%;

Diese absolute Positionierung des Textbausteins überlagert den Textbaustein in der unteren Zeilenhälfte.

Benutzerdefiniertes Divi-Textmodul

Hintergrundfarbe hinzufügen

Wenn Sie keinen weißen Hintergrund wünschen, können Sie andere Hintergrundfarben verwenden, um ein Reflexionsmuster über die gesamte Breite zu erstellen.

Öffnen Sie dazu die Leitungseinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe: #000000
Breite: 100%:
Maximale Breite: 100%;
Benutzerdefinierte Polsterung: 0px hoch, 0px runter

Ändern Sie den Divi-Linienstil

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]

Lassen Sie uns jetzt das Ergebnis sehen.

Divi-Modul mit Reflexionen

Reflexionen können sehr cool aussehen, wenn Sie sich die Zeit nehmen, sie richtig zu gestalten. Glücklicherweise hat Divi die Werkzeuge, um dies zu erreichen. Es gibt andere Methoden, um CSS-Reflexionen durchzuführen, aber leider fehlt ihnen die Unterstützung durch Browser. Die Designs in diesem Tutorial sehen in jedem Browser gut aus.

Ich habe festgestellt, dass Reflexionen in Seitenkopfzeilen und in der Darstellung von Bildern für ein Portfolioelement großartig aussehen. Und ich bin mir sicher, dass es noch viele andere Implementierungen gibt.

Das war's für dieses Tutorial. Ich hoffe, Sie können damit mithilfe der internen Funktionen von Divi Reflexionen auf Ihrer WordPress-Site hinzufügen.

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
1 Aktien
Aktie1
tweet
Registrieren