Jak obracać tekst w celu uzyskania unikalnych projektów układu w Divi (samouczek + DARMOWE pobieranie układu)

Większość z nas jest przyzwyczajona do czytania tekstu od prawej do lewej i od góry do dołu. Ale jeśli chodzi o projektowanie stron internetowych, dobrym pomysłem może być oderwanie się od normy. Jednym ze sposobów na to jest obrót tekstu. Obracanie tekstu w witrynie może wydawać się niepraktyczne, ale wydaje się, że ma miejsce. W rzeczywistości pionowa orientacja tekstu wydaje się być powszechna we współczesnym projektowaniu stron internetowych. I chociaż większość obraca tekst wyłącznie w celach projektowych, można argumentować, że obrócony (lub pionowy) tekst (choć trudniejszy do odczytania) może być skuteczną techniką przyciągania uwagi.

Dzięki Divi możesz obracać dowolny element na swojej stronie, korzystając z wbudowanych opcji przekształcania. W tym samouczku pokażę, jak skutecznie obracać tekst, aby tworzyć unikalne projekty układu w Divi. W tym celu zaprojektuję trzyczęściowy układ zawierający przykłady obróconego tekstu.

Zacznijmy.

zapowiedź

Oto zajawka całego układu, który będziemy budować w samouczku. Zwróć uwagę, że istnieją przykłady tekstu obróconego w trzech różnych sekcjach układu.

Pobierz kompletny układ z tego samouczka ZA DARMO

Aby położyć swoje ręce na darmowym układzie Obrócone projekty tekstowe, musisz najpierw pobrać go 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 układ

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!

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

Wróćmy teraz do samouczka.

O czym należy pamiętać podczas obracania tekstu

W jakim kierunku należy obrócić tekst?

Jeśli chcesz obrócić tekst w celu wyświetlania w pionie, możesz nie być pewien, w którym kierunku obrócić tekst. Możesz obrócić tekst w kierunku przeciwnym do ruchu wskazówek zegara, aby tekst czytał od dołu do góry. Możesz też obrócić tekst zgodnie z ruchem wskazówek zegara, aby tekst był czytany od góry do dołu. Jeśli zastanawiasz się, który z nich jest łatwiejszy do odczytania, nie jestem pewien, czy istnieje odpowiedź. Możesz spróbować uzyskać wskazówkę z orientacji tytułów książek na półce z książkami. Ale różne kraje robią to inaczej (standard w USA jest zgodny z ruchem wskazówek zegara, od góry do dołu).

W tym samouczku w większości przypadków będę obracał tekst w kierunku przeciwnym do ruchu wskazówek zegara, głównie dlatego, że podoba mi się jego wygląd po lewej stronie (być może wolę przechylać głowę w lewo). Ale możesz wypróbować różne kierunki.

Problem rozmycia

W niektórych przeglądarkach (takich jak Chrome i Safari) tekst jest nieco rozmyty podczas korzystania z właściwości transform rotate. Aby rozwiązać ten problem, możesz dodać wartość początku transformacji 51% lub 52% wzdłuż osi X. To powinno rozwiązać problem.

Część 1: Budowanie nagłówka z tekstem pionowym

W tej pierwszej części układu stworzymy nagłówek z tekstem pionowym. Aby to zrobić, będziemy obracać moduł notki za pomocą opcji transformacji.

Aby rozpocząć, utwórz zwykłą sekcję z wierszem w dwóch kolumnach.

Przed dodaniem modułu usuń górną i dolną wyściółkę sekcji, aktualizując następujące ustawienia sekcji:

Niestandardowe wypełnienie: 0px na górze, 0px na dole

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

• Obraz tła: [dodaj obraz o szerokości co najmniej 1920 pikseli]
• Kolor tła kolumny 1: #121212

• Szerokość niestandardowa: 100%
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: TAK
• Niestandardowe wypełnienie (komputer): 0px na górze, 0px na dole
• Niestandardowe wypełnienie (tablet): 40% w prawo
• Niestandardowe wypełnienie (telefon): 30% w prawo
• Kolumna 1 Niestandardowe wypełnienie (komputer): 200px na górze, 200px na dole
• Niestandardowe wypełnienie kolumny 1 (tablet): 150 pikseli na górze, 150 pikseli na dole

• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: 0px
• Pozycja pionowa cienia pudełka: -100px
• Kolor cienia: #f6454e

Tworzenie modułu Blurb

Teraz jesteśmy gotowi do dodania treści naszego nagłówka. Aby to zrobić, dodaj moduł notki do lewej kolumny wiersza.

Zaktualizuj następującą zawartość:

• Tytuł: Divi Design
• Treść: Twoje treści trafiają tutaj.
• Użyj ikony: TAK
• Ikona: żarówka

• Kolor ikony: #f6454e
• Rozmiar czcionki ikony: 32px
• Orientacja tekstu: środek
• Poziom nagłówka tytułu: H1 (ponieważ jest to główny nagłówek strony)
• Czcionka tytułu: Muli
• Styl czcionki tytułu: TT
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 70px (komputer), 50px (tablet), 36px (telefon)
• Kolor tekstu ciała: #cccccc
• Odstępy między literami: 4px
• Szerokość: 500px
• Wyrównanie modułu: środek

Ważna uwaga: Ponieważ będziemy obracać moduł notatek tak, aby stał pionowo, niestandardowa szerokość 500px stanie się wysokością modułu notatek pionowych. Dlatego ważne jest, aby zawartość zmieściła się w tym module. W tym przykładzie używam niewielkiej ilości tekstu i zmieniam rozmiar czcionki tytułu na różnych urządzeniach, aby tekst nie przebił się do nowej linii i nie zepsuł projektu.

Obracanie modułu Blurb za pomocą opcji transformacji

Aby obrócić moduł notki (i całą jego zawartość), zaktualizuj następujące opcje transformacji:

• Przekształć Obróć oś X: -90deg

Będziesz musiał wprowadzić wartość -90deg ręcznie. Zapewni to wyrównanie zawartości w pionie od dołu do góry.

Możesz zauważyć, że tekst jest trochę rozmyty, jeśli używasz Chrome lub Safari. Może się to czasem zdarzyć podczas korzystania z właściwości transform: rotate. Aby to naprawić, możesz nieznacznie dostosować pochodzenie transformacji w następujący sposób:

• Przekształcenie początku osi Y: 51%

Być może trzeba będzie nieco dostosować tę wartość, dopóki tekst nie będzie wyraźny. Na przykład 52% może wyglądać wyraźnie na niektórych projektach.

Tworzenie pionowego przycisku

Następnie dodamy przycisk na dole naszego nagłówka, aby przypomnieć użytkownikowi, aby przewinął stronę w dół. Następnie możemy obrócić przycisk za pomocą opcji transformacji, tak jak zrobiliśmy to z modułem blurb.

Utwórz nowy wiersz o strukturze jednokolumnowej.

Zanim dodamy nasz moduł przycisków, zaktualizuj ustawienia wierszy w następujący sposób:

• Kolor tła: #f6454e
• Szerokość niestandardowa: 100%
• Szerokość rynny: 1

Następnie dodaj moduł przycisku do wiersza i zaktualizuj następujące opcje przycisków:

• Wyrównanie przycisków: środek
• Użyj niestandardowych stylów dla przycisku: TAK
• Rozmiar tekstu przycisku: 16px
• Kolor tekstu przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 9px
• Waga czcionki: lekka
• Styl czcionki: TT
• Ikona przycisku: strzałka w prawo

Obracanie i pozycjonowanie przycisku

Aby obrócić i ustawić przycisk, użyjemy kombinacji marginesów i przekształcenia obróć w następujący sposób:

• Margines niestandardowy (komputer): -50px góra, 50px dół, -50px lewo
• Margines niestandardowy (tablet): pozostało 0 pikseli
• Przekształć Obróć oś X: 90deg

