Как настроить порядок размещения столбцов в Divi на мобильных устройствах

Divi построен на гибкой сетке, которая определенным образом складывает (или упорядочивает) ваши столбцы при переходе с настольных компьютеров на мобильные. Столбцы располагаются в порядке слева направо. Итак, если у вас есть три столбца на рабочем столе, левый (первый) столбец будет размещен первым на мобильном устройстве, а затем столбцы 2 и 3 под ним. Это имеет смысл и обычно требуется для большинства веб-сайтов. Но иногда определенные дизайны, которые отлично смотрятся на настольных компьютерах, создают непоследовательный порядок контента на мобильных устройствах. В этом случае вам нужно будет изменить порядок столбцов, чтобы обеспечить более согласованный пользовательский интерфейс на мобильных устройствах.

Сегодня я собираюсь показать вам два способа изменить порядок расположения столбцов Divi на мобильных устройствах. Первый предполагает создание альтернативной версии контента специально для мобильных устройств с помощью функции «Отключить включение» в Divi. Второй способ - использовать собственный CSS для добавления классов в столбцы, которые определяют их порядок на мобильном устройстве.

Давайте начнем!

Создание контента

Подпишитесь на наш канал Youtube

На новой странице щелкните, чтобы использовать Divi Builder и запустить Visual Builder.

В визуальном построителе выберите макет из 2 столбцов (1/2 - 1/2).

Добавьте модуль изображения в первый столбец внутри вашей строки.

В разделе «Настройки изображения» загрузите и вставьте изображение. (Я использую изображение 770 x 433 с сайта unsplash.com)

Затем вставьте текстовый модуль во второй столбец вашей строки.

В разделе «Общие параметры текста» добавьте текст в текстовое поле «Содержимое».

Сохранить

Теперь у вас должна быть одна строка с двумя столбцами, первая строка содержит изображение, а вторая строка - текст. Я пометил вам столбцы на следующем изображении.

В визуальном построителе продублируйте строку с теми же двумя столбцами, щелкнув значок повторяющейся строки.

Во второй строке (дублирующая строка, которую вы только что создали) перетащите модуль изображения во второй столбец и перетащите текстовый модуль в первый столбец.

Такое чередование позиций изображения и текста в каждой строке может быть творческим и эффективным способом отображения вашего контента на вашей веб-странице. Но это также создает проблему, когда столбцы складываются на мобильном устройстве. При уменьшении ширины вашего браузера до менее 980 пикселей (точка останова для мобильных устройств) содержимое каждой строки складывается слева направо. Это означает, что первый столбец вашей строки будет располагаться поверх второго столбца. Это может вызвать проблемы, если вы хотите обеспечить единообразие потока контента на мобильных устройствах. При текущем макете поток контента на мобильном устройстве будет складываться в следующем порядке:

Столбец 1 (изображение)
Столбец 2 (текст)
Столбец 1 (текст)
Столбец 2 (изображение)

Лучшим макетом для мобильных устройств будет изменение порядка расположения столбцов в одной из ваших строк, чтобы вы получили более согласованный макет контента.

Два способа изменить порядок размещения столбцов на мобильных устройствах

1. Изменение порядка размещения столбцов на мобильных устройствах с помощью функции «Отключить» в Divi

Функция Divi «Отключить включение» позволяет вам создавать различные версии вашего контента на дисплеях телефона, планшета и рабочего стола. Несколькими щелчками мыши вы можете скрыть или показать разделы контента на любом устройстве.

В этом примере нам нужно оставить вторую строку видимой на рабочем столе, но скрыть ее на мобильных устройствах. Затем нам нужно создать другую версию второй строки, чтобы она была видна только на мобильных устройствах.

Используя Visual Builder, продублируйте вторую строку.

Прежде чем редактировать новую дублированную строку, откройте настройки строки во второй строке.

В разделе «Общие настройки строки» установите флажок, чтобы отключить строку на телефоне и планшете.

Сохранить

Теперь вторая строка будет скрыта на мобильных устройствах. Затем нам нужно изменить макет нашей новой третьей строки на то, как мы хотим, чтобы порядок столбцов был на мобильном устройстве.

Перетащите содержимое текстового модуля во второй столбец и перетащите модуль изображения в первый столбец.

Теперь перейдите в Общие настройки строки для третьей строки и установите флажок, чтобы отключить строку на рабочем столе.

Сохранить

Теперь проверьте свои результаты. Вы заметите, что третий столбец отключен на рабочем столе, а затем включен на мобильных устройствах. Это создает более согласованный макет на мобильных устройствах.

Вот и все!

Благодаря этой возможности отключать и включать определенные разделы контента вы можете легко изменять / переупорядочивать любой тип макета.

Кроме того, при просмотре вашей страницы из Visual Builder Divi удобно скрывает контент, который скрыт на странице, чтобы вы могли определить, какой контент отключен.

Использование функции «Отключено» для скрытия столбцов и строк является безопасным вариантом. Однако, если вы делаете это слишком часто и / или у вас много контента, редактирование страницы может запутать. И при обновлении контента вы должны обновлять контент во всех версиях, а не только в одной.

