Jak tworzyć żywe tytuły sekcji do następnego projektu Divi?

Wiemy, że większość z Was zawsze szuka nowych sposobów, aby tworzone przez siebie strony internetowe były wyjątkowe. Dzięki Divi istnieje wiele sposobów, aby Twoja witryna wyróżniała się na tle innych. Dzisiaj pokażemy Ci, jak tworzyć oszałamiające tytuły sekcji, korzystając tylko z wbudowanych opcji Divi. To podejście jest świetne, jeśli chcesz stworzyć oszałamiający projekt, zachować ogólną strukturę strony i zachować płynną nawigację.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się wynikowi, który chcemy osiągnąć na różnych rozmiarach ekranu:

Zacznijmy tworzyć!

Dodaj nową zwykłą sekcję

Rozstaw

Zacznij od otwarcia nowej strony, przełączenia się na Visual Builder i dodania pierwszej sekcji. Nie dodając jeszcze żadnych wierszy ani modułów, otwórz ustawienia sekcji i dodaj dopełnienie:

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

Dodaj nowy wiersz

Struktura kolumny

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

Kolor tła

Następnie otwórz ustawienia wiersza i dodaj kolor tła do całego wiersza:

• Kolor tła: #f9f9f9

Kolumna 1 Tło gradientowe

Następnie dodaj subtelne tło gradientowe do pierwszej kolumny. Pomoże to stworzyć nakładanie się tytułów sekcji między kolumnami.

• Kolor 1: #0031c4
• Kolor 2: #00aeff
• Kolumna 1 Kierunek gradientu: 125deg

Rozmiary

Zmień również odstępy między wierszami, aby zajmowały całą szerokość ekranu.

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

Rozstaw

Na koniec zmień ustawienia odstępów zgodnie z różnymi rozmiarami ekranu:

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Górna wyściółka kolumny 2: 200px
• Dolna wyściółka kolumny 2: 200px
• Dopełnienie kolumny 2 po lewej stronie: 350px (komputer), 50px (tablet i telefon)
• Kolumna 2 prawa dopełnienie: 50px

Dodaj moduł tekstowy tytułu sekcji do kolumny 1

Ustawienia tekstu H2

Teraz, gdy wszystkie ustawienia wierszy są na swoim miejscu, możemy rozpocząć dodawanie modułów. Zaczniemy od pierwszej kolumny. Tutaj jedynym modułem, którego będziemy potrzebować, jest moduł tekstowy. Po dodaniu treści H2 w polu Treść, zmień ustawienia tekstu H2:

• Grubość czcionki nagłówka 2: Ultra Bold
• Styl czcionki nagłówka 2: Wielkie litery
• Nagłówek 2 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 150px
• Nagłówek 2 Wysokość linii: 1,25 em
• Tekst nagłówka 2 Długość pionowa cienia: -0,55em
• Kolor cienia tekstu nagłówka 2: rgba (0,255,255,0.25)

Rozstaw

Nakładanie się kolumn jest inne na komputerze, tablecie i telefonie. Aby utworzyć nakładanie się, wprowadzimy pewne zmiany w ustawieniach odstępów naszego modułu tekstowego:

• Górny margines: 325px (komputer), 150px (tablet i telefon)
• Margines dolny: 325px, -120px (tablet), -110px (telefon)
• Prawy margines: -100% (komputer stacjonarny), 0px (tablet i telefon)

Filtr

Na koniec użyjemy trybu mieszania, aby uzyskać różnicę w kolorze wyświetlanego tekstu.

• Tryb mieszania: nakładka

Dodaj moduł tekstu tytułu do kolumny 2

Ustawienia tekstu H3

Przejdźmy do drugiej kolumny. Tam pierwszym modułem, którego będziemy potrzebować, jest tytułowy moduł tekstowy. Po dodaniu treści H3 zmień ustawienia tekstu H3:

