10 sztuczek do projektowania tła teraz możliwych dzięki nowym ustawieniom tła Divi

Od czasu wydania nowego interfejsu opcji tła Divi, Divi stało się jeszcze potężniejsze. Nowe funkcje otworzyły wiele nowych możliwości projektowych. Dzisiaj przedstawię kilka nowych sztuczek projektowych, o których możesz nie wiedzieć, i mam nadzieję, że zainspiruję Cię do stworzenia niesamowitych projektów tła.

Istnieje niezliczona liczba kombinacji i mieszanek projektów tła, które można utworzyć za pomocą programu Visual Builder. 10 sztuczek, które wybrałem w tym poście, tylko zarysuje powierzchnię, ale mają na celu wprowadzenie Cię w różne koncepcje i wzbudzenie zainteresowania. Większość z tych trików projektowych jest wykonywana przy użyciu nowych opcji tła, takich jak nowe opcje tła gradientowego i łączenie obrazów tła z kolorami gradientu.

Muszę cię jednak ostrzec. Gdy zaczniesz zagłębiać się w opcje tła, możesz nigdy nie zrezygnować! To świetna zabawa. Cóż, przynajmniej tak było dla mnie.

Cieszyć się.

Oto zajawka trików projektowych

Jak śledzić ten post

Zamiast zaczynać od zera za każdym razem, gdy wyjaśniam nowy trik projektowy, użyłem tego samego przykładowego projektu dla większości z nich i dodałem do niego różne triki. Oznacza to, że większość przykładów wymaga ukończenia poprzedniej sztuczki projektowej, zanim będzie można dołączyć nową sztuczkę. Wszystkie triki nr 1-9 są zgodne z tą samą podstawową konfiguracją i wymagają triku nr 1 jako warunku wstępnego. Więc jeśli testujesz funkcje, sugerowałbym rozpoczęcie od Sztuczki nr 1.

10 sztuczek projektowania tła z Divi

Subskrybuj nasz kanał YouTube

Sztuczka nr 1: Nakładka ukośna

Dodaj sekcję o pełnej szerokości, a następnie wstaw moduł nagłówka o pełnej szerokości.

Następnie zaktualizuj ustawienia modułu nagłówka w następujący sposób:

Opcje treści

Tytuł: [wpisz tytuł]
Podtytuł: [wpisać podtytuł]
Adres URL obrazu logo: [wprowadź logo]
Kolory gradientu tła: rgba (12 113 195,0,55), rgba (255,255,255,0)
Typ gradientu: liniowy
Kierunek gradientu: 135 stopni
Pozycja startowa: 60%
Pozycja końcowa: 60% (wszystko co 60% lub mniej będzie działać)

Ponieważ gradient zaczyna się i kończy w tym samym punkcie, w zasadzie nie ma żadnego efektu gradientu. Tak więc wynikiem są dwa kolory po każdej stronie znacznika 60%. To w połączeniu z kątem kierunku gradientu tworzy efekt.

Opcje projektowe

Kolor tekstu: jasny
Czcionka tytułu: domyślna, pogrubiona (B), wielkie litery (TT)
Rozmiar czcionki tytułu: 40px
Rozmiar czcionki podtytułu: 24px

Zaawansowane opcje

W obszarze Custom CSS w polu Main Element dodaj następujący kod CSS:

Padding: 150px 0;

To tylko po to, aby dodać dodatkowe wypełnienie na górze i na dole modułu nagłówka

Zapisz ustawienia

Teraz nadszedł czas, aby dodać tło do sekcji pełnej szerokości. Przejdź do ustawień sekcji pełnej szerokości, klikając ikonę koła zębatego w fioletowym polu kontrolnym.

Następnie zaktualizuj opcje zawartości ustawień sekcji w następujący sposób:

