Używanie modułu tekstowego Divi do tworzenia elementów blokowych w projekcie strony Divi

Moduły tekstowe są istotną częścią każdego projektu strony, którą tworzysz za pomocą Divi, jestem pewien, że wszyscy możemy się z tym zgodzić. Zwykle służą do wyświetlania tekstu w prosty sposób. Ale możesz również użyć modułów tekstowych do tworzenia oszałamiających elementów projektu. W poprzednich wpisach na blogu pokazaliśmy już, jak wykorzystać tekst, aby ulepszyć projekt strony internetowej.

W tym samouczku będziemy kontynuować dodawanie opcji do wyboru podczas projektowania strony i korzystania z modułów tekstowych. Jak być może wiesz, ale nie musisz, istnieje kilka różnych typów tekstu, które można łączyć w tym samym module tekstowym. Dodatkowo jeden moduł może zawierać kilka nagłówków, akapitów, linków i nie tylko. W tym poście wykorzystamy wszystkie te typy tekstu na naszą korzyść, aby stworzyć oszałamiające elementy blokowe w naszym projekcie strony.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się efektowi końcowemu na różnych rozmiarach ekranu.

Zacznijmy!

Dodaj nową zwykłą sekcję

Kolor tła

Zacznij od dodania nowej zwykłej sekcji do strony, nad którą aktualnie pracujesz. Następnie otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #000000

Rozstaw

Przejdź do ustawień odstępów w swojej sekcji i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 280px (komputer stacjonarny), 150px (tablet i telefon)
• Dolna wyściółka: 280px (komputer), 150px (tablet i telefon)

Dodaj nowy wiersz

Struktura kolumny

Po zakończeniu modyfikowania ustawień sekcji dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wiersza i spraw, aby wiersz zajmował całą szerokość ekranu w ustawieniach rozmiaru.

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

Rozstaw

Na koniec dodaj niestandardowe dopełnienie w ustawieniach odstępów.

• Kolumna 1 po lewej stronie: 100px (komputer i tablet), 50px (telefon)
• Kolumna 2 Niestandardowe wypełnienie: 50px
• Kolumna 3 Niestandardowe wypełnienie: 50px

Dodaj moduł tekstu tytułu do kolumny 1

Pole zawartości

Czas zacząć dodawać różne moduły! Pierwszym modułem, który będziemy potrzebować w pierwszej kolumnie, jest moduł tekstowy. Dodaj trochę treści H2 do pola treści.

Ustawienia tekstu H2

Następnie przejdź do ustawień tekstu H2 i wprowadź zmiany:

• Czcionka nagłówka 2: Kod źródłowy Pro
• Styl czcionki nagłówka 2: Wielkie litery
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2: 100px
• Nagłówek 2 Odstępy między literami: 24px

Rozstaw

Zmniejsz przestrzeń u góry, używając ujemnego marginesu górnego.

• Górny margines: -50px

Dodaj moduł tekstu opisu do kolumny 1

Ustawienia tekstu

Drugim modułem potrzebnym w pierwszej kolumnie jest opis Moduł tekstowy. Po dodaniu treści przejdź do ustawień tekstu i wprowadź zmiany:

• Czcionka tekstu: kod źródłowy Pro
• Kolor tekstu: #ffffff
• Orientacja tekstu: wyjustuj

Rozmiary

Zmniejsz również szerokość modułu tekstowego.

• Szerokość: 68%

Rozstaw

I wreszcie, utwórz trochę przestrzeni między tym modułem tekstowym a poprzednim w ustawieniach odstępów.

• Margines górny: 200px (komputer), 100px (tablet i telefon)
• Margines dolny: 100px (tablet i telefon)

Dodaj moduł tekstu blokowego do kolumny 2

Pole zawartości

Czas przejść do drugiej kolumny! Tutaj użyjemy modułów tekstowych do tworzenia elementów blokowych. Istotną częścią tej pracy jest poprawna struktura pola treści. Na poniższym zrzucie ekranu widać, że używamy tytułu H3, tytułu H4, akapitu i łącza. Pomiędzy tytułem H4 a akapitem upewniamy się, że zostało jeszcze trochę wolnego miejsca.

Kolor tła

Dodaj czarny kolor tła do modułu tekstowego.

• Kolor tła: #000000

Ustawienia tekstu

