So entwerfen Sie Reflexionen für Bilder und Text in Divi
Veröffentlicht: 2019-05-19Das Entwerfen von Reflexionen für Bilder und Texte ist eine klassische Designtechnik, mit der man den Inhalt einer Webseite aufpeppen kann. Und Divi macht es einfach, diese Reflexionen direkt aus dem Divi Builder zu erstellen, ohne einen Fotoeditor verwenden zu müssen.
In diesem Tutorial zeige ich Ihnen, wie Sie Reflexionen für Bilder und Text in Divi entwerfen. Der Schlüssel zum Erstellen von Reflexionen besteht darin, die Option „Transformation scale“ von Divi zu verwenden, um eine gespiegelte Version des Elements zu erstellen. Danach können Sie ein benutzerdefiniertes Overlay hinzufügen, das ich Ihnen mit einem Textmodul zeige.
Lass uns anfangen!
Vorgeschmack
Hier ist ein kleiner Vorgeschmack auf die Designs, die wir in diesem Tutorial erstellen werden.
Laden Sie das Layout für Text- und Bildreflexionen 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?
Abonnieren Sie unseren Youtube-Kanal
Was Sie brauchen, um loszulegen
Um loszulegen, brauchst du nur 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). Für dieses Tutorial benötigst du auch ein paar simulierte Bilder (ein Hintergrundbild mit etwa 1920px x 600px und ein weiteres Bild mit etwa 500px x 350px).
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!
Die Grundidee hinter der Erstellung von Bild- und Textreflexionen in Divi
Die Grundidee beim Erstellen von Reflexionsdesigns in Divi umfasst drei Schritte:
- Erstellen Sie ein Modul mit Ihrem Bild oder Text
- Duplizieren Sie das Modul und verwenden Sie die Transformationsskala, um das gespiegelte Bild oder den gespiegelten Text zu erstellen
- Fügen Sie dem gespiegelten Element eine Verlaufsüberlagerung hinzu. Verwenden Sie einen absolut positionierten Teiler oder ein Textmodul.
Diese Konstruktionstechnik ist nicht auf einzelne Module beschränkt. Sie können mit dieser Methode sogar Reflexionen zu ganzen Zeilen in Divi hinzufügen, was hilfreich ist, um einzigartige Header-Designs zu erstellen. Wir werden einer Zeile in unserem Textreflexionsdesign etwas später in diesem Tutorial Reflexion hinzufügen. Aber jetzt beginnen wir damit, wie man eine Bildreflexion erzeugt.
So erstellen Sie eine Bildreflexion
Um eine Bildreflexion zu erstellen, beginnen wir mit der Erstellung eines neuen regulären Abschnitts mit einer einspaltigen Zeile.
Fügen Sie dann der Zeile ein Bildmodul hinzu.
Laden Sie das gewünschte Bild aus der Mediengalerie in das Bildmodul hoch. Aktualisieren Sie dann die folgenden Bildeinstellungen:
Maximale Breite: 600px
Modulausrichtung: Mitte
Benutzerdefinierter Rand: 0 Pixel unten
Erstellen Sie das Spiegelbild
Um den Reflexionseffekt zu erzeugen, müssen wir zunächst ein gespiegeltes Duplikat des Bildes direkt unter dem Bild erstellen.
Dazu duplizieren Sie das Image-Modul. Aktualisieren Sie dann die Einstellungen des Duplikats wie folgt:
Deckkraft: 40%
X-Achse der Transformationsskalierung: -100 %
Die Eigenschaft Transform Scale dreht das Bild auf magische Weise vertikal und horizontal, um eine gespiegelte Version des Bildes zu erstellen.
Dies kümmert sich um das grundlegende Reflexionsdesign. Wir können unserem unteren Bild jedoch eine zusätzliche Verlaufsüberlagerung hinzufügen, um ein realistischeres Reflexionsdesign zu erzielen.
Hinzufügen einer Verlaufsüberlagerung mit einem Textmodul
Um unserem unteren Bild eine Verlaufsüberlagerung hinzuzufügen, können wir ein Textmodul verwenden. Wir können dem Textbaustein eine absolute Position geben, damit er über dem unteren Bild sitzt. Dann können wir dem Textmodul einen Verlaufshintergrund hinzufügen. Die Verwendung eines Textmoduls (anstelle eines Teilers) gibt Ihnen die Bonusoption, später etwas Inhalt über dem Reflexionsbild hinzuzufügen, wenn Sie möchten.
Fahren Sie fort und erstellen Sie ein Textmodul unter dem unteren Bild.
Löschen Sie den Standardinhalt, damit der Textbaustein leer ist.
Aktualisieren Sie dann die Textmoduleinstellungen wie folgt:
Hintergrundfarbe links: rgba(255,255,255,0)
Hintergrundfarbe rechts: #ffffff
Breite: 100%
Höhe: 50%
Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:
position: absolute !important; top: 50%;
Diese absolute Positionierung des Textbausteins überlagert den Textbaustein in der unteren Hälfte der Zeile.
Schauen wir uns an, wie das Design bisher aussieht.
Hinzufügen einer Hintergrundfarbe
Wenn Sie keinen weißen Hintergrund wünschen, können Sie mit anderen Hintergrundfarben experimentieren, wodurch ein einzigartiges Reflexionsdesign in voller Breite entsteht.
Öffnen Sie dazu die Zeileneinstellungen und aktualisieren Sie Folgendes:
Hintergrundfarbe: #000000
Breite: 100%:
Maximale Breite: 100 %;
Benutzerdefiniertes Padding: 0px oben, 0px unten
Schauen wir uns nun das Ergebnis an.
Hinzufügen von Text zum Textmodul-Overlay
Denken Sie daran, da wir ein Textmodul als Überlagerung auf dem unteren Bild verwenden, können wir bei Bedarf einige Inhalte hinzufügen.
Öffnen Sie dazu die Textbausteineinstellungen und aktualisieren Sie Folgendes:
Inhalt: „Bildreflexion“
Text Textfarbe: #ffffff
Text Textgröße: 30px
Textausrichtung: Mitte
Endgültiges Design
Hier ist das endgültige Design der Bildreflexion.
Erstellen von Textreflexionen in Divi
Für dieses nächste Beispiel erstellen wir ein Textreflexionsdesign. Der Vorgang ist dem Erstellen einer Bildreflexion sehr ähnlich. In diesem Beispiel werde ich jedoch eine Reflexion für eine ganze Zeile erstellen. Dies ermöglicht es, sowohl den Text als auch das Hintergrundbild für ein schönes Header-Design zu reflektieren.
Hier ist, wie es geht.
Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Zeile einen Textbaustein hinzu.
Aktualisieren Sie den Inhalt mit dem Wort „Reflektion“.
Aktualisieren Sie dann die Designeinstellungen wie folgt:
Textschriftart: Oswald
Textschriftart: TT
Text Textfarbe: #333333
Text Textgröße: 10vw
Textzeilenhöhe: .9em
Textausrichtung: Mitte
Benutzerdefinierter Rand: 0 Pixel unten
Benutzerdefinierte Polsterung: 4vw oben
Aktualisieren Sie die Zeileneinstellungen
Nachdem unser Textmodul angepasst wurde, ist es an der Zeit, die Einstellungen der Zeile zu aktualisieren.
Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:
Hintergrundbild: Hintergrundbild einfügen
Dachrinnenbreite: 1
Breite: 100%
Maximale Breite: 100%
Benutzerdefiniertes Padding: 0px oben, 0px unten
So sieht das Design bisher aus.
Erstellen der Reflexionstextzeile
Um den Reflexionstext für dieses Design zu erstellen, reflektieren wir die gesamte Zeile, damit wir das Hintergrundbild in die Reflexion einbeziehen können.
Duplizieren Sie die Zeile und aktualisieren Sie Folgendes:
Transformationsskalierung Y-Achse: -100 %
Jetzt ist die Zeile darunter ein gespiegeltes Bild der darüber liegenden Zeile. Jetzt müssen wir nur noch ein Overlay hinzufügen.
Hinzufügen einer Verlaufsüberlagerung mit einem Textmodul
Um unserer Textreflexion in der unteren Zeile eine Verlaufsüberlagerung hinzuzufügen, können wir ein Textmodul verwenden, wie wir es im ersten Bildreflexionsdesign oben getan haben. Wie zuvor können wir dem Textmodul eine absolute Position geben, sodass es die gesamte Zeile ausfüllt und mit unserem Reflexionstext über dem anderen Textmodul sitzt. Dann können wir dem Textmodul-Overlay einen Verlaufshintergrund hinzufügen.
Fahren Sie fort und erstellen Sie einen neuen Textbaustein unter dem Textbaustein in der unteren Zeile.
Öffnen Sie die neuen Textbausteineinstellungen und löschen Sie den Inhalt, sodass der Textbaustein leer ist.
Aktualisieren Sie dann die Einstellungen wie folgt:
Hintergrundfarbe links: #ffffff
Hintergrundfarbe rechts: rgba(255,255,255,0.13)
Startposition: 38%
Breite: 100%
Höhe: 100%
Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:
position: absolute !important; top: 0;
Das ist es!
Endergebnis
Sehen Sie sich das Endergebnis an.
Hier ist das gleiche Design ohne Hintergrundbilder.
Abschließende Gedanken
Reflexionen können wirklich cool aussehen, wenn Sie sich die Zeit nehmen, sie richtig zu gestalten. Zum Glück hat Divi die Werkzeuge, um dies zu ermöglichen. Es gibt andere Methoden, um CSS-Reflexionen zu erstellen, aber leider fehlt ihnen die browserübergreifende Unterstützung. Die Designs in diesem Tutorial werden in allen Browsern gut aussehen.
Ich habe festgestellt, dass Reflexionen in Seitenüberschriften und bei der Präsentation von Bildern für ein Portfoliostück großartig aussehen. Und ich bin sicher, es gibt noch viele andere Implementierungen.
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!