Obraz tła: [wprowadź obraz tła tutaj. Powinien mieć co najmniej 1960 pikseli szerokości. Wybrałem ten obraz z unsplash.com i przyciąłem go tak, aby wyróżniająca się część obrazu znajdowała się po prawej stronie.]
Użyj efektu paralaksy: TAK (jest to opcjonalne, ale myślę, że działa dobrze z nakładką diagonalną)
Metoda paralaksy: prawdziwa paralaksa

Otóż ​​to! Możesz swobodnie dostosować krycie koloru gradientu i stopień kierunku gradientu według własnych upodobań.

Myślę, że mamy dobry początek. Przejdźmy do drugiej sztuczki.

Sztuczka nr 2: nakładanie warstw ukośnych nakładek

Ta sztuczka projektowa jest kontynuacją sztuczki nr 1, więc upewnij się, że masz ukończoną sztuczkę nr 1, zanim przejdziesz dalej.

W triku nr 1 zakończyliśmy nakładkę ukośną, korzystając z opcji gradientu tła w module nagłówka o pełnej szerokości.

Korzystając z tego samego przykładu, dodaj dodatkowy gradient tła do sekcji o pełnej szerokości. Mamy już obraz tła dla tej sekcji, ale dzięki nowym opcjom Divi możemy łączyć kolory gradientu z obrazem tła, a następnie łączyć je z określonymi efektami.

Przejdź do ustawień sekcji pełnej szerokości i zaktualizuj następujące opcje zawartości :

Kolory gradientu tła: rgba (131,0,233,0,38), rgba (255,255,255,0)
Typ gradientu: liniowy
Kierunek gradientu: 135 stopni (taki sam jak inny kierunek gradientu w module nagłówka)
Pozycja startowa: 38%
Pozycja końcowa: 38%

Teraz kliknij ikonę obrazu tła i zmień następujące elementy:

Użyj efektu paralaksy: Nie
Mieszanie obrazu tła: mnożenie

Teraz masz 2 nakładające się na siebie ukośne nakładki, które można łatwo dostosować w celu uzyskania unikalnego projektu tła.

Sztuczka nr 3: Nakładka koła

Ta sztuczka projektowa jest kontynuacją sztuczki nr 1, więc upewnij się, że masz ukończoną sztuczkę nr 1, zanim przejdziesz dalej.

Teraz zamienimy tę przekątną nakładkę ze Sztuczki nr 1 w nakładkę okrągłą. Aby to zrobić, przejdź do ustawień modułu pełnej szerokości i zaktualizuj następujące elementy:

Opcje treści

Typ gradientu tła: Promieniowy
Kierunek promieniowy: Środek
Pozycja startowa: 30%
Pozycja końcowa: 30%

Opcje projektowe

Orientacja tekstu i logo: Środek

Teraz sprawdź nowe tło nagłówka.

Ta sztuczka tworzy świetnie wyglądające nagłówki lub wezwanie do działania. Rozmiar nakładki koła można łatwo dostosować i dobrze reaguje na różne rozmiary ekranu. W tej chwili używam półprzezroczystego koloru gradientu na górze obrazu tła, ale wyglądałoby to świetnie bez obrazu tła.

Oto przykład tego, jak by to wyglądało bez obrazu tła iz ciemniejszym kolorem tekstu.

Sztuczka nr 4: nakładanie nakładek na koła, aby utworzyć obramowanie koła

Jest to kontynuacja sztuczki nr 3, w której zakończyliśmy dodanie nakładki koła do modułu nagłówka o pełnej szerokości. Gdy nakładka kręgu jest już na miejscu, możemy dodać drugą nakładkę kręgu, która posłuży jako obramowanie pierwszego. Robimy to, dodając kolejny gradient tła do sekcji o pełnej szerokości, która znajduje się za modułem nagłówka o pełnej szerokości.

Przejdź do ustawień sekcji pełnej szerokości i zaktualizuj następujące elementy:

Opcje treści

W zakładce Obraz tła:

Użyj efektu paralaksy: NIE
Mieszanie obrazu tła: mnożenie

W zakładce Gradient tła:

