Сетка и Колонки

Использование

Колоночная сетка SmartKit позволяет разместить компоненты в один ряд, применить желаемую ширину колонок и зазоры между ними. Возможности сетки SmartKit шире чем у стандартной сетки WPBakery Page Builder.

Можно настроить выравнивание элементов колонки, а также поведение колонки при различной ширине экрана.

Колонка — 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Колонка — 1/2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Колонка — 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Кроме стандартных значений ширины колонки, кратных 1/12, также доступны значения 20%, 40%, 60%, 80% и авто-ширина.

Чтобы задать колонке стиль (фон, границу, тень), поместите внутрь колонки компонент Обёртка и задайте ему соответствующий стиль.

Колонка — 1/4

Колонка — 1/2

Колонка — 1/4

Колонка — 1/3

Колонка — 1/3

Колонка — 1/6

 1/12

 1/12

Колонка — 20%

Колонка — 20%

Колонка — 20%

Колонка — 40%

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

Зазор между колонками

Можно настраивать значение зазора между колонками.

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Вертикальные отступы

Если хотите визуально отделить ряд элементов от контента, расположенного снизу и сверху, задайте для ряда вертикальные отступы.

Вертикальное размещение контента

Доступно 4 варианта вертикального размещения контента внутри колонок:

Сверху

Колонка

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

По центру

Колонка

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Снизу

Колонка

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Растянуть

Колонка

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Горизонтальное размещение контента

Данная опция актуальна, когда общая ширина колонок меньше ширины ряда. Доступно 4 варианта горизонтального размещения контента:

Слева

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

По центру

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Справа

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Равномерно

Колонка — 1/4

Колонка — 1/4

Колонка — 1/4

Растянуть по горизонтали

Имеется возможность вывести ряд за пределы контейнера секции. Ряд можно растянуть до левого или правого края экрана или на всю ширину экрана.

This is custom heading element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

WordPress
WordPress

This is custom heading element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is custom heading element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

WordPress

Авто-ширина у колонок

Если не хотите жестко привязывать контент к сетке, но хотите использовать функции компонентов сетки (вертикальное выравнивание, адаптивность, зазоры), используйте авто-ширину колонок.

Колонка 1 — Width: auto

Lorem ipsum

Колонка 2 — Width: auto

Lorem ipsum dolor sit amet

Колонка 3 — Width: auto

Lorem ipsum dolor sit amet, consectetur

Колонка 1 — Width: auto

Lorem ipsum

Колонка 2 — Width: auto

Lorem ipsum dolor sit amet

Колонка 3 — Width: auto

Lorem ipsum dolor sit amet, consectetur

Колонка 1 — Width: auto

Lorem ipsum

Колонка 2 — Width: auto

Lorem ipsum dolor sit amet