Jak dostosować kolejność układania kolumn Divi na urządzeniach mobilnych?

Divi jest zbudowany na responsywnej siatce, która układa (lub porządkuje) kolumny w określony sposób podczas przechodzenia z ekranów stacjonarnych na mobilne. Kolumny są ułożone w kolejności od lewej do prawej. Jeśli więc masz trzy kolumny na komputerze, lewa (pierwsza) kolumna zostanie ułożona jako pierwsza na urządzeniu mobilnym, a następnie kolumny 2 i 3 poniżej. Ma to sens i zwykle jest potrzebne w przypadku większości stron internetowych. Czasami jednak niektóre projekty, które świetnie wyglądają na komputerach stacjonarnych, powodują niespójną kolejność treści na urządzeniach mobilnych. W takim przypadku musisz zmienić kolejność kolumn, aby zapewnić bardziej spójne środowisko użytkownika na urządzeniach mobilnych.

Dzisiaj pokażę wam dwa sposoby na zmianę kolejności układania kolumn Divi na urządzeniach mobilnych. Pierwszy polega na utworzeniu alternatywnej wersji treści specjalnie dla urządzeń mobilnych za pomocą funkcji „Wyłącz włącz” w Divi. Drugim sposobem jest użycie niestandardowego CSS w celu dodania klas do kolumn, które określają ich kolejność na urządzeniach mobilnych.

Zacznijmy!

Tworzenie treści

Subskrybuj nasz kanał YouTube

Na nowej stronie kliknij, aby użyć Divi Builder i uruchom Visual Builder.

W kreatorze wizualnym wybierz układ 2-kolumnowy (1/2 – 1/2).

Dodaj moduł obrazu do pierwszej kolumny w wierszu.

W obszarze Ustawienia obrazu prześlij i wstaw obraz. (Używam obrazu 770 x 433 z unsplash.com)

Następnie wstaw moduł tekstowy do drugiej kolumny wiersza.

W obszarze Ogólne ustawienia tekstu dodaj swój tekst do pola tekstowego Treść.

Zapisać

Teraz powinieneś mieć jeden wiersz z 2 kolumnami, z pierwszym wierszem zawierającym obraz i drugim wierszem zawierającym tekst. Na poniższym obrazku oznaczyłem kolumny dla Ciebie.

W konstruktorze wizualnym zduplikuj wiersz z tymi samymi 2 kolumnami, klikając ikonę duplikatu wiersza.

W drugim wierszu (właśnie utworzonym zduplikowanym wierszu) przeciągnij moduł obrazu do drugiej kolumny i przeciągnij moduł tekstowy do pierwszej kolumny.

Takie naprzemienne umieszczanie obrazu i tekstu w każdym wierszu może być kreatywnym i skutecznym sposobem wyświetlania treści na stronie internetowej. Ale stwarza to również problem, gdy kolumny stosują się na urządzeniach mobilnych. Gdy zmniejszasz szerokość przeglądarki do szerokości mniejszej niż 980 pikseli (punkt przerwania dla urządzeń mobilnych), zawartość każdego wiersza układa się od lewej do prawej. Oznacza to, że pierwsza kolumna twojego rzędu będzie ułożona na górze drugiej kolumny. Może to powodować problemy, jeśli chcesz zachować spójny przepływ treści na urządzeniach mobilnych. W obecnym układzie przepływ treści na urządzeniach mobilnych będzie układał się w następującej kolejności:

Kolumna 1 (obraz)
Kolumna 2 (tekst)
Kolumna 1 (tekst)
Kolumna 2 (obraz)

Lepszym układem dla urządzeń mobilnych będzie zmiana kolejności układania kolumn w jednym z wierszy, aby uzyskać bardziej spójny układ treści.

Dwa sposoby na zmianę kolejności układania kolumn na urządzeniach mobilnych

1: Zmiana kolejności układania kolumn na urządzeniu mobilnym za pomocą funkcji „Wyłącz” Divi

Funkcja „Wyłącz w” Divi umożliwia tworzenie różnych wersji treści na telefonach, tabletach i wyświetlaczach stacjonarnych. Za pomocą kilku kliknięć możesz ukryć lub pokazać sekcje treści na dowolnym urządzeniu.

