Jak zamienić przegrody poziome w pionowe za pomocą Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowej Divi, pokażemy, jak zmienić standardowy poziomy moduł podziału, który wszyscy znamy, w pionowy, na przykładzie pakietu Divi's Moving Company Layout Pack. Takie podejście przyda się szczególnie, jeśli próbujesz tworzyć osie czasu na swoich stronach. Świetnie nadaje się również do sekcji „jak to działa” i wielu innych. Po skonfigurowaniu pionowego dzielnika, dodamy do niego moduły Blurb, aby stworzyć efekt osi czasu. Ten samouczek nie wymaga żadnego kodu CSS i opiera się wyłącznie na wbudowanych opcjach Divi.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, spójrzmy na wynik na różnych rozmiarach ekranu.

Zacznijmy tworzyć: dodaj nową stronę i prześlij stronę docelową pakietu układów firmy przenoszącej

Dodaj nową stronę i przełącz się na Visual Builder

Zacznijmy od dodania nowej strony, dodania tytułu i przełączenia się na Visual Builder.

Wybierz gotowy układ

Gdy to zrobisz, będziesz mógł budować od podstaw, wybrać gotowy układ lub sklonować istniejącą stronę. Zamierzamy użyć strony docelowej pakietu układów firmy przeprowadzkowej, aby stworzyć wynik końcowy, więc przejdź dalej i przejrzyj gotowe układy.

Wybierz stronę docelową pakietu układu firmy przeprowadzkowej

Przewiń w dół gotowe układy, aż natkniesz się na pakiet układów firmy przeprowadzkowej i prześlesz stronę docelową na swoją stronę.

Rozpocznij tworzenie pionowej osi czasu dzielnika

Znajdź sekcję osi czasu

Jesteśmy teraz gotowi, aby zacząć przekształcać dzielniki poziome w pionowe i używać tego dzielnika do tworzenia osi czasu. Śmiało i znajdź następującą sekcję na swojej stronie docelowej:

Dodaj nową sekcję standardową poniżej

Tuż pod tą sekcją dodaj sekcję standardową.

Umieść wiersz „Jak to działa” w nowej sekcji

Kontynuuj, przeciągając wiersz „Jak to działa” z poprzedniej sekcji do nowej sekcji.

Dodaj nowy wiersz

Struktura kolumny

Tuż pod wierszem, który właśnie umieściłeś w swojej sekcji, dodaj kolejny o następującej strukturze kolumn:

Rozstaw

Przed dodaniem jakichkolwiek modułów otwórz ustawienia wiersza i dodaj „60px” do górnego marginesu.

Dodaj moduł rozdzielacza do kolumny 1

Ukryj rozdzielacz

Teraz możemy zacząć dodawać moduły! Zaczniemy od pierwszej kolumny, a kiedy skończymy, przejdziemy do drugiej. Pierwszą rzeczą, której będziemy potrzebować w pierwszej kolumnie, jest moduł dzielnika. Jak wspomniano wcześniej, zmienimy go w pionowy. Pierwszym krokiem do osiągnięcia pożądanego rezultatu jest wyłączenie opcji Show Divider.

Tło gradientowe

Zamiast używać rzeczywistego dzielnika, utworzymy dzielnik, używając tła modułu dzielnika. Używamy następującego tła gradientowego:

• Kolor 1: #e0aa25
• Kolor 2: #c11000

Rozmiary

Teraz już upewniliśmy się, że przegroda nie jest widoczna. Kolejnym ważnym krokiem w kierunku stworzenia pionowej przekładki jest drastyczne zmniejszenie szerokości naszej przekładki. Używamy „2%”, ale możesz sprawić, by wyglądało tak gęsto, jak chcesz. Włączamy również centralne wyrównanie modułów.

Rozstaw

Aby rozciągnąć moduł dzielnika w pionie, dodamy „480px” do górnego i dolnego niestandardowego wypełnienia naszego modułu dzielnika. Et voila, mamy naszą pionową przegrodę!

