Jak połączyć maski tła z dzielnikami sekcji w Divi

Połączenie masek tła z podziałami sekcji w Divi dodaje kolejną warstwę kreatywności do i tak już potężnego arsenału opcji projektowania tła. Jeśli nie masz dużego doświadczenia z opcjami tła Divi, zdecydowanie tracisz. Jedna wygodna, ale potężna opcja daje możliwość dodania maski tła do gradientu tła (lub obrazu) za pomocą zaledwie kilku kliknięć. Oprócz opcji tła, dzielniki sekcji dają również użytkownikom możliwość ulepszenia projektów tła.

W tym samouczku pokażemy, jak połączyć maski tła z dzielnikami sekcji w Divi. Podamy Ci instrukcje krok po kroku, jak ukończyć projekt tła dla sekcji Divi przy użyciu tej techniki. Ponadto omówimy nawet tworzenie alternatywnych projektów za pomocą kilku prostych poprawek.

Cieszyć się!

zapowiedź

Oto krótkie spojrzenie na projekty z tego samouczka.

Koncepcja

Podstawową koncepcją tego samouczka jest połączenie maski tła i dzielników sekcji, aby stworzyć jeszcze bardziej unikalne kształty masek.

Najpierw dodajemy maskę tła.

Następnie dodajemy przegrody sekcyjne, aby w kreatywny sposób uzupełnić kształt maski.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby zyskać
dostęp do pobierania musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy
subskrybentem, w każdy poniedziałek otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout! Jeśli jesteś już na
wystarczy wpisać poniżej swój adres e-mail i kliknąć pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

ŚCIĄGNIJ

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do biblioteki Divi, wykonaj następujące czynności:

1. Przejdź do biblioteki Divi.
2. Kliknij przycisk Importuj u góry strony.
3. W wyskakującym okienku przenoszenia wybierz kartę importu
4. Wybierz plik do pobrania z komputera (najpierw rozpakuj plik i użyj pliku JSON).
5. Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.
4. Teraz masz puste płótno, aby rozpocząć projektowanie w Divi!

Jak łączyć maski tła i dzielniki w Divi

1. Dodaj rozmiar sekcji i odstępy

Na początek dodamy rozmiar i odstępy do istniejącej sekcji w kreatorze. Zamierzamy wstrzymać się z dodawaniem wiersza lub jakiejkolwiek treści, abyśmy mogli skoncentrować się na projekcie tła sekcji

Otwórz ustawienia sekcji. Na karcie Projekt zaktualizuj rozmiar i odstępy w następujący sposób:

• Minimalna wysokość: 50vw
• Padding: 0px na górze, 0px na dole

Używanie jednostki długości VW do określania wysokości może wydawać się dziwne. Ponieważ jednak będziemy używać jednostki długości VW do rozmiaru naszych elementów tła, zapewni to płynne skalowanie projektu w różnych szerokościach przeglądarki.

2. Utwórz gradient tła

Gdy sekcja osiągnie pewną wysokość, jesteśmy gotowi do dodania gradientu tła do sekcji. To da nam trochę koloru tła, dzięki czemu będziemy mogli później zaprezentować maskę tła i kombinację dzielników.

Na karcie Treść kliknij kartę gradientu tła pod opcjami tła. Następnie dodaj gradient w następujący sposób:

• Zatrzymanie koloru 1: #1a2a6c (przy 20%)
• Zatrzymanie koloru 2: #b21f1f (przy 60%)
• Zatrzymanie koloru 2: #fdbb2d (przy 100%)

3. Utwórz maskę tła

Teraz, gdy mamy już gradient kolorów, jesteśmy gotowi do stworzenia maski tła.

Na karcie Maska tła zaktualizuj następujące elementy:

• Maska: Szewrony
• Kolor maski: #000
• Transformacja maski: odwrócona
• Współczynnik proporcji maski: Zobacz zrzut ekranu

