Używanie modułów dzielników do tworzenia kształtów tła za pomocą opcji transformacji Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowej Divi, pokażemy, jak używać modułów rozdzielających do tworzenia kształtów tła za pomocą opcji transformacji Divi i pakietu Paralegal Layout Pack. Moduły rozdzielające są bardzo wszechstronne i mogą naprawdę podnieść ogólny wygląd twoich stron. Chociaż będziemy odtwarzać kilka przykładów, które pasują konkretnie do pakietu Paralegal Layout Pack, możesz użyć tej techniki dla dowolnego rodzaju witryny, którą tworzysz za pomocą Divi.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Utwórz nową stronę za pomocą strony docelowej pakietu Paralegal Layout

Utwórz nową stronę i prześlij do niej stronę docelową pakietu Paralegal Layout Pack.

Odtwórz przykład nr 1

Przepełnienie sekcji

Zacznijmy tworzyć pierwszy przykład! Śmiało otwórz ustawienia sekcji bohatera i przejdź do zakładki projektowania. Tutaj chcemy się upewnić, że nic nie przewyższy kontenera sekcji. Aby to zrobić, dodamy jedną linię kodu CSS do głównego elementu.

overflow: hidden;

Dodaj moduł rozdzielający do kolumny 2

Widoczność

Następnie idź dalej i dodaj moduł rozdzielający do drugiej kolumny sekcji specjalistycznej. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor tła

Jako koloru tła separatora użyjemy koloru z palety kolorów pakietu układów.

• Kolor tła: #d94144

Kolor

Następnie przejdziemy do zakładki projektowania i zmienimy również kolor przekładki.

• Kolor: #f3f1f2

Style

Przejdź do ustawień stylów i zmodyfikuj styl dzielnika.

• Styl dzielnika: w kropki

Rozmiary

Pobaw się również ustawieniami rozmiaru. Możesz ustawić ten moduł dzielnika tak, jak chcesz, ale jeśli chcesz, aby wyglądał dokładnie tak, jak pokazano na podglądzie tego posta, użyj następujących ustawień:

• Waga dzielnika: 4px
• Wysokość: 0px

Rozstaw

Teraz zamierzamy zmienić pozycję i rozmiar modułu dzielnika, używając pewnych niestandardowych wartości marginesów i dopełnienia. Upewnij się, że zmodyfikujesz wartości zgodnie z różnymi rozmiarami ekranu, aby wszystko pozostało responsywne.

• Górny margines: -30vw (komputer stacjonarny), -100vw (tablet i telefon)
• Lewy margines: -100vw (komputer), -138vw (tablet), -300vw (telefon)
• Górna wyściółka: 0px
• Dolna wyściółka: 1.3vw (komputer), 2.2vw (tablet), 3vw (telefon)

Przekształcać

Skala transformacji

Czas na przekształcenie modułu! Pierwszą rzeczą, jaką zrobimy w ustawieniach transformacji, jest zwiększenie rozmiaru dzielnika poprzez dodanie następujących wartości skali transformacji:

• Dół: 153%
• Prawo: 500%

Przekształć Obróć

Obrócimy również moduł rozdzielacza w ustawieniach obracania transformacji. Jak widać, moduł dzielnika nie przekracza sekcji dzięki tej jednej linii kodu CSS, którą dodaliśmy na początku tego samouczka.

• Lewo: 348 stopni

Odtwórz przykład nr 2

Przepełnienie sekcji

Przejdźmy do następnego przykładu! Ponownie chcemy się upewnić, że nic nie przewyższa kontenera sekcji, dodając jeden wiersz kodu CSS do głównego elementu sekcji.

overflow: hidden;

Dodaj nowy wiersz na końcu sekcji

Struktura kolumny

Kontynuuj, dodając nowy wiersz na końcu sekcji, korzystając z następującej struktury kolumn:

Rozstaw

Aby zmniejszyć rozmiar zajmowany przez wiersz, usuniemy domyślne górne i dolne dopełnienie w ustawieniach odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł dzielnika

Widoczność

Czas dodać i wystylizować moduł rozdzielacza! Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor tła