Если отключение и включение контента не подходит для вас, есть другой способ упорядочить контент на мобильном устройстве с помощью классов CSS.

2. Изменение порядка размещения столбцов на мобильных устройствах с помощью классов CSS

Для этого мы собираемся использовать некоторый настраиваемый CSS, чтобы мы могли добавить класс в наши столбцы, который будет упорядочивать их, как вы хотите, на мобильном дисплее.

Затем на панели инструментов WordPress перейдите в Divi → Theme Customizer → Additional CSS и добавьте следующий 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;
}

}

Сохранить и опубликовать

Глядя на только что добавленный CSS, обратите внимание, что весь CSS содержится в медиа-запросе, который будет использовать CSS только для мобильных устройств (на экранах с шириной менее 980 пикселей).
Вы также заметите первый класс под названием «custom row». Этот класс будет добавлен в строку, в которой вы хотите изменить порядок расположения столбцов на мобильном устройстве.

Следующие 4 класса («первый на мобильном телефоне», «второй на мобильном устройстве», «третий на мобильном устройстве» и «четвертый на мобильном устройстве») имеют свойство порядка и присвоенное ему числовое значение. Эти классы будут добавлены в столбцы в вашей «настраиваемой» строке, чтобы указать порядок, в котором они будут отображаться на мобильном устройстве.

Теперь, когда у нас есть CSS, давайте применим эти классы к нашей странице.

Убедитесь, что у вас есть две строки, созданные в соответствии с инструкциями. Кроме того, убедитесь, что ни одна из строк не отключена на мобильном устройстве или компьютере.

В этом примере мы собираемся изменить порядок столбцов во второй строке на мобильном устройстве. Вот иллюстрация того, чего мы хотим достичь.

Используя Visual Builder, откройте настройки строки для второй строки.

В разделе «Настройка строк» ​​на вкладке «CSS» добавьте следующее:

Добавьте custom_row в текстовое поле CSS Class. (упаковывает вашу строку в гибкую коробку)

Добавьте «второй на мобильном устройстве» в текстовое поле «Класс CSS столбца 1» (это изменяет порядок столбца 1 на отображение второго на мобильном устройстве. Имя класса должно упростить запоминание).

Добавьте «first-on-mobile» в текстовое поле CSS-класс столбца 2 (это изменяет порядок столбца 2, чтобы он отображался первым на мобильном устройстве).

Примечание. Важно добавить класс упорядочения в каждый столбец.

Теперь давайте проверим результаты. Обратите внимание на то, что на мобильных устройствах столбцы второй строки были изменены, чтобы они отображались так же, как первая строка. Это создает согласованный поток изображения → текста → изображения → текста.

Изменение порядка размещения столбцов в любом макете с помощью классов CSS

Вы можете изменить порядок расположения любого столбца, используя тот же метод. Помните, что собственный CSS позволяет добавлять значения первого, второго, третьего и четвертого места размещения. Например, если вы хотите изменить порядок макета «одна четвертая, половина, одна четвертая» следующим образом:

Просто следуйте тем же шагам, что и раньше. В настройках строки на вкладке CSS добавьте класс custom_row в строку и добавьте свой класс заказа («первый на мобильном устройстве», «второй на мобильном устройстве», «третий на мобильном устройстве»). в каждую из ваших колонок. Не забудьте добавить класс в каждый из своих столбцов, чтобы все они имели назначенное значение порядка.

Вот и все!

Предпочтительный метод

Если вам нужно создать отдельные макеты для каждого устройства и / или запланировать изменение содержимого в дополнение к порядку столбцов на мобильном устройстве, вам нужно будет использовать функцию Divi «Отключено» для настройки макетов.

Если вам нужно только переупорядочить столбцы на мобильном устройстве без изменения содержимого, и вы не хотите возиться с манипуляциями с несколькими отключенными / включенными версиями содержимого, тогда вам может пригодиться метод CSS.

Соображения по SEO

На протяжении многих лет ведется много споров о том, как поисковые системы обрабатывают отключенный или скрытый контент на странице. Даже если вы можете скрыть контент для определенных устройств, он по-прежнему может сканироваться Google. Это может рассматриваться как дублированный контент и может означать, что использование функции «Отключить» может отрицательно повлиять на рейтинг вашей страницы. Однако поисковые системы, такие как Google, довольно хорошо определяют, скрыт ли контент из-за адаптивного макета. Короче говоря, Google знает, дублируете ли вы контент для разных устройств, и не будет наказывать вас за это. Если вы не скрываете контент по злонамеренным причинам, его можно использовать.

Последние мысли

Возможность изменять порядок расположения столбцов чрезвычайно полезна, а иногда и необходима. Всем нам нужна возможность создавать уникальный дизайн-макет для отображения на рабочем столе без ущерба для согласованности потока контента на мобильных устройствах. Используя функцию Divi «Отключить включение», вы можете создавать совершенно разные раскладки для каждого устройства. Кроме того, с помощью нескольких строк настраиваемого CSS вы можете легко добавлять классы в свои строки и столбцы, чтобы упорядочить их в соответствии с вашими потребностями для мобильных устройств.

Я надеюсь, что этот пост поможет вам лучше контролировать свои мобильные дисплеи.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!