Tym razem przycisk jest obrócony o 90 stopni (zgodnie z ruchem wskazówek zegara), aby wyświetlić tekst od góry do dołu w pionie. Wydaje się to pasować, ponieważ chcemy, aby użytkownik przewinął w dół.

Część 2: Obracanie modułów tekstowych w celu tworzenia etykiet ukośnych

W następnej części układu stworzymy trzy notki z obróconymi modułami tekstowymi używanymi jako etykiety. To świetny sposób na wyświetlanie polecanych elementów na swojej stronie.

Oto jak to zrobić.

Utwórz nową zwykłą sekcję z wierszem z trzema kolumnami. Następnie dodaj moduł notki do pierwszej kolumny.

Wybierz ikonę żarówki zamiast domyślnego obrazu.

Następnie zaktualizuj moduł notki w następujący sposób:

• Kolor ikony: #f6454e
• Rozmiar czcionki ikony: 32px
• Niestandardowe wypełnienie: 3vw na dole, 3vw w lewo, 3vw w prawo

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

• Kolor tła kolumny 1: #eeeeee
• Kolor tła kolumny 2: #eeeeee
• Kolumna 3 Kolor tła: #eeeeee
• Wyrównaj wysokości kolumn: TAK

Ten następny krok ma kluczowe znaczenie, gdy dodamy nasz projekt etykiety z obróconym modułem tekstowym. Chcemy, aby przepełnienie modułu tekstowego było ukryte poza kolumną. Aby upewnić się, że tak się stanie, musimy dodać właściwość „overflow: hidden” do każdej kolumny jako niestandardowy CSS.

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS:

Kolumna 1 Główny element CSS:

overflow: hidden;

Kolumna 2 Główny element CSS:

overflow: hidden;

Kolumna 3 Główny element CSS:

overflow: hidden;

Dodawanie i obracanie modułu tekstowego jako etykiety

Następnie dodaj moduł tekstowy tuż nad modułem notki w kolumnie 1.

Zaktualizuj treść tekstową słowem „Polecane”.

Następnie wystylizuj moduł tekstowy w następujący sposób:

• Kolor tła: #f6454e
• Czcionka tekstu: Muli
• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #ffffff
• Odstępy między literami tekstu: 3px
• Wysokość linii tekstu: 2,5 em
• Orientacja tekstu: środek

Teraz nadaj modułowi tekstowe niestandardową szerokość w następujący sposób:

• Szerokość: 180px
• Wyrównanie modułu: w lewo

Następnie umieść moduł tekstowy w lewym górnym rogu kolumny, korzystając z następujących opcji transformacji:

• Przekształć Przesuń oś X: -25%
• Przekształć Przesuń oś Y: 70%

Ważne jest, aby użyć tutaj wartości procentowych, aby projekt był bardziej responsywny, więc będziesz musiał wprowadzić je ręcznie.

Przekształć Obróć oś X: -45°

Zauważ, że przepełnienie modułu tekstowego jest ukryte poza kolumną, aby ukończyć projekt.

Pozostało nam tylko skopiować moduły z pierwszej kolumny i wkleić je do drugiej i trzeciej kolumny.

Oto ostateczny wynik.

Część 3: Tworzenie nagłówków pionowych dla treści

Ta następna część układu wykorzystuje podobne techniki do obracania i pozycjonowania modułu tekstowego jako pionowego nagłówka treści. Jest to przydatny układ do prezentowania takich rzeczy, jak usługi. Pokażę również kreatywny sposób wykorzystania list do stworzenia bardzo unikalnego pionowego nagłówka.

Oto jak to zrobić.

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

Następnie skopiuj jeden z modułów notki z trzech kolumn w układzie powyżej. To da nam przewagę nad projektem.

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

• Umieszczenie obrazu/rozmycia: po lewej
• Margines niestandardowy (komputer): pozostało 200 pikseli
• Margines niestandardowy (telefon): pozostało 0 pikseli
• Niestandardowe dopełnienie: 100px góra, 100px dół

Lewy margines tworzy przestrzeń, której będziemy potrzebować na pionowy moduł tekstowy, który dodamy.

