Jak tworzyć wspaniałe projekty tekstowe za pomocą dzielników sekcji w Divi

Tworzenie unikalnych projektów tekstowych dla Twojej witryny może być wyzwaniem, zwłaszcza jeśli nie chcesz używać mnóstwa CSS lub uciekać się do uzupełniania tekstu przyjaznego SEO dla obrazów projektowanych w Photoshopie. Dzięki Divi (i odrobinie myślenia „po wyjęciu z pudełka”) możesz tworzyć unikalne projekty tekstowe bez zewnętrznego CSS lub niestandardowych obrazów. Sztuką jest użycie dzielników sekcji Divi, aby nałożyć tekst, aby dodać przerwy i tekstury na wiele różnych sposobów. W tym samouczku zamierzam zbadać moc dzielników sekcji Divi, aby stworzyć unikalne projekty tekstowe, które przeniosą nagłówki stron na wyższy poziom.

Zacznijmy.

zapowiedź

Oto tylko kilka przykładów projektów tekstów możliwych przy użyciu tej techniki:

Pierwsze kroki

W przypadku tego projektu musisz utworzyć nową stronę za pomocą wizualnego kreatora. Z pulpitu nawigacyjnego WordPress przejdź do Strony> Dodaj nowy. Następnie nadaj swojej stronie tytuł i wdróż konstruktor wizualny. Wybierz opcję „Buduj od podstaw”. Teraz możesz zacząć!

Projekt nr 1: Uszkodzony tekst z podświetleniem gradientowym

W tym pierwszym projekcie tekstu użyję dzielników sekcji, aby podzielić tekst i dodać element wyróżniający o unikalnym kształcie za pomocą gradientowego tła. Dodaj nową sekcję z układem jednokolumnowym. W tym momencie nie musisz dodawać modułu. Zaczniemy od dostosowania sekcji.

Ustawienia sekcji

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Kolor gradientu tła po lewej stronie: rgba (124,218,36,0.66)
Prawy gradient tła: rgba (0,106,193,0,61)

Szerokość: 80%
Wyrównanie sekcji: Środek

Styl Top Divider: patrz zrzut ekranu
Kolor górnego dzielnika: #ffffff
Wysokość górnego dzielnika: 1,8vw
Powtarzanie poziome górnego dzielnika: 3x
Układ dzielnika górnego: nad zawartością sekcji

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnej przegrody: #ffffff
Wysokość dolnego rozdzielacza: 1,8vw
Powtarzanie poziome dolnej przegrody: 3x
Układ dolnego rozdzielacza: na górze zawartości sekcji

Margines niestandardowy: 5vw góra, 5vw dół
Niestandardowe dopełnienie: 0px góra, 0px dół

Ponieważ projekt tekstu będzie odbywał się przy użyciu dzielników sekcji, ważne jest, aby sekcja była zwarta, bez żadnych dopełnień, tak aby dzielniki nachodziły na tekst z minimalną wysokością dzielnika. Ustawienie wysokości przegrody za pomocą jednostki długości vw zapewni, że styl przegrody będzie się ładnie skalować, zapewniając spójny projekt na wszystkich rozmiarach ekranu. Nadanie sekcji niestandardowego marginesu jest opcjonalne, ale jest również pomocne w przypadku odstępów, ponieważ będziemy używać ujemnych marginesów w naszym module tekstowym, aby rozszerzyć go powyżej i poniżej naszej sekcji (powinno to mieć później większy sens).

Ustawienia wiersza

W przypadku rzędu wszystko, co musimy zrobić, to dostosować szerokość i wypełnienie. Zaktualizuj następujące ustawienia wierszy:

Szerokość niestandardowa: 100%
Niestandardowe dopełnienie: 0px góra, 0px dół

Ponieważ nasz tekst zostanie dodany do kolumny wiersza, musimy pozbyć się dopełnienia, aby nasze separatory obejmowały górę i dół naszego tekstu.

Ustawienia modułu tekstowego

Teraz możemy wreszcie dodać moduł tekstowy do jednego wiersza kolumny. W wierszu dodaj moduł tekstowy o treści „nasza praca”. Następnie zaktualizuj ustawienia projektu w następujący sposób:

Czcionka tekstu: Oswald
Styl czcionki tekstu: TT
Kolor tekstu tekstu: #0c71c3
Rozmiar tekstu: 10vw
Wysokość linii tekstu: 1em
Orientacja tekstu: Środek
Margines niestandardowy: -5vw góra, -4vw dół
Niestandardowa wyściółka: 2vw Top, 2vw Bottom

Kluczem jest tutaj użycie niestandardowego marginesu ujemnego, aby rozszerzyć tekst nad i pod sekcją. Pozwala to na zachodzenie dzielników sekcji na wnętrze tekstu, aby uzyskać efekt przerwanego projektu. Gradient tła prześwituje, aby nadać mu również ładny wygląd. Rezultatem jest prawdopodobnie jeden z moich ulubionych projektów tekstowych, który otwiera drzwi dla mnóstwa kreatywnych wariacji.

Oto ostateczny projekt.

Projekt tekstu nr 2: Tekst z pionową teksturą linii

