Jak kształtować obrazy za pomocą Gradient Buildera Divi

Maski obrazów są często używane do dodawania ciekawych kształtów do obrazów. Pozwalają obrazowi przejrzeć kształt, nadając stronie niepowtarzalny element projektu. Dzięki Gradient Builder Divi nie musisz koniecznie używać masek do tworzenia kształtów. Zamiast tego możesz użyć Gradient Stops i ustawień, aby je utworzyć! W tym poście przyjrzymy się, jak kształtować swoje obrazy za pomocą Gradient Builder Divi, aby pomóc Ci dodać unikalne projekty do swoich obrazów.

Zacznijmy.

Zapowiedź

Najpierw spójrzmy, co zbudujemy w tym samouczku.

Pierwszy przykład – okrągły kształt obrazu

Pulpit

Tablet

Telefon

Drugi przykład – liniowy kształt obrazu

Pulpit

Tablet

Telefon

Trzeci przykład – eliptyczny kształt obrazu

Pulpit

Tablet

Telefon

Czwarty przykład – stożkowy kształt obrazu

Pulpit

Tablet

Telefon

Utwórz układ

Najpierw stwórzmy układ, którego użyjemy we wszystkich przykładach. Ten układ może być używany jako sekcja bohatera. Będzie zawierać tytuł i opis z jednej strony oraz obraz z drugiej. Następnie użyjemy tego układu i obrazu w przykładach.

Dostosuj sekcję

Najpierw utwórz nową stronę Divi i dostosuj sekcję. Otwórz ustawienia sekcji i zmień kolor tła na #f0f3fb.

• Kolor tła: #f0f3fb

Następnie przejdź do zakładki Design i dodaj 10% Padding na górze i na dole. Zamknij ustawienia.

• Wyściółka: 10% góra, dół

Dodaj wiersz

Następnie dodaj wiersz z kolumną 2/3 i kolumną 1/3.

• 2/3, 1/3 wiersz

Przejdź do zakładki Projekt. Włącz opcję Użyj niestandardowej szerokości rynny i ustaw maksymalną szerokość na 1480px.

• Użyj niestandardowej szerokości rynny: Tak
• Maksymalna szerokość: 1480 pikseli

Ustawienia pierwszej kolumny

Na karcie Zawartość wiersza otwórz ustawienia dla pierwszej kolumny wiersza, przejdź do karty Projekt i dodaj dopełnienie 9% po lewej i prawej stronie. Zamknij ustawienia Kolumny i Wiersza.

• Wyściółka: 9% w lewo, w prawo

Ustawienia pierwszego modułu tekstowego

Następnie dodaj moduł tekstowy do lewej kolumny.

Wybierz Nagłówek 4 dla tekstu treści i dodaj treść treści.

• Nagłówek: 4
• Ciało: Witamy w Divi

Następnie przejdź do zakładki Projekt . Ustaw czcionkę H4 na Montserrat, wagę na pogrubienie, styl na TT i kolor na #1d4eff.

• Czcionka nagłówka 4: Montserrat
• Waga: pogrubienie
• Styl: TT
• Kolor: #1d4eff

Ustaw rozmiar czcionki na pulpicie na 16 pikseli, rozmiar tabletu na 14 pikseli, a rozmiar telefonu na 12 pikseli. Zmień odstępy między literami na 0,3 em, a wysokość linii na 1,6 em.

• Rozmiar: komputer stacjonarny 16 pikseli, tablet 14 pikseli, telefon 12 pikseli
• Odstępy między literami: 0.3em
• Wysokość linii: 1,6 em

Przewiń w dół do Odstępy i zmień dolny margines na 0px. Zamknij moduł.

• Margines: 0px Dół

Ustawienia drugiego modułu tekstowego

Następnie dodaj moduł tekstowy pod pierwszym.

Ustaw typ tekstu na Nagłówek 1 i dodaj zawartość treści.

• Nagłówek 1
• Treść: Zaplanuj swoją finansową przyszłość

Następnie wybierz kartę Projekt . Zmień czcionkę nagłówka na Montserrat, wagę na pogrubienie, a kolor na #0f1154.

• Czcionka nagłówka 1: Montserrat
• Waga: pogrubienie
• Kolor: #0f1154

Ustaw rozmiar czcionki na 80px dla komputerów stacjonarnych, 40px dla tabletów i 24px dla telefonów. Zmień wysokość linii na 110%. Zamknij moduł.

• Rozmiar: 80px pulpit, 40px tablet, 24px telefon
• Wysokość linii: 110%

