Jak dodać jednostronne cienie pudełkowe do elementów projektu w Divi

Dodawanie jednostronnych cieni pudełkowych do różnych elementów projektu w Divi to subtelny sposób na dodanie kreatywnego rozkwitu bez odwracania uwagi od treści. W tym samouczku pokażę, jak dodać jednostronne cienie pudełkowe do układu strony FAQ Divi's Therapy. Jako dodatkową wskazówkę pokażę Ci również, jak połączyć ikony notatek jako grafikę wyśrodkowaną w pionie. Ucząc się tych technik projektowania Divi, możesz dodać jednostronne cienie do dowolnych modułów lub kolumn.

Zacznijmy.

zapowiedź

Oto zapowiedź projektu układu FAQ, który zbudujemy za pomocą jednostronnych cieni pudełkowych.

Pierwsze kroki

Aby rozpocząć, musisz utworzyć nową stronę. Z pulpitu nawigacyjnego WordPress przejdź do Strony> Dodaj nowy. Następnie nadaj swojej stronie tytuł i wdróż konstruktor wizualny. Wybierz opcję „Wybierz gotowy układ”. W wyskakującym okienku Wczytaj z biblioteki znajdź i wybierz Pakiet układu terapeuty. Następnie wybierz układ strony często zadawanych pytań terapeuty i kliknij „Użyj tego układu”.

Teraz jesteś gotowy do rozpoczęcia projektowania.

Część 1: Organizacja układu

W tym gotowym układzie skupimy naszą uwagę na drugiej sekcji zawierającej próbne pytania wewnątrz wielu modułów przełączania. Na początek zmieńmy układ kolumn wiersza na trzy kolumny (1/3 1/3 1/3).

Następnie przenieś wszystkie moduły z kolumny 2 do kolumny 3 za pomocą funkcji Multiselect Divi. Aby to zrobić, przytrzymaj Command (lub Control) i kliknij każdy moduł w kolumnie 2, aż wszystkie zostaną wybrane. Następnie przeciągnij je do kolumny 3.

Teraz musimy dać naszemu wierszowi trochę więcej miejsca. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Szerokość: 80%
Szerokość rynny: 2
Wyrównaj wysokości kolumn: TAK

Część 2: Projektowanie modułów przełączania

Aby jednocześnie dostosować projekt wszystkich modułów przełączników w tej sekcji, użyj funkcji wyboru wielokrotnego, aby wybrać każdy z modułów przełączników. Po wybraniu wszystkich otwórz ustawienia dowolnego z modułów przełączania.

Następnie zaktualizuj następujące elementy:

Otwórz przełącznik koloru tekstu: #ffffff
Otwórz przełącznik koloru tła: rgba (0,0,0,0)
Zamknięty przełącznik koloru tekstu: #ffffff
Zamknięty przełącznik koloru tła: rgba (0,0,0,0)

Kolor tekstu ciała: #ffffff

Niestandardowe wypełnienie: 3vw góra, 3vw dół, 2vw lewo, 2vw prawo

Teraz możemy dodać cień pudełka po lewej stronie naszego modułu przełączania, aktualizując opcje cienia pudełka w następujący sposób:

Pozycja pozioma cienia pudełka: -30px
Pozycja pionowa cienia pudełka: 0px
Siła rozmycia cieni w pudełku: 40px
Siła rozprzestrzeniania się cieni w pudełku: -35px
Kolor cienia: rgba (0,0,0,0.4)

Sztuczka do prawidłowego ustawienia cienia pudełka polega na przesunięciu cienia w lewo poprzez ustawienie pozycji poziomej na -30px. Następnie musisz znaleźć odpowiednią równowagę między siłą rozmycia a siłą rozproszenia, aby cień pudełka był widoczny po lewej stronie, bez jego wylewania na górę i dół modułu.

Zapisz ustawienia.

Teraz wszystkie twoje moduły przełączania zostały zaktualizowane o nowy wygląd.

Jednak chcemy, aby cień prostokątny modułów przełączających w prawej kolumnie był umieszczony po prawej stronie (nie po lewej). Aby to zmienić, użyj opcji Multiselect, aby zaznaczyć wszystkie moduły przełączania w prawej kolumnie i otworzyć ustawienia elementu. Następnie zmień pozycję poziomą z -30px na 30px w następujący sposób:

Pozycja pozioma cienia pudełka: 30px

Następnie zapisz ustawienia.

Dba o to nasze moduły przełączające z unikalnymi jednostronnymi cieniami skrzynkowymi. Teraz musimy dodać podobne jednostronne cienie pudełkowe do naszych kolumn.

Część 3: Dodawanie jednostronnych cieni pudełkowych do kolumn

Aby dodać jednostronne cienie skrzynek do kolumn, musimy dodać kilka fragmentów kodu CSS w zakładce Zaawansowane w ustawieniach wiersza.

Otwórz ustawienia wiersza i kliknij kartę Zaawansowane. Wewnątrz głównego elementu kolumny 1 dodaj następujący kod CSS:

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

Jeśli nie znasz CSS, powinieneś być w stanie rozpoznać podobieństwo kodu z ustawieniami modułu cienia pudełka dostępnymi w konstruktorze Divi. W powyższym kodzie…

30px to wartość dla pozycji poziomej
0px to wartość dla pozycji pionowej
70px to wartość siły rozmycia
-45px to wartość siły rozrzutu
rgba(0,0,0,0.4) to kolor cienia

Dałem cieniowi pola kolumny większą siłę rozmycia niż moduły przełączania, aby uzyskać nieco większą głębię.

Aby dodać lewy cień pola do kolumny 3, musisz dodać następujący kod CSS do głównego elementu kolumny 3:

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

Ponownie, jedyną różnicą między tym CSS a tym użytym w kolumnie 1 jest ujemna pozycja pozioma.

Część 4: Dodawanie ikon Blurb do kolumny 2

Teraz, gdy nasze jednostronne cienie pudełkowe są gotowe, mamy pustą środkową kolumnę, w której możemy połączyć kilka ikon modułu z notatkami, aby stworzyć prosty projekt graficzny. Aby to zrobić, najpierw dodaj moduł notki i usuń tytuł i treść. Następnie kliknij, aby użyć ikony i wybierz następującą ikonę czatu.

Następnie zaktualizuj ustawienia projektu w następujący sposób:

Kolor ikony: rgba (203,241,252,0,37)
Rozmiar czcionki ikony: 20vw
Margines niestandardowy: 0px dół

Następnie skopiuj moduł notki, aby utworzyć dodatkowy pod spodem.

Następnie zaktualizuj górną notatkę ikoną znaku zapytania i zaktualizuj następujące ustawienia projektu:

Rozmiar czcionki ikony: 9vw
Szerokość: 40%
Wyrównanie modułu: w prawo
Margines niestandardowy: -2vw

Na koniec skopiuj moduł notatek ze znakiem zapytania, który właśnie zaprojektowałeś i wklej go pod modułem notatek z dużą ikoną czatu. Następnie zaktualizuj ustawienia projektu dla tego modułu notki w następujący sposób:

Część 5: Pionowe centrowanie modułów w kolumnie 2

Aby zakończyć projekt, musimy wyśrodkować w pionie ikony notek w kolumnie 2, aby pozostały wyśrodkowanym elementem projektu dla naszego układu. Aby to osiągnąć, zamierzamy wykorzystać elastyczność Divi. Ponieważ wybraliśmy wyrównanie wysokości kolumn dla naszego wiersza, możemy użyć prostego fragmentu kodu CSS, aby wyśrodkować wszystkie moduły w kolumnie 2. Zawsze możesz dowiedzieć się więcej o tym, jak wyrównać zawartość w pionie w Divi w dogodnym dla siebie czasie. Ale na razie otwórz ustawienia wiersza i kliknij kartę Zaawansowane. Następnie wprowadź następujący kod css w głównym elemencie kolumny 2:

margin: auto

Teraz wszystkie moduły notatek będą wyśrodkowane w pionie w kolumnie 2.

Aby ułatwić wzrok, wyśrodkuj tekst na każdym z modułów tekstowych znajdujących się na górze kolumny 1 i kolumny 2. Następnie dodaj gradient tła do sekcji w następujący sposób:

Kolor gradientu tła po lewej stronie: #616ce1
Prawy gradient tła: #3846e0

Otóż ​​to. Teraz projekt jest gotowy.

Sprawdź efekt końcowy.

I zauważ, jak cień pudełka rozszerza się i kurczy podczas otwierania i zamykania przełączników.

Końcowe przemyślenia

Dodanie jednostronnych cieni do modułów i kolumn może nadać treści głębi w kreatywny sposób. Sztuka polega na tym, aby wiedzieć, jak skutecznie dostosować ustawienia projektowania cieni Divi. Układ strony z najczęściej zadawanymi pytaniami to tylko jeden z wielu przykładów, które można zastosować w tym projekcie. Ale cały proces jest dość prosty i powinien być przyjemną techniką, którą możesz zachować w swoim przyborniku projektowym do przyszłych projektów.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!