Jak zoptymalizować pasek boczny na urządzeniu mobilnym za pomocą kreatora motywów Divi

W niektórych przypadkach utrzymywanie paska bocznego na telefonie komórkowym może być trochę przesadą. Użytkownicy chętnie przewijają odpowiednie informacje na swoich tabletach i telefonach (do pewnego momentu). Ale gdy masz znaczną ilość treści na pasku bocznym po głównej treści strony, użytkownicy mogą nigdy nie dotrzeć do stopki, która zwykle składa się z ważnych wezwań do działania. Dlatego ważne jest, aby zoptymalizować pasek boczny na urządzeniach mobilnych.

W tym samouczku omówimy sposoby wykorzystania Divi Theme Builder do optymalizacji paska bocznego na wyświetlaczu mobilnym. Oto niektóre z rzeczy, które omówimy w tym artykule:

• Jak stworzyć szablon za pomocą paska bocznego
• Tworzenie zawartości paska bocznego za pomocą modułów Divi i widżetów WordPress
• Używanie wielu obszarów widżetów do ukrywania/pokazywania niektórych widżetów na telefonie komórkowym
• Kontrolowanie odstępów między treściami paska bocznego na urządzeniach mobilnych
• Całkowite ukrywanie zawartości paska bocznego na urządzeniach mobilnych
• Ukrywanie niektórych treści paska bocznego na urządzeniach mobilnych
• Ukrywanie elementów w modułach w celu zminimalizowania zawartości na urządzeniach mobilnych
• Tworzenie responsywnej zawartości paska bocznego poprzez dostosowanie rozmiaru tekstu i odstępów
• Jak zmienić kolejność układania paska bocznego na urządzeniu mobilnym?

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na układ paska bocznego na komputerze i jego optymalizację pod kątem wyświetlania na urządzeniach mobilnych.

Pobierz DARMOWY szablon ze zoptymalizowanym paskiem bocznym na urządzenia mobilne

Aby położyć swoje ręce na szablonie 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 już jesteś na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz iresubscribedi ani otrzymywać dodatkowych e-maili.

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!

Subskrybuj nasz kanał YouTube

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ąć, musisz zainstalować i aktywować motyw Divi. Upewnij się, że masz najnowszą wersję Divi.

Potrzebne będą również posty/strony utworzone do celów testowych, aby zawartość strony rzeczywiście wyświetlała wyniki.

Po tym jesteś gotowy do pracy.

Jak zoptymalizować pasek boczny szablonu Divi na urządzeniu mobilnym?

Zanim zaczniemy optymalizować nasz pasek boczny na urządzeniach mobilnych, musimy najpierw uruchomić działający model. Zbudujemy nasz pasek boczny na szablonie strony za pomocą Divi Theme Builder. Pomoże nam to lepiej zrozumieć, na czym polega tworzenie paska bocznego w Divi, abyśmy mogli lepiej zrozumieć, jak zoptymalizować go na urządzeniach mobilnych.

Tworzenie szablonu za pomocą paska bocznego

Importowanie pakietu Divi Theme Builder nr 3

Aby rozpocząć, użyjemy pakietu Divi Theme Builder Pack nr 3, aby przyspieszyć projektowanie naszej witryny. Następnie użyjemy jednego z szablonów, aby dodać pasek boczny, który zoptymalizujemy pod kątem urządzeń mobilnych.

Po pobraniu pakietu rozpakuj folder.

Z pulpitu nawigacyjnego WordPress przejdź do Divi> Kreator motywów. Następnie kliknij ikonę przenoszenia w prawym górnym menu na stronie. Z modułu przenośności wybierz kartę importowania i wybierz plik divi-theme-builder-pack-3-all.json z folderu, który pobrałeś wcześniej. Następnie kliknij przycisk importu.

Ważne: Użyj witryny testowej ze świeżą instalacją Divi, aby nie zastąpić zawartości na żywo w swojej witrynie lub czegoś nie zepsuć.