Zmodyfikujemy każdy z typów tekstu indywidualnie. Zacznij od zmodyfikowania ustawień akapitu.

• Czcionka tekstu: kod źródłowy Pro
• Orientacja tekstu: w lewo
• Kolor tekstu: jasny

Ustawienia tekstu łącza

Następnie wprowadź dodatkowe zmiany w ustawieniach linków.

• Styl czcionki łącza: wielkie litery i podkreślenie
• Kolor podkreślenia łącza: #ffffff
• Kolor tekstu linku: #edf000
• Rozmiar tekstu linku: 16px
• Odstępy między literami: 3px

Nagłówek 3 Ustawienia tekstu

Tytuł H3 w naszym polu treści wymaga następujących ustawień:

• Styl czcionki nagłówka 3: Wielkie litery
• Rozmiar tekstu nagłówka 3: 33px

Nagłówek 4 Ustawienia tekstu

Kontynuuj, otwierając ustawienia tekstu H4 i tam również wprowadź pewne zmiany.

• Kolor tekstu nagłówka 4: #4f4f4f
• Rozmiar tekstu nagłówka 4: 19px
• Nagłówek 4 Odstępy między literami: -1px

Rozmiary

Aby stworzyć dokładnie taki kształt, jaki chcemy, zmniejszymy następnie szerokość modułu tekstowego.

• Szerokość: 88% (komputer stacjonarny), 60% (tablet), 90% (telefon)

Rozstaw

Musimy również zmienić ustawienia odstępów.

• Lewy margines: 200px (tablet)
• Górna wyściółka: 50px
• Dolna wyściółka: 50px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Granica

Następnie dodaj subtelną ramkę do modułu tekstowego.

• Szerokość obramowania: 2px
• Kolor obramowania: #424242

Cień Pudełka

Na koniec dodaj kolorowy cień w pudełku.

• Pozycja pozioma cienia pudełka: 19px
• Pozycja pionowa cienia pudełka: 16px
• Siła rozprzestrzeniania się cieni w pudełku: -4px
• Kolor cienia: #f2ff00

Moduł tekstowy klonuj blok dwa razy i umieść w kolumnie 3

Aby zaoszczędzić czas, sklonujemy blokowy moduł tekstowy, który utworzyliśmy dwukrotnie i umieścimy oba duplikaty w trzeciej kolumnie wiersza.

Modyfikacje modułu z czerwonym tekstem

Zmień kolor tekstu linku

Otwórz pierwszy moduł tekstowy w trzeciej kolumnie i zmień kolor linku.

• Kolor tekstu linku: #e02b20

Zmień odstępy

Następnie przejdź do ustawień odstępów i dodaj górny margines.

• Górny margines: -150px (komputer), -20px (tablet), 50px (telefon)

Zmień kolor cienia pola

Zmień kolor cienia ramki na ten sam kolor, który jest używany w tekście łącza.

• Kolor cienia: #e02b20

Modyfikacje modułu niebieskiego tekstu

Zmień kolor tekstu linku

Zmień również kolor linku drugiego modułu tekstowego w trzeciej kolumnie.

• Kolor tekstu linku: #0ff3ff

Zmień rozmiar

Następnie zmień ustawienia rozmiaru.

• Rozmiary: 67% (komputer stacjonarny), 60% (tablet), 90% (telefon)

Zmień odstępy

Aby stworzyć pewne nakładanie się tego modułu i dwóch innych modułów tekstowych, baw się z niestandardowymi wartościami marginesów.

• Górny margines: -20px (komputer), -30px (tablet), 50px (telefon)
• Lewy margines: -160px (komputer), 200px (tablet), 0px (telefon)

Zmień kolor cienia pola

Aby zakończyć, zmień kolor cienia pola na ten sam niebieski kolor, który jest używany w tekście linku i gotowe!

• Kolor cienia: #0ff3ff

Zapowiedź

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

Końcowe przemyślenia

Zdziwiłbyś się, jak wiele unikalnych projektów możesz osiągnąć za pomocą modułów tekstowych w połączeniu z wbudowanymi opcjami Divi. Nie jest wymagany dodatkowy kod CSS. W tym poście pokazaliśmy, jak używać różnych typów tekstu do tworzenia oszałamiających elementów blokowych w projekcie strony Divi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!