Ustawienia trzeciego modułu tekstowego

Następnie dodaj moduł tekstowy pod drugim.

Pozostaw typ tekstu Akapit i dodaj treść treści.

• Nagłówek: Akapit
• Treść: treść

Następnie przejdź do zakładki Projekt . Zmień czcionkę tekstu na Roboto, ustaw wagę na średnią, a kolor na czarny.

• Czcionka tekstu: Roboto
• Waga: średnia
• Kolor: #000000

Zmień rozmiar dla komputerów stacjonarnych i tabletów na 18 pikseli, a telefonów na 14 pikseli. Ustaw wysokość linii na 180%.

• Rozmiar: 18px pulpit, 18px tablet, 14px telefon
• Wysokość linii: 180%

Na koniec przewiń w dół do Odstępy i ustaw dolny margines na 0%. Zamknij ustawienia modułu.

• Margines: 0px Dół

Ustawienia modułu obrazu

Teraz dodaj moduł obrazu do kolumny po prawej stronie.

Najpierw usuń fikcyjny obraz , klikając kosz na śmieci lub ikonę resetowania nad obrazem.

Następnie przewiń w dół Tło , wybierz kartę Obraz i dodaj swój obraz. Pozostaw wszystkie ustawienia obrazu na wartości domyślne. Obraz na początku nie pokaże zbyt wiele. Naprawimy to w miarę postępów.

Następnie wybierz kartę Projekt i przewiń w dół do Odstępy . W przypadku komputerów stacjonarnych dodaj -10% górny, -30% lewy, 10% prawy margines. Dodaj 300px górną i dolną wyściółkę. To są ustawienia pulpitu. Wprowadzimy poprawki dla tabletów i telefonów.

• Margines (komputer): -10% u góry, -30% w lewo, 10% w prawo
• Padding: 300px góra, 300px dół

Następnie chcemy się upewnić, że kształt obrazu jest responsywny. Wybierz ikonę tabletu, aby otworzyć ustawienia tabletów i telefonów. Najedź kursorem na ustawienia Margines i wybierz ikonę tabletu, która się pojawi. Spowoduje to otwarcie zestawu kart z kartą dla każdego typu urządzenia. Wybierz zakładkę Tablet i zmień Margines na 0% Górny, 0% Lewy, 0% Prawy Margines. Karta Telefon będzie podążać za ustawieniami tabletu, więc nie będziemy musieli dostosowywać jej do Margin.

• Margines (Tablet/Telefon): 0% Górny, 0% Lewy, 0% Prawy

Następnie wybierz ikonę tabletu, która pojawia się po najechaniu kursorem na ustawienia Padding. Wybierz kartę Telefon i zmień Dopełnienie na 150px Góra i 150px Dół. Dopełnienie tabletu będzie postępować zgodnie z ustawieniami pulpitu. Zamknij ustawienia modułu.

• Padding: 150px góra, 150px dół

Kształtuj obrazy za pomocą przykładów Divi's Gradient Builder

Następnie użyjemy tych ustawień i ukształtujemy obrazy za pomocą Divi's Gradient Builder. Jak zobaczymy, kilka ustawień pomaga nam tworzyć ciekawe kształty obrazu za pomocą Gradient Buildera Divi.

Niektóre kluczowe ustawienia, o których należy pamiętać, obejmują układanie znaczników gradientu i ustawienie powtarzania wzoru. Pamiętaj, aby przetestować swoje wzory na wszystkich rozmiarach ekranu, aby upewnić się, że podoba Ci się kształt.

Aby uzyskać więcej informacji na temat korzystania z Divi's Gradient Builder, wyszukaj na blogu Elegant Themes hasło „Gradient Builder”. Znajdziesz kilka postów ze szczegółowymi samouczkami, które poprowadzą Cię przez elementy sterujące i ustawienia.

Pierwszy przykład – kształt obrazu konstruktora gradientu kołowego

Nasz pierwszy przykład daje obrazowi okrągły kształt z otworem w środku.

Otwórz ustawienia modułu obrazu i przewiń w dół do opcji Tło . Wybierz zakładkę Background Gradient i ustaw 6 Gradient Stops:

• Pierwszy przystanek: 0%, #f0f3fb
• Po drugie: 45%, #f0f3fb
• Trzeci (nad drugim): 45%, rgba (41,196,169,0)
• Po czwarte: 69%, rgba (250,255,214,0)
• Piąty (na szczycie czwartego): 69%, #f0f3fb
• Po szóste: 100%, #f0f3fb

