Jak stworzyć 3 oszałamiające projekty czcionek o stałej szerokości w Divi

Czcionki o stałej szerokości są wspaniałym dodatkiem do projektowania stron internetowych. Są szczególnie przydatne do tworzenia projektów, które mają piękną symetrię i równowagę. Czcionka o stałej szerokości składa się z liter i znaków, z których każdy ma tę samą szerokość (lub odstęp w poziomie). Jako takie zapewniają spójną i elegancką strukturę wyświetlania tekstu. Z tego powodu czcionki o stałej szerokości są szeroko stosowane w kodowaniu.

W tym samouczku stworzymy trzy wspaniałe projekty czcionek o stałej szerokości w Divi. Omówimy, jak prawidłowo dostosować moduły tekstowe do pozycjonowania i projektowania czcionek o stałej szerokości na kilka całkiem unikalnych sposobów i wiele więcej.

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na projekty, które zbudujemy w tym samouczku.

Projekt czcionki o stałej szerokości #1: Styl logo

Rozpocznij projekt budowlany #1

Czcionka o stałej szerokości #2: duże bloki liter

Rozpocznij projekt budowlany #2

Projekt czcionki o stałej szerokości #3: Krzyżówka

Rozpocznij projekt budowlany #3

Pobierz układ wzorów czcionek o stałej szerokości za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj zainstalowany motyw Divi (lub wtyczkę Divi Builder, jeśli nie używasz motywu Divi).
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Prześlij kilka próbnych obrazów do biblioteki multimediów, które będą używane w samouczku. Będziemy używać logo obrazu o wymiarach 200 na 200 pikseli z pakietu układów HVAC oraz dwóch obrazów tła (o szerokości co najmniej 1920 pikseli) zaczerpniętych z pakietu układów Cake Maker i pakietu Home Improvement Layout Pack.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Projekt czcionki o stałej szerokości #1: Styl logo

Zacznijmy od prostego projektu czcionki o stałej szerokości, który podkreśla symetryczną równowagę liter. Ponieważ litery są rozmieszczone równomiernie, czcionki o stałej szerokości doskonale nadają się do grafik i logo. Oto szybki przykład tego, jak można włączyć czcionkę o stałej szerokości za pomocą prostej ikony obrazu, aby stworzyć ładną grafikę.

Najpierw utwórz zwykłą sekcję z jednokolumnowym rzędem.

Zanim dodamy moduł tekstowy, dodamy tło do sekcji. Tło będzie się składać z wyśrodkowanego obrazu ikony z ciemnoszarym tłem. Obraz ikony, którego użyjemy, pochodzi z pakietu układów HVAC. Upewnij się, że ikona obrazu ma około 200 na 200 pikseli, ponieważ jako obrazu tła użyjemy rzeczywistego rozmiaru.

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

• Kolor tła: #121212
• Obraz tła: [wstaw ikonę obrazu 200 na 200 pikseli]
• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: środek

Dodaj moduł tekstowy

Po zakończeniu sekcji dodaj moduł tekstowy do jednokolumnowego wiersza.

Tutaj dodajemy tekst czcionką o stałej szerokości. Wygodnym aspektem liter o stałej szerokości jest to, że ponieważ każda litera ma tę samą szerokość, możesz łatwo wyśrodkować środkową literę tekstu na stronie. Ułatwi to dopasowanie do ikony obrazu tła, którą dodaliśmy do sekcji.

Otwórz ustawienia modułu tekstowego i zaktualizuj treść treści słowem „elegancki”. Właściwie możesz użyć prawie każdego słowa, które ma nieparzystą liczbę liter, dzięki czemu mamy środkową literę, która ładnie nakłada się na ikonę obrazu tła.

Dodawanie projektu czcionki o stałej szerokości

Divi ma około 12 różnych czcionek o stałej szerokości zawartych w kreatorze Divi, z którego możemy wybierać. Aby je zobaczyć, możemy kliknąć, aby wybrać czcionkę tekstu i wpisać „mono” w pasku wyszukiwania. Spowoduje to wyświetlenie listy dostępnych czcionek o stałej szerokości.

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

• Czcionka tekstu: Droid Sans Mono
• Rozmiar tekstu: 5vw
• Odstępy między literami tekstu: 1,3 em
• Wysokość linii tekstu: 1em

Ta kombinacja jednostki długości vw dla rozmiaru tekstu i jednostki długości em dla odstępów między literami i wysokości linii zapewni, że tekst będzie doskonale reagował na wszystkie rozmiary przeglądarki.

Rozstaw

Po przygotowaniu czcionki dodaj trochę odstępów do modułu tekstowego, aby upewnić się, że tekst jest idealnie wyśrodkowany. Widzimy, że tekst jest nieco wyśrodkowany z powodu odstępów między literami. Możemy to łatwo naprawić, dodając lewe dopełnienie równe wartości, którą dodaliśmy dla odstępów między literami.

Zaktualizuj następujące elementy:

• Margines: 0px dół
• Wyściółka: 2em na górze, 2em na dole, 1,3em w lewo

Zmień kolor środkowej litery

Prostym sposobem na zmianę koloru pojedynczej litery w Divi jest użycie opcji stylu wbudowanego podczas korzystania z kreatora na interfejsie.

Po prostu zaznacz literę, którą chcesz zmienić, i kliknij ikonę koloru tekstu na pasku menu.

Następnie dodaj następujący kod koloru: rgba(248, 142, 96, 0.54)

Otóż ​​to!

Ustaw pełną szerokość wiersza

Musimy zrobić trochę miejsca na tekst, który będzie dodawany, więc śmiało ustaw wiersz o pełnej szerokości, otwierając ustawienia wiersza i aktualizując następujące elementy:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Ostateczny wynik

Oto ostateczny wynik.

A jeśli chcesz, możesz dodać spację dla środkowego znaku w tekście, aby użyć ikony obrazu tła dla pustego miejsca. Oto jak by to wyglądało.

Czcionka o stałej szerokości #2: duże bloki liter

Ten następny projekt prezentuje blokową strukturę czcionki, która jest możliwa w przypadku czcionek o stałej szerokości. W przeciwieństwie do zwykłych czcionek (o zmiennej szerokości), czcionki o stałej szerokości układają się jedna na drugiej, aby uzyskać zrównoważony projekt, który jest nowoczesny i przyjemny dla oka.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z jednokolumnowym wierszem.

Przed dodaniem dowolnego modułu zaktualizuj sekcję o projekt tła w następujący sposób:

• Kolor lewego gradientu tła: #fcd1e5
• Prawy gradient tła: rgba (255,255,255,0)
• Kierunek gradientu: 135 stopni
• Pozycja startowa: 50%
• Pozycja końcowa: 76%

Następnie dodaj obraz tła. Używam jednego z Pakietu Układu Cake Maker.

Dodaj szerokość wiersza

Następnie zaktualizuj szerokość wiersza w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł tekstowy

Gdy masz już wiersz o pełnej szerokości, dodaj do niego moduł tekstowy.

Następnie zaktualizuj treść treści o następujące elementy:

<p>dividesign<a href="#">learnmore</a></p>

Następnie dostosuj tekst akapitu w następujący sposób:

• Czcionka tekstu: Overpass Mono
• Styl czcionki tekstu: TT
• Kolor tekstu tekstu: #2e298f
• Rozmiar tekstu: 15vw
• Odstępy między literami tekstu: 0.16 em
• Wysokość linii tekstu: 1em

Dodamy inny styl do tekstu linku w następujący sposób:

• Styl czcionki łącza: podkreślenie
• Kolor tekstu łącza: #2e298f
• Rozmiar tekstu łącza: 3.5vw
• Odstępy między literami: 0em

Rozstaw

Po zmianie stylu tekstu zaktualizuj odstępy w następujący sposób:

• Margines: 0px dół
• Wypełnienie: 0.16 em po lewej, 3 em po prawej

Następnie zapisz ustawienia. Następnie użyj opcji stylu wbudowanego, aby zmienić kolor liter, tak jak zrobiliśmy to w pierwszym przykładzie projektu wcześniej w poście.

Aby to zrobić, podświetl cztery górne litery i zmień kolor na biały.

Zmień kolor drugiej litery na następujący: #f34a43

Na koniec zaznacz pierwsze pięć liter w tekście linku („nauka”) i zaktualizuj kolor do następującego: #f34a43.

Ostateczny projekt

Sprawdźmy teraz końcowy wynik na aktywnej stronie.

Projekt czcionki o stałej szerokości #3: Krzyżówka

Ten ostatni projekt wykorzystuje czcionki o stałej szerokości, aby stworzyć układ typu krzyżówki dla tekstu. Oto jak to zrobić.

