Jak korzystać z opcji stylu tekstu i listy Divi dla unikalnych projektów treści przełączania i akordeonu
Opublikowany: 2019-07-24Opcje stylu tekstu i listy Divi są powszechną funkcją dostępną w większości modułów Divi. Otwiera to nowe możliwości projektowania kreatywnych treści i projektów list w ramach modułów (takich jak moduł przełączania i akordeonu), które wcześniej były możliwe tylko w module tekstowym. Sztuczka polega na skonfigurowaniu treści z odpowiednim kodem HTML, aby można było kierować te elementy za pomocą wbudowanych ustawień projektowych.
W tym samouczku pokażę, jak korzystać z opcji stylu tekstu i listy Divi, aby uzyskać unikalne projekty zawartości przełączania i akordeonu. Przyda się to, gdy zechcesz włączyć różne projekty tekstowe bez konieczności używania klas CSS lub wbudowanego css.
Zacznijmy.
zapowiedź
Oto krótkie spojrzenie na projekty, które zbudujemy za pomocą opcji stylu tekstu i listy Divi.
Pobierz projekty stylów list dla układów przełączników i akordeonów 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 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.
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.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, będziesz potrzebować:
- Zainstalowany i aktywny motyw Divi
- Nowa strona utworzona w celu zbudowania od podstaw na interfejsie użytkownika (konstruktor wizualny)
- Obrazy, które mają być wykorzystane do pozorowanych treści
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Część 1: Używanie stylów list w modułach przełączania
W tej pierwszej części samouczka stworzymy trzy przełączniki, z których każdy ma zawartość zaprojektowaną przy użyciu opcji stylu listy. Będzie to przydatne do oddzielenia elementów listy w oddzielnych przełącznikach, prawie jak niestandardowa notka z treścią.
Najpierw utwórz zwykłą sekcję z rzędem trzech kolumn. Następnie zaktualizuj ustawienia wiersza w następujący sposób:
Szerokość rynny: 2
Szerokość: 100%
Maksymalna szerokość: 90vw
Dodaj moduł przełączania
Następnie dodaj moduł przełączania do kolumny 1. Będzie to pierwszy z trzech modułów przełączania, które zostaną dodane do każdej z trzech kolumn.
Dodaj Przełącz zawartość HTML
Treść HTML jest kluczem do tego projektu. Abyśmy mogli skorzystać z różnych stylów list w ustawieniach przełącznika Divi, musimy dodać listy HTML do naszego pola treści.
Śmiało i wklej następujący kod HTML do
Pudełko na zawartość ciała.
<ol start="1">
<li>
<ul style="margin-top: -1.5em;">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
</ol>
<p>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.</p>
Teraz ten fragment kodu HTML tworzy uporządkowaną listę za pomocą znacznika ol. Uporządkowana lista zawiera tylko jeden element listy (li), który jest zagnieżdżoną listą nieuporządkowaną (ul) z jednym elementem listy (li), który ma pewną zawartość pozorowaną. Pod uporządkowaną listą znajduje się podstawowy akapit tekstu.
Dzięki tej konfiguracji możemy ustawić każdy z tych znaczników (ol, ul, p) dla różnych stylów przy użyciu wbudowanych stylów tekstu Divi, które obejmują style list.
Zwróć uwagę, że początkowy tag ol ma w środku start=”1″. To mówi liście, od którego numeru należy zacząć wymieniać numery uporządkowanej listy z każdym elementem listy. Technicznie rzecz biorąc, nie jest to konieczne dla pierwszego numeru, ponieważ domyślnie automatycznie zaczyna się od 1. Ale będziemy go potrzebować do następnych przełączników, które dodamy.
Ponadto nieuporządkowany znacznik listy ma pewne wbudowane style, aby nieco podnieść zawartość ul przy użyciu ujemnego marginesu. W ten sposób nałożymy numer uporządkowanej listy z tekstem nieuporządkowanej listy w projekcie.
Stylizacja treści
Teraz możemy zacząć dodawać kolory i style czcionek, korzystając z wbudowanych ustawień i stylów list. Zaktualizuj ustawienia projektu przełączania w następujący sposób:
Kolor ikony: #ff3d97
Rozmiar czcionki ikony: 26px
Otwórz przełącznik koloru tła: #ffffff
Zamknięty przełącznik koloru tła: #ffffff
Kolor tekstu otwartego tytułu: #333333
Kolor tekstu tytułu: #333333
Czcionka tytułu: Oswald
Rozmiar tekstu tytułu: 18px
Wysokość wiersza tytułu: 3em
Nieuporządkowana czcionka listy: Oswald
Nieuporządkowana grubość czcionki listy: lekka
Kolor tekstu listy nieuporządkowanej: #333333
Rozmiar tekstu listy nieuporządkowanej: 36px
Typ nieuporządkowanego stylu listy: Brak
Czcionka listy uporządkowanej: Kameron
Grubość czcionki listy uporządkowanej: pogrubiona
Kolor tekstu uporządkowanej listy: rgba (255,61,151,0.34)
Rozmiar tekstu listy uporządkowanej: 100px
Zamówiona wysokość linii listy: 1,1 em
Powiel pierwszy moduł przełączników, aby utworzyć inne przełączniki
Aby utworzyć przełączniki dla kolumn 2 i 3, zduplikujemy moduł przełączania, który właśnie skończyliśmy projektować. Następnie możemy przeciągnąć je do każdej kolumny, aby każda kolumna miała ten sam moduł przełączania.
Zaktualizuj numery początkowe listy zamówień
Aby przełącznik duplikatów w kolumnie 2, uporządkowana lista zaczynała się od liczby „2” zamiast „1”. Aby to zmienić, otwórz ustawienia modułu przełączania i zmień numer początkowy w tagu ol na „2”.
Będziesz także musiał zaktualizować przełącznik w kolumnie 3 o numer początkowy uporządkowanej listy „3”.
Ostateczny projekt
Sprawdźmy teraz ostateczny projekt.
Część 2: Używanie stylów list w modułach akordeonowych
W drugiej części samouczka pokażę Ci szybki i łatwy sposób na przeniesienie projektów zawartości w stylu listy z modułu toggle do modułu akordeonu. Proces jest łatwy, ponieważ możesz użyć tych samych stylów tekstu i list w module akordeonu (lub praktycznie dowolnym module), którego używaliśmy w naszych poprzednich przełącznikach. Aby to zrobić, najpierw utwórz nową sekcję z jednokolumnowym wierszem. Następnie dodaj moduł akordeonu do rzędu.
Następnie zduplikuj jeden z dwóch domyślnych akordeonów w zakładce treści, aby uzyskać łącznie trzy akordeony. Następnie zaktualizuj zawartość każdego indywidualnego akordeonu za pomocą dokładnie tej samej zawartości przełącznika HTML w każdym z trzech przełączników, które stworzyliśmy wcześniej.
Rozszerz style przełączania na akordeon
Jednym z szybkich sposobów przeniesienia stylizacji z utworzonych przez nas przełączników do modułu akordeonu jest użycie funkcji rozszerzania stylów. Aby to zrobić, otwórz jeden z modułów przełączania i kliknij prawym przyciskiem myszy kategorię stylów ikon i wybierz „rozszerz style ikon” z menu prawego przycisku myszy. Następnie wybierz, aby rozszerzyć style tej ikony na „Wszystkie akordeony” w całej „Tej stronie”.
Następnie zrób to samo dla każdej kategorii projektów, które mają niestandardowy styl, który należy rozszerzyć na moduł akordeonu. Należą do nich stylizacja „Przełącz”, „Tekst tytułu” i „Tekst treści”.
Następnie sprawdź ostateczny wynik projektu akordeonu.
Część 3: Używanie stylów list do tworzenia zawartości wielu kolumn w module przełączania
W tej trzeciej części samouczka pokażę, jak tworzyć wiele kolumn treści do projektów stylów listy.
Najpierw utwórz nową sekcję z jednokolumnowym wierszem. Następnie skopiuj i wklej do wiersza jeden z utworzonych wcześniej modułów przełączania.
Następnie zaktualizuj treść modułu przełączania za pomocą nowego kodu HTML w następujący sposób:
<ol style="column-count: 2">
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
</ol>
Zwróć uwagę na atrybut stylu liniowego „column-count:2”, który został dodany do początkowego znacznika ol. Umożliwi to uporządkowanie zawartości uporządkowanej listy w dwie kolumny zamiast w jednej. W razie potrzeby możesz zmienić to na dowolną liczbę, aby uzyskać więcej kolumn.
I zauważ, jak mamy możliwość korzystania z wbudowanych ustawień Divi dla stylów tytułu, linku i listy.
Stylizowanie tekstu linku
Ponieważ style tytułu i listy są już na swoim miejscu w stosunku do poprzedniego projektu, wszystko, co musimy zrobić, to dodać trochę projektu do tekstu łącza.
Otwórz ustawienia przełączania i zaktualizuj następujące elementy:
Grubość czcionki łącza: pół pogrubiona
Styl czcionki łącza: podkreślenie
Kolor tekstu linku: #ff3d97
Rozmiar tekstu linku: 15px
A ponieważ nie nakładamy żadnego tekstu z tym projektem, śmiało nadaj uporządkowanym stylom listy jaśniejszy kolor w następujący sposób:
Kolor tekstu uporządkowanej listy: #ff3d97
Dodaj tło do przełącznika
Aby zakończyć projekt, możemy dodać niestandardowe tło do naszego przełącznika. W tym celu zaktualizuj następujące ustawienia przełączników:
Obraz tła: [prześlij wybrany obraz]
Kolor lewego gradientu tła: rgba (255,255,255,0.92)
Prawy gradient tła: rgba (255,255,255,0.8)
Kierunek gradientu: 90 stopni
Pozycja startowa: 50%
Pozycja końcowa: 0%
Umieść gradient nad obrazem tła: TAK
Dodawanie elementów responsywnych do przełącznika dwóch kolumn
Ponieważ zawartość przełączania składa się teraz z dwóch kolumn, zaktualizujmy projekt za pomocą kilku responsywnych stylów, aby ładnie się skalował na urządzeniach mobilnych.
Najpierw zaktualizuj ustawienia wiersza w następujący sposób:
Szerokość: 100%
Maksymalna szerokość: 89vw (komputer stacjonarny), 90vw (tablet i telefon)
Otwórz ustawienia przełączników i zaktualizuj następujące elementy:
Rozmiar czcionki ikony: 5vw
Rozmiar tekstu tytułu: 4vw
Nieuporządkowany rozmiar tekstu listy: 26px (komputer), 18px (tablet), 14px (telefon)
Wcięcie nieuporządkowanego elementu listy: 1px
Rozmiar tekstu listy uporządkowanej: 8vw
Ostateczny projekt wielokolumnowej zawartości przełącznika
Oto projekt na wyświetlaczach tabletów i telefonów.
A oto ten sam projekt z ciemniejszym tłem i białymi kolorami tekstu.
Końcowe przemyślenia
W większości przypadków przełączniki i akordeony mają podstawową zawartość ciała, która tak naprawdę nie wymaga kreatywnego projektowania. Ale jeśli nadejdzie czas, kiedy chcesz urozmaicić zawartość przełączania i akordeonu, możesz skorzystać z wbudowanych opcji stylu tekstu i listy Divi. Po utworzeniu kodu HTML możesz kierować te tagi HTML dla różnych projektów bez konieczności korzystania z zewnętrznego niestandardowego CSS lub klas. Jest to również świetny sposób na wyświetlanie kreatywnych stylów list w dowolnym module za pomocą konstruktora Divi, ponieważ te same opcje stylów list są dostępne we wszystkich modułach.
Baw się, odkrywając nowe projekty.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!