4. Dodaj dzielniki tła sekcji

Gdy nasza maska ​​jest już na miejscu, możemy dalej modyfikować kształt maskowania za pomocą dzielników sekcji. W tym przykładzie dodamy półokrągły rozdzielacz sekcji na górze i na dole. Spowoduje to ściśnięcie maski tła, aby wyglądała bardziej jak fantazyjny wzór strzałki.

Aby to zrobić, kliknij kartę Projekt i dodaj następujące dzielniki:

Najpierw dodaj górną przegrodę pod zakładką Góra.

• Styl dzielnika: Zobacz zrzut ekranu
• Kolor dzielnika: #000
• Wysokość dzielnika: 10vw

Następnie dodaj dolną przegrodę pod zakładką Dół.

• Styl dzielnika: Zobacz zrzut ekranu
• Kolor dzielnika: #000
• Wysokość dzielnika: 10vw
• Przerzucanie dzielnika: Przerzucanie w pionie

Wynik

Oto dotychczasowy wynik.

Poprawianie opcji tła i dzielników w celu uzyskania większej liczby projektów

Teraz, gdy masz już podstawową ideę, możemy łatwo pobawić się dzielnikami sekcji opcji tła, aby stworzyć więcej projektów.

Alternatywny projekt #1

W naszym pierwszym, alternatywnym projekcie, obrócimy istniejącą maskę tła i zastąpimy półokręgowe dzielniki sekcji trójkątami.

Aby to zrobić, otwórz istniejące ustawienia sekcji, kliknij kartę Maska tła i zaktualizuj następujące elementy:

• Transformacja maski: odwracanie w pionie, obracanie
• Współczynnik proporcji maski: Zobacz zrzut ekranu

Następnie zaktualizuj przegrody sekcji w następujący sposób:

Górny rozdzielacz

• Styl dzielnika: Zobacz zrzut ekranu
• Wysokość dzielnika: 13vw

Dolna przegroda

• Styl dzielnika: Zobacz zrzut ekranu
• Wysokość dzielnika: 13vw
• Przerzucanie dzielnika: wyłącz

Wynik

Oto wynik.

Alternatywny projekt nr 2

W naszym drugim i ostatnim alternatywnym projekcie zamierzamy zastąpić maskę Chevrons maską Diagonal Bars 2, a także damy jej nową przegrodę górnej części, aby dodać subtelny efekt szumu do projektu.

Aby to zrobić, otwórz istniejące ustawienia sekcji, kliknij kartę Maska tła i zaktualizuj następujące elementy:

• Maska: Ukośne pręty 2
• Transformacja maski: Odwrócenie w poziomie
• Współczynnik proporcji maski: Zobacz zrzut ekranu

Następnie zaktualizuj przegrody sekcji w następujący sposób:

Górny rozdzielacz

• Styl dzielnika: Zobacz zrzut ekranu
• Przerzucanie dzielnika: Przerzucanie w poziomie

Dolna przegroda

• Styl dzielnika: brak

Wynik

Oto wynik.

Ostateczne rezultaty

Aby lepiej zorientować się, jak te tła będą wyglądać z pewną zawartością, dodałem jednokolumnowy wiersz z dużym nagłówkiem umieszczonym w środku sekcji. Dodałem również dodatkowy projekt dla każdego, który zawiera obraz z trybem mieszania.

Sprawdź je!

Aby zapoznać się z ustawieniami użytymi dla treści i obrazów, możesz pobrać bezpłatny układ tego samouczka (patrz powyżej), który zawiera każdy z projektów.

Końcowe przemyślenia

Połączenie masek i dzielników sekcji dla projektów tła otwiera więcej możliwości tworzenia unikalnych kształtów dla tych wbudowanych masek. Zapraszam do samodzielnego odkrywania różnych kombinacji. Mamy nadzieję, że przyda się to na Twojej własnej stronie internetowej lub następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Twoje zdrowie!