Czy chcesz nadać kształty swoim obrazom za pomocą generatora gradientów? 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 unikalny element projektu.
Z Konstruktor gradientów de Divi, nie musisz koniecznie używać masek do tworzenia kształtów. Zamiast tego możesz użyć Gradient zatrzymuje się i parametry do ich tworzenia!
W tym artykule zobaczymy, jak upiększyć swoje obrazy za pomocą narzędzia Gradient Builder Divi które pomogą Ci dodać unikalne projekty do Twoich zdjęć.
Zacznijmy.
badanie
Najpierw zobaczmy, co zamierzamy stworzyć w tym samouczku na różnych rozmiarach ekranu.
Pierwszy przykład – okrągły kształt obrazu
Komputer stacjonarny
tabletka
Telefon
Drugi przykład – liniowy kształt obrazu
Biuro
tabletka
Telefon
Trzeci przykład – eliptyczny kształt obrazu
Komputer stacjonarny
tabletka
Telefon
Czwarty przykład – stożkowy kształt obrazu
Komputer stacjonarny
tabletka
Telefon
Projekt układu z Divi
Zacznijmy od stworzenia układu, którego będziemy używać we wszystkich przykładach. Ten układ może być używany jako sekcja bohatera.
Będzie zawierać tytuł i opis po jednej stronie oraz obraz po drugiej. Następnie użyjemy tego układu i obrazu do przykładów.
Dostosuj sekcję
Najpierw utwórz nową stronę Divi i dostosuj sekcję. Otwórz ustawienia sekcji i zmień kolor tło do #f0f3fb.
- Tło: #f0f3fb
Następnie przejdź do zakładki Wnętrze i zmień ustawienia odstępów w następujący sposób:.
- Wyściółka (góra i dół): 10%
Dodaj linię
Następnie dodaj linia z poniższą strukturą kolumn.
Dostęp do parametrów linii w zakładce Wnętrze, przejdź do opcji Dobór i zmodyfikuj parametry doboru.
- Użyj niestandardowej szerokości rynny: TAK
- Maksymalna szerokość: 1 pikseli
Ustawienia pierwszej kolumny
W zakładce Treść wiersza, otwórz ustawienia pierwszej kolumny wiersza, przejdź do zakładki Wnętrze. Zmodyfikuj odstępy w następujący sposób.
- Dopełnienie (lewy i prawy): 9% w lewo, w prawo
Parametry pierwszego modułu tekstowego
Następnie dodaj Moduł tekstowy do lewej kolumny.
wybierać Dział 4 za tekst treść i dodaj treść twojego ciała.
- Tekst: „Witamy w BlogPasCher”
Następnie przejdź do zakładki Wnętrze i zmień ustawienia tytułu.
- Czcionka: Montserrat
- Waga czcionki: pogrubiona
- Styl: TT
- Kolor tekstu: #1d4eff
- Rozmiar tekstu: pulpit 16 pikseli, tablet 14 pikseli, telefon 12 pikseli
- Odstępy między literami: 0,3em
- Wysokość linii: 1,6 em
Przewiń do Rozstaw i zmień dolny margines.
- Margines (dolny): 0px
Parametry drugiego modułu tekstowego
Następnie dodaj Moduł tekstowy pod pierwszym.
Ustaw typ tekstu na "Nagłówek 1" i dodaj treść twojego ciała.
- Treść: „Zaplanuj swoją finansową przyszłość”
Następnie wybierz kartę Wnętrze i zmodyfikuj opcje tytułu.
- Czcionka: Montserrat
- Waga czcionki: pogrubiona
- Kolor tekstu: #0f1154
- Rozmiar: 80px pulpit, 40px tablet, 24px telefon
- Wysokość rzędu: 110%
Parametry trzeciego modułu tekstowego
Następnie dodaj Moduł tekstowy pod drugim.
Pozostaw typ tekstu na „Akapit” i dodaj treść treści.
- Treść: treść
Następnie przejdź do zakładki Koncepcja i zmień ustawienia tekstu.
- Czcionka tekstu: Roboto
- Waga czcionki: średnia
- Kolor tekstu: #000000
- Rozmiar tekstu: 18px (komputer i tablet), 14px (telefon)
- Wysokość linii: 180%
Na koniec przewiń w dół do rozstaw i ustaw dolny margines. Zamknij ustawienia modułu.
- Margines (dolny): 0px
Ustawienia modułu obrazu
Teraz dodaj Moduł obrazu do prawej kolumny.
najpierw usuń fikcyjny obraz klikając kosza 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. Rozwiążemy to na bieżąco.
Następnie wybierz kartę Styl i przewiń do Rozstaw.
- Margines (biurkowy): -10% (górny), -30% (lewy), 10% (prawy)
- Dopełnienie (góra i dół): 300px
- Margines (Tablet/Telefon): 0% (Góra), 0% (Lewy i Prawy)
- Wypełnienie (telefon): 150px (góra i dół)
Przykłady obrazów ukształtowanych za pomocą Divi's Gradient Builder
Pierwszy przykład – Okrągły kształt
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 Tło . Wybierz Zakładka Gradient tła i ustaw 6 przystanków gradientu:
- Pierwszy przystanek: 0%, #f0f3fb
- Po drugie: 45%, #f0f3fb
- Trzecia (powyżej sekundy): 45%, rgba (41,196,169,0 XNUMX XNUMX)
- Po czwarte: 69%, rgba (250,255,214,0)
- Piąte (powyżej czwartego): 69%, #f0f3fb
- Po szóste: 100%, #f0f3fb
- Typ: Okrągły
- Pozycja: Centrum
- Jednostka: procent
- Kwadratowy gradient nad obrazem tła : TAK
Drugi przykład – Forma liniowa
Oto podgląd drugiego przykładu kształtu obrazu. Ten przykład umieszcza ukośne linie na obrazie.
Otwórz ustawienia, przewiń w dół do Tło i wybierzZakładka Gradient tła. Dodaj cztery przystanki gradientu:
- Pierwszy przystanek: 0%, #f0f3fb
- Po drugie: 5%, #f0f3fb
- Trzecia (powyżej sekundy): 5%, rgba (175,175,175,0 XNUMX XNUMX)
- Po czwarte: 13%, rgba (41,196,169,0)
- Typ: liniowy
- Sterowanie: 150 stopni
- Powtarzaj gradient: TAK
- Jednostka gradientu: procent
- Kwadratowy gradient nad obrazem tła : TAK
Trzeci przykład – kształt eliptyczny
To jest nasz trzeci przykład kształtu obrazu. Wykorzystuje kształt eliptyczny.
Otwórz ustawienia modułu obrazu i przewiń w dół do Tło . Wybierz kartę Gradient tła i utwórz cztery stopnie gradientu:
- Pierwszy przystanek: 0%, #f0f3fb
- Po drugie: 9%, #f0f3fb
- Trzecia (powyżej sekundy): 9%, rgba (175,175,175,0 XNUMX XNUMX)
- Po czwarte: 21%, rgba (41,196,169,0)
- Typ: eliptyczny
- Pozycja gradientu: górny lewy
- Powtarzaj gradient: TAK
- Jednostka gradientu: procent
- Kwadratowy gradient nad tłem Obraz : TAK
Czwarty przykład – kształt stożkowy
Nasz czwarty przykład używa "Stożkowy" aby stworzyć pojedynczy kształt obrazu.
Otwórz ustawienia modułu obrazu, przewiń w dół do Tło i wybierz zakładkę Obraz tła. Ten ma 5 przystanków gradientu:
- Pierwszy przystanek: 23%, #f0f3fb
- Po drugie: 35%, #f0f3fb
- Trzecia (powyżej sekundy): 35%, rgba (41,196,169,0 XNUMX XNUMX)
- Po czwarte: 65%, rgba (250,255,214,0)
- Piąte (powyżej czwartego): 65%, #f0f3fb
- Typ: Stożkowy
- Kierunek gradientu: 180 stopni
- Pozycja gradientu: dół
- Jednostka: procent
- Kwadratowy gradient nad obrazem tła : TAK
Ostateczne wyniki
Wszystkie układy poszły dobrze. Kształty obrazu wyróżniają się, a obrazy są zawsze łatwe do zrozumienia. Wszystkie są responsywne, dzięki czemu świetnie prezentują się na każdym urządzeniu.
Pierwszy przykład – okrągły kształt obrazu
Komputer stacjonarny
Pobierz DIVI teraz !!!
tabletka
Telefon
Drugi przykład – liniowy kształt obrazu
Komputer stacjonarny
Pobierz DIVI teraz !!!
tabletka
Telefon
Trzeci przykład – eliptyczny kształt obrazu
Komputer stacjonarny
Pobierz DIVI teraz !!!
tabletka
Telefon
Czwarty przykład – stożkowy kształt obrazu
Komputer stacjonarny
Pobierz DIVI teraz !!!
tabletka
Telefon
Wnioski
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 przejściami gradientowymi, wypróbowywanie różnych rodzajów gradientów i włączanie powtarzania gradientów to świetne sposoby na tworzenie nowych projektów.
Pamiętaj, aby sprawdzić swoje projekty na wszystkich rozmiarach ekranu i w razie potrzeby wprowadzić poprawki.
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.
...
