Разделы и элементы

Каждая страница сайта — это стопка разделов: hero вверху, затем услуги, цены, контактная форма и так далее. Особый раздел, Контейнер, содержит более мелкие элементы (заголовки, тексты, кнопки, изображения…), которые вы свободно располагаете по колонкам.

Типы разделов

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

Общие настройки всех разделов

Выберите раздел и откройте Оформление:

• Фон раздела: без фона, карточка (чуть светлее), свечение или акцентный цвет.
• Отступ сверху/снизу: компактный, обычный или просторный.
• Выравнивание заголовка: по умолчанию, по левому краю или по центру.
• Фоновое изображение раздела и Затемнение фонового изображения.
• Размер и отступы: ширина, высота, внешний и внутренний отступ раздела (см. Размер и отступы ниже).
• ID секции: имя, которое используется в ссылках, например #contact. Ссылка в меню на #contact прокручивает страницу к этому разделу. Если вы переименуете ID, ссылки на него обновятся автоматически.

У многих разделов на этой же вкладке есть и собственные настройки стиля (колонки, стиль карточек, форма изображения и т. д.).

Добавление раздела

1. На вкладке Структура нажмите на раздел, после которого должен появиться новый (или ничего не выбирайте, чтобы добавить в конец).
2. Нажмите Добавить секцию под списком или откройте вкладку Добавить справа.
3. В блоке Готовые секции нажмите на нужный тип.

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

Управление разделами

В списке Структура у каждой строки раздела есть:

• ручка перетаскивания слева: тяните вверх или вниз, чтобы изменить порядок;
• иконка глаза: Скрыть с сайта / Показать на сайте. Скрытые разделы остаются в редакторе (приглушёнными), но посетители их не видят;
• меню ⋯: Дублировать, Переместить вверх, Переместить вниз и Удалить секцию.

Удаление требует подтверждения, а вернуть раздел всегда можно через Ctrl+Z.

Элементы: собственная раскладка

Раздел Контейнер (свободное содержимое) позволяет собрать любую раскладку. Выберите Расположение колонок (1, 2, 3 или 4 колонки, либо 2/3 + 1/3 и 1/3 + 2/3), затем заполните колонки элементами.

Типы элементов

Добавление элементов

Откройте вкладку Добавить. В блоке Элементы можно:

• Перетащить элемент в предпросмотр. Линия покажет, куда он попадёт: в колонку, в блок или между разделами (если отпустить между разделами, для элемента создастся новый раздел Контейнер).
• Нажать на элемент, чтобы добавить его сразу после выбранного элемента (или в первую колонку выбранного Контейнера). Если Контейнер не выбран, добавляется новый раздел Контейнер.

Редактирование, перемещение, дублирование и скрытие элементов

Нажмите на элемент в предпросмотре, чтобы выбрать его. Вкладка Изменить покажет его поля и панель инструментов:

• Переместить вверх / Переместить вниз (стрелки);
• В предыдущую колонку / В следующую колонку (видны, когда в Контейнере больше одной колонки): элемент переносится в конец этой колонки и остаётся выбранным;
• Показать / Скрыть (глаз) — скрыть от посетителей без удаления;
• Дублировать;
• Удалить;
• ✦ AI (элементы с текстом): открывает поле AI для текста элемента. См. Редактор.
• стрелка назад возвращает к разделу целиком.

Можно также изменить Тип элемента (например, превратить Текст в Карточку) и Колонка, в которой он стоит. Поле Выравнивание выравнивает элемент по левому краю, по центру или по правому краю.

Размер и отступы

У каждого элемента, каждого раздела и каждой колонки Контейнера есть панель Размер и отступы: она находится в настройках элемента и на вкладке Оформление раздела. Пустые поля сохраняют вид темы, поэтому ничего не меняется, пока вы не введёте значение.

• Ширина, Макс. ширина и Высота: введите число и выберите единицу рядом: px, rem, em, %, vw, vh или auto. Для текста, кнопок и контейнеров высота — минимальная (более длинное содержимое всё равно помещается); изображения и видео получают ровно эту высоту, и картинка её заполняет.
• Внешний отступ (внешнее кольцо) — пространство вокруг элемента; Внутренний отступ (внутреннее кольцо) — пространство внутри него, между краем и содержимым. В каждом кольце четыре поля: сверху, снизу и две стороны. Вводите 24 (пиксели), 2rem, 5% или auto (только внешний отступ: auto с обеих сторон центрирует элемент, у которого задана ширина).
• Кнопка с цепочкой у кольца задаёт одно значение сразу для всех четырёх сторон.
• В любом поле ↑ и ↓ меняют значение на 1 (Shift + стрелка — на 10; для rem и em — на 0,1 и 1).
• Пока курсор над панелью, предпросмотр показывает внешний (оранжевым) и внутренний отступ (зелёным) выбранного элемента.
• Сбросить очищает значения устройства, которое вы редактируете.