W tym przykładzie musimy zachować widoczność drugiego wiersza na komputerze, ale ukryć go na urządzeniach mobilnych. Następnie musimy stworzyć inną wersję drugiego wiersza, aby była widoczna tylko na urządzeniach mobilnych.

Korzystając z programu Visual Builder, zduplikuj drugi wiersz.

Zanim zmodyfikujemy nowy zduplikowany wiersz, otwórz Ustawienia wiersza w drugim wierszu.

W sekcji Ogólne ustawienia wiersza zaznacz, aby wyłączyć wiersz na telefonie i tablecie.

Zapisać

Teraz drugi rząd zostanie ukryty na urządzeniach mobilnych. Następnie musimy zmienić układ naszego nowego trzeciego wiersza tak, aby kolejność kolumn była taka, jaka ma być na urządzeniu mobilnym.

Przeciągnij zawartość modułu tekstowego do drugiej kolumny i przeciągnij moduł obrazu do pierwszej kolumny.

Teraz przejdź do ogólnych ustawień wiersza dla trzeciego rzędu i zaznacz pole, aby wyłączyć wiersz na pulpicie.

Zapisać

Teraz sprawdź swoje wyniki. Zauważysz, że trzecia kolumna jest wyłączona na komputerze, a następnie włączona na urządzeniach mobilnych. Tworzy to bardziej spójny układ na urządzeniach mobilnych.

Otóż ​​to!

Dzięki tej możliwości wyłączania i włączania niektórych sekcji treści możesz łatwo zmienić / zmienić kolejność dowolnego rodzaju układu.

Ponadto podczas przeglądania strony z programu Visual Builder, Divi wygodnie usuwa zawartość ukrytą na stronie, dzięki czemu można zidentyfikować, która zawartość jest wyłączona.

Korzystanie z funkcji „Wyłączone” w celu ukrycia kolumn i wierszy jest bezpiecznym zakładem. Jeśli jednak robisz to za dużo i/lub masz dużo treści, edytowanie strony może być mylące. A dokonując aktualizacji zawartości, musisz zaktualizować zawartość we wszystkich wersjach, a nie tylko w jednej.

Jeśli wyłączanie i włączanie treści nie jest dla Ciebie odpowiednim rozwiązaniem, istnieje inny sposób na uporządkowanie treści na urządzeniu mobilnym za pomocą klas CSS.

2. Zmiana kolejności układania kolumn na urządzeniach mobilnych za pomocą klas CSS

Aby to zrobić, użyjemy niestandardowego CSS, dzięki czemu będziemy mogli dodać klasę do naszych kolumn, która uporządkuje je tak, jak chcesz na wyświetlaczu mobilnym.

Następnie z pulpitu nawigacyjnego wordpress przejdź do Divi → Theme Customizer → Dodatkowy CSS i dodaj następujący CSS:

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

Zapisz i opublikuj

Patrząc na właśnie dodany CSS, zauważ, że cały CSS jest zawarty w zapytaniu o media, które będzie używać tylko CSS dla urządzeń mobilnych (na ekranie o szerokości mniejszej niż 980 pikseli).
Zauważysz również pierwszą klasę zwaną „rzędem niestandardowym”. Ta klasa zostanie dodana do wiersza, w którym chcesz zmienić kolejność układania kolumn na urządzeniach mobilnych.

Kolejne 4 klasy („pierwsza na komórce”, „druga na komórce”, „trzecia na komórce” i „czwarta na komórce”) mają przypisaną właściwość zamówienia i przypisaną do niej wartość liczbową. Te zajęcia zostaną dodane do kolumn w wierszu „niestandardowe”, aby określić kolejność, w jakiej mają być wyświetlane na urządzeniach mobilnych.

Teraz, gdy mamy już nasz CSS, zastosujmy te klasy do naszej strony.

Upewnij się, że masz utworzone dwa wiersze, postępując zgodnie ze wskazówkami. Upewnij się też, że żaden z wierszy nie jest wyłączony na urządzeniu mobilnym lub stacjonarnym.

W tym przykładzie zmienimy kolejność kolumn w drugim wierszu na telefonie komórkowym. Oto ilustracja tego, co chcemy osiągnąć.