Następnie dodaj obramowanie do modułu notki w następujący sposób:

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

Tworzenie modułu tekstowego

Mając zawartość notki, możemy teraz dodać nasz moduł tekstowy. Utwórz nowy moduł tekstowy, a następnie umieść go bezpośrednio nad modułem notki.

Następnie dodaj następujący kod HTML w polu treści (upewnij się, że wybrana jest karta tekstowa):

<ol>
  <li><h5>Design</h5>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
  </li>
</ol>

To jest html używający uporządkowanej listy (ol), znacznika h5 i nieuporządkowanej listy (ul). To pozwala nam dostosować każdy z elementów listy i h5 osobno za pomocą wbudowanych opcji projektowych Divi w module tekstowym.

Ta technika może być wykorzystana do stworzenia niesamowitych projektów list.

Następnie przejdź do karty projektu i zaktualizuj następujące elementy:

• Nieuporządkowana czcionka listy: Muli
• Nieuporządkowana grubość czcionki listy: lekka
• Rozmiar tekstu listy nieuporządkowanej: 15px
• Typ nieuporządkowanego stylu listy: Brak
• Wcięcie nieuporządkowanego elementu listy: 0,01px

• Czcionka listy uporządkowanej: Abril Fatface
• Kolor tekstu listy uporządkowanej:
• Rozmiar tekstu uporządkowanej listy: 40px
• Zamówione odstępy między literami: 4px
• Zamówiona wysokość linii listy: 1,3 em
• Typ stylu uporządkowanej listy: Dziesiętne wiodące zero

• Czcionka nagłówka 5: Muli
• Nagłówek 5 Grubość czcionki: ultralekka
• Nagłówek 5 Styl czcionki: TT
• Rozmiar tekstu nagłówka 5: 62px

Rozmiar, obracanie i pozycjonowanie modułu tekstowego

Teraz, gdy mamy już projekt tekstu, nadajmy mu niestandardową szerokość. Pamiętaj, że szerokość modułu stanie się wysokością modułu po obróceniu go w pionie.

• Szerokość niestandardowa: 300px
• Wyrównanie modułu: w lewo

Aby obrócić tekst, zaktualizuj następujące elementy:

• Przekształć Obróć oś X: -90deg (komputer), 0deg (telefon)

Musimy zresetować obrót z powrotem do 0 stopni, aby wyświetlacz telefonu.

Następnie zaktualizuj opcję Przekształć Tłumacz:

• Transform Translate oś X: -10% (komputer), 0% (telefon)
• Transform Przetłumacz oś Y: 50% (komputer), 0% (telefon)

Ustawienia transformacji nieznacznie dostosowują pozycję modułu tekstowego. Aby jednak uzyskać prawidłowe odstępy, musimy zastąpić spację ujemną pozostawioną przez moduł tekstowy nad modułem blurb. Aby to zrobić, musimy dodać ujemny dolny margines do modułu tekstowego w następujący sposób:

• Margines niestandardowy (komputer): -150px dół
• Margines niestandardowy (telefon): 0px dół

Powiel sekcję i zaktualizuj numer początkowy listy zamówień

Aby utworzyć więcej sekcji tego układu, możesz zduplikować sekcję. Numerem uporządkowanej listy nadal będzie „1”. Aby to zmienić, musisz zastąpić otwierający tag uporządkowanej listy (ol) następującym:

<ol start="2">

Dzięki temu lista zaczyna się od numeru 2 zamiast 1.

Otóż ​​to. Wszyscy skończyliśmy!

Ostateczny projekt układu z obróconymi projektami tekstu

Pulpit

Tablet i telefon

Końcowe przemyślenia

Umiejętność obracania tekstu (lub dowolnej zawartości) w Divi to świetny sposób na zwrócenie uwagi na zawartość. Dodatkowo, jeśli zrobisz to dobrze, może to naprawdę wyróżnić projekt. Mam nadzieję, że ten samouczek zainspiruje Cię do tego, jak zaimplementować rotację tekstu, aby uzyskać jeszcze piękniejsze projekty.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!