Dodaj moduły Blurb z poprzedniej sekcji do kolumny 1

Następną rzeczą, którą zrobimy, jest utworzenie osi czasu za pomocą tego pionowego dzielnika. W poprzedniej sekcji znajdziesz trzy moduły Blurb. Śmiało i umieść każdy z nich w pierwszej kolumnie wiersza, nad którym pracujesz, tuż pod modułem dzielnika.

Modyfikuj moduł rozmycia nr 1

Dodaj kolor tła

Wykorzystamy jedną z funkcji zwiększających wydajność Divi, aby przyspieszyć ten proces podczas edycji naszych modułów Blurb. Wszystkie zmiany wprowadzimy do pierwszego Modułu Blurba, a następnie po prostu skopiujemy style modułów i dodamy je do innych Modułów Blurb jednym kliknięciem. Otwórz swój pierwszy moduł Blurb i dodaj „rgba(255,255,255,0.73)” jako kolor tła.

Zmień rozmiar czcionki ikony

Następną rzeczą, którą musisz zrobić, to zmienić rozmiar czcionki ikony na „65px”.

Usuń odstępy

Usuniemy również wszystkie marginesy w ustawieniach odstępów. Później dodamy margines do każdego modułu Blurb indywidualnie, ponieważ wartości się różnią.

Skopiuj styl modułu Blurb i dodaj go do pozostałych modułów Blurb

Kopiuj style modułu Blurb

Skończyliśmy modyfikować pierwszy moduł Blurb. Kliknij go prawym przyciskiem myszy i wybierz „Kopiuj style modułu”. To skopiuje wszystkie modyfikacje, które właśnie wprowadziliśmy.

Wklej style modułów na pozostałych modułach Blurb

I wklej style modułów na dwóch pozostałych modułach Blurb. Zauważysz, że nie zmienia to treści, a jedynie zmienia ustawienia projektowe, co pozwala zaoszczędzić sporo czasu.

Rozmieszczanie modułów Blurb

Moduł rozmycia nr 1

Jak wspomniano wcześniej, odstępy między modułami Blurb są różne. Drugi nie ma żadnych, ale pierwszy używa '-900px' jako górnego marginesu. Po dodaniu tego ujemnego marginesu zauważysz, że moduły Blurb stają się częścią osi czasu. W programie Visual Builder wydaje się, że moduł dzielnika znajduje się na szczycie modułów Blurb. Ale kiedy wyjdziesz z programu Visual Builder, zobaczysz, że wszystko układa się na swoim miejscu, więc nie martw się tym.

Moduł rozmycia #3

Następnie otwórz ostatni moduł Blurb i dodaj „150px” do dolnego marginesu.

Upuść moduł obrazu w kolumnie 2

Zlokalizuj obraz

Możemy teraz przejść do kolumny 2! Jedyny moduł, którego będziemy tam potrzebować, to moduł obrazu. Używamy tego, który jest już na naszej stronie, więc zlokalizuj go:

Upuść obraz w kolumnie 2

Upuść i przeciągnij go do drugiej kolumny.

Zmień odstępy

Aby wyśrodkować go w pionie, dodamy do niego margines:

• Margines górny: 300px (komputer), 30px (tablet i telefon)
• Margines dolny: 50px (tablet i telefon)

Usuń poprzednią i następną sekcję

Skończyliśmy tworzenie naszej sekcji! Ostatnią rzeczą do zrobienia jest usunięcie nadmiarowych sekcji.

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Końcowe przemyślenia

W tym poście na blogu dotyczącym przypadków użycia pokazaliśmy, jak zamienić pionowe dzielniki w pionowe za pomocą pakietu Divi's Moving Company Layout Pack. Takie podejście jest idealne, jeśli chcesz tworzyć osie czasu na swojej stronie bez konieczności używania dodatkowego kodu. Opiera się wyłącznie na wbudowanych opcjach Divi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!