Korzystając z programu Visual Builder, otwórz ustawienia wiersza dla drugiego wiersza.

W ustawieniach wiersza na karcie CSS dodaj następujące elementy:

Dodaj „custom_row” do pola tekstowego CSS Class. (zawija twój rząd w elastyczne pudełko)

Dodaj „drugi na urządzeniu mobilnym” do pola tekstowego Klasy CSS kolumny 1 (Zmienia to kolejność kolumny 1, aby wyświetlać drugą na urządzeniu mobilnym. Nazwa klasy powinna ułatwić zapamiętanie. )

Dodaj „pierwszy na urządzeniu mobilnym” do pola tekstowego Klasy CSS kolumny 2 (Zmienia to kolejność kolumny 2, aby była wyświetlana jako pierwsza na urządzeniu mobilnym).

Uwaga: Ważne jest, aby do każdej kolumny dodać klasę porządkowania.

Sprawdźmy teraz wyniki. Zwróć uwagę na urządzenia mobilne, w jaki sposób zmieniono kolumny drugiego wiersza, aby wyświetlały się tak samo, jak pierwszy wiersz. Tworzy to spójny przepływ obrazu → tekstu → obrazu → tekstu.

Zmiana kolejności układania kolumn w dowolnym układzie za pomocą klas CSS

W ten sam sposób możesz zmienić kolejność dowolnego układu kolumn. Pamiętaj, że niestandardowy CSS umożliwia dodanie pierwszej, drugiej, trzeciej i czwartej wartości miejsca docelowego. Na przykład, jeśli chcesz zmienić kolejność jednej czwartej pół jednej czwartej układu w następujący sposób:

Po prostu wykonaj te same kroki, które zrobiłeś wcześniej. W ustawieniach wiersza na karcie CSS dodaj klasę „custom_row” do wiersza i dodaj klasę zamawiania („pierwsza na komórce”, „druga na komórce”, „trzecia na komórce”) do każdej z Twoich kolumn. Pamiętaj, aby dodać klasę do każdej kolumny, aby wszystkie miały wyznaczoną wartość zamówienia.

Otóż ​​to!

Preferowana metoda

Jeśli chcesz utworzyć odrębne układy dla każdego urządzenia i/lub planujesz zmienić zawartość oprócz kolejności kolumn na urządzeniu mobilnym, musisz użyć funkcji „Wyłączone włączone” Divi, aby dostosować układy.

Jeśli potrzebujesz tylko zmienić kolejność kolumn na telefonie komórkowym bez zmiany treści i nie chcesz zawracać sobie głowy żonglowaniem wieloma wyłączonymi/włączonymi wersjami treści, możesz skorzystać z metody CSS.

Rozważania SEO

Od lat toczy się wiele debat na temat tego, jak wyszukiwarki obsługują treści wyłączone lub ukryte na stronie. Nawet jeśli możesz ukryć zawartość dla niektórych urządzeń, Google nadal może ją indeksować. Może to być uważane za zduplikowane treści i może sugerować, że użycie funkcji „Wyłącz” miałoby negatywny wpływ na ranking Twojej strony. Jednak wyszukiwarki, takie jak Google, są całkiem dobre w określaniu, czy treść jest ukryta ze względu na responsywny układ. Krótko mówiąc, Google wie, czy duplikujesz treści na różne urządzenia i nie będzie Cię za to karać. Dopóki nie ukrywasz treści ze złych powodów, korzystanie z niej jest bezpieczne.

Końcowe przemyślenia

Możliwość zmiany kolejności układania kolumn jest niezwykle przydatna, a czasami konieczna. Wszyscy potrzebujemy możliwości stworzenia unikalnego układu graficznego do wyświetlania na komputerach stacjonarnych bez naruszania spójności przepływu treści na urządzeniach mobilnych. Korzystając z funkcji „Wyłącz włączone” Divi, możesz tworzyć zupełnie różne układy dla każdego urządzenia. Ponadto za pomocą kilku wierszy niestandardowego kodu CSS możesz łatwo dodawać klasy do wierszy i kolumn, aby uporządkować je w dowolny sposób na urządzeniach mobilnych.

Mam nadzieję, że ten post pomoże Ci uzyskać większą kontrolę nad wyświetlaczami mobilnymi.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!