Divi , popularny motyw WordPress, znany jest z wszechstronnych modułów, które umożliwiają projektantom i programistom stron internetowych łatwe tworzenie oszałamiających układów. Wśród imponującego arsenału modułów moduł Divi Divider wyróżnia się jako unikalne narzędzie, które pozwala użytkownikom tworzyć urzekające przekładki. W tym poście na blogu zagłębimy się w urzekający świat dzielników gradientowych i odkryjemy, w jaki sposób możesz wykorzystać moduł Divi Divider, aby ulepszyć swoje projekty. Przyjrzymy się bliżej działaniu dzielników gradientu i przedstawimy inspirujące przykłady, które pobudzą Twoją kreatywność.
Zapowiedź
Oto podgląd tego, jak nasz projekt gradientu będzie wyglądał na końcu.
Jak utworzyć dzielniki gradientu za pomocą modułu dzielnika Divi
Istnieje wiele metod konstruowania dzielnika przy użyciu modułu dzielnika Divi. Domyślnie moduł wyświetla linię jako dzielnik. Można jednak dezaktywować tę linię i wykorzystać ustawienia tła modułu do wygenerowania separatora, który można dostosować za pomocą różnych opcji tła, takich jak kolory, gradienty, obrazy i inne. Zamiast wyświetlać rzeczywistą przegrodę, skoncentrujemy się na stylizacji pojemnika przekładki, aby stworzyć przegrodę o niepowtarzalnym stylu.
Ukryj rozdzielacz
Procedura jest łatwa. Najpierw dodaj moduł rozdzielający do swojego układu, a następnie pod zakładką treści ukryj rozdzielacz.
Twórz niesamowite strony internetowe
Z najlepszym darmowym kreatorem stron Elementor
Zacząć teraz
Tło rozdzielacza
Następnie wybierz typ tła, którego chcesz użyć, z menu Ustawienia tła na karcie Treść. W tym poście skoncentrujemy się na opcjach gradientu tła.
Dodaj rozmiar i odstępy
Aby zbudować stylową przegrodę w niemal dowolnym rozmiarze i kształcie, użyj opcji Rozmiar i odstępy na karcie Projekt, aby dostosować wysokość i szerokość pojemnika przekładki. Aby wygenerować żądany rozmiar, użyj szerokości i wysokości, maksymalnej szerokości i maksymalnej wysokości, wyrównania modułu oraz górnego i dolnego dopełnienia.
Dodaj promień obramowania
Aby jeszcze bardziej nadać kształt kształtowi, dodaj opcje obramowania, takie jak Promień obramowania. Narożniki można regulować łącznie lub oddzielnie, aby uzyskać fascynujące kształty. Aby uzyskać specjalny projekt, możesz dodatkowo dodać szerokość obramowania, style itp.
Dzielnik gradientu
Wykorzystamy stronę docelową z bezpłatnego pakietu Home Baker Layout Pack zawartego w Divi dla naszego pierwszego separatora gradientu. Grafika tego pakietu układów zawiera brązowe gradienty i mocne, ciemne kontury. Powtórzymy to z naszym gradientem, używając palety kolorów pakietu układu. W naszej pierwszej ilustracji użyjemy modułu podziału, który jest już obecny w sekcji bohatera. Ten jest prosty, ale robi duży efekt wizualny. Oto układ przed dodaniem modułu rozdzielacza w celach informacyjnych.
Widoczność
Wybierz opcję Nie dla opcji Pokaż przegrodę w obszarze Opcje widoczności modułu przegrody.
- Pokaż dzielnik: Nie
Gradient
Wybierz kartę Gradient tła, przewijając w dół do opcji Tło. Do tego dodamy pięć stopni gradientu. Zostaną użyte domyślne wartości pozostałych parametrów gradientu. Parametry każdego przystanku gradientu są wymienione poniżej.
- Pierwszy stopień gradientu: 0 pikseli, #dcc087
- Drugi stopień gradientu: 16 pikseli, #e6b060
- Trzeci stopień gradientu: 22 piksele, #f19d33
- Czwarty stopień gradientu: 31 pikseli, #f49826
- Piąty stopień gradientu: 48 pikseli, #3b261e
Jako jednostkę gradientu należy stosować piksele. Odcienie, których szukaliśmy, są już dostępne. Pozostaje tylko zoptymalizować rozmiar.
- Jednostka gradientu: piksele
Rozmiar
Następnie wybierz zakładkę Projekt. Wpisz 100% dla szerokości w obszarze Rozmiar. Wszystkie trzy rozmiary urządzeń powinny mieć wysokość ustawioną na 40 pikseli. Modułowe zamknięcie zapisze Twoje ustawienia.
- Szerokość: 100%
- Wysokość: 40 pikseli
Ostateczny podgląd
Teraz mamy ostateczny podgląd naszego projektu gradientu w akcji.
Kończące się myśli
To kończy naszą dyskusję na temat wykorzystania modułu Divider Divi do tworzenia dzielników gradientu. Aby utworzyć niestandardowe separatory gradientu, użyj opcji gradientu w module Dzielnik. Możemy tworzyć przekładki gradientowe w różnych rozmiarach i kształtach, wykorzystując narożnik obramowania, odstępy i opcje rozmiaru. Możemy zaprojektować charakterystyczne przegrody gradientowe, które wyróżnią się z tłumu dzięki zaledwie kilku podstawowym wyborom.
