Jak używać tła gradientowego jako masek obrazu tła w Divi

Jeśli znasz oprogramowanie do edycji obrazów, takie jak Photoshop, prawdopodobnie znasz również maski. Maski pomagają połączyć dwie warstwy i stworzyć niepowtarzalny efekt. Dzięki Divi możesz wykazać się kreatywnością i tworzyć własne maski na swoich stronach, używając tła gradientowego w połączeniu z obrazami tła. W tym samouczku pokażemy Ci krok po kroku, jak stworzyć 8 różnych masek tła dla każdego rodzaju projektu, nad którym pracujesz. Ten samouczek pomoże Ci dokonać szybkich poprawek projektowych na stronach bez konieczności dotykania jakiegokolwiek oprogramowania do edycji obrazu.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Rozstaw

Dodaj nową sekcję do swojej strony, otwórz ustawienia sekcji i dodaj niestandardowe górne i dolne dopełnienie.

• Górna wyściółka: 150px
• Dolna wyściółka: 150px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł Blurb do #1

Dodaj zawartość

Czas zacząć dodawać moduły! Potrzebujemy łącznie 8 modułów Blurb. Zaczniemy od pierwszego, wprowadzimy ogólne zmiany i sklonujemy go 7 razy, zanim wprowadzimy unikalne zmiany w każdym module Blurb. Dodaj nowy moduł Blurb do pierwszej kolumny i dodaj wybraną treść.

Ustawienia tekstu

Przejdź do zakładki projektu i następnie zmień ustawienia tekstu.

• Orientacja tekstu: Środek
• Kolor tekstu: ciemny

Ustawienia tekstu tytułu

Otwórz również ustawienia tekstu tytułu i zmieniaj rzeczy.

• Czcionka tytułu: Antic Didone
• Rozmiar tekstu tytułu: 23px
• Wysokość wiersza tytułu: 1,5 em

Cień Pudełka

Na koniec dodaj subtelny cień pudełkowy również do modułu Blurb.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba(0,0,0,0.3)

Clone Blurb Module 7 razy i umieść 4 duplikaty w drugiej kolumnie

Po wprowadzeniu wszystkich ogólnych zmian możesz sklonować moduł Blurb 7 razy. Umieść cztery duplikaty w drugiej kolumnie rzędu, a trzy zostaw w pierwszej.

Modyfikuj moduł rozmycia nr 1

Tło gradientowe

Teraz możemy zacząć dodawać unikalne ustawienia do każdego z modułów Blurb. Otwórz pierwszy moduł Blurb w kolumnie 1 i dodaj do niego gradientowe tło.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: dół
• Pozycja startowa: 45%
• Pozycja końcowa: 45%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Po dodaniu tła gradientowego możesz również dodać obraz tła i połączyć go z następującymi ustawieniami tła:

• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

Na koniec dodaj trochę niestandardowej wyściółki, aby wszystko ułożyło się na swoim miejscu.

• Górna wyściółka: 100px
• Dolna wyściółka: 350px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Modyfikuj moduł rozmycia nr 2

Tło gradientowe

Przejdźmy do następnego modułu Blurb (pierwszy moduł w drugiej kolumnie) i dodajmy tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny prawy
• Pozycja startowa: 45%
• Pozycja końcowa: 45%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Kontynuuj, dodając obraz tła w połączeniu z poniższymi ustawieniami tła.

• Pozycja obrazu tła: u góry po prawej
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

I zakończ projekt, dodając niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 350px
• Dolna wyściółka: 100px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 200px (komputer i tablet), 50px (telefon)

Modyfikuj moduł rozmycia nr 3

Tło gradientowe

Przejdźmy do trzeciego modułu notki (drugi moduł notki w pierwszej kolumnie). Otwórz ustawienia i dodaj tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: górny lewy
• Pozycja startowa: 45%
• Pozycja końcowa: 45%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Kontynuuj, dodając następnie obraz tła.

• Pozycja obrazu tła: górny lewy
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

I dodaj do modułu niestandardowe wypełnienie, aby przybrał swój kształt.

• Górna wyściółka: 350px
• Dolna wyściółka: 100px
• Lewa wyściółka: 200px (komputer i tablet), 50px (telefon)
• Prawe wypełnienie: 50px

Modyfikuj moduł Blurb #4

Tło gradientowe

Przejdźmy do drugiego modułu w drugiej kolumnie! Otwórz ustawienia modułu Blurb i dodaj tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: góra
• Pozycja startowa: 45%
• Pozycja końcowa: 45%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Kontynuuj, dodając następnie obraz tła.

• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

I zakończ projekt, dodając niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 350px
• Dolna wyściółka: 100px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Modyfikuj moduł rozmycia # 5

Tło gradientowe

Przejdźmy do następnego modułu, który jest trzecim modułem w pierwszej kolumnie. Otwórz moduł i dodaj tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w lewo
• Pozycja startowa: 35%
• Pozycja końcowa: 35%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Kontynuuj, dodając obraz tła w połączeniu z następującymi ustawieniami tła:

• Pozycja obrazu tła: górny lewy
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

Dodaj także niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 100px
• Dolna wyściółka: 100px
• Lewa wyściółka: 240px (komputer i tablet), 150px (telefon)
• Prawe wypełnienie: 50px (komputer stacjonarny i tablet), 20px (telefon)

Modyfikuj moduł rozmycia # 6

Tło gradientowe

Przejdźmy do trzeciego modułu w drugiej kolumnie! Otwórz ustawienia i dodaj tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: liniowy
• Kierunek gradientu: 140 stopni
• Pozycja startowa: 60%
• Pozycja końcowa: 60%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Następnie dodaj obraz tła z pasującymi ustawieniami tła.

• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

I uzupełnij projekt, używając niestandardowych wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 100px
• Dolna wyściółka: 350px
• Lewa wyściółka: 50px
• Prawe dopełnienie: 200px (komputer i tablet), 50px (tablet)

Modyfikuj moduł rozmycia nr 7

Tło gradientowe

Następny moduł Blurb w kolumnie 1 wykorzystuje następujące tło gradientowe:

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: liniowy
• Kierunek gradientu: 220 stopni
• Pozycja startowa: 60%
• Pozycja końcowa: 60%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Dodaj również obraz tła.

• Pozycja obrazu tła: górny środek
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

I dodaj potrzebne niestandardowe wartości dopełnienia w ustawieniach odstępów.

• Górna wyściółka: 100px
• Dolna wyściółka: 350px
• Lewa wyściółka: 200px (komputer i tablet), 50px (telefon)
• Prawe wypełnienie: 50px

Modyfikuj moduł rozmycia nr 8

Tło gradientowe

Do ostatniego modułu Blurb! Otwórz ustawienia i dodaj tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Typ gradientu: Promieniowy
• Kierunek promieniowy: w prawo
• Pozycja startowa: 35%
• Pozycja końcowa: 35%
• Umieść gradient nad obrazem tła: Tak

Zdjęcie w tle

Następnie prześlij obraz tła.

• Pozycja obrazu tła: górny lewy
• Powtarzanie obrazu tła: bez powtórzeń

Rozstaw

Zakończ projekt i samouczek, dodając niestandardowe dopełnienie do ustawień odstępów modułu.

• Górna wyściółka: 100px
• Dolna wyściółka: 100px
• Lewa wyściółka: 50px (komputer stacjonarny i tablet), 20px (telefon)
• Prawe wypełnienie: 240px (komputer i tablet), 170px (telefon)

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak wykazać się kreatywnością dzięki wbudowanym opcjom Divi. Dokładniej, do tworzenia masek tła użyliśmy promieniowych tła i obrazów tła. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!