0
47
2019-08-27

Elementor - Как отобразить несколько колонок в строку на планшетах без разрывов и переносов

Рассмотрим как можно отобразить блоки на планшетах без разрывов и переносов колонок блоков.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Elementor отличный плагин но если Вам нужно отобразить 3 колонки в одной секции на ПК а для планшетов нужно отобразить 2, то третий блок будет перенесен на новую строку… Давайте сделаем так чтобы у нас все было красиво как на ПК так и на мобильных устройствах.

Создание колонок и работа с секцией

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

Выбираем структуру

Теперь продублируйте колонку до того количества колонок которое вам необходимо. В моем примере их будет 9 штук.

Дублируем колонку в Elementor

Для того что бы было более наглядно, я добавил в каждую колонку виджет заголовка с номером колонки.

Количество колонок

Теперь идем в настройки секции и добавляем уникальный класс “Elementor_custom columns” (благодаря которому у нас появится возможность управлять шириной колонки).

Применяем класс

CSS Стили

Теперь сохраняем страницу, переходим к её просмотру и применяем CSS стили которые указаны ниже (для этого используйте режим разработчика F12):

/* 
elementor-column 
https://github.com/elementor/elementor/issues/2218#issuecomment-410207685
*/
.Elementor_custom .elementor-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* PC */
.Elementor_custom .elementor-top-column {
    width: 33% !important;
}

/* Tabs */
@media (max-width: 1025px) {
.Elementor_custom .elementor-top-column {
    width: 50% !important;
  }
}

/* Mobiles */
@media (max-width: 700px) {
.Elementor_custom .elementor-top-column {
    width: 100% !important;
  }
}

Как видите здесь начинается самое интересное, мы указываем ширину каждой колонки в зависимости от ширины (разрешения) экрана и у нас нет никаких переносов или же пустых мест.

Теперь блоки отображаются красиво на ПК в 3 колонки:

Elementor - 3 колонки на ПК

На планшетах в две колонки:

Elementor - 2 колонки на Планшете

И на мобильных устройствах в одну:

Elementor - 1 колонка на мобильном

Итоги

Мы рассмотрели как можно отобразить не стандартное количество колонок с сохранением красивого вида страницы при помощи плагина Elementor.