Jak zastosować kolor tekstu gradientowego do kopii za pomocą tylko wbudowanych opcji Divi?

Bez względu na rodzaj tworzonej witryny, wyróżnianie treści i treści pozostaje jednym z najważniejszych priorytetów. Dzięki wbudowanym opcjom Divi istnieje mnóstwo sposobów, aby się tam dostać. Jedną z dostępnych możliwości jest zastosowanie gradientowego koloru tekstu do kopii. To świetne podejście do dodawania koloru do witryny, zwłaszcza jeśli reszta witryny jest czysta i minimalistyczna. Pomaga zbalansować białe przestrzenie i dodaje Twojej witrynie powiewu świeżego powietrza.

W tym samouczku pokażemy, jak nadać tekstowi kolor gradientu, korzystając tylko z wbudowanych opcji Divi.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się wynikom na różnych rozmiarach ekranu. Pokażemy Ci, jak wykonać tę pracę, używając zarówno jasnej, jak i ciemnej palety kolorów. Po ustaleniu podejścia możesz tworzyć wszelkiego rodzaju projekty z tekstem gradientowym.

Zbliżać się

1. Zrozumienie trybów mieszania Divi

Tryby mieszania działają dokładnie tak, jak przywykłeś do nich w oprogramowaniu do edycji obrazów. Opierają się na strukturach warstwowych. Konkretnie oznacza to, że tryb mieszania w Divi będzie zgodny z pewną hierarchią:

• Tryb mieszania zastosowany do modułu spowoduje zmieszanie modułu i kolumny pod nim
• Tryb mieszania zastosowany do kolumny spowoduje zmieszanie kolumny i wiersza poniżej
• Tryb mieszania zastosowany do wiersza spowoduje zmieszanie wiersza i sekcji poniżej

W tym samouczku konieczne jest zrozumienie, że tryb mieszania zastosowany do modułu będzie mieszać się z kolumną pod nim. Nadając kolumnie tło gradientowe, a modułowi, o którym mowa, tryb mieszania, możemy uzyskać tekst w kolorze gradientowym.

2. Wybór między całkowicie ciemną lub jasną paletą kolorów

Aby to zadziałało, będziesz musiał użyć całkowicie ciemnej lub jasnej palety kolorów. Tryby mieszania, których używamy, rozjaśnianie i przyciemnianie, zapewnią pożądany efekt tylko wtedy, gdy użyjesz całkowicie czarnego lub białego koloru. Przy użyciu innych kolorów efekt, który zastosowaliśmy, będzie się przebijał.

3. Usuwanie całej szerokości rynny między kolumnami i modułami

Jak wspomniano w pierwszej części podejścia, użyjemy tła gradientu kolumnowego. Aby upewnić się, że to gradientowe tło nie pojawi się w dowolnym miejscu, w którym nie chcemy, usuniemy całą szerokość rynny. W ten sposób upewnimy się, że między modułami nie jest stosowany domyślny margines niestandardowy. Aby nadrobić utracone miejsce, ręcznie dodamy niestandardowe dopełnienie.

4. Używanie dopełnienia zamiast zmiany szerokości elementu

Aby dostosować szerokość elementu projektu, użyjemy niestandardowego dopełnienia lewego i prawego. Zmiana szerokości w ustawieniach rozmiaru zmieniłaby szerokość całego modułu i pozwoliłaby, aby tło gradientu kolumny pojawiało się po lewej i prawej stronie, czego nie chcemy.

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Kolor tła

Zacznijmy! Dodaj zwykłą sekcję do nowej lub istniejącej strony i nadaj jej odpowiedni kolor tła (w zależności od tego, czy chcesz odtworzyć jasny czy ciemny układ).

• Kolor tła: #ffffff (jasny układ), #000000 (ciemny układ)

Rozstaw

Kontynuuj, dodając niestandardowe wypełnienie do sekcji.

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

Dodaj wiersz nr 1

Struktura kolumny

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

Kolumna 2 Tło gradientowe

Dodaj gradientowe tło do drugiej kolumny wiersza. Tutaj umieścimy tytułowy moduł tekstowy w następnej części samouczka.

• Kolor 1: #c700ff
• Kolor 2: #32f1ff
• Kolumna 2 Kierunek gradientu: 150 stopni
• Pozycja początkowa kolumny 2: 20%
• Pozycja końcowa kolumny 2: 60%

Rozmiary

Zmień również ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

I zmodyfikuj ustawienia odstępów.

• Górny margines: 50px
• Margines dolny: 50px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Teraz idź dalej i dodaj moduł tekstowy do drugiej kolumny dodanego wiersza.

Kolor tła

Nadaj swojemu modułowi prawidłowe tło, w zależności od typu układu, który chcesz odtworzyć.

• Kolor tła: #ffffff (jasny układ), #000000 (ciemny układ)

Ustawienia tekstu nagłówka

Następnie zmień ustawienia tekstu nagłówka.

• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #000000 (jasny układ), #ffffff (ciemny układ)
• Rozmiar tekstu nagłówka 2: 67px (komputer), 50px (tablet), 40px (telefon)
• Nagłówek 2 Odstępy między literami: -2px

Rozstaw

I dodaj dolną wyściółkę. Pamiętaj, że używamy dolnego dopełnienia zamiast marginesu, aby upewnić się, że tło gradientu kolumny nie jest wyświetlane.

• Dolna wyściółka: 50px

Tryb mieszania

Aby zastosować gradient tła kolumny w dodanym module, zastosuj tryb mieszania w ustawieniach filtrów.

• Tryb mieszania: Jaśniejszy (Układ jasny), Ciemny (Układ ciemny)

Dodaj moduł dzielnika do rzędu

Widoczność

Drugim i ostatnim modułem, którego potrzebujemy w tym rzędzie, jest moduł dzielnika.

• Pokaż dzielnik: tak

Kolor tła

Zmień kolor tła zgodnie z typem tworzonego układu.

• Kolor tła: #ffffff (jasny układ), #000000 (ciemny układ)

Rozstaw

Aby zmniejszyć szerokość przegrody, dodamy niestandardowe wypełnienie po lewej i prawej stronie.

• Lewa wyściółka: 250px
• Prawe wypełnienie: 250px

Tryb mieszania

Ponownie dodaj tryb mieszania, aby pokazać tło gradientu kolumny.

• Tryb mieszania: Jaśniejszy (Układ jasny), Ciemny (Układ ciemny)

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! Użyj następującej struktury kolumn:

Kolumna 1 Tło gradientowe

Kontynuuj, dodając gradientowe tło do pierwszej kolumny.

• Kolor 1: #c700ff
• Kolor 2: #32f1ff
• Kolumna 1 Typ gradientu: Liniowy
• Kolumna 1 Kierunek gradientu: 105deg
• Pozycja początkowa kolumny 1: 20%
• Kolumna 1 Pozycja końcowa: 50%

Kolumna 2 Tło gradientowe

Używamy gradientowego tła również dla drugiej kolumny.

• Kolor 1: #32f1ff
• Kolor 2: #c700ff
• Kolumna 2 Typ gradientu: Liniowy
• Kolumna 2 Kierunek gradientu: 90deg
• Pozycja początkowa kolumny 2: 40%
• Pozycja końcowa kolumny 2: 60%

Kolumna 3 Tło gradientowe

To samo dotyczy trzeciej kolumny.

• Kolor 1: #c700ff
• Kolor 2: #32f1ff
• Kolumna 3 Typ gradientu: Liniowy
• Kolumna 3 Kierunek gradientu: 85deg
• Kolumna 3 Pozycja początkowa: 20%
• Kolumna 3 Pozycja końcowa: 50%

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

I dodaj niestandardową wyściółkę lewą i prawą.

• Lewe wypełnienie: 100px (komputer i tablet), 50px (telefon)
• Prawe dopełnienie: 100px (komputer i tablet), 50px (telefon)

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Dodaj moduł Blurb do kolumny 1 z wybranym tytułem. W dalszej części posta użyjemy osobnego modułu, aby dodać treść treści.

Wybierz ikonę

Wybierz wybraną ikonę.

Kolor tła

I zmodyfikuj kolor tła modułu Blurb.

• Kolor tła: #ffffff (jasny układ), #000000 (ciemny układ)

Ustawienia ikon

Kontynuuj, przechodząc do ustawień ikon i wprowadzając tam pewne zmiany.

• Kolor ikony: #000000 (Układ jasny), #ffffff (Układ ciemny)
• Umieszczenie obrazu/ikony: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 51px

Ustawienia tekstu tytułu

Zmień również ustawienia tekstu tytułu.

• Grubość czcionki tytułu: pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #000000 (jasny układ), #ffffff (ciemny układ)
• Odstępy między literami tytułu: -1px
• Wysokość wiersza tytułu: 1,2 em

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów i dopełnienia.

• Margines dolny: 5px
• Górna wyściółka: 50px
• Dolna wyściółka: 50px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Tryb mieszania

Na koniec zastosuj odpowiedni tryb mieszania.

• Tryb mieszania: Jaśniejszy (Układ jasny), Ciemny (Układ ciemny)

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Dzielimy tytuł i treść modułu Blurb na dwa moduły, aby tryb mieszania miał zastosowanie tylko do ikony i tytułu. Śmiało i dodaj moduł tekstowy tuż pod modułem Blurb zawierającym treść treści.

Kolor tła

Następnie dodaj kolor tła.

• Kolor tła: #ffffff (jasny układ), #0c0c0c (ciemny układ)

Ustawienia tekstu

I zmień ustawienia tekstu.

• Odstępy między literami tekstu: 0.5px
• Wysokość linii tekstu: 2,3 em
• Orientacja tekstu: wyjustuj
• Kolor tekstu: ciemny (układ jasny), jasny (układ ciemny)

Rozstaw

Aby zapewnić modułowi trochę miejsca do oddychania, dodaj kilka niestandardowych wartości dopełnienia w ustawieniach odstępów.

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

Cień Pudełka

A do tego dodaj subtelny cień w pudełku.

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

Clone Blurb Module & Text Module dwa razy + miejsce w pozostałych kolumnach

Na koniec sklonuj oba moduły, które znajdziesz w kolumnie 1 i umieść duplikaty w dwóch pozostałych kolumnach. Zmień odpowiednio treść.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi.

Końcowe przemyślenia

W tym poście pokazaliśmy, jak utworzyć tekst gradientowy na swojej stronie internetowej, korzystając tylko z wbudowanych opcji Divi. Aby ten samouczek działał i aby móc przećwiczyć podejście również na innych projektach, konieczne jest zapoznanie się z sekcją podejścia tego postu i zrozumienie jej podczas odtwarzania projektu. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!