W przypadku drugiego projektu tekstu śmiało utwórz nową sekcję z jednym wierszem kolumny. Następnie dodaj moduł tekstowy do kolumny. Zamiast dostosowywać sekcję najpierw, pomyślałem, że najlepiej zacząć od modułu tekstowego, aby lepiej zobaczyć proces projektowania.

Ustawienia tekstu

W jednokolumnowym wierszu dodaj moduł tekstowy o treści „nasza praca”. Następnie zaktualizuj ustawienia projektu w następujący sposób:

Czcionka tekstu: Poppins
Grubość czcionki tekstu: Ultra Bold
Rozmiar czcionki tekstu: 8vw
Wysokość linii tekstu: 1em
Orientacja tekstu: Środek
Margines niestandardowy: 0px góra, 0px dół

Ustawienia wiersza

Ustawienia wiersza będą takie same jak w pierwszym przykładzie projektu, więc możesz skopiować style wiersza i wkleić je do tego wiersza. Lub po prostu zaktualizuj ustawienia wiersza w następujący sposób:

Szerokość niestandardowa: 100%
Niestandardowe dopełnienie: 0px góra, 0px dół

Ustawienia sekcji

Zaktualizuj ustawienia sekcji w następujący sposób:

Szerokość: 70%

Styl Top Divider: patrz zrzut ekranu
Kolor górnego dzielnika: #ffffff
Wysokość górnego dzielnika: 8vw
Powtarzanie poziome górnego dzielnika: 150x
Układ dzielnika górnego: nad zawartością sekcji

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnej przegrody: #ffffff
Wysokość dolnej przegrody: 8vw
Powtarzanie poziome dolnej przegrody: 150x
Klapka dolnej przegrody: pionowa
Układ dolnego rozdzielacza: na górze zawartości sekcji

Niestandardowe dopełnienie: 0px góra, 0px dół

Kluczem do tego projektu jest opcja powtarzania w poziomie dzielnika. Ustawienie powtórzenia poziomego separatora na 150x z wysokością równą wysokości tekstu tworzy serię nakładających się pionowych linii, które rozciągają się od góry i dołu sekcji. Nie zapomnij ustawić dolnej przegrody tak, aby odwróciła się w pionie, aby „linie” rozciągały się w górę.

Oto ostateczny projekt.

Projekt #3: Tekst z częściową teksturą na górze i na dole

Aby przyspieszyć proces następnego projektu, skopiuj sekcję, którą właśnie utworzyłeś w drugim przykładzie powyżej.

Aktualizuj ustawienia sekcji

Kolor tła: #e02b20

Styl Top Divider: patrz zrzut ekranu
Kolor górnego rozdzielacza: #e02b20
Wysokość górnej przegrody: 3vw
Powtarzanie poziome górnego dzielnika: 30x

Styl dolnego rozdzielacza: patrz zrzut ekranu
Kolor dolnego rozdzielacza: #e02b20
Wysokość dolnej przegrody: 3vw
Powtarzanie poziome dolnej przegrody: 30x

Kluczem jest tutaj upewnienie się, że kolor separatora odpowiada kolorowi tła sekcji, tak aby separatory były widoczne tylko tam, gdzie nakładają się na tekst.

Aktualizuj ustawienia tekstu

Teraz pozostało tylko zaktualizować kolor tekstu:

Kolor tekstu: #ffffff

Oto ostateczny projekt.

Zabawna alternatywa dla designu nr 3

Zanim opuszczę ten projekt, pomyślałem, że podzielę się tym, jak dolną przegrodę w tej sekcji można łatwo zamienić w trawę, aby tekst wyglądał, jakby leżał na polu. W tym celu zaktualizuj ustawienia w następujący sposób:

Kolor gradientu tła po lewej stronie: #68a4d8 (niebo)
Prawy gradient tła: #1c7503 (trawa)
Pozycja startowa: 82%
Pozycja końcowa: 0%
Niestandardowa wyściółka: 5vw Top
Styl Top Divider: Chmury (lub bąbelki?)
Kolor dolnego rozdzielacza: #1c7503

Następnie zaktualizuj kolor tekstu do #000835

Oto wynik.

A co z urządzeniami mobilnymi?

Ponieważ w tych projektach zastosowano jednostkę długości vw, style tekstu i dzielników będą się ładnie skalować we wszystkich przeglądarkach bez konieczności przypisywania dodatkowych rozmiarów na tablecie i smartfonie. Jeśli jednak napotkasz problem ze zbyt małym skalowaniem tekstu na smartfonie, może być konieczne zwiększenie wartości jednostki długości vw rozmiaru tekstu.

Końcowe przemyślenia

Mam nadzieję, że dobrze się bawiłeś podczas eksperymentowania z dzielnikami sekcji w celu uzyskania unikalnych projektów tekstów. Dzięki różnym czcionkom, kolorom i stylom dzielenia dostępnym w Divi, jestem pewien, że nie będziesz miał problemu z tworzeniem własnych, niesamowicie wyglądających projektów tekstowych do następnego projektu.

Aby uzyskać więcej inspiracji na temat kreatywnego korzystania z dzielników sekcji, zapoznaj się z teksturami tła, ramkami menu nawigacji i tłami dolnego paska stopki.

Do następnego razu czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!