Как устроен Flexbe

В этой статье мы расскажем, из чего состоит конструктор Flexbe.

Шапка редактора

Шапка редактора это чёрная панель в верхней части редактора. Она является основным способом навигации по вашему сайту.

Верхняя панель шапки отвечает за настройки сайта и профиля.

Отсюда вы можете перейти в список доступных вам Сайтов и Страниц. Во вкладке Товары можно управлять каталогом товаров и создавать товары с вариантами. В разделе Заявки хранятся все заявки от пользователей сайта. В Аналитике можно посмотреть статистику посещения сайта и конверсию в заявки. Настройки сайта — это обширный раздел, где можно настроить язык сайта, валюту, управления доменами, подключение интеграций, управление интернет-магазином, шрифты и многое другое.

Также на верхней панели есть раздел Оплата, где можно настроить тарифный план. В разделе Помощь можно связаться со службой поддержки или перейти в раздел инструкций по конструктору или к обучающим материалам. В настройках информации об аккаунте находятся настройки профиля.

Нижняя панель шапки отвечает за текущую редактируемую страницу. Панель отображается только если вы редактируете страницу вашего сайта.

На нижней панели вы можете добавить и настроить всплывающие Окна, поменять Шрифты на странице. В Настройках страницы можно поменять заголовок и адрес страницы, настроить SEO-описание и визуальный вид ссылки на страницу в социальных сетях.

Также в нижней панели можно переключиться на адаптивный режим, перейти в настройки редактора, посмотреть историю сохранений, отменить свои действия на странице, перейти в предпросмотр страницы.

Сайт

Ваш сайт может состоять из множества страниц. Количество страниц, которые вы можете создавать на сайте — неограниченно. Все они будут объединены единым доменом.

Страница

Страница — одна из составляющих сайта. В рамках одного сайта у отдельной страницы не может быть своего домена.

Пять ссылок в верхней панели: Страницы, Товары, Заявки, Аналитика, Настройки — относятся к выбранному сайту. Настройки этих разделов работают в рамках всего сайта.

Секция

Страница состоит из секций. У каждой секции индивидуальные настройки: структура, количество колонок, фон.

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

В конструкторе есть шаблоны базовых, свободных и анимированных секций.

Базовые секции

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

Свободные секции

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

Анимированные секции

Анимированные секции это базовые и свободные секции, но к ним применена анимация. Поэтому они вынесены в отдельный раздел.

Вы можете сочетать на странице базовые и свободные секции, а также применять к ним анимацию.

Любую секцию можно сделать избранной, так она станет шаблоном, который можно добавлять на страницы сайта. Также любую секцию можно сделать глобальной и использовать на всех страницах сайта. Ее преимуществом в том, что изменения в одной глобальной секции автоматически применяются ко всем остальным ее копиям.

Контент-зона

Секция состоит из контент-зон. Контент-зона — это контейнер для группы элементов.

В режиме редактирования контент-зоны выделяются синей рамкой при наведении.

У контент-зоны можно задать фон, отступы по краям, вертикальное и горизонтальное выравнивание.

При удалении контент-зоны удаляются все элементы внутри.

Элемент

Элемент — это минимальная единица контента: текст, изображение, кнопка, метка.

Для добавления элемента нажмите на в левой части контент-зоны.

Откроется каталог элементов — выбирайте нужный и добавляйте его на страницу.

Элементы бывают статичные и абсолютные. Деление зависит от типа позиционирования элемента.

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

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

Редактирование

Визуальная система редактирования позволяет сразу видеть изменения на сайте.

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

Просто наведите мышку и нажмите на элемент который хотите изменить, чтобы увидеть Редактор этого элемента.

Текст на Flexbe редактируется прямо на странице. Наведите на текст или выделите любое слово и откроется редактор текста.

Кнопки, изображения, логотипы и другие визуальные элементы настраиваются в отдельных всплывающих окнах — наведите мышку, кликните по значку настроек и откроется редактор элемента.

Работая в редакторе, вы сразу видите, как меняется внешний вид сайта и как его будут видеть посетители.