Jak utworzyć przesuwany pasek boczny w Divi

Paski boczne mogą być świetne, ale mogą też marnować miejsce. Dlatego stworzenie przesuwnego paska bocznego push może być idealną opcją dla tych, którzy chcą mieć pasek boczny, który nie odwraca uwagi użytkownika od głównej treści strony. Co więcej, ten rodzaj paska bocznego daje użytkownikowi możliwość zobaczenia lub ukrycia paska bocznego, kiedy tylko zechce.

Efekt przesuwania wypychania jest wyjątkowy, ponieważ pasek boczny wsuwa się od lewej strony strony, jednocześnie przesuwając (lub ściskając) główną zawartość strony w celu dopasowania paska bocznego do okienka ekranu. Krótko mówiąc, przesuwa pasek boczny i przesuwa stronę.

Po zbudowaniu paska bocznego staje się wszechstronnym narzędziem dla wszystkich typów aplikacji, w tym menu i formularzy.

Weźmy się za to!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć ręce na przesuwanym układzie paska bocznego push 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 pliki

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 sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Aby dodać go do strony lub szablonu, musisz dodać nową sekcję i wybrać układ sekcji z biblioteki.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Wybierz gotowy układ”.
   
4. Wybierz pakiet układu wydarzenia i kliknij, aby użyć układu strony głównej wydarzenia.
   

Jak utworzyć przesuwany pasek boczny w Divi

Aby stworzyć Sliding Push Sidebar, będziemy musieli użyć nowej zwykłej sekcji. Dostosujemy rozmiar i położenie sekcji tak, aby stała się stałym paskiem bocznym, który otwiera się po kliknięciu przycisku, naciśnięciu (i ściśnięciu) głównego obszaru zawartości po prawej stronie, aby zrobić miejsce na pasek boczny.

Budowanie Sekcji

Najpierw dodajmy nową, zwykłą sekcję do strony.

Następnie przenieś sekcję na górę strony.

Ustawienia sekcji

Otwórz ustawienia sekcji i zaktualizuj pozycję do ustalenia w następujący sposób:

• Pozycja: Naprawiono
• Indeks Z: 9999

Na karcie projektu zaktualizuj rozmiar i odstępy w następujący sposób:

• Szerokość: 350px (komputer i tablet), 100% (telefon)
• Wzrost: 100%
• Padding: 100px góra, 0px dół

Dopełnienie ma zrobić miejsce na nagłówek u góry strony.

Następnie pod zakładką zaawansowane nadaj sekcji klasę CSS:

• Klasa CSS: et-push-sidebar

Gdy klasa css jest już na miejscu, nadaj sekcji kolor tła:

• Kolor tła: #1a1e36

Aby uzyskać bardziej zauważalne oddzielenie, wróć do karty projektu i dodaj prawą ramkę.

• Szerokość prawego obramowania: 2px
• Prawy kolor obramowania: #eeeeee

To zajmuje się sekcją, która służy jako główny kontener dla naszego paska bocznego. Teraz nadszedł czas, aby zacząć budować dwa przyciski, których użyjemy do otwierania i zamykania paska bocznego.

Tworzenie przycisków przełączania paska bocznego

Do przełączania paska bocznego będą używane dwa przyciski. Pierwszym przyciskiem będzie ikona „X”, która po otwarciu zamknie mobilną wersję paska bocznego. „X” zostanie zbudowany za pomocą modułu notki. Drugi to główny przycisk przełączania, który zbudujemy za pomocą modułu notki, który jest obracany z tekstem pionowym i umieszczany absolutnie obok paska bocznego/sekcji.

Weźmy się za to.

Tworzenie rzędu dla przycisków

Utwórz nowy jednokolumnowy wiersz wewnątrz sekcji/paska bocznego.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Padding: 0px na górze, 0px na dole

Na karcie Zaawansowane zaktualizuj opcje pozycji w następujący sposób:

• Pozycja: bezwzględna
• Indeks Z: 1

Tworzenie ikony zamykania „X”

Aby utworzyć ikonę zamykania „X”, dodaj moduł notki do wiersza. Może być łatwiej dodać nowy moduł za pomocą modu Warstwy, ponieważ będzie trochę trudno kliknąć.

Zadowolony

Następnie otwórz ustawienia notki. Na karcie treści usuń tytuł i treść, a następnie dodaj ikonę X do notki.

• Użyj ikony: TAK
• Ikona: x (patrz zrzut ekranu)

Projekt

Na karcie projekt zaktualizuj następujące elementy:

• Kolor ikony: #eeeeee
• Umieszczenie ikony obrazu: po lewej
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 40px
• Szerokość: 50px

Następnie zmniejsz nieco ikonę, dodając następującą właściwość transform translate:

• Przekształć Przetłumacz X : 100px
• Przekształć Tłumacz Y : -10px

Zaawansowany

Na karcie Zaawansowane wyłącz notkę na tablecie i komputerze, aby widzieć ją tylko na wyświetlaczu telefonu.

• Wyłącz na: tablecie i komputerze stacjonarnym

Następnie dodaj klasę CSS do notki i nadaj jej stałą pozycję, aby była widoczna podczas przewijania zawartości paska bocznego na wyświetlaczu telefonu.

• Klasa CSS: et-slide-push-close
• Pozycja: Naprawiono
• Lokalizacja: u góry po prawej

To zajmuje się przyciskiem „X” Zamknij ikonę.

Tworzenie przycisku przełączania głównego paska bocznego

Aby utworzyć przycisk przełączania głównego paska bocznego, dodaj moduł notatek pod istniejącą notatką ikony „X”.

Zadowolony

Zaktualizuj Tytuł i kliknij, aby użyć ikony strzałki w dół.

• Tytuł: Informacje o wydarzeniu
• Użyj ikony: TAK
• Ikona: strzałka w dół (patrz zrzut ekranu)

Następnie dodaj kolor tła do notki.

• kolor tła: #eeeeee

Projekt

Na karcie projekt zaktualizuj następujące elementy:

• Kolor ikony: #1a1e36
• Umieszczenie obrazu/ikony: po lewej
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 25px
• Czcionka tytułu: wiadukt
• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: TT
• Kolor tekstu tytułu: #1a1e36
• Odstępy między literami tytułu: 2px
• Wysokość wiersza tytułu: 1,2 em
• Wypełnienie: 0,6 em u góry, 1 em w lewo, 1 em w prawo
• Zaokrąglone rogi: 5px w dwóch dolnych rogach

Aby ustawić i obrócić notkę poza sekcją, użyj opcji przekształcania w następujący sposób:

• Przekształć Przetłumacz Y : 100px
• Przekształć Obróć Z : -90deg
• Przekształć pochodzenie: w prawym górnym rogu

Zaawansowany

Na karcie Zaawansowane zaktualizuj następujące elementy:

• Klasa CSS: et-slide-push-toggle
• Pozycja: bezwzględna
• Lokalizacja: Prawy środek

Dodawanie niestandardowego kodu za pomocą modułu kodu

Gdy dwa przyciski są gotowe, jesteśmy gotowi do dodania niestandardowego kodu, który zapewni funkcję przesuwania wypychania, której potrzebujemy dla paska bocznego.

Aby dodać kod, najpierw dodaj moduł kodu do tej samej kolumny.

Następnie wklej następujący kod do modułu kodu.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Tworzenie wiersza zawartości paska bocznego

Pierwszy utworzony przez nas wiersz dotyczył przycisków i kodu, które pełnią funkcję paska bocznego. Następny wiersz będzie dotyczył zawartości paska bocznego.

Aby utworzyć wiersz zawartości paska bocznego, dodaj nowy wiersz z jedną kolumną pod pierwszym wierszem na pasku bocznym/sekcji.

Ustawienia wiersza

Otwórz ustawienia nowego wiersza i zaktualizuj następujące elementy:

• Szerokość: 100%
• Wzrost: 100%
• Wypełnienie: 5% góra, 5% dół, 5% lewo, 5% prawo

Na karcie Zaawansowane zaktualizuj opcje przepełnienia w następujący sposób:

• Przepełnienie poziome: przewijanie (komputer i tablet), auto (telefon)
• Przepełnienie pionowe: przewijanie (komputer i tablet), auto (telefon)

Wypełnianie paska bocznego treścią/modułami

Teraz, gdy pasek boczny jest gotowy, wszystko, co musisz zrobić, to w razie potrzeby dodać dowolny moduł do drugiego wiersza na pasku bocznym. W tym przykładzie po prostu kopiuję moduły z układu strony głównej wydarzenia i wklejam je w kolumnie wiersza.

Ostateczny wynik

Sprawdź efekt końcowy na aktywnej stronie.

Dodawanie przesuwnego paska bocznego do szablonu strony

Jeśli chcesz domyślnie używać tego paska bocznego na wszystkich swoich stronach, musisz dodać pasek boczny/sekcję do szablonu strony za pomocą Kreatora motywów Divi.

Zapisz układ sekcji w bibliotece Divi

Aby to zrobić, najpierw zapisz sekcję, która została użyta do utworzenia paska bocznego w Bibliotece Divi. Możesz to zrobić, klikając trzy kropki na pasku bocznym w trybie modalnym warstw, dodaj nazwę układu i zapisując ją w bibliotece.

Utwórz nowy szablon strony

Następnie przejdź do kreatora motywów i utwórz nowy szablon i przypisz ten szablon do wszystkich stron.

Dodawanie przesuwnego paska bocznego do szablonu strony

Następnie kliknij, aby edytować szablon strony.

W edytorze układu szablonu dodaj nową sekcję o pełnej szerokości.

Następnie wstaw do sekcji moduł treści posta o pełnej szerokości.

Następnie kliknij, aby. utwórz nową sekcję nad sekcją pełnej szerokości. Następnie kliknij kartę Dodaj z biblioteki i wybierz układ sekcji Sliding Push Sidebar z biblioteki.

Po zakończeniu możesz edytować pasek boczny, jednak potrzebujesz, korzystając z edytora układu ciała.

Zapisz ustawienia kreatora motywów

Pamiętaj, aby zapisać zmiany w kreatorze motywów.

Teraz wszystkie twoje strony będą miały pasek boczny.

Końcowe przemyślenia

Przesuwany pasek boczny push to idealna opcja dla tych, którzy szukają tego, co najlepsze z obu światów – pasek boczny, który pozostaje na pierwszym planie bez odrywania (lub rozpraszania) głównej treści strony. Możesz go używać do wszelkiego rodzaju rzeczy, takich jak formularze rejestracyjne, zgody na pocztę e-mail, menu i wiele innych.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!