Виды секций
Секции — основа страницы на Flexbe. Из них собирается структура сайта: первый экран, меню, блоки с преимуществами, формы заявок, квизы, отзывы, галереи, подвал и другие части страницы.
На Flexbe есть несколько видов секций:
- Базовые секции — готовые шаблоны блоков для быстрого создания страницы.
- Свободные секции — секции для дизайна с произвольным расположением элементов.
- Анимированные секции — готовые секции с настроенной анимацией и динамическими эффектами.
- Избранные секции — ваши сохранённые секции, которые можно использовать как личные шаблоны.
- Глобальные секции — секции, изменения в которых автоматически применяются ко всем копиям на сайте.
Каждый тип секций решает свою задачу. Одни помогают быстро собрать страницу по готовой структуре, другие дают больше свободы в дизайне, а третьи упрощают работу с повторяющимися блоками.
Базовые секции
Базовые секции — это готовые секции, над которыми уже поработали дизайнеры Flexbe.
Они подходят, если нужно быстро собрать страницу из готовых блоков и не начинать дизайн с нуля. Такие секции уже имеют продуманную структуру, отступы, расположение элементов и адаптацию под мобильные устройства.
Базовые секции отсортированы по задачам:
- шапка сайта;
- первый экран;
- преимущества;
- заявки;
- квизы;
- галереи;
- отзывы;
- тарифы;
- контакты;
- подвал сайта;
- другие типовые блоки.
Вы можете использовать базовые секции как шаблоны: добавить подходящий блок на страницу, заменить текст, изображения, кнопки и при необходимости изменить дизайн.
После добавления секция становится обычной частью страницы. Её можно редактировать: менять содержимое, стили, фон, отступы, расположение элементов и настройки адаптивности.
Базовые секции удобно использовать, когда нужно быстро собрать страницу с понятной структурой: лендинг, промостраницу, страницу услуги, страницу мероприятия или простой корпоративный сайт.
Свободные секции
Свободная секция — это секция с произвольным расположением элементов.
В такой секции элементы можно свободно перемещать, накладывать друг на друга, поворачивать и выстраивать в нужном порядке. Это удобно, если вы хотите сделать нестандартный дизайн, который не ограничен готовой структурой шаблона.
В свободной секции можно работать с:
- текстами;
- изображениями;
- кнопками;
- иконками;
- фигурами;
- видео;
- HTML-кодом;
- React-компонентами;
- другими элементами редактора.
Свободная секция подходит для сложных первых экранов, промоблоков, дизайнерских композиций, обложек, декоративных элементов и нестандартной вёрстки.
Свободная секция даёт больше возможностей для дизайна, но требует внимательнее работать с адаптивностью. После настройки десктопной версии проверьте отображение на планшете и мобильных устройствах.
Анимированные секции
Анимированные секции — это готовые секции с настроенными эффектами движения.
Они помогают сделать страницу более живой и визуально выразительной без ручной настройки сложной анимации. Такие секции можно использовать для акцентных блоков: первого экрана, презентации продукта, преимуществ, изображений, карточек, декоративных элементов или интерактивных частей страницы.
Анимированные секции уже содержат готовую механику движения. После добавления вы можете заменить контент, изменить оформление и адаптировать секцию под свой сайт.
Анимации на Flexbe могут запускаться при разных действиях и событиях:
- при загрузке страницы;
- при появлении секции в области видимости;
- при прокрутке;
- при наведении;
- при клике;
- при удержании;
- по триггеру.
Анимированные секции лучше использовать там, где нужно привлечь внимание пользователя. Не перегружайте страницу эффектами: если анимации слишком много, она может отвлекать от содержания.
Избранные секции
Избранная секция — это секция, которую вы сохранили для повторного использования.
Вы можете сделать избранной любую секцию и затем добавлять её на другие страницы сайта как собственный шаблон. Это удобно, если вы часто используете одни и те же блоки: например, форму заявки, блок с преимуществами, призыв к действию, отзывы или карточки услуг.
Избранная секция не связана со своими копиями. Если вы добавите её на несколько страниц, а потом измените одну из копий, остальные секции не изменятся.
Подробнее об избранных секциях
Избранные секции подходят для повторного использования дизайна, но не для синхронизации изменений. Если нужно, чтобы изменения применялись сразу на нескольких страницах, используйте глобальные секции.
Глобальные секции
Глобальная секция — это секция, которая синхронизируется между страницами сайта.
Если изменить одну глобальную секцию, изменения автоматически применятся ко всем её копиям. Это удобно для блоков, которые должны быть одинаковыми на разных страницах.
Чаще всего глобальные секции используют для:
- шапки сайта;
- меню;
- подвала;
- повторяющихся форм заявки;
- блоков с контактами;
- общих промоблоков;
- сквозных предупреждений или баннеров;
- одинаковых CTA-блоков на нескольких страницах.
Глобальные секции помогают не редактировать один и тот же блок вручную на каждой странице. Достаточно изменить секцию в одном месте, и сайт обновится везде, где используется эта глобальная секция.
Подробнее о глобальных секциях
Используйте глобальные секции для блоков, которые должны оставаться одинаковыми на разных страницах. Если на каждой странице нужна своя версия блока, лучше использовать обычную или избранную секцию.
Чем отличаются виды секций
| Вид секции | Для чего подходит | Синхронизируется между страницами |
|---|---|---|
| Базовая секция | Быстро собрать страницу из готовых блоков | Нет |
| Свободная секция | Создать уникальный дизайн без жёсткого шаблона | Нет |
| Анимированная секция | Добавить готовые визуальные эффекты и движение | Нет |
| Избранная секция | Сохранить секцию как личный шаблон | Нет |
| Глобальная секция | Использовать один и тот же блок на нескольких страницах | Да |
Как выбрать подходящий тип секции
Выбор секции зависит от задачи.
Если нужно быстро собрать страницу, начните с базовых секций. Они уже адаптированы и подходят для большинства типовых блоков.
Если нужен нестандартный дизайн, используйте свободную секцию. Она даёт больше контроля над расположением элементов и визуальной композицией.
Если хотите добавить движение и сделать блок более выразительным, выберите анимированную секцию.
Если вы сделали удачный блок и хотите использовать его повторно, сохраните его как избранную секцию.
Если один и тот же блок должен быть одинаковым на нескольких страницах, сделайте его глобальной секцией.
Пример использования разных секций на сайте
На одном сайте можно использовать разные виды секций одновременно.
Например, для лендинга услуги:
- первый экран можно собрать на основе анимированной секции;
- блок с преимуществами — из базовой секции;
- декоративный промоблок — в свободной секции;
- повторяющуюся форму заявки — сохранить как избранную секцию;
- шапку и подвал сайта — сделать глобальными секциями.
Так вы сможете быстро собрать страницу, сохранить единый стиль и при этом оставить место для индивидуального дизайна.
Что дальше
После выбора типа секции вы можете настроить её под свой сайт:
- изменить фон секции;
- настроить отступы;
- добавить или удалить элементы;
- изменить тексты, изображения и кнопки;
- настроить адаптивность;
- добавить анимацию;
- сохранить секцию в избранное;
- сделать секцию глобальной.
Полезные статьи:
