Uwolnienie mocy modułu tekstowego Divi do tworzenia kreatywnych list

Tworzenie unikalnych projektów list jest ważnym aspektem projektowania stron internetowych. Czytelnicy doceniają strukturę i estetykę dobrze zaprojektowanej listy, ponieważ pozwala im to znacznie szybciej przetwarzać informacje.

Dzięki modułowi tekstowemu Divi masz wszystko, czego potrzebujesz, aby przekształcić zwykłe listy w piękne dzieła sztuki. Ustawienia modułu tekstowego Divi umożliwiają kierowanie i stylizowanie różnych elementów HTML w treści – w tym list. Dzięki kilku technikom projektowania możesz wykorzystać moc tych opcji, aby dostosować swoje listy w zaskakujący sposób.

W tym samouczku pokażę, jak tworzyć unikalne projekty list w Divi.

Zacznijmy.

zapowiedź

Oto rzut oka na cztery projekty list, które zbudujemy w tym samouczku.

Zainspirowany ustawieniami modułu tekstowego

Jeśli jesteś podobny do mnie, możesz przeoczyć niektóre z „ukrytych” opcji czających się głęboko w Divi Builder. Jednym z modułów, który zawiera kilka zakopanych skarbów, jest moduł tekstowy. Ustawienia modułu tekstowego mają wiele zakładek, które zawierają opcje stylu dla różnych elementów HTML. Może to być niezwykle wygodne i kreatywne narzędzie do projektowania. Te karty zawierają opcje tekstu podstawowego, łączy, list nieuporządkowanych, list uporządkowanych i cytatów blokowych.

Pod tymi zakładkami znajduje się kilka ukrytych klejnotów, o których być może nie pomyślałeś, że wykorzystasz je w swoim projekcie. Na przykład, czy wiesz, że możesz zmienić opcje stylu listy dla list nieuporządkowanych? Dostępnych jest wiele unikalnych opcji (dokładnie 18), w tym cyfry rzymskie i ułamki dziesiętne z wiodącym zerem.

Może się to wydawać nieistotne, ale kiedy wykorzystasz opcje projektowe, możesz stworzyć naprawdę kreatywne projekty.

Możesz także określić styl różnych poziomów nagłówków (lub tagów) w każdej z kart w opcjach stylu nagłówka.

Ta umiejętność kierowania na wiele elementów HTML w treści otwiera wspaniałe możliwości. Miejmy nadzieję, że Ciebie również zainspirują.

Aby uzyskać więcej informacji na ten temat, zapoznaj się z aktualizacją funkcji, która wyjaśnia niektóre z tych wspaniałych opcji tekstowych.

Tworzenie listy HTML

Lista html może być „uporządkowana” (za pomocą liczb, cyfr rzymskich itp.) lub „nieuporządkowana” (za pomocą ikon kwadratowych, okrągłych itp.). W przypadku list nieuporządkowanych elementy listy zostaną umieszczone w znaczniku „ul” („ul” oznacza „listę nieuporządkowaną”). W przypadku list uporządkowanych elementy listy są opakowane w znacznik „ol” („ol” oznacza „listę uporządkowaną”). Każdy element listy jest opakowany w znacznik „li” („li” dla „elementu listy”).

Oto podstawowa struktura uporządkowanej listy:

<ol>
     <li>List Item</li>
     <li>List Item</li>
     <li>List Item</li>
</ol>

Który domyślnie będzie wyglądał następująco:

1. Element listy
2. Element listy
3. Element listy

Możesz utworzyć listę HTML za pomocą edytora wysiwyg w module tekstowym Divi. Upewnij się, że edytujesz na karcie wizualnej i po prostu wpisz elementy listy, upewniając się, że po każdym z nich jest podział wiersza (naciśnij Enter). Następnie zaznacz treść i kliknij jedną z ikon listy w górnej części edytora.

Teraz przejdź do zakładki tekstowej, aby zobaczyć, jak wygląda HTML:

Działa to dobrze w przypadku prostych list, ale jeśli chcesz tworzyć listy zagnieżdżone (lista w liście), lepiej jest tworzyć je za pomocą HTML (za pomocą karty tekstowej), aby uniknąć bólu głowy związanego z próbą zrobienia tego w wysiwyg edytor (zakładka wizualna).

Oto podstawowa struktura listy zagnieżdżonej, która ma uporządkowaną listę, w której każdy element listy ma zagnieżdżoną listę nieuporządkowaną.

<ol>
  <ol>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li>Ordered List Item
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Domyślnie ta zagnieżdżona lista html będzie wyglądać tak:

1. Zamówiony element listy
   • Nieuporządkowany element listy
2. Zamówiony element listy
   • Nieuporządkowany element listy
3. Zamówiony element listy
   • Nieuporządkowany element listy

Możesz również dodać inne tagi HTML do listy. Na przykład możemy umieścić uporządkowany element listy w tagu h5. Wynik będzie wyglądał tak:

<ol>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
  <li><h5>Ordered List Item</h5>
    <ul>
      <li>Unordered List Item</li>
    </ul>
  </li>
</ol>

Nie martw się, to jest tak skomplikowane, jak zamierzam uzyskać w tym samouczku. Ale musisz zdać sobie sprawę, że ta struktura ma trzy różne znaczniki (ol, ul i h5), które można stylizować niezależnie od siebie dzięki potężnym ustawieniom projektowym Divi w module tekstowym.

Nieco później będziemy potrzebować tej struktury, ale na razie uruchommy naszą stronę, aby rozpocząć projektowanie w kreatorze wizualnym.

Tworzenie sekcji i wiersza dla list

Utwórz nową stronę i wdróż Visual Builder. Następnie wybierz opcję Utwórz stronę od podstaw. Następnie utwórz zwykłą sekcję z rzędem dwóch kolumn.

Tworzenie listy HTML w module tekstowym

W pierwszej kolumnie wiersza dodaj nowy moduł tekstowy. W polu treści w ustawieniach tekstu wprowadź następującą listę HTML:

<ol>
 	<li>
<h5>Design</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Develop</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
 	<li>
<h5>Deliver</h5>
<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</li>
</ul>
</li>
</ol>

Ta struktura powinna wyglądać znajomo z wcześniej. Tekst nagłówka h5 będzie uporządkowanymi pozycjami listy, a fikcyjny tekst „lorem ipsum” będzie zagnieżdżonymi nieuporządkowanymi pozycjami listy.

Domyślnie będzie to wyglądać mniej więcej tak:

Wiem, jak dotąd niezbyt imponujące. Ale dzięki tej zawartości możemy teraz rozpocząć zabawną część projektowania naszej listy za pomocą Divi!

Ważna uwaga: Ponieważ każdy projekt jest zmodyfikowaną wersją pierwszego projektu, najlepiej byłoby zacząć od pierwszego projektu w tym samouczku i zachować je w porządku.

Projekt listy nr 1

Na początek dajmy naszemu modułowi tekstowemu tło gradientowe w następujący sposób:

Kolor tła gradientu po lewej stronie: rgba (0,0,0,0,04)
Gradientowy kolor tła w prawo: rgba (255,255,255,0)
Kierunek gradientu: 90 stopni
Pozycja startowa: 25%
Pozycja końcowa: 0%

Stylizowanie uporządkowanych pozycji listy

Teraz przejdź nad zakładką projektu i wybierz zakładkę listy uporządkowanej pod przełącznikiem Tekst.

Następnie zaktualizuj następujące elementy:

Czcionka listy uporządkowanej: Abril Fatface
Grubość czcionki listy uporządkowanej: pogrubiona
Kolor tekstu listy uporządkowanej: #559cad
Rozmiar tekstu listy uporządkowanej: 45px
Wysokość linii zamówionej listy: 1,6 em
Typ stylu uporządkowanej listy: dziesiętne-przednie-zero
Pozycja stylu listy uporządkowanej: Na zewnątrz
Wcięcie elementu listy zamówionej: 2vw

Zauważysz, że h5 i zagnieżdżona lista nieuporządkowana odziedziczą styl macierzystej listy uporządkowanej. Nie martw się, będziesz mógł zmienić styl innych przedmiotów.

Stylizowanie nieuporządkowanych elementów listy

Teraz kliknij zakładkę listy uporządkowanej, aby zmienić następujące ustawienia:

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

Stylizacja nagłówka H5

Ostatnim elementem, który musimy nadać stylowi, jest nagłówek H5. Aby to zrobić, przejdź do opcji w sekcji Tekst nagłówka i kliknij kartę H5. Następnie zaktualizuj następujące elementy:

Nagłówek 5 Czcionka: Montserrat
Nagłówek 5 Grubość czcionki: Lekka
Styl czcionki nagłówka 5: Wielkie litery (TT)
Nagłówek 5 Kolor tekstu: #4f6d7a
Rozmiar tekstu nagłówka 5: 5vw (komputer), 70px (tablet), 40px (smartfon)

Aby zakończyć projekt naszego modułu tekstowego, dodaj następujące niestandardowe wypełnienie:

Niestandardowe wypełnienie (komputer): 3vw Top, 3vw Bottom
Niestandardowa wyściółka (tablet): 2vw w lewo
Niestandardowe wypełnienie (smartfon): 50 pikseli w lewo

Zapisz ustawienia.

Teraz skopiuj moduł tekstowy i wklej go do drugiej kolumny wiersza. Możesz zauważyć, że numery list muszą zostać dostosowane w module powielonego tekstu, tak aby był kontynuowany z poprzedniej listy. Chcemy, aby nasza druga lista modułów tekstowych zaczynała się od liczby 4 (zamiast 1). Aby to zrobić, musimy dodać jedną małą zmianę do naszej listy html. Przejdź do pola treści w ustawieniach modułu tekstowego i zastąp otwierający tag „ol” następującym:

<ol start="4">

Sprawdźmy teraz efekt końcowy.

Projekt listy nr 2

W przypadku tego drugiego przykładowego projektu listy zamierzam zduplikować pierwszą sekcję, którą utworzyliśmy, aby dać nam przewagę. Wprowadzę również fajne tło dla projektu listy, używając gradientów tła.

Tworzenie niestandardowego projektu gradientu tła

W zduplikowanej sekcji zaktualizuj ustawienia sekcji za pomocą następującego tła gradientowego:

Gradientowy kolor tła po lewej stronie: #ffffff
Gradientowy kolor tła w prawo: rgba (155,29,32,0.08)
Kierunek gradientu: 45 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%

Zapisz ustawienia.

Teraz zaktualizuj ustawienia wiersza z następującym gradientem tła:

Kolor tła gradientu po lewej stronie: rgba (155,29,32,0.08)
Gradientowy kolor tła w prawo: rgba (255,255,255,0)
Kierunek gradientu: 45 stopni
Pozycja startowa: 25%
Pozycja końcowa: 0%

Kolor tła gradientu kolumny 2 po lewej stronie: rgba (255,255,255,0)
Kolumna 2 Gradientowy kolor tła po prawej: #ffffff
Kolumna 2 Kierunek gradientu: 45deg
Pozycja początkowa kolumny 2: 65%
Kolumna 2 Pozycja końcowa: 0%

Kluczem do tych projektów gradientów tła jest to, że wszystkie mają ten sam kierunek gradientu 45 stopni. Następnie możesz użyć pozycji początkowej, aby równomiernie rozmieścić projekt.

Ustawienia stylu dla projektu listy nr 2

W tym momencie możemy naprawdę dobrze się bawić, ulepszając projekty naszych list w wyjątkowy sposób. W tym drugim przykładzie pokażę, jak łatwo jest przekształcić projekt za pomocą kilku drobnych zmian. Przejdź do modułu tekstowego w pierwszej kolumnie i zaktualizuj ustawienia w następujący sposób:

Najpierw usuń gradient tła.
Nieuporządkowana grubość czcionki listy: średnia
Kolor tekstu nieuporządkowanej listy: rgba (0,0,0,0,5)
Grubość czcionki listy uporządkowanej: Regularna
Kolor tekstu uporządkowanej listy: #9b1d20
Nagłówek 5 Grubość czcionki: Cienka
Nagłówek 5 Kolor tekstu: rgba (0,0,0,08)
Rozmiar tekstu nagłówka 5: 5vw (komputer)

Teraz skopiuj style modułu do modułu tekstowego w prawej kolumnie.

Oto ostateczny projekt naszego drugiego przykładu.

Projekt listy nr 3

W trzecim przykładzie pomyślałem, że dobrze byłoby podać przykład wyśrodkowanego projektu listy z jedną kolumną. Aby utworzyć ten projekt, zduplikuj drugą sekcję przykładu. W nowej zduplikowanej sekcji zmień strukturę wierszy na jedną kolumnę, a następnie usuń drugi moduł tekstowy.

Teraz zaktualizuj ustawienia sekcji o nowe gradientowe kolory tła:

Gradientowy kolor tła lewego: #559CAD
Prawy kolor tła gradientu: #4f6d7a

Zaktualizuj ustawienia Wiersza o nowy kolor tła gradientu lewego:

Kolor tła gradientu po lewej stronie: #4f6d7a

Następnie dodaj nowy gradient tła do modułu tekstowego .

Kolor tła gradientu po lewej stronie: rgba (255,255,255,0)
Prawy kolor tła gradientu: #559cad
Kierunek gradientu: 45 stopni
Pozycja początkowa: 75%
Pozycja końcowa: 0%

Tworzy to ciemniejszą wersję symetrycznego projektu tła w projekcie listy nr 2 dla listy jednokolumnowej. Kluczem do tego projektu jest warstwowanie gradientów tła poprzez dodanie jednego do sekcji, wiersza i modułu.

Ustawienia stylu dla projektu listy nr 3

W tym trzecim przykładzie chcę pokazać, jak wygląda lista wyrównana do środka. A dla uporządkowanego elementu listy użyję bardziej tradycyjnego stylu dziesiętnego/liczbowego.

Przejdź do ustawień modułu tekstowego i zaktualizuj następujące elementy:

Zamówiona czcionka listy: Poppins
Grubość czcionki listy zamówionych: Ciężka
Wyrównanie tekstu listy uporządkowanej: do środka
Rozmiar tekstu listy uporządkowanej: 4vw (komputer), 50px (tablet)
Kolor tekstu uporządkowanej listy: #f4f1bb
Typ uporządkowanej listy: dziesiętny
Pozycja w stylu listy uporządkowanej: Wewnątrz
Wcięcie elementu listy zamówionej: 0vw

(Uwaga: zmiana pozycji stylu na wnętrze spowoduje, że liczba będzie ułożona nad tekstem nagłówka, co jest wygodne w przypadku tego projektu).

Nieuporządkowana grubość czcionki listy: lekka
Kolor tekstu nieuporządkowanej listy: #ffffff

Nagłówek 5 Czcionka: Lato
Nagłówek 5 Grubość czcionki: Cienka
Nagłówek 5 Odstępy między literami: 6vw (komputer), 70px (tablet), 40px (smartfon)
Kolor tekstu nagłówka 5: #ffffff
Nagłówek 5 Rozmiar tekstu: 6vw

Niestandardowe wypełnienie (komputer): 15% po lewej, 15% po prawej
Niestandardowa wyściółka (tablet): 5% po lewej, 5% po prawej

Powinieneś także wyjąć niestandardową lewą wyściółkę 50px na smartfonie dla tego projektu.

Oto ostateczny projekt.

Projekt listy #4

W tym czwartym przykładzie zamierzam użyć bardziej minimowego projektu „listy” (zobacz, co tam zrobiłem?). W przypadku uporządkowanej listy użyję dużych wielkich cyfr rzymskich w czcionce Lato. Wykadruję również listę, dodając cień do każdego modułu.

Ustawienia stylu dla projektu listy nr 4

Aby szybko rozpocząć ten projekt listy, zduplikuj pierwszą sekcję z projektem listy nr 1. Następnie zaktualizuj pierwsze ustawienia modułu tekstowego w nowej sekcji w następujący sposób:

Usuń gradient tła.

Czcionka listy uporządkowanej: Lato
Grubość czcionki listy zamówionych: lekka
Kolor tekstu uporządkowanej listy: #000000
Rozmiar tekstu listy uporządkowanej: 6vw
Typ uporządkowanej listy: górny-rzymski
Wcięcie elementu listy zamówionej: 0vw

Nagłówek 5 Czcionka: Lato
Grubość czcionki nagłówka 5: pogrubiona
Styl czcionki nagłówka: podkreślenie
Nagłówek 5 Kolor podkreślenia: rgba(0,0,0,0.14)
Nagłówek 5 Styl podkreślenia: podwójny
Kolor tekstu nagłówka 5: #000000
Rozmiar tekstu nagłówka 5: 40px

Niestandardowe wypełnienie: 3vw w lewo, 3vw w prawo

Usuń niestandardową lewą wyściółkę dla tabletu i smartfona przeniesioną z poprzedniego projektu.

Pozycja pozioma cienia pudełka: 6px
Pozycja pionowa cienia pudełka: 6px
Siła rozprzestrzeniania się cieni w pudełku: 0px
Siła rozmycia cieni w pudełku: 0px
Kolor cienia: #000000
Pozycja cienia pudełka: cień wewnętrzny

Skopiuj style modułów do drugiej kolumny. Następnie zaktualizuj pozycję cienia prostokątnego na cień zewnętrzny.

Oto ostateczny wynik.

Otóż ​​to!

Końcowe przemyślenia

Po zbudowaniu i dopracowaniu list html w powyższych przykładach powinieneś lepiej zrozumieć, jak wykorzystać moc ustawień modułu tekstowego, jak ekspert Divi. Nie będziesz już musiał zadowalać się nudnymi projektami list w swoich treściach. Mam nadzieję, że te techniki zainspirują Cię do stworzenia niesamowitych projektów list do następnego projektu.

Chętnie zobaczę kilka przykładów od Was, więc zachęcam do dzielenia się w komentarzach.

Pozdrawiam!