Układanie typografii, aby stworzyć 5 unikalnych projektów nagłówków w Divi

Typografia układania w stos to łatwa i skuteczna technika tworzenia pięknych projektów nagłówków w Divi. Typografia jest często używana wyłącznie jako abstrakcyjny element projektu w sposób, który tak naprawdę nie przyczynia się do treści odczytywanych przez wyszukiwarki. Ale możesz również wykazać się kreatywnością w projektowaniu rzeczywistych nagłówków (h1, h2 itd.) za pomocą kilku technik Divi.

W tym samouczku zamierzam użyć Divi do stworzenia 5 różnych projektów nagłówków z typem piętrowym. Mamy nadzieję, że będziesz mógł wykorzystać te projekty jako inspirację do własnych projektów nagłówków.

Zacznijmy.

zapowiedź

Oto rzut oka na 5 wzorów.

Projekt nr 1

Projekt #2

Projekt #3

Projekt #4

Projekt #5

Pierwsze kroki

Będziemy budować te projekty od podstaw. Aby rozpocząć, utwórz nową stronę, nadaj jej tytuł i wdróż program Visual Builder. Wybierz opcję „Buduj od podstaw” i możesz zacząć budować.

Aby uprościć proces tworzenia każdego z 5 projektów, powielę sekcje, aby uzyskać przewagę nad kolejnym projektem. Najlepiej byłoby więc tworzyć te projekty w kolejności, zaczynając od pierwszego.

Projekt nagłówka #1

W tym pierwszym projekcie pokażę, jak pionowo ułożyć tekst nagłówka i wyśrodkować go na środku wiersza. Zamierzam również dodać dwie warstwy gradientu (jedną w sekcji i jedną w rzędzie) na obrazie tła, aby uzyskać zrównoważoną półprzezroczystą białą nakładkę, która idealnie komponuje się z białym tłem strony. Rezultat jest subtelny, ale bardzo wyjątkowy i czysty.

Zanim dodamy nasz moduł tekstowy, zajmijmy się najpierw ustawieniami sekcji i wierszy. To znacznie ułatwi później dostosowanie modułu.

Przejdź do ustawień sekcji i zaktualizuj następujące elementy:

Dodaj obraz tła (szerokość co najmniej 1920px)
Kolor lewego gradientu tła: #ffffff
Prawy gradient tła: rgba (255,255,255,0)
Umieść gradient nad obrazem tła: TAK

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

Kolor lewego gradientu tła: rgba (255,255,255,0)
Prawy kolor gradientu tła: #ffffff
Szerokość niestandardowa: 100%
Niestandardowe dopełnienie: 0px góra, 0px dół

Teraz możemy dodać nasz moduł tekstowy do środkowej kolumny naszego wiersza z trzema kolumnami. Następnie zaktualizuj ustawienia modułu tekstowego w następujący sposób:

Zastąp pozorowaną zawartość w polu treści nagłówkiem h2 o treści „design” w następujący sposób:

<h2>design</h2>

Następnie zaktualizuj pozostałe ustawienia w następujący sposób:

Czcionka nagłówka 2: Kair
Grubość czcionki nagłówka 2: Regularna
Styl czcionki nagłówka 2: Wielkie litery (TT)
Rozmiar tekstu nagłówka 2: 8vw
Szerokość: 58% (komputer), 16% (tablet), 18% (smartfon)
Wyrównanie modułu: Środek
Margines niestandardowy: -10vw góra, -10vw dół

Niestandardowe wartości szerokości w połączeniu z rozmiarem tekstu nagłówka 8vw są kluczem do stworzenia tego projektu. Niestandardowa szerokość ściska tekst tak, że każda litera jest ułożona jedna na drugiej. Wartość procentowa szerokości zmienia się drastycznie na tablecie, ponieważ rozmiar kolumny zawierającej moduł tekstowy zmienia się z 1/3 do pełnej szerokości. Ustawienie tekstu nagłówka na jednostkę długości vw (szerokość okienka ekranu) pozwoli idealnie skalować tekst do rozmiaru okna przeglądarki.

Na koniec zakończmy projekt obramowaniem po prawej i lewej stronie.

Szerokość prawego obramowania: 4px
Szerokość lewej krawędzi: 4px

Oto ostateczny wynik.

Projekt nagłówka #2

W następnym przykładzie zamierzam nieco poprawić projekt, aby tekst nagłówka był podzielony na pół i ułożony w stos, zamiast umieszczania każdej litery osobno. Zamierzam również dodać podtytuł pod nagłówkiem głównym, aby uzyskać inny wygląd.

W polu treści dodaj następujący nagłówek h3:

<h3>our process</h3>

Następnie dodaj do modułu białe tło:

Kolor tła: #ffffff

Na karcie projekt zaktualizuj następujące elementy:

Rozmiar tekstu nagłówka 2: 10vw
Szerokość: 100% (komputer stacjonarny), 32% (tablet), 33% (smartfon)
Czcionka nagłówka 3: Ubuntu Condensed
Nagłówek 3 Wyrównanie tekstu: do środka
Rozmiar tekstu nagłówka 3: 32px (komputer), 20px (tablet), 16px (smartfon)

Następnie zaktualizuj odstępy dla modułu tekstowego, aby był bardziej responsywny na urządzeniach mobilnych:

Margines niestandardowy (tablet): -5vw Top, -10vw
Margines niestandardowy (smartfon): -5vw Top, -12vw

Teraz wyjmij gradient tła w sekcji iw rzędzie.

Następnie dodaj trochę dopełnienia do swojego wiersza, aktualizując następujące ustawienie wiersza:

Niestandardowe wypełnienie (komputer): 5vw Top, 5vw Bottom
Niestandardowa wyściółka (tablet): 0vw Top, 0vw Bottom