Устройства. Три значка вверху панели (Компьютер, Планшет, Телефон) работают как кнопки предпросмотра: выберите один, и предпросмотр переключится на этот размер. Значения, которые вы затем вводите, действуют только для этого устройства. Планшет использует значения компьютера, пока вы не зададите свои, а телефон — значения планшета (или компьютера); унаследованные значения видны серым в пустых полях, а точка на значке показывает, у каких устройств есть свои значения. Планшет — экраны шириной до 1023 px, телефон — до 640 px.

Колонки. На вкладке Оформление Контейнера в Размер и отступы колонок есть кнопка для каждой колонки (К1, К2…): выберите одну и задайте её размер и отступы.

Полезно знать:

• Элемент никогда не бывает шире места, в котором находится, поэтому большая ширина в пикселях не вызывает горизонтальной прокрутки на телефоне.
• Стороны — «начало» и «конец», а не лево и право: в арабском и других языках с письмом справа налево отступы отражаются автоматически.
• Ширина, высота и внутренний отступ кнопки меняют саму кнопку; внешний отступ её сдвигает.

Элемент «Блок / сетка»

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

1. Добавьте элемент Блок / сетка.
2. В его настройках выберите Расположение: Друг под другом, В ряд или сетка из 2, 3 или 4 колонок.
3. Выберите Вид блока: без рамки, карточка, стекло или акцентный цвет. Настройте Внутренний отступ и Расстояние между элементами.
4. Добавьте элементы в блок: перетащите их на блок в предпросмотре или добавьте в списке Элементы в блоке.

Блок не может содержать другой блок (только один уровень вложенности).

Изображения и бесплатные фото

Каждое поле изображения (главное изображение, фон раздела, галерея, изображение карточки…) открывает окно выбора изображения, когда вы нажимаете Выбрать. В нём две вкладки:

• Мои изображения: изображения, которые вы загрузили (перетащите их в окно или нажмите Загрузить; JPG, PNG, WebP, AVIF или GIF до 10 МБ), а также бесплатные фото, которые вы уже использовали.
• Бесплатные фото: миллионы бесплатных лицензированных фотографий с Unsplash или Pexels. Их можно использовать на сайте без оплаты.

Чтобы использовать бесплатное фото:

1. Нажмите Выбрать в поле изображения и откройте вкладку Бесплатные фото.
2. Опишите фото несколькими словами на английском, например bakery counter, yoga studio или mountain lake. Если месту нужна определённая форма, выберите её (горизонтально, вертикально или квадрат).
3. Нажмите на фото. Оно добавится в ваши изображения и сразу подставится в поле.

Тот же поиск есть в панели управления в разделе Изображения → Бесплатные фото.

Полезно знать:

• Под каждым результатом указано имя фотографа, а в подвале вашего сайта перечислены фотографы, чьи снимки на нём показаны (например, Фото: Jane Doe на Unsplash). Этого требуют фотосервисы, поэтому не удаляйте подпись.
• Фото с Unsplash остаются на быстрых серверах Unsplash и показываются оттуда; фото с Pexels копируются в ваши изображения.
• Сайты, созданные из шаблона или ИИ-конструктором, могут сразу содержать бесплатные фото, подобранные под ваш бизнес. Замените их своими в любой момент.
• Ваши собственные фото (ваша команда, ваши товары, ваше место) обычно продают лучше стоковых. Используйте бесплатные фото для настроения, фонов и мест.

Вкладка Бесплатные фото появляется, только если на платформе включён фотосервис.

Советы

• У каждого раздела должна быть одна понятная цель: один заголовок, одна мысль, одна кнопка.
• Используйте Дублировать, чтобы быстро создавать единообразные разделы, а потом меняйте тексты.
• Если раздел может понадобиться снова (например, сезонное предложение), лучше скройте его, а не удаляйте.