• Grubość czcionki nagłówka 3: pół pogrubiona
• Kolor tekstu nagłówka 3: #00aeff
• Rozmiar tekstu nagłówka 3: 60px
• Nagłówek 3 Odstępy między literami: -3px

Rozstaw

Zrób trochę miejsca, dodając dolny margines obok:

• Margines dolny: 50px

Dodaj moduł rozdzielający do kolumny 2

Kolor dzielnika

Drugim modułem, którego będziemy potrzebować, jest moduł rozdzielający. Otwórz Ustawienia kolorów i zmień kolor, aby pasował do palety kolorów projektu:

• Kolor dzielnika: #00ffff

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru:

• Wysokość: 56px
• Szerokość: 75%

Dodaj moduł tekstu opisu do kolumny 2

Ustawienia tekstu

Kontynuuj, dodając opis Moduł tekstowy, korzystając z następujących ustawień tekstu:

• Rozmiar tekstu: 17px
• Wysokość linii tekstu: 1,3 em
• Orientacja tekstu: wyjustuj

Rozmiary

Następnie zmień ustawienia rozmiaru:

• Rozmiary: 70% (komputer stacjonarny), 100% (tablet i telefon)

Rozstaw

Dodaj trochę miejsca poniżej tego modułu, używając również dolnego marginesu:

• Margines dolny: 50px

Dodaj moduł przycisku do kolumny 2

Ustawienia przycisków

Ostatnim modułem, którego będziemy potrzebować w tej kolumnie, jest moduł przycisku. Po dodaniu CTA zmień ustawienia przycisku:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 17px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #00aeff
• Szerokość obramowania przycisku: 0px
• Promień obramowania przycisku: 100px
• Odstępy między przyciskami: -1px
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

Aby nadać przyciskowi bardziej przejrzysty wygląd, dodamy również trochę wypełnienia:

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

Cień Pudełka

Na koniec użyjemy subtelnego cienia pudełkowego, aby dodać trochę głębi do naszej sekcji:

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

Sekcja klonowania

Zmień całą kopię

Aby utworzyć drugą sekcję, po prostu sklonujemy tę, którą już stworzyliśmy, a następnie zmienimy całą kopię.

Zmień kolor tła wiersza

W tej nowej sekcji użyjemy innej palety kolorów. Zacznij od zmiany koloru tła wiersza.

• Kolor tła: #efefef

Zmień tło gradientowe w kolumnie 1

Następnie wybierz również inne tło gradientowe.

• Kolor 1: #5f00a8
• Kolor 2: #9000ff

Zmień kolor cienia tytułu sekcji

Dopasowujemy również kolor cienia tekstu do naszej nowej palety kolorów:

• Kolor cienia tekstu nagłówka 2: rgba (255, 255, 0,24)

Zmień ustawienia odstępów między tytułami sekcji

W zależności od długości używanej kopii musisz pobawić się ujemnym prawym marginesem.

• Prawy margines: -110% (komputer stacjonarny)

Zmień kolor tekstu modułu tekstu tytułu

Następnie zmień kolor tekstu tytułu modułu tekstowego w kolumnie 2.

• Kolor tekstu nagłówka 3: #9000ff

Zmień kolor dzielnika

Podobnie, spraw, aby kolor dzielnika pasował do projektu.

• Kolor: #ff00ff

Zmień kolor tła przycisku

Aby zakończyć, musisz zmienić kolor tła modułu przycisku.

• Kolor tła przycisku: #9000ff

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się końcowemu wynikowi na różnych rozmiarach ekranu:

Końcowe przemyślenia

Istnieje wiele sposobów na wyróżnienie swojego projektu internetowego na tle innych witryn internetowych. W tym poście pokazaliśmy, jak tworzyć wspaniałe tytuły sekcji i ogólnie sekcje, używając tylko wbudowanych opcji Divi. Połączyliśmy tła gradientu kolumn z nakładaniem się modułu tekstowego, cieniami tekstu i trybami mieszania, aby stworzyć oszałamiający efekt końcowy. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!