Następnie wybierz Okrągły dla Typu Gradientu, ustaw Położenie na Środek, użyj Procent jako Jednostka i włącz Umieść Gradient Nad Obrazem Tła.

• Typ: Okrągły
• Pozycja: Centrum
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Drugi przykład – kształt obrazu Linear Gradient Builder

Oto spojrzenie na drugi przykład kształtu obrazu. Ten przykład umieszcza ukośne linie na obrazie.

Otwórz ustawienia, przewiń w dół do opcji Tło i wybierz kartę Gradient tła . Dodaj cztery stopnie gradientu:

• Pierwszy przystanek: 0%, #f0f3fb
• Po drugie: 5%, #f0f3fb
• Trzeci (nad drugim): 5%, rgba(175,175,175,0)
• Po czwarte: 13%, rgba (41196169,0)

Ustaw typ gradientu na liniowy z kierunkiem 150 stopni. Ustaw go na Powtórz. Użyj wartości procentowej dla jednostki i włącz opcję Umieść gradient nad obrazem tła.

• Typ: liniowy
• Kierunek: 150 stopni
• Powtórz: Tak
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Trzeci przykład – eliptyczny kształt obrazu konstruktora gradientu

Oto nasz trzeci przykład kształtu obrazu. Ten ma kształt eliptyczny.

Otwórz ustawienia modułu obrazu i przewiń w dół do opcji Tło . Wybierz zakładkę Gradient tła i utwórz cztery stopnie gradientu:

• Pierwszy przystanek: 0%, #f0f3fb
• Po drugie: 9%, #f0f3fb
• Trzeci (nad drugim): 9%, rgba(175,175,175,0)
• Po czwarte: 21%, rgba (41 196 169,0)

Następnie zmień Gradient Type na Eliptical i ustaw Position na Top Left. Wybierz opcję Powtórz gradient, użyj procentu jako jednostki i włącz opcję Umieść gradient nad obrazem tła.

• Typ: eliptyczny
• Pozycja: górna lewa
• Powtórz gradient: Tak
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Czwarty przykład – stożkowy kształt obrazu konstruktora gradientu

Nasz czwarty przykład wykorzystuje technologię Conical do stworzenia unikalnego kształtu obrazu.

Otwórz ustawienia modułu obrazu, przewiń w dół do opcji Tło i wybierz kartę Gradient tła . Ten ma 5 przystanków gradientowych:

• Pierwszy przystanek: 23%, #f0f3fb
• Po drugie: 35%, #f0f3fb
• Trzeci (nad drugim): 35%, rgba (41,196,169,0)
• Po czwarte: 65%, rgba (250,255,214,0)
• Piąty (na szczycie czwartego): 65%, #f0f3fb

Ustaw Typ gradientu na Stożkowy i pozostaw Kierunek na domyślnym ustawieniu. Ustaw pozycję na dół, użyj procentu jako jednostki i włącz opcję Umieść gradient nad obrazem tła.

• Typ: Stożkowy
• Kierunek: 180 stopni
• Pozycja: dół
• Jednostka: procent
• Umieść gradient nad obrazem tła: Tak

Gradientowe wyniki kształtu buldera

Wszystkie układy wypadły dobrze. Kształty obrazu wyróżniają się, a obrazy są nadal łatwe do zrozumienia. Wszystkie są responsywne, dzięki czemu świetnie wyglądają na każdym urządzeniu.

Pierwszy przykład – okrągły kształt obrazu

Pulpit

Tablet

Telefon

Drugi przykład – liniowy kształt obrazu

Pulpit

Tablet

Telefon

Trzeci przykład – eliptyczny kształt obrazu

Pulpit

Tablet

Telefon

Czwarty przykład – stożkowy kształt obrazu

Pulpit

Tablet

Telefon

Końcowe myśli

Oto nasze spojrzenie na to, jak kształtować obrazy za pomocą Gradient Buildera Divi. Gradient Builder może tworzyć ciekawe kształty obrazu. Zabawa z Gradient Stops, wypróbowanie różnych typów gradientów i włączenie funkcji Gradient Repeat to świetne sposoby na tworzenie nowych projektów. Pamiętaj, aby sprawdzić swoje projekty na wszystkich rozmiarach ekranu i w razie potrzeby wprowadzić poprawki.

Chcemy usłyszeć od Ciebie. Czy używałeś Divi's Gradient Builder do kształtowania swoich obrazów? Daj nam znać o swoim doświadczeniu w komentarzach.