Czy chciałbyś użyć masek i wzorów w sekcji Bohaterów w Divi ?
Nowe maski i wzory tła Divi to jedna z naszych najfajniejszych nowych funkcji projektowych. Każdą z masek i wzorów można łączyć z innymi elementami tła (takimi jak kolory, obrazy i gradienty), tworząc niezliczone unikalne kombinacje za pomocą zaledwie kilku kliknięć.
Dzisiaj pokażemy Ci, jak korzystać Divi oraz nowe maski i wzory tła, aby zaprojektować sekcję bohatera.
W tym samouczku omówimy ważne kroki potrzebne do tworzenia masek i wzorów tła.
Pokażemy nawet, jak ustawić obrazy tła, aby pasowały do projektu maski. To powinno dać ci narzędzia musisz stworzyć idealną sekcję Hero dla swojej witryny w kilka minut.
badanie
Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.
Czytaj także: Divi: Jak stworzyć responsywną siatkę obrazu z linkami i efektami najechania?
Przykładowa sekcja Hero z białą maską i wzorem.
Oto ciemna wersja tej samej sekcji Hero z czarną maską i wzorem.
Dzięki temu projektowi możesz łatwo zmieniać maski i pozycje masek za pomocą zaledwie kilku kliknięć!
Utwórz nową stronę za pomocą Divi Builder
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Zastosowanie Divi Budowniczy
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Jak używać masek Divi i wzorów tła w sekcji bohaterów
1. Utwórz strukturę układu
W tej sekcji bohaterów mamy do czynienia z klasyczną strukturą układu z tytułem i wezwaniem do działania po lewej stronie oraz obrazem (lub projektem wizualnym) po prawej stronie.
W tym przykładzie nasz projekt wizualny zostanie utworzony przy użyciu opcji tła Divi. Ale zanim przejdziemy do sedna sprawy, musimy utworzyć dwukolumnowy wiersz, aby zaoszczędzić miejsce po prawej stronie strony, aby zaprezentować nasze maski tła sekcji i projekt wzoru.
2. Dodaj tytuł i wezwanie do działania
W lewej kolumnie (kolumna 1) dodaj moduł tekstowy dla głównego tytułu, moduł tekstowy dla tekstu napisów i moduł przycisku dla przycisku.
3. Dodaj odstępy w pionie do sekcji
Aby nasz projekt tła wyglądał na wysoki i piękny, musimy dodać do sekcji wysokość w pionie. Prostym sposobem na to jest dodanie dopełnienia na górze i na dole sekcji. Pamiętaj, że musimy dostosować wyściółkę na ekranie tabletu i telefonu, aby zrobić miejsce na nasz projekt tła, gdy kolumny są ułożone pionowo.
Otwórz ustawienia sekcji. Na karcie projektu zaktualizuj dopełnienie w następujący sposób:
- Wyściółka:
- Komputer stacjonarny: górny 20vw, dolny 20vw
- Tablet: górny 8vw, dolny 48vw
- Telefon: górny 8vw, dolny 70vw
4. Dodaj obraz tła i gradient
Następnie możemy dodać do sekcji obraz tła i gradient. Pamiętaj, że główny punkt obrazu tła zostanie ujawniony po prawej stronie sekcji, więc użyj obrazu, który ma to, co chcesz zobaczyć po prawej stronie.
W tym przykładzie używamy obrazu z panoramą miasta. Prawa strona obrazu ma bliższe i lepiej wyglądające budynki, więc działa naprawdę dobrze.
Pod zakładką Zdjęcie w tle, prześlij obraz w tle sekcji.
W Divi możesz łatwo dodać gradient kolorów do obrazu tła. Pod zakładką Gradient tła, dodaj następujący gradient do tła sekcji:
- Gradient zatrzymuje się:
- 0%: #3e22ff
- 100%: jasne
- Kwadratowy gradient nad obrazem tła : TAK
5. Utwórz wzór tła dla sekcji
Teraz, gdy mamy gotowy obraz tła i gradient, możemy dodać wzór tła, aby ukończyć projekt.
W tym przykładzie użyjemy subtelnego wzoru, który po prostu doda odrobinę tekstury, aby nadać mu bardziej niepowtarzalny wygląd.
Pod zakładką Wzory tła, zaktualizuj następujące informacje:
- Wzór tła: Tuftowany
SZTUCZKA: W przypadku wzorów tła zwykle najlepiej jest zachować subtelność. Spróbuj użyć niestandardowych rozmiarów dla mniejszych projektów, a następnie zmniejsz krycie koloru.
6. Utwórz maskę tła dla sekcji
Mając nasz wzór tła, jesteśmy w końcu gotowi do przetestowania zupełnie nowej maski tła dla naszego projektu. Do wyboru jest wiele opcji i odmian. W tym przykładzie użyjemy maski o strukturze plastra miodu.
Pod zakładką Maska tła, zaktualizuj następujące informacje:
- Maska: plaster miodu
- Kolor maski: #ffffff
- Rozmiar: okładka
7. Dostosuj pozycję obrazu tła
Ponieważ używamy maski tła, część naszego obrazu tła jest zamaskowana (lub „zamaskowana”).
W tym przykładzie upewnimy się, że prawy dolny róg obrazu jest najbardziej widoczny i przesuniemy go nieco w prawo, aby pokazać więcej budynków.
Na karcie Obraz zaktualizuj następujące elementy:
- Pozycja obrazu tła: dolny prawy
- Przesunięcie poziome obrazu tła: -4vw
8. Użyj trybu mieszania
Jednym ze sposobów na kreatywność z wszystkimi tymi elementami tła jest dodanie trybu mieszania. Tryby mieszania można dodać do dowolnych opcji tła i można ich używać do miksowania wielu warstw tła (obrazu, gradientu, maski itp.) w kreatywny sposób.
W tym przykładzie połączymy obraz tła z kolorem gradientu. Aby to zrobić, kliknij zakładkę Zdjęcie w tle i dodaj tryb mieszania, aby zmieszać kolor gradientu z obrazem tła w następujący sposób:
- Mieszanie obrazu tła: mnożenie
9. Dostosuj maskę tła dla urządzeń mobilnych
Ważne jest, aby projekt maski tła również dobrze wyglądał na urządzeniach mobilnych. Na szczęście wbudowane opcje ułatwiają ten proces.
Pamiętaj, że dodaliśmy już dodatkowe wypełnienie na tablecie i telefonie, aby zrobić miejsce na nasz projekt tła.
Teraz wszystko, co musimy zrobić, to użyć opcji transformacji tła i proporcji, aby dostosować maskę do urządzeń mobilnych.
Pod zakładką Maska tła, włącz opcje responsywne i zaktualizuj następujące elementy:
Wersja tabletu
- Transformacja maski: Odwróć w pionie, Odwróć w poziomie, Obróć
- Współczynnik proporcji maski: kwadrat
Wersja telefonu
- Transformacja maski: Odwróć w pionie, Odwróć w poziomie, Obróć
- Proporcje maski: Portret
Wynik
Sprawdź projekt, który do tej pory stworzyliśmy.
Komputer stacjonarny
Wersja tabletu
Wersja telefonu
10. Stwórz ciemną wersję
Jeśli chcesz mieć ciemniejszą wersję tego projektu, po prostu zmień kolor maski tła na ciemny kolor (np. czarny).
Następnie zmień kolor wzoru na czarny.
Następnie zmień tekst tytułu i podtytułu na biały. Możesz także zaktualizować kolor przycisku.
Tak wygląda ciemna wersja.
Ostateczne wyniki
Zobacz też: Divi: Jak dostosować link „Czytaj więcej” na blogu
Oto kolejne spojrzenie na nasze końcowe wyniki.
Pobierz DIVI teraz !!!
Wnioski
Zaprojektuj sekcję Bohatera dla swojego Witryna internetowa jest świetna zabawa maski i wzory tła od Divi. Opcje tła można łatwo zmienić, aby uzyskać idealny projekt. Istnieje wiele innych opcji, których możesz użyć (takich jak tryby mieszania), aby stworzyć jeszcze bardziej unikalne tła.
Dodatkowo możesz dodawać maski i wzory do dowolnego elementu Divi, a nie tylko do sekcji. Więc baw się dobrze, eksperymentując!
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
