«
»
ElementorWEBWordPressПлагины

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

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.

Связанные записи
WordPressВсе для разработки плагиновПримеры

Пример реализации ajax логирования (js,php примеры кода)

WordPressПлагины

Опросы (голосование) в WordPress или как получить обратную связь от ваших посетителей

WEBПолезные сайты

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES