Оформление отдельной секции
Как изменить цветовую тему, фон, высоту и разделитель одной секции в редакторе страницы и чем это отличается от глобальных стилей сайта.
Каждая секция на странице может выглядеть по-своему: своя цветовая тема, фоновое изображение, высота и декоративный разделитель. Эти настройки действуют только на выбранную секцию — в отличие от глобальных стилей сайта, которые задают шрифты, палитру и кнопки для всего сайта.
Что такое секции и как их добавлять — в Секции: обзор и Добавление и удаление секций. Оформление секций подвала — в Подвал сайта.
Перед началом
- Откройте редактор:
ваш-id.photosquare.ru/config. - Откройте нужную страницу и нажмите Редактировать на панели над превью.
- Наведите курсор на секцию и на панели секции нажмите Редактировать.
[изображение: панель секции с кнопкой «Редактировать»]
Откроется панель оформления с вкладками Дизайн, Фон и Цвета. Изменения сразу видны в превью.
Глобальные стили и оформление секции
- Стили сайта (Стили в главном меню) — шрифты, палитра, кнопки, общие отступы. Подробнее — Стили сайта: обзор.
- Оформление секции — цветовая тема, фон, высота и разделитель этой секции на текущей странице (или в подвале — на всех страницах).
На вкладке Цвета вы выбираете, какая из цветовых тем применяется к секции. Чтобы изменить сами цвета темы (фон, текст, кнопки), нажмите карандаш на карточке темы — откроется редактор темы из раздела Цвета и цветовые темы. Правки темы затронут все секции и элементы сайта, где она используется.
Вкладка «Дизайн»
Здесь настраивают размер секции, декоративный разделитель и якорную ссылку.
Секция
- Заполнить экран — делает секцию выше, чтобы она занимала заметную часть экрана, а не только высоту блоков внутри. Удобно для первого экрана с заголовком и кнопкой, для фона с фото или когда нужен «воздух» вокруг контента. Если выключить — секция сожмётся по содержимому, без лишней пустоты.
- Высота (когда «Заполнить экран» включено) — насколько именно секция растянется по вертикали. Пресеты S, M и L — быстрый выбор; значение на слайдере или «⋯» — точная подгонка под ваш макет. Чем больше значение, тем выше секция и больше места вокруг текста и изображений.
- Выравнивание — куда «прижимается» содержимое внутри высокой секции: к верху, по центру или к низу. Например, заголовок по центру экрана — «По центру»; текст у нижнего края поверх фото — «Низ». Меняется только положение блоков, не их порядок.
[изображение: блок «Секция» — «Заполнить экран», высота и выравнивание]
Разделитель
Разделитель — декоративная форма на границе секции (волна, скос, зубцы и т. п.).
- Включите переключатель Разделитель.
- Нажмите Форма и выберите вид: без формы, закруглённая, мягкие углы, наклонная, фестончатая, волнистая, зазубренная или остроконечная. При необходимости задайте Ширину и Высоту формы.
- Настройте Обводку: без обводки, сплошная или пунктирная. Для обводки доступны Цвет, Толщина; для пунктира — длина штриха, интервал и стиль концов (квадрат или круг).
- При необходимости включите Отражение по горизонтали или вертикали (вертикальное — для фестончатой и зазубренной форм).
- Смещение сдвигает разделитель вверх или вниз относительно края секции.
[изображение: настройки разделителя и экран выбора формы]
Якорная ссылка
В блоке Якорная ссылка задайте короткий идентификатор секции — по нему можно ссылаться с других страниц или из меню. Подробнее — Якорные ссылки на секции.
Вкладка «Фон»
На этой вкладке задают фоновое изображение секции.
- Загрузите изображение или сгенерируйте его с помощью ИИ.
- При необходимости укажите точку фокуса, чтобы при обрезке на разных экранах оставалась нужная часть кадра.
- Ширина фона: На всю ширину (от края до края) или С отступами (изображение с полями по бокам).
- Прозрачность наложения — насколько сильно цвет темы секции перекрывает изображение (0–90%). Цвет наложения берётся из выбранной на вкладке «Цвета» темы.
[изображение: вкладка «Фон» с загрузкой изображения и настройками ширины]
Чтобы убрать фон, удалите изображение в загрузчике.
Вкладка «Цвета»
Выберите одну из цветовых тем для секции — карточки показывают, как будут сочетаться фон и текст. Активная тема выделена рамкой.
Карандаш на карточке открывает редактор темы в разделе «Стили» → «Цвета» — там меняются сами цвета палитры для всего сайта, а не только этой секции.
[изображение: вкладка «Цвета» с карточками тем]
Особые типы секций
- Секция-галерея — первая вкладка называется Галерея (макет сетки или слайд-шоу, колонки, пропорции). Вкладки «Фон» нет. Подробнее — Настройки секции-галереи.
- Лента записей блога (системная секция на странице блога) — вкладки «Дизайн» и «Цвета» доступны как у обычной секции, вкладки «Фон» нет.
Сохранение
Изменения видны в превью сразу, но на опубликованном сайте появятся только после сохранения страницы. Нажмите Сохранить на панели над превью, когда закончите правки.
Если вы редактировали цвета темы через карандаш на вкладке «Цвета», сохраните и эти изменения — кнопка Сохранить в шапке панели «Стили сайта», когда там есть несохранённые правки.