Jak stworzyć oś czasu za pomocą modułu Blurb Divi

W tym poście pokażemy Ci, jak łatwo stworzyć prostą, ale elegancką oś czasu z modułami Blurb firmy Divi. Będziemy łączyć różne opcje udostępniane przez moduły i wiersze, aby osiągnąć wynik, który możesz zobaczyć poniżej. Przykład, który udostępnimy, opiera się tylko na wbudowanych opcjach Divi, co oznacza, że ​​nie musisz dodawać żadnego dodatkowego kodu CSS! Dbamy też o to, by dobrze wyglądała zarówno na komputerach, jak i na urządzeniach mobilnych.

Wynik

Wygląd osi czasu uzyskuje się dzięki dwóm elementom projektu; linia, która przecina wszystkie trzy Moduły Blurb i liczby. Wersja na komputery wygląda tak:

A wersja mobilna wygląda tak:

Zacznijmy!

Jak stworzyć oś czasu za pomocą modułu Blurb Divi

Subskrybuj nasz kanał YouTube

Dodaj sekcję standardową

Kolor tła sekcji

Zacznij od dodania nowej sekcji standardowej i użycia „rgba(0,0,0,0.12)” jako koloru tła.

Wypełnienie sekcji

Przejdź do zakładki Projekt i użyj górnego dopełnienia „300px”.

Dodaj trzykolumnowy wiersz (oś czasu)

Tła kolumn

Po utworzeniu sekcji dodaj do niej trzykolumnowy wiersz. Na karcie Treść tego wiersza użyj „#e09900” jako koloru tła kolumny 1, „#0c71c3” jako koloru tła kolumny 2 i „#8300e9” jako koloru tła kolumny 3.

Rozmiary

Przejdź do karty Projekt i użyj następujących ustawień dla podkategorii Rozmiar:

• Ustaw ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Niestandardowy margines i dopełnienie

Następnie dodaj następujące niestandardowe dopełnienie i niestandardowy margines do wiersza:

• Górna wyściółka: 1px
• Dolna wyściółka: 0px
• Margines dolny: -200px

I dodaj „3px” do górnego i dolnego wypełnienia każdej kolumny.

Wyłącz na tablecie i telefonie

Na koniec wyłącz wiersz na tablecie i telefonie.

Dodaj kolejny trzykolumnowy wiersz (moduły Blurb)

Tło gradientowe kolumny

Po utworzeniu pierwszego wiersza z trzema kolumnami możesz przejść dalej i utworzyć drugi tuż pod nim (mają tę samą sekcję). Każda z kolumn wymaga gradientowego tła z tymi samymi ustawieniami, ale z innym pierwszym kolorem:

• Pierwszy kolor: #e09900 (kolumna 1), #0c71c3 (kolumna 2), #8300e9 (kolumna 3)
• Drugi kolor: rgba (255, 255, 255, 0)
• Typ gradientu: liniowy
• Kierunek gradientu: 180 stopni
• Pozycja startowa: 73%
• Pozycja końcowa: 92%

Utwórz wiersz o pełnej szerokości

Następnie przejdź do karty Projekt i włącz opcję „Ustaw ten wiersz o pełnej szerokości”.

Niestandardowe wypełnienie wiersza

Otwórz podkategorię odstępów i użyj następującego niestandardowego dopełnienia i niestandardowego marginesu dla wiersza:

• Górna wyściółka: 0px
• Prawe wypełnienie: 60px
• Dolna wyściółka: 100px
• Lewa wyściółka: 60px
• Górny margines: -100px

Dodaj „5px” również do górnego dopełnienia każdej kolumny.

Moduł Blurb

Po zakończeniu ustawień wiersza możesz dodać moduł Blurb do pierwszej kolumny właśnie utworzonego wiersza. W podkategorii Obraz i ikona na karcie treści włącz opcję „Użyj ikony” i wybierz wybraną ikonę.

Przewiń w dół tę samą kartę i użyj „#f4f4f4” jako koloru tła.

Przejdź do karty Projekt i dokonaj następujących zmian w podkategorii Obraz i ikona:

• Kolor ikony: #e09900
• Umieszczenie obrazu/ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 50px

W podkategorii Tekst upewnij się, że lewa orientacja tekstu jest włączona.

Opcje dla podkategorii Tekst nagłówka są następujące:

• Czcionka nagłówka: Crete Round
• Wyrównanie tekstu nagłówka: do lewej
• Rozmiar czcionki nagłówka: 32px
• Wysokość linii nagłówka: 1em

Następnie otwórz podkategorię Body Text i użyj następujących ustawień:

• Wyrównanie tekstu podstawowego: do lewej
• Rozmiar czcionki ciała: 12px
• Wysokość linii ciała: 1,7 em

Użyjemy również obramowania z następującymi ustawieniami:

• Użyj obramowania: tak
• Kolor obramowania: #000000
• Szerokość obramowania: 2px
• Styl obramowania: w kropki

Następnie otwórz podkategorię Sizing i użyj „279px” dla szerokości treści i „100%” dla szerokości.

Na koniec dodaj „30px” do dopełnienia górnego, prawego, dolnego i lewego.

Moduł tekstowy

Po dodaniu i zmodyfikowaniu modułu Blurb, dodaj moduł tekstowy tuż pod nim. Moduł tekstowy będzie również potrzebował tła gradientowego:

• Pierwszy kolor: #e09900
• Drugi kolor: rgba (255, 255, 255, 0)
• Typ gradientu: Promieniowy
• Kierunek promieniowy: Środek
• Pozycja startowa: 20%
• Pozycja końcowa: 24%

Przejdź do karty Projekt i użyj następujących ustawień dla podkategorii Tekst:

• Rozmiar czcionki tekstu: 21px
• Kolor tekstu: #FFFFFF
• Wysokość linii tekstu: 1,7 em
• Orientacja tekstu: Środek

Otwórz podkategorię Sizing, użyj szerokości „48%” i wybierz odpowiednie ustawienie modułu.

Na koniec użyj górnego marginesu „-100px” i dodaj „50px” do górnego i dolnego dopełnienia.

Clone Blurb & Text Module

Po wypełnieniu pierwszej kolumny możesz sklonować oba moduły i umieścić je w pozostałych dwóch kolumnach. Jedyne, co musisz zmienić, to ikona notki, kolor noty i pierwszy kolor gradientu modułu tekstowego na „#0c71c3” w drugiej kolumnie i „#8300e9” w ostatniej kolumnie.

Wyłącz na tablecie i telefonie

Po wypełnieniu tego drugiego wiersza upewnij się, że wyłączyłeś go również dla telefonu i tabletu.

Klonuj trzykolumnowy rząd (tablet i telefon)

Wersja osi czasu na tablecie i telefonie jest nieco inna. Sklonuj wiersz z notatkami, które utworzyłeś w poprzedniej części tego posta i wykonaj kolejne kroki, aby dopasować go do telefonu i tabletu.

Dodaj tło gradientowe wiersza

Wiersz na tablecie i telefonie będzie wymagał następującego tła gradientowego:

• Pierwszy kolor: rgba (0,0,0,07)
• Drugi kolor: rgba (255, 255, 255, 0)
• Typ gradientu: liniowy
• Kierunek gradientu: 90 stopni
• Pozycja startowa: 1%
• Pozycja końcowa: 0%

Dopełnienie wiersza

Usuń całe niestandardowe dopełnienie i margines, które były używane w wersji na komputery i dodaj „100px” do górnego dopełnienia.

Wyłącz na pulpicie

Wreszcie, zamiast wyłączać wiersz na telefonie i tablecie, wyłącz go na komputerze.

Wynik

Po wykonaniu wszystkich kroków w poście powinieneś być w stanie osiągnąć następujący wynik na komputerze:

I następujący wynik na tablecie i telefonie:

Końcowe przemyślenia

W tym poście pokazaliśmy ci, jak możesz stworzyć prostą oś czasu swojego modułu Blurb, używając niczego poza wbudowanymi opcjami Divi. Dwa czynniki, które pomagają zidentyfikować Moduły Blurb jako oś czasu, to linia łącząca wszystkie trzy Moduły Blurb i liczby. Jeśli masz jakieś pytania lub sugestie; upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!