Ponownie używamy jednego z kolorów z palety kolorów pakietu układu jako koloru tła.

• Kolor tła: #d94144

Kolor

Przejdź do zakładki projektu i zmień również kolor przekładki.

• Kolor: #f3f1f2

Rozmiary

Bawimy się również ustawieniami rozmiaru.

• Waga dzielnika: 10px
• Wysokość: 0px

Rozstaw

Stworzymy dokładnie taki kształt, jaki chcemy, używając niestandardowego wypełnienia, które zmodyfikujemy na różnych rozmiarach ekranu.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2.5vw (komputer), 3vw (tablet), 3.9vw (telefon)

Przekształcać

Skala transformacji

Czas na transformację! Pierwszą rzeczą, którą zrobimy, jest skalowanie modułu dzielnika. Robimy to, aby upewnić się, że na początku lub na końcu sekcji nie ma przerwy. Nie martw się o zbyt duże skalowanie modułu rozdzielacza, wszystko, co wykracza poza przekrój, nie pojawi się w twoim projekcie.

• Dół: 153%
• Po prawej: 153% (komputer), 250% (tablet), 500% (telefon)

Przekształć Tłumacz

Następnie zmienimy również położenie modułu rozdzielającego, aby wyświetlał się po prawej stronie. Upewnij się, że dopasowujesz te wartości do różnych rozmiarów ekranu.

• Dół: 25vw (komputer stacjonarny), 27vw (tablet i telefon)
• Po prawej: 0px (komputer stacjonarny), -32vw (tablet i telefon)

Przekształć Obróć

Na koniec zmienimy podziałkę poziomą na pionową, bawiąc się ustawieniami obrotu transformacji.

• Lewo: 270 stopni

Odtwórz przykład nr 3

Przepełnienie sekcji

Przejdźmy do następnego i ostatniego przykładu! Ponownie upewnij się, że nic nie przewyższa kontenera sekcji, dodając jeden wiersz kodu CSS do głównego elementu sekcji.

overflow: hidden;

Dodaj nowy wiersz na początku sekcji

Struktura kolumny

Kontynuuj, dodając nowy wiersz u góry sekcji. Ważne jest, aby wiersz był umieszczony u góry, aby nie nachodził na zawartość poniżej w dalszej części samouczka.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól, aby kolumna zajmowała całą szerokość ekranu.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Dodaj moduł dzielnika

Widoczność

Dodaj swój moduł rozdzielacza jako następny. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor tła

Przejdź do ustawień tła i dodaj wybrany kolor tła.

• Kolor tła: #d94144

Kolor

Zmodyfikuj również kolor separatora.

• Kolor: #f3f1f2

Style

I zmień styl dzielnika w ustawieniach stylów.

• Styl dzielnika: w kropki

Rozmiary

Następnie przejdź do ustawień rozmiaru i wprowadź zmiany.

• Waga dzielnika: 4px
• Wysokość: 0px

Rozstaw

I utwórz kształt, który chcesz, używając górnego i dolnego dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 3vw
• Dolna wyściółka: 3vw

Cień Pudełka

Dodamy również trochę głębi naszej stronie, nadając dzielnikowi subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Przekształcać

Skala transformacji

Teraz, gdy już ostylowaliśmy dzielnik, możemy zacząć go przekształcać. Pierwszą rzeczą, jaką zrobimy, jest zwiększenie rozmiaru modułu dzielnika w ustawieniach skali transformacji.

• Dół: 140%
• Prawo: 140%

Przekształć Tłumacz

Następnie przejdziemy do ustawień translacji transformacji i zmienimy pozycję modułu dzielnika. Umieszczenie wiersza na górze sekcji pomaga nam utrzymać niższy wskaźnik Z niż wiersz znajdujący się pod nim, co tworzy to piękne nakładanie się!

• Dół: 4vw
• Po prawej: 16vw (komputer), 26vw (tablet), 35vw (telefon)

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak korzystać z modułu dzielnika i nowych opcji przekształcania Divi, aby tworzyć kształty tła i poprawiać ogólny wygląd i działanie stron. Ten samouczek jest częścią naszej nieustannej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do zestawu narzędzi projektowych. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!