Oto ostateczny wynik.

Projekt nagłówka #3

Tym razem przesuniemy nagłówek w lewo i wrócimy do układania każdej litery w pionie. Następnie zmienię czcionkę i nada wierszowi pasujące obramowanie, aby uzupełnić obramowania modułu.

Powiel drugą sekcję projektu, a następnie zaktualizuj ustawienia modułu w następujący sposób:

Najpierw usuń nagłówek h3 w polu treści.

Czcionka nagłówka 2: Ubunto Condensed
Rozmiar tekstu nagłówka 2: 6vw
Szerokość: 54% (komputer), 16,4% (tablet), 17,5% (smartfon)
Wyrównanie modułu: do lewej (domyślnie)

Aby dostosować się do urządzeń mobilnych, zaktualizuj następujące odstępy:

Margines niestandardowy (tablet): -15vw na dole
Margines niestandardowy (smartfon): -17vw Bottom

Teraz przejdź do ustawień wiersza i zaktualizuj poniższe, aby uzyskać prawidłowe odstępy.

Niestandardowe wypełnienie: 2vw Top, 2vw Bottom, 10vw Left

Następnie dodaj obramowanie do wiersza, aby uzupełnić obramowanie modułu.

Szerokość górnej krawędzi: 4px
Szerokość dolnej krawędzi: 4px

Teraz pozostaje tylko przeciągnąć nasz moduł do lewej kolumny wiersza.

sprawdź efekt końcowy.

Projekt nagłówka #4

W przypadku ostatniego projektu nagłówka ustawię nagłówek ułożony w stos całkowicie wyrównany do lewej, a następnie dodam trochę koloru i efekt fajnego cienia pola.

Najpierw zaktualizuj ustawienia wiersza, aby pozbyć się lewego dopełnienia.

Następnie zaktualizuj ustawienia modułu tekstowego, aby zawierały następujące elementy:

Kolor tła: #5b7796
Kolor tekstu: jasny
Czcionka nagłówka 2: Kair
Styl czcionki nagłówka 2: domyślny
Rozmiar tekstu nagłówka 2: 10vw

Rozmiar tekstu: 5vw
Niestandardowa wyściółka: 2vw góra, 2vw dół, 4vw lewo, 4vw prawo

Przywróć domyślne style obramowania, a następnie zaktualizuj nowe ustawienia obramowania w następujący sposób:

Szerokość obramowania po prawej: 0.2em
Kolor prawego obramowania: #ffffff

Szerokość dolnej granicy: 0.2em
Kolor prawego obramowania: #ffffff

Teraz jak możesz zauważyć, wartość 0.2em dla obramowania może wydawać się mała. Dzieje się tak, ponieważ wartość em opiera się na wartości czcionki ciała, którą zmieniliśmy specjalnie z tego powodu na 5vw. Ponieważ chcemy, aby szerokość obramowania dostosowywała się wraz z rozmiarem naszego nagłówka, musimy nadać naszemu tekstowi ciała wartość jednostki długości vw, która będzie skalowana wraz z rozmiarem przeglądarki.

Teraz nadajmy mu cień pudełkowy, aby uzyskać ładny efekt połamanej siatki.

Cień pudełka: patrz zrzut ekranu
Pozycja pozioma cienia pudełka: 20px
Pozycja pionowa cienia pudełka: 20px
Kolor cienia: #5b7796
Pozycja cienia pudełka: cień zewnętrzny

Następnie zaktualizuj rozmiar modułu dla urządzeń mobilnych.

Szerokość: 50% (komputer), 13% (tablet), 16% (smartfon)

Aby wykonać ostatni krok, wyjmij dopełnienie i obramowanie rzędu.

Następnie sprawdź efekt końcowy.

Projekt nagłówka nr 5

W przypadku tego ostatniego projektu nagłówka po prostu trochę zmienimy odstępy, aby poszerzyć moduł tekstowy. Stworzy to podobny projekt jak w projekcie nagłówka #2.

Najpierw otwórz moduł tekstowy i dodaj następujący tekst pod nagłówkiem h2:

<h3>our process</h3>

Następnie zaktualizuj ustawienia projektu w następujący sposób:

Styl czcionki nagłówka 2: Wielkie litery (TT)
Szerokość: 94% (komputer), 29% (tablet), 29% (smartfon)

Następnie zaktualizuj odstępy w następujący sposób:

Margines niestandardowy: -8vw góra, -5vw dół
Niestandardowa wyściółka: góra 4vw, dół 4vw

Oto ostateczny wynik.

Czuły

Sztuczka, aby te projekty wyglądały dobrze na urządzeniach mobilnych, polega na dostosowaniu rozmiaru i marginesów modułu tekstowego do skalowania wraz ze zmniejszającym się oknem przeglądarki. Jeśli więc coś nie skaluje się właściwie, być może będziesz musiał dostosować te właściwości do własnych celów. Oto, jak projekty będą wyglądać na urządzeniach mobilnych.

Końcowe przemyślenia

Mam nadzieję, że 5 projektów nagłówków w tym samouczku zapewni przynajmniej kilka świetnych punktów wyjścia dla twoich własnych projektów. Jak można się spodziewać, projekt najlepiej sprawdza się w przypadku krótkich (jednowyrazowych) nagłówków, ponieważ tekst będzie ułożony pionowo. Ale istnieje mnóstwo elementów projektu, które można dodać, aby te projekty były naprawdę wyjątkowe. Zapraszam do odkrywania różnych czcionek, kolorów i obramowań, aby dostosować je do swoich potrzeb.

Więcej inspiracji znajdziesz w pionowym układzie tekstu. Możesz również chcieć dowiedzieć się, jak tworzyć tekst boczny i pionowy z bardziej niestandardowym podejściem CSS.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!