So fügen Sie Design-Elementen in Divi . einseitige Box-Schatten hinzu

Das Hinzufügen von einseitigen Kastenschatten zu verschiedenen Designelementen in Divi ist eine subtile Möglichkeit, einen kreativen Akzent zu setzen, ohne vom Inhalt abzulenken. In diesem Tutorial zeige ich Ihnen, wie Sie dem Divi-FAQ-Seitenlayout einseitige Boxschatten hinzufügen. Als Bonus-Tipp zeige ich Ihnen auch, wie Sie Klappensymbole als vertikal zentrierte Grafik kombinieren. Durch das Erlernen dieser Divi-Entwurfstechniken können Sie allen gewünschten Modulen oder Spalten einseitige Kastenschatten hinzufügen.

Lass uns anfangen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das FAQ-Layout-Design, das wir mit einseitigen Kastenschatten erstellen werden.

Einstieg

Um zu beginnen, müssen Sie eine neue Seite erstellen. Navigieren Sie in Ihrem WordPress-Dashboard zu Seiten > Neu hinzufügen. Geben Sie dann Ihrer Seite einen Titel und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Wählen Sie ein vorgefertigtes Layout“. Suchen Sie im Popup Aus Bibliothek laden das Therapeuten-Layout-Paket und wählen Sie es aus. Wählen Sie dann das Seitenlayout für Therapeuten-FAQs aus und klicken Sie auf „Dieses Layout verwenden“.

Jetzt können Sie mit der Gestaltung beginnen.

Teil 1: Organisation des Layouts

In diesem vorgefertigten Layout konzentrieren wir uns auf den zweiten Abschnitt, der die Scheinfragen in mehreren Umschaltmodulen enthält. Für den Anfang ändern wir das Spaltenlayout der Zeile in drei Spalten (1/3 1/3 1/3).

Verschieben Sie als Nächstes alle Module in Spalte 2 mit der Multiselect-Funktion von Divi in ​​Spalte 3. Halten Sie dazu Command (oder Control) gedrückt und klicken Sie auf jedes Modul in Spalte 2, bis alle ausgewählt sind. Ziehen Sie sie dann in Spalte 3.

Jetzt müssen wir unserer Reihe etwas mehr Platz geben. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Breite: 80%
Dachrinnenbreite: 2
Spaltenhöhen ausgleichen: JA

Teil 2: Entwerfen der Toggle-Module

Um das Design aller Umschaltmodule in diesem Abschnitt gleichzeitig anzupassen, verwenden Sie die Multiselect-Funktion, um jedes der Umschaltmodule auszuwählen. Sobald alle ausgewählt sind, öffnen Sie die Einstellungen für eines der Umschaltmodule.

Aktualisieren Sie dann Folgendes:

Öffnen Sie die Textfarbe umschalten: #ffffff
Open Toggle Hintergrundfarbe: rgba(0,0,0,0)
Geschlossene Toggle-Textfarbe: #ffffff
Hintergrundfarbe des geschlossenen Umschalters: rgba(0,0,0,0)

Textkörperfarbe: #ffffff

Benutzerdefinierte Polsterung: 3vw oben, 3vw unten, 2vw links, 2vw rechts

Jetzt können wir auf der linken Seite unseres Umschaltmoduls einen Boxschatten hinzufügen, indem wir die Boxschattenoptionen wie folgt aktualisieren:

Horizontale Position des Boxschattens: -30px
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 40px
Stärke der Box-Schattenausbreitung: -35px
Schattenfarbe: rgba(0,0,0,0.4)

Der Trick, um den Boxschatten richtig zu positionieren, besteht darin, den Schatten nach links zu verschieben, indem Sie die horizontale Position auf -30px einstellen. Danach müssen Sie die richtige Balance zwischen Unschärfe- und Streustärke finden, damit der Boxschatten auf der linken Seite sichtbar bleibt, ohne dass er auf die Ober- und Unterseite des Moduls ausblutet.

Einstellungen speichern.

Jetzt wurden alle Ihre Kippmodule mit dem neuen Design aktualisiert.

Wir möchten jedoch, dass der Boxschatten der Toggle-Module in der rechten Spalte auf der rechten Seite (nicht auf der linken) positioniert wird. Um dies zu ändern, wählen Sie mit Multiselect alle Toggle-Module in der rechten Spalte aus und öffnen die Elementeinstellungen. Ändern Sie dann die horizontale Position von -30px auf 30px wie folgt:

Horizontale Position des Kastenschattens: 30px

Speichern Sie dann die Einstellungen.

Dafür sorgen unsere Toggle-Module mit ihren einzigartigen einseitigen Kastenschatten. Jetzt müssen wir unseren Spalten ähnliche einseitige Kastenschatten hinzufügen.

Teil 3: Hinzufügen von einseitigen Boxschatten zu Spalten

