Das Hervorheben von Bildern und Texten ist eine klassische Gestaltungstechnik, mit der man das Ganze aufpeppen kann Inhalt einer Webseite. Außerdem macht es Divi einfach, diese Reflexionen direkt aus Divi Builder zu erstellen, 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.
Was Sie brauchen, um loszulegen
Alles, was Sie brauchen, um loszulegen, ist Divi. Stellen Sie sicher, dass Divi-Thema installiert und aktiv ist. Wir werden unsere Designs mit dem Divi Builder im Frontend (Visual Builder) von Grund auf neu erstellen. Für dieses Tutorial benötigen Sie auch einige Dummy-Bilder (ein Hintergrundbild mit einer Größe von etwa 1920 x 600 Pixel und ein weiteres Bild mit einer Größe von etwa 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:
- Erstellen Sie ein Modul mit Ihrem Bild oder Text
- Duplizieren Sie das Modul und verwenden Sie die Transformationsskala, um das Spiegelbild oder den Text zu erstellen
- 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 dann der Linie ein Bildmodul hinzu.
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
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.
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 zuweisen, sodass es sich über dem unteren Bild befindet. Als nächstes können wir dem Textmodul einen Hintergrund mit Farbverlauf hinzufügen. Durch die Verwendung eines Textbausteins (anstelle eines Trennzeichens) haben Sie die zusätzliche Möglichkeit, etwas hinzuzufügen Inhalt Falls gewünscht, können Sie das Reflexionsbild später überstreichen.
Erstellen Sie ein Textmodul unter dem unteren Bild.
Lösche es Inhalt Standardmäßig ist der Textbaustein leer.
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.
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
Lassen Sie uns jetzt das Ergebnis sehen.
Reflexionen können wirklich cool aussehen, wenn Sie sich die Zeit nehmen, sie richtig zu gestalten. Zum Glück hat Divi das outils erfolgreich sein. Es gibt andere Methoden zum Durchführen von CSS-Reflexionen, aber leider werden sie von Browsern nicht unterstützt. Die Designs in diesem Tutorial werden in allen Browsern großartig aussehen.
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.