Zobaczysz, że wszystkie szablony zostały zaimportowane do kreatora motywów.

Budowanie układu paska bocznego w szablonie strony kategorii

Znajdź szablon wszystkich stron kategorii i kliknij, aby edytować niestandardowy układ treści.

Obecny układ strony wykorzystuje jeden wiersz kolumny dla głównego obszaru zawartości strony. Będziemy musieli zmienić to na strukturę układu paska bocznego. Aby to zrobić, kliknij ikonę "Wybierz układ" w menu wierszy drugiego rzędu i wybierz strukturę układu dwóch trzecich jednej trzeciej kolumny.

Teraz będziesz miał obszar po prawej stronie na pasek boczny.

UWAGA: Nie używam sekcji specjalnej dla tego układu paska bocznego. Sekcje specjalne nie są wymagane podczas tworzenia układu paska bocznego strony, jednak jeśli chcesz zachować oddzielne funkcje wierszy dla głównego obszaru zawartości, użyj sekcji specjalnej.

Nie będziemy się zbytnio koncentrować na odtwarzaniu dokładnego projektu modułów w tym samouczku. Zamiast tego skoncentrujemy się na tych elementach, które pomogą zoptymalizować pasek boczny na urządzeniach mobilnych.

To powiedziawszy, musimy dodać kolor tła i wypełnienie do kolumny paska bocznego.

Ustawienia kolumn paska bocznego

Otwórz ustawienia kolumny przeznaczonej dla paska bocznego i zaktualizuj następujące elementy:

• Kolor tła: #f2f5f9
• Padding: 25px góra, 25px dół, 25px po lewej, 25px po prawej

Tworzenie zawartości paska bocznego za pomocą modułów Divi i widżetów WordPress

Zawartość paska bocznego będzie się różnić w zależności od potrzeb witryny. Jeśli jednak mówimy o witrynie blogowej, zazwyczaj można znaleźć kombinację następujących elementów treści paska bocznego:

• Informacje o autorze (imię i nazwisko, zdjęcie, bio)
• Przyciski śledzenia mediów społecznościowych
• Zgoda na e-mail
• Linki do produktów i/lub usług
• Reklamy
• Kategorie
• Najnowsze/Popularne posty

Tworzenie tych elementów w Divi można wykonać za pomocą kombinacji modułów Divi. W tym przykładzie dodamy następujące moduły Divi, aby zbudować zawartość paska bocznego.

1. Moduł wyszukiwania — będzie służył jako formularz wyszukiwania.
2. Moduł e-mail Optin – będzie służył jako formularz e-mail optin.
3. Moduł tekstowy – będzie to tytuł przycisków Śledź w mediach społecznościowych
4. Moduł śledzenia w mediach społecznościowych — pokaże przyciski śledzenia w mediach społecznościowych.
5. Moduł tekstowy (z obrazem bg) – posłuży jako przykładowa reklama na pasku bocznym.
6. Moduł Blurb (z treścią autora) — będzie służył jako obszar Informacje o autorze na pasku bocznym.
7. Moduł tekstowy — będzie służyć jako tytuł modułu bloga znajdującego się pod nim.
8. Moduł bloga – będzie służyć jako zawartość ostatnich/polecanych postów na pasku bocznym.

Wciąganie widżetów WordPress za pomocą modułu paska bocznego

Jeśli jeszcze nie jesteś zaznajomiony, Divi ma moduł paska bocznego, który pozwala pobrać zawartość obszaru widżetów (lub widżety) do obszaru paska bocznego Divi. W rzeczywistości ten szablon już używa widżetu paska bocznego w wierszu bezpośrednio pod tym, nad którym pracujemy.

Przeciągnij moduł paska bocznego z wiersza i umieść go tuż pod modułem zgody na pocztę e-mail.