Kolory gradientu tła: rgba (0,0,0,0,45), rgba (255,255,255,0)
Typ gradientu tła: Promieniowy
Kierunek promieniowy: Środek
Pozycja startowa: 34%
Pozycja końcowa: 34%

Zapisz ustawienia

Otóż ​​to.

Możesz także łatwo zmienić rozmiar okręgu gradientu tła, dostosowując procent pozycji początkowej.

Sztuczka nr 5: Nakładka odwróconego koła

Jest to kontynuacja sztuczki nr 3, która zakończyła się nakładką koła w module nagłówka o pełnej szerokości. W tej chwili okrąg jest półprzezroczysty niebieski, a reszta obrazu tła nie ma w ogóle koloru nakładki gradientowej. W przypadku tej sztuczki zamierzam to wyłączyć i odwrócić nakładkę koła, aby półprzezroczysta niebieska nakładka gradientu otoczyła okrąg, a wewnątrz koła odsłonił znajdujący się za nim obraz tła.

Aby to zrobić, przejdź do ustawień nagłówka o pełnej szerokości i zaktualizuj następujące elementy:

Opcje treści

Kolory gradientu tła: rgba(255,255,255,0), rgba(12,113,195,0.79)

Uwaga: Wszystko, co tak naprawdę robisz, to zamiana kolorów po lewej i prawej stronie. Teraz w okręgu pojawia się przezroczysty kolor, a otacza go niebieski gradient. Zwiększyłbym nieprzezroczystość niebieskiego, aby był trochę ciemniejszy.

Sprawdź to…

Sztuczka #6: Nakładka odwróconego koła z tłem wideo

Jest to kontynuacja Sztuczki #5, która pozostawiła nam nakładkę odwróconego koła z otaczającym niebieskim tłem. Obecnie okrąg ukazuje za sobą obraz tła. Możesz łatwo dodać tło wideo, aby usiąść za tą nakładką koła. Sugerowałbym użycie filmu, który nie rozprasza zbytnio. Również za każdym razem, gdy używasz filmów, upewnij się, że rozmiar pliku jest mały, aby nie ucierpiał czas ładowania strony.

Aby zastąpić obraz tła wideo, przejdź do Ustawień sekcji pełnej szerokości, kliknij
ikonę wideo w tle i dodaj swój film.

Teraz przejdź do ustawień nagłówka Fullwidth i zaktualizuj następujące elementy:

Opcje treści

Kolory gradientu tła: rgba (12 113 195, 0,67), #333333

Dzięki nowym kolorom gradientu wideo w tle jest widoczne tylko w okręgu. A nakładające się kolory naprawdę sprawiają, że tekst się wyróżnia.

Sztuczka nr 7: Nakładka odwróconego okręgu poza środkiem

Jest to kontynuacja Sztuczki #5, która pozostawiła nam nakładkę odwróconego koła. Jeśli wrócisz do ustawień nagłówka o pełnej szerokości, możesz dostosować kierunek promieniowy do różnych ustawień, aby stworzyć inny wygląd nagłówka.

Przejdź do ustawień nagłówka Fullwidth i zaktualizuj następujące elementy:

Opcje treści

Kierunek promieniowy: w prawo

Opcje projektowe

Orientacja tekstu i logo: w lewo

Oto ostateczny wynik i kilka przykładów różnych kierunków promieniowych:

Te przykłady oczywiście wymagają trochę pracy, ale masz pomysł.

Sztuczka nr 8: Używanie gradientów do efektów cienia

Ta sztuczka może nie jest oszałamiająca, ale jest niezwykle przydatna. Dla tych z nas, którzy nie chcą zawracać sobie głowy używaniem edytora zdjęć, takiego jak Photoshop, do dodawania cieni do swoich zdjęć, to jest dla Ciebie.