Najpierw utwórz nową zwykłą sekcję z jednokolumnowym wierszem.

Przed dodaniem jakichkolwiek modułów otwórz ustawienia sekcji i dodaj obraz tła z gradientem w następujący sposób:

• Obraz tła: [wstaw obraz]
• Kolor lewego gradientu tła:
• Prawy kolor gradientu tła:
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 25%
• Pozycja końcowa: 0%
• Umieść gradient nad obrazem tła: TAK

Ustawienia wiersza

Gdy tło sekcji jest gotowe, otwórz ustawienia wiersza z nową szerokością i pewnymi odstępami.

• Szerokość: 100%
• Maksymalna szerokość: 100%
• Wyściółka: góra 22vw, lewa 5vw

Dodaj moduł tekstowy

Po zaktualizowaniu wiersza dodaj nowy moduł tekstowy do wiersza ze słowem „mono” jako treścią treści.

Następnie zaktualizuj projekt modułu tekstowego w następujący sposób:

• Czcionka tekstu: Rubik Mono One
• Kolor tekstu: #faac00
• Rozmiar tekstu: 8vw
• Odstępy między literami tekstu: 0.15em
• Wysokość linii tekstu: 1em

Zduplikuj moduł tekstowy

Aby przyspieszyć projektowanie naszych kolejnych dwóch bloków tekstu, skopiujmy moduł tekstowy, który właśnie zaprojektowaliśmy, dwa razy, tak aby mieć w sumie trzy moduły tekstowe ułożone jeden na drugim.

Zaktualizuj moduł tekstowy nr 2

Po zduplikowaniu modułu tekstowego otwórz ustawienia drugiego (środkowego) modułu tekstowego i zmień tekst podstawowy na słowo „czcionki”.

Następnie zaktualizuj następujące elementy:

• Treść: „czcionki”
• Kolor tła: #dddddd
• Kolor tekstu tekstu: #930565
• Szerokość: 0,86 em
• Margines: -3em u góry, 2em w lewo

Zwróć uwagę, jak zmiana szerokości modułu tekstowego powoduje, że tekst jest wyświetlany w pionie. A ponieważ jest to czcionka o stałej szerokości, układają się równomiernie. A z szerokością równą rozmiarowi każdego bloku liter, możemy przesuwać moduł tekstowy w odstępach co 1 em. Tak więc -3em górny margines spowoduje zwiększenie tekstu o dokładnie 3 bloki liter. A 2em lewy margines przesunie moduł tekstowy o dokładnie 2 bloki liter w prawo. Ułatwia to umieszczanie przedmiotów w takim układzie krzyżówki.

Cień Pudełka

Dodajmy cień pola, aby zwiększyć rozmiar tła za modułem tekstowym.

• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 0,08 em
• Kolor cienia: #dddddd (taki sam jak kolor tła)

Indeks Z

Aby upewnić się, że ten blok tekstu pozostaje nad innymi modułami tekstowymi, zaktualizuj indeks z w następujący sposób:

• Indeks Z: 11

Zaktualizuj moduł tekstowy nr 3

Po zakończeniu modułu tekstowego nr 2 otwórz ustawienia trzeciego modułu tekstowego i zmień tekst podstawowy na słowo „spacja”.

Następnie przenieś moduł na miejsce, korzystając z naszych magicznych wartości marginesów em:

• Margines: -1em u góry, 2em w lewo

Ostateczny projekt

mobilny

Ponieważ te projekty są budowane przy użyciu jednostek długości vw i em, projekt pozostanie spójny we wszystkich rozmiarach przeglądarek. Oto jak wygląda projekt na wyświetlaczu tabletu i telefonu.

Uwaga: jedynym elementem, który nie jest responsywny, jest ikona obrazu tła w pierwszym projekcie. Możesz jednak łatwo dodać mniejszy obraz tła na tablecie i telefonie, aby to naprawić.

Końcowe przemyślenia

Być może najlepszą rzeczą w tworzeniu projektów czcionek o stałej szerokości w Divi jest wszechstronność stylów czcionek. Zaledwie kilka drobnych drobiazgów może zrobić dużą różnicę. Dodatkowo aplikacje są bardzo praktyczne na każdej stronie internetowej.

Który z tych trzech przykładów uważasz za najbardziej obiecujący?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!