Um einseitige Boxschatten zu Spalten hinzuzufügen, müssen wir einige CSS-Schnipsel unter der Registerkarte "Erweitert" der Zeileneinstellungen hinzufügen.

Öffnen Sie die Zeileneinstellungen und klicken Sie auf die Registerkarte Erweitert. Fügen Sie im Hauptelement von Spalte 1 das folgende CSS hinzu:

Box-Schatten: 30px 0px 70px -45px rgba(0,0,0,0.4)

Wenn Sie mit CSS nicht vertraut sind, sollten Sie die Ähnlichkeit des Codes mit den im Divi-Builder verfügbaren Einstellungen für das Box-Schattenmodul erkennen können. Im obigen Code…

30px ist der Wert für die horizontale Position
0px ist der Wert für die vertikale Position
70px ist der Wert für die Unschärfestärke
-45px ist der Wert für die Streustärke
rgba(0,0,0,0.4) ist die Schattenfarbe

Ich habe dem Spaltenkastenschatten eine größere Unschärfestärke gegeben als den Umschaltmodulen, um eine etwas größere Tiefe zu erzeugen.

Um Spalte 3 einen Schatten der linken Box hinzuzufügen, müssen Sie das folgende CSS zum Hauptelement von Spalte 3 hinzufügen:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Auch hier ist der einzige Unterschied zwischen diesem CSS und dem für Spalte 1 verwendeten die negative horizontale Position.

Teil 4: Hinzufügen von Blurb-Symbolen zu Spalte 2

Nachdem unsere einseitigen Boxschatten nun fertig sind, haben wir eine leere mittlere Spalte, in der wir einige Klappenmodulsymbole kombinieren können, um ein einfaches Grafikdesign zu erstellen. Fügen Sie dazu zunächst ein Klappenmodul hinzu und löschen Sie Titel und Inhalt. Klicken Sie dann auf ein Symbol, um es zu verwenden, und wählen Sie das folgende Chat-Symbol aus.

Aktualisieren Sie dann die Designeinstellungen wie folgt:

Symbolfarbe: rgba(203.241.252.0.37)
Symbolschriftgröße: 20vw
Benutzerdefinierter Rand: 0 Pixel unten

Als nächstes duplizieren Sie das Klappenmodul, um ein zusätzliches darunter zu erstellen.

Aktualisieren Sie dann den oberen Klappentext mit einem Fragezeichensymbol und aktualisieren Sie die folgenden Designeinstellungen:

Symbolschriftgröße: 9vw
Breite: 40%
Modulausrichtung: Rechts
Benutzerdefinierter Rand: -2vw

Kopieren Sie schließlich das soeben entworfene Fragezeichen-Blind-Modul und fügen Sie es unter das große Chat-Symbol-Blind-Modul ein. Aktualisieren Sie dann die Designeinstellungen für dieses Klappenmodul wie folgt:

Teil 5: Vertikale Zentrierung der Module in Spalte 2

Um das Design abzuschließen, müssen wir die Klappensymbole in Spalte 2 vertikal zentrieren, damit sie ein zentriertes Designelement für unser Layout bleiben. Um dies zu erreichen, werden wir Divis Flex nutzen. Da wir ausgewählt haben, die Spaltenhöhen für unsere Zeile auszugleichen, können wir einen einfachen CSS-Schnipsel verwenden, um alle Module in Spalte 2 zu zentrieren. Sie können jederzeit mehr darüber erfahren, wie Sie Inhalte in Divi nach Belieben vertikal ausrichten. Öffnen Sie jedoch vorerst die Zeileneinstellungen und klicken Sie auf die Registerkarte Erweitert. Geben Sie dann das folgende CSS in das Hauptelement von Spalte 2 ein:

margin: auto

Jetzt werden alle Klappenmodule in Spalte 2 vertikal zentriert.

Um es den Augen zu erleichtern, zentrieren Sie den Text auf jedem der Textmodule, die oben in Spalte 1 und Spalte 2 sitzen. Fügen Sie dann dem Abschnitt einen Hintergrundverlauf wie folgt hinzu:

Hintergrundfarbe links: #616ce1
Hintergrund mit Farbverlauf rechts: #3846e0

Das ist es. Jetzt ist das Design fertig.

Sehen Sie sich das Endergebnis an.

Beachten Sie außerdem, wie sich der Kastenschatten beim Öffnen und Schließen der Schalter ausdehnt und zusammenzieht.

Abschließende Gedanken

Das Hinzufügen von einseitigen Kastenschatten zu Modulen und Spalten kann Ihrem Inhalt auf kreative Weise Tiefe verleihen. Der Trick besteht darin, zu wissen, wie man die Einstellungen für das Boxschattendesign von Divi effektiv anpasst. Dieses FAQ-Seitenlayout ist nur eines von vielen Beispielen, die Sie in dieses Design integrieren können. Aber der Gesamtprozess ist recht einfach und sollte eine nette Technik sein, die Sie für zukünftige Projekte in Ihrer Design-Toolbox behalten können.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!