Редактор Studio: Настройка сетки секций

5 мин. чтения
В редакторе Studio, секции содержат встроенную сетку, состоящую из одной ячейки (в которой размещается секция). Разделите раздел на несколько ячеек, чтобы придать контенту более адаптивную структуру. На выбор предлагаются различные настраиваемые лейауты. 
Содержание:
Хотите добавить ячейки в контейнер?
Вы можете применить расширенную сетку CSS к контейнеру.

Добавление ячеек в секцию

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

Чтобы добавить ячейки в секцию:

  1. Выберите соответствующую секцию в редакторе.
  2. Нажмите на выпадающий список Пусто в верхней части секции. 
Скриншот панели инструментов, открывающейся при выборе секции с выпадающим списком доступных лейаутов
  1. Выберите раскладку: Ряды, Колонки, Коллажи т. д.
    Совет: Вы можете изменить раскладку в любое время - это не приведет к перемещению элементов.
  2. (Необязательно) Перетащите элементы в соответствующие ячейки.

Смена мест ячеек в сетке

Быстро и эффективно реорганизуйте сетку секций, поменяв ячейки местами. С помощью перетаскивания вы можете мгновенно поменять местами две ячейки – они тут же займут место друг друга в сетке. 

Чтобы поменять ячейки местами:

  1. Выберите соответствующую секцию в редакторе.
  2. Выберите первую ячейку.
  3. Удерживайте значок Потяните  вверху ячейки, одновременно перетаскивая её в другую ячейку.
    Совет: когда вы видите указание Поменять контент местами, это означает, что вы можете отпустить ячейку.
Перетаскивание двух ячеек в сетке секции

Настройка сетки cекции

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

Чтобы настроить сетку секции:

  1. Выберите соответствующую секцию в редакторе.
  2. Выберите способ настройки сетки:
Примечание:
В настоящее время нет возможности создать копию ячейки. 

Переход на расширенную сетку CSS

При переходе на расширенную сетку CSS вы сможете более точно управлять лейаутами на разных размерах экранов. Вы можете выбрать количество рядов и колонок, а также задать их размер с помощью адаптивных измерений (например, fr, Мин/ Макс, %).

Чтобы переключиться с сетки секций на сетку CSS:

  1. Выберите соответствующую секцию в редакторе.
  2. Нажмите стрелку Открыть инспектор  в правом верхнем углу редактора.
  3. Прокрутите вниз до раздела Лейаут.
  4. Нажмите Перейти рядом с Расширенной сеткой CSS.
  5. Нажмите Перейти.
Скриншот, показывающий возможность перейти к расширенной сетке в панели инспектора

Была ли статья полезна?