Jest to kontynuacja sztuczki nr 1, która zakończyła się ukośną nakładką przy użyciu opcji gradientu tła w module nagłówka o pełnej szerokości. Zmieńmy teraz półprzezroczystą niebieską nakładkę na ciemne cienie, które zaczynają się po lewej stronie obrazu i stopniowo zanikają po prawej stronie. W ten sposób główna część obrazu po prawej stronie pozostaje nienaruszona, a ciemny cień po lewej stronie pomaga uczynić tekst bardziej czytelnym.

Aby dodać efekt cienia, przejdź do ustawień nagłówka o pełnej szerokości i zaktualizuj następujące elementy:

Opcje treści

Kolory gradientu tła: rgba(0,0,0,0.55), rgba(0,0,0,0)
Kierunek gradientu: 90 stopni
Pozycja startowa: 38%
Pozycja końcowa: 85%

Oto wynik.

Sztuczka nr 9: Mieszanie obrazu tła

Nowe opcje tła Divi obejmują tryby mieszania CSS do dostosowywania obrazów. Odkrywanie różnych mieszanek obrazów jest świetną zabawą i często tworzy zaskakujące projekty. Dla tych z was, którzy nie są projektantami, nie musicie znać definicji nasycenia lub jasności, aby skorzystać z tych fajnych opcji. Będziesz musiał ustawić kolor tła lub gradient w połączeniu z obrazem tła, aby zobaczyć wszystkie fajne efekty (nie będzie to działać tylko z obrazem tła). Następnie baw się, aż uzyskasz pożądany wygląd. Wyniki mogą Cię zaskoczyć.

W tym przykładzie będę kontynuował sztuczkę nr 1, która zakończyła się ukośną nakładką przy użyciu opcji gradientu tła w module nagłówka o pełnej szerokości.

Przejdź do ustawień nagłówka o pełnej szerokości i usuń gradienty tła w opcjach treści.

Zapisz ustawienia

Teraz przejdź do sekcji Ustawienia i zaktualizuj następujące elementy:

Opcje treści

Kolory gradientu tła: rgba(0,0,0,0.76), #0c71c3
Kierunek gradientu: 90 stopni
Pozycja startowa: 50%
Pozycja końcowa: 50%

Nie widzisz jeszcze żadnych zmian. W porządku. Przejdź do zakładki Obraz tła i zaktualizuj następujące informacje:

Użyj efektu paralaksy: NIE
Mieszanie obrazu tła: twarde światło

Otóż ​​to. Sprawdź wynik.

Uwaga: kolory użyte tutaj stworzą różne efekty w zależności od używanego obrazu tła. Proponuję więc bawić się kolorami i opcjami mieszania, dopóki nie uzyskasz takiego, który ci się podoba.

Sztuczka nr 10: nakładanie warstw, aby dodać więcej kolorów do tła gradientowego.

Domyślnie każda sekcja, wiersz, kolumna i moduł mogą mieć dwa gradienty kolorów. Jednak gdy je połączysz i ułożysz jeden na drugim, możesz utworzyć 5 kolorów dla swojego gradientowego tła. A kiedy te 5 kolorów połączy się ze sobą, możesz stworzyć całkiem fajne spektrum.

Oto jak to robisz. Najpierw dodaj zwykłą sekcję z 1 wierszem struktury kolumn. Następnie w rzędzie dodaj moduł Blurb.

Zaktualizuj ustawienia modułu Blurb w następujący sposób:

Opcje treści

Tytuł: [wpisz tytuł]
Treść: [wprowadź treść]

Opcje projektowe

Kolor tekstu: jasny
Orientacja tekstu: Środek
Czcionka nagłówka: domyślna, pogrubiona (B)
Rozmiar czcionki nagłówka: 56px
Rozmiar czcionki ciała: 22px
Niestandardowe dopełnienie: 100px góra, 100px dół

Ponieważ tekst notki jest biały na białym tle, nie możesz go jeszcze zobaczyć, ale to jest w porządku. Wkrótce będziesz. Czas zacząć dodawać kolory gradientu.

Będziemy szli od tyłu do przodu, od lewej do prawej. Aby rozpocząć, przejdź do sekcji Ustawienia i zaktualizuj następujące elementy:

Opcje treści

Kolory gradientu tła: #ff0077, #0c71c3
Kierunek gradientu: 90 stopni
Pozycja startowa: 0%
Pozycja końcowa: 30%

Opcje projektowe

Niestandardowe wypełnienie: 0px góra, 0px dół

Teraz zaktualizujmy nasz następny poziom koloru gradientu – nasz wiersz. Przejdź do ustawień wiersza i zaktualizuj następujące elementy:

Opcje treści

Kolory gradientu tła: rgba (255,255,255,0), #8300e9
Kierunek gradientu: 90 stopni
Pozycja startowa: 25%
Pozycja końcowa: 50%
Kolumna 1 Kolory gradientu tła: rgba (255,255,255,0), #e02b20
Kierunek gradientu: 90 stopni
Pozycja startowa: 50%
Pozycja końcowa: 75%

Opcje projektowe
Ustaw pełną szerokość tego wiersza: TAK
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1
Niestandardowe dopełnienie: 0px góra, 0px dół

Zapisz ustawienia

Teraz, aby uzyskać ostatnią warstwę gradientu, musimy przejść do modułu Blurb i zaktualizować następujące elementy:

Opcje treści
Kolory gradientu tła: rgba (255,255,255,0), #edf000
Kierunek gradientu: 90 stopni
Pozycja początkowa: 75%
Pozycja końcowa: 100%

Opcje projektowe

Niestandardowe dopełnienie: 100px góra, 100px dół

Otóż ​​to. Teraz masz pięć kolorów gradientu, które łączą się ze sobą, tworząc całkiem kolorowe tło.

Nie zapominaj, że możesz również zmienić typ gradientu na promieniowy (okrągły) i całkowicie zmienić projekt (zajmuje to około 20 sekund).

Jeśli zmienisz typ gradientu na promieniowy dla wszystkich warstw (sekcji, wiersza, kolumny i modułu notatek), otrzymasz coś takiego.

Sztuczka bonusowa

Oto przykład, w jaki sposób można nakładać obrazy tła za pomocą paralaksy. To jest zwykła sekcja z obrazem tła używająca True Parallax. Wewnątrz sekcji znajduje się rząd 1 kolumny, który został wykonany na pełną szerokość i bez wypełnienia, dzięki czemu rozciąga się na całą szerokość sekcji. Do rzędu dodałem przezroczysty obraz tła z kilkoma okręgami gradientu (podobno wyglądającymi jak bąbelki) przy użyciu metody paralaksy CSS. Następnie dodałem moduł Call to Action do wiersza z przezroczystym tłem. Ta kombinacja tworzy ruch podczas przewijania sekcji na stronie.

Ta sztuczka jest nieco bardziej skomplikowana, ponieważ wymaga stworzenia niestandardowego zdjęcia poza Divi. Po prostu mam nadzieję, że pokażę Ci możliwości.

Jeszcze kilka przykładów

Zakończę to kilkoma przykładami projektowymi, które zbudowałem podczas testowania tych samych sztuczek, o których mowa w tym poście.

Końcowe przemyślenia

Mam nadzieję, że podobało Ci się odkrywanie tych nowych opcji tła i jesteś podekscytowany możliwościami, jakie niosą ze sobą. A ponieważ te opcje są dostępne w sekcjach, wierszach, kolumnach i modułach, możesz zastosować te sztuczki projektowe w dowolnej części swojej witryny. Jeśli jeszcze tego nie zrobiłeś, poświęć trochę czasu na kopanie głębiej i pozwól, aby te kreatywne soki popłynęły. Jestem przekonany, że jeśli poświęcisz czas na samodzielne zapoznanie się z opcjami tła, z przyjemnością zaimplementujesz je w swoim następnym projekcie. Nie mogę się doczekać, żeby zobaczyć, co wymyślisz.

Czekamy na kontakt z Państwem w komentarzach.