Następnie otwórz ustawienia modułu paska bocznego. Zobaczysz, że moduł wciąga obszar widżetów paska bocznego, który powinien wyglądać następująco, jeśli masz domyślną konfigurację w WordPress.

Korzystanie z wielu obszarów widżetów

W tej chwili obszar widżetów „Pasek boczny” wyświetla wiele widżetów, ponieważ w obszarze widżetów paska bocznego znajduje się wiele widżetów. Ale możesz uzyskać większą kontrolę nad projektem paska bocznego Divi, używając wielu obszarów widżetów zawierających jeden widżet. Korzystanie z wielu obszarów widżetów zapewnia większą kontrolę nad projektowaniem widżetów, a także widocznością widżetów na urządzeniach mobilnych.

Aby utworzyć wiele widżetów, otwórz nową kartę i przejdź do pulpitu nawigacyjnego WordPress. Przejdź do Wygląd > Widgety.

Utwórz nowy obszar widżetów, wprowadzając nazwę i klikając przycisk Utwórz. Ponieważ ten obszar widżetu będzie miejscem, w którym dodamy widżet Kategorie, nazwijmy obszar „Kategorie”. Odśwież stronę, aby zobaczyć obszar widżetów. Następnie przeciągnij widżet Kategorie do obszaru widżetów Kategorie.

Powtórz ten proces, aby utworzyć nowy obszar widżetów o nazwie „Archiwa”. Następnie przeciągnij widżet Archiwa do obszaru widżetu Archiwa.

Wróć do szablonu stron kategorii z układem paska bocznego i zaktualizuj zawartość modułu paska bocznego, aby wyświetlić obszar widżetu Kategorie.

Powiel moduł paska bocznego (aby zachować projekt)

Zaktualizuj zduplikowany moduł paska bocznego, aby pobrać obszar widżetów archiwum.

Przejęcie kontroli nad odstępami między modułami paska bocznego

Obecnie wiersz zawierający pasek boczny ma wartość szerokości rynny równą 2. Oznacza to, że między każdym modułem wewnątrz paska bocznego będzie domyślny dolny margines/odstęp. Aby uzyskać większą kontrolę nad tymi odstępami, możemy usunąć dolny margines wszystkich modułów w kolumnie paska bocznego. Aby to zrobić, otwórz ustawienia modułu wyszukiwania i zaktualizuj następujące elementy:

• Margines dolny: 0px (komputer), 15px (tablet)

Następnie kliknij ikonę Więcej ustawień (lub menu prawego przycisku myszy) w opcji marginesu. Następnie wybierz „Rozszerz margines”.

W module Rozszerz style zaktualizuj opcje, aby rozszerzyć margines do „Wszystkie moduły” w „Ta kolumna”.

Następnie możemy dodać odstępy między modułami za pomocą modułów rozdzielających.

Optymalizacja paska bocznego na urządzeniach mobilnych

Ukrywanie paska bocznego w telefonie komórkowym

Czasami możesz chcieć całkowicie ukryć pasek boczny na telefonie komórkowym. Aby to zrobić, musisz wyłączyć widoczność kolumny zawierającej pasek boczny na tablecie i telefonie.

Otwórz ustawienia wiersza i otwórz ustawienia kolumny przeznaczonej dla paska bocznego. Następnie zaktualizuj widoczność w następujący sposób:

• Wyłącz na: tablecie, telefonie

Spowoduje to ukrycie całego paska bocznego na tablecie i wyświetlaczu mobilnym.

Ukrywanie niektórych treści paska bocznego na urządzeniach mobilnych

Na komputerze możesz mieć miejsce, aby zachować większość (lub całą) zawartość paska bocznego, tak aby nie rozpraszała ona zbytnio treści. Ale na urządzeniach mobilnych użytkownik będzie musiał przewijać wiele treści na pasku bocznym, które mogą go nie interesować. Tak więc, budując pasek boczny w Divi Theme Builder, skorzystaj z opcji widoczności, aby wyłączyć niektóre elementy paska bocznego na wyświetlaczu mobilnym. A jeśli używasz widżetów WordPress do zawartości paska bocznego, utwórz wiele obszarów widżetów, aby pomóc zaprojektować i ukryć określone widżety również na urządzeniach mobilnych.

Aby ukryć moduły na telefonie komórkowym, otwórz moduł widoku szkieletowego, a następnie użyj funkcji wielokrotnego wyboru Divi, aby wybrać wszystkie moduły, które chcesz ukryć / wyłączyć na tablecie i telefonie. Następnie otwórz ustawienia jednego z wybranych modułów i zaktualizuj następujące elementy:

• Wyłącz na: telefon, tablet

Na tej ilustracji ukryliśmy wszystkie moduły (w tym rozdzielacze) z wyjątkiem dwóch modułów paska bocznego (zawierających widżety kategorii i archiwów) oraz modułu tekstowego (zawierającego reklamę) na wyświetlaczu tabletu i telefonu. Innymi słowy, na urządzeniach mobilnych będą wyświetlane tylko kategorie, archiwa i reklama.

Podgląd wyników na stronie bloga

Zanim zobaczymy wyniki na aktywnej stronie, najpierw przypiszmy ją do strony bloga witryny. Aby to zrobić, kliknij ikonę koła zębatego nad szablonem, wybierz blog z listy i zapisz go.

Upewnij się, że masz wybraną stronę postów w obszarze Wygląd > Czytanie.

Wyniki

Oto różnica między paskiem bocznym na komputery stacjonarne a mobilnym paskiem bocznym. Zwróć uwagę, jak mobilny pasek boczny zawiera treść lekcji.

Unikanie zduplikowanych treści paska bocznego i stopki na urządzeniach mobilnych

Na komputerze możesz uniknąć dodawania zduplikowanych treści na pasku bocznym i stopce. W rzeczywistości jest to dobry sposób na zwiększenie konwersji. Na przykład na komputerze sensowne jest umieszczenie modułu zgody na e-mail w górnej części paska bocznego i wewnątrz stopki, aby użytkownicy mogli zobaczyć e-mail optin podczas czytania treści posta, a także na końcu posta. Jednak na urządzeniach mobilnych nie ma układu paska bocznego. Wszystko jest wyświetlane w jednej kolumnie (może w dwóch). Prawe paski boczne stosują się pod zawartością posta/strony, a lewe paski boczne u góry zawartości posta/strony. Tak więc, jeśli moduł e-mail optin na pasku bocznym znajduje się pod treścią posta/strony, użytkownik może przewijać więcej niż jeden moduł e-mail optin (jeden na pasku bocznym i jeden w stopce). Ponadto, jeśli na dole prawego paska bocznego znajduje się opcja e-mail, a jedna na górze stopki, użytkownik przewinie dwie kolejne opcje e-maili na urządzeniu mobilnym.

Ukrywanie elementów w modułach w celu zminimalizowania zawartości na urządzeniach mobilnych

Możesz zdecydować, że ukrywanie całego modułu na telefonie komórkowym nie jest konieczne. Zamiast tego możesz zminimalizować zawartość modułu, ukrywając niektóre elementy tylko na wyświetlaczu mobilnym.

Na przykład możesz chcieć wyświetlić wyróżniony obraz i fragment polecanych postów na pasku bocznym pulpitu. Ale na urządzeniach mobilnych możesz ukryć polecany obraz i fragment, aby utworzyć zminimalizowaną wersję treści.

Tworzenie responsywnej zawartości paska bocznego

Możesz zdecydować się na pozostawienie całej zawartości paska bocznego na wyświetlaczu mobilnym. Dlaczego nie? Jeśli masz cenne informacje, które użytkownicy docenią za wszelką cenę, zachowaj je. Jednak będziesz chciał podjąć kroki, aby upewnić się, że zawartość paska bocznego jest responsywna. Oznacza to, że będziesz chciał dostosować rozmiar i odstępy między elementami, aby pasowały do ​​mniejszych ekranów. Zmniejszy to odległość przewijania strony i ułatwi czytanie treści.

Dostosuj rozmiar tekstu na telefonie komórkowym

Prostym sposobem na zminimalizowanie odstępów w pionie i poprawienie czytelności na urządzeniach mobilnych jest dostosowanie rozmiaru tekstu zawartości modułu na pasku bocznym. Na przykład możesz dostosować tekst nagłówka z 24 pikseli na komputerze do 14 pikseli na telefonie komórkowym.

Dostosuj odstępy/dzielniki na urządzeniu mobilnym

W tym przykładzie dodaliśmy przegrody między modułami, aby stworzyć przestrzeń. Możemy jednak użyć ustawień Divi's Divider, aby dostosować odstępy między tymi separatorami na telefonie komórkowym. Ograniczy to marnowanie miejsca podczas przewijania.

Na przykład możesz zmienić górny i dolny margines dzielnika z 30 na 15 pikseli na tablecie i telefonie.

Zmiana kolejności układania paska bocznego na urządzeniu mobilnym

Kolejność układania jest częstym problemem w przypadku pasków bocznych. Dotyczy to zwłaszcza lewych pasków bocznych. Jak wspomniałem wcześniej, prawy pasek boczny układa się pod (lub za) treścią posta/strony, a lewy pasek boczny na górze (lub przed) treścią posta/strony. Oznacza to, że kiedy przeglądasz stronę z lewym paskiem bocznym na urządzeniu mobilnym, pierwszą rzeczą, jaką zobaczy użytkownik, jest zawartość paska bocznego, a nie główna treść posta/strony. To nie jest dobre dla UX. Aby to naprawić, możesz całkowicie ukryć pasek boczny lub zmienić kolejność układania tak, aby lewy pasek boczny znajdował się poniżej treści postu/strony na urządzeniu mobilnym.

Aby zmienić kolejność układania lewego paska bocznego na stos pod (lub za) zawartością strony na urządzeniu mobilnym, otwórz ustawienia wiersza wiersza zawierającego układ paska bocznego. Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Następnie otwórz ustawienia kolumny oznaczonej jako pasek boczny i dodaj następujący niestandardowy kod CSS do ekranu tabletu głównego elementu:

order: 2;

Jeśli nie zgadłeś, ten mały fragment zmienia kolejność z wartości domyślnej („1”) na wartość „2”, co powoduje, że cała kolumna/pasek boczny jest układany pod/za kolumną zawierającą główną treść.

Końcowe przemyślenia

Paski boczne są nadal znajomą przestrzenią dla użytkowników, którzy dostarczają pomocną zawartość dodatkową, gdy wchodzą w interakcję z główną zawartością strony. Jednak ta sama zawartość paska bocznego na urządzeniach mobilnych może rozpraszać uwagę. Mamy nadzieję, że ten post zainspirował Cię do poświęcenia swoim paskom bocznym uwagi, na jaką zasługują na tabletach i telefonach. Może to oznaczać, że całkowicie ukryjesz pasek boczny, pokażesz tylko część zawartości paska bocznego lub po prostu zoptymalizujesz istniejącą zawartość specjalnie pod kątem wyświetlania na urządzeniach mobilnych.

Pasek boczny, który został zbudowany dla szablonu w tym samouczku, został zaprojektowany przy użyciu istniejących elementów projektu, które można znaleźć w pakiecie układów do tworzenia motywów #3. Jeśli podoba Ci się projekt tego szablonu z paskiem bocznym, pobierz go powyżej, aby przyjrzeć się bliżej.

Aby uzyskać więcej informacji, zapoznaj się z tym przewodnikiem dotyczącym korzystania z pasków bocznych w Divi Theme Builder.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!