flexbe - профессиональный инструмент для дизайнеров и бизнеса, с которым справится каждый (часть 1)

«Не пытайся быть оригинальным. Просто старайся быть хорошим.» – © Пол Рэнд

Привет! Меня зовут Саша. Я системный аналитик flexbe и автор блога proflexbe.

В сети сейчас огромное количество обзоров на наш конструкторов сайтов flexbe, но большинство из них поверхностные или устаревшие. Я решил написать подробный разбор про flexbe - нашего детища, платформы, над развитием которой работаю последние годы. Надеюсь, будет интересно, ведь я старался.

Информации будет много, поэтому я разбил материал на 2 статьи:

В этой статье (можете сразу перейти к нужному разделу) кратко расскажу общую информацию и подробнее о возможностях нашей платформы как профессионального инструмента для дизайнера:

Кстати, можете сразу почитать про нас по ссылке ниже:

А пока поучаствуйте в опросе. Нам очень поможет :)

Нас часто спрашивают как давно мы на рынке. Поэтому кратко расскажу о том, как мы появились.

На дворе 2012 год. Происходит взрывной рост популярности плоского дизайна, который начал вытеснять скевоморфизм. Все наблюдают за расцветом 7-дюймовых планшетов Nexus 7 и iPad Mini, на рынок выходит iPhone 5 и Windows 8, растёт влияние социальных сетей, по новостям говорят про начало бума 3D-печати.

Но самой главной тенденцией 2012 года станет курс на создание универсальных решений по адаптации сайтов ко всем видам мобильных устройств. В это время созданием сайтов в основном занимались веб-разработчики. На рынке появляется новый игрок - flexbe. Тогда это был простой инструмент для создания лендинга из готовых блоков.

Сегодня в 2026 году flexbe стал настоящим профессиональным инструментом в руках дизайнера, бизнеса или маркетолога, пронеся сквозь года и сохранив свою главную фишку – простоту.

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

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

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

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

Их так много, что мы с ребятами даже не смогли сосчитать сколько же их на самом деле. Расскажите нам, если вы знаете :)

Изначально у нас был другой - более цветастый каталог секций, который не позволял сосредоточиться на структуре страницы. Команда несколько месяцев работала не покладая рук (и ног), чтобы сделать каталог нейтральным, позволяющим сосредоточиться на структуре и создать свой уникальный дизайн. И у нас это получилось!

Пожалуйста, отпишитесь в комментариях, как вам наши секции: чего не хватает, а что наоборот хотелось бы поменять? Нам интересно ваше мнение!

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

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

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

О них мы подробнее поговорим ниже в этой статье в разделе Гибридная сетка. Это одна из наших ключевых фишек. Обязательно посмотрите!

Да, наша платформа поддерживает функционал анимаций. Хотя некоторые «обзорщики» в упор его не видят. Но мы им поможем :)

Теперь переходим к самому интересному

С чего начинается создание сайта? Конечно, с выбора способа создания.

Нет, flexbe это не та платформа, где 99% функционала работает через AI. Мы ценим качество и понимаем, что нейросети на текущий момент не способны создавать масштабируемые сайты, которые удобно сопровождать и которые имеют хорошую SEO-оптимизацию.

Многие попадаются на уловку первоначального «вау-эффекта» от создания сайта через AI, а потом начинают задумываться о том как всё это дело сопровождать.

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

Если написать короткий запрос, например: «Небольшая стоматологическая клиника в Калининграде. Специализируется на установке протезов и пломб. Нужно сделать упор на гигиеническую чистку зубов», то получим рабочий сайт, который сразу же можно редактировать и опубликовать.

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

Мы настолько любим наш продукт, что буквально каждый из нас в команде является также и пользователем. Ведь как можно развивать продукт, если не пользуешься им? И мы кайфуем от этого. И хотим, чтобы вы получали такое же удовольствие от использования нашей платформы как и мы.

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

У нас есть боковые панели - слоёв и настроек стилей. Они позволяют использовать всю силу нашего редактора на 100%. Если вы делаете какие-то простые действия вроде редактирования текста в блоках или меняете блоки местами, то вы можете их скрыть, кликнув по иконке или нажав комбинацию клавиш Shift Tab. Панели также можно вызывать по отдельности: слоёв - Ctrl/Cmd L, настроек - Ctrl/Cmd O (для Win/Mac соответственно) и можно даже вытягивать из краёв экрана.

Боковые панели - это основной инструмент точной настройки сайта: слева вы управляете структурой страницы (секции, контейнеры, элементы, их иерархия и порядок), а справа настраиваете свойства выбранного объекта: от отступов, размеров и позиционирования до типографики, анимаций, адаптивного поведения на разных устройствах и кастомных параметров. При этом панель контекстная — она показывает только то, что относится к выбранному элементу, благодаря чему дизайнер не тонет в настройках, а получает полный контроль над визуалом и логикой блока, не выходя из редактора и не открывая десятки модальных окон.

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

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

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

Работа со шрифтами на платформе flexbe тоже не ограничивается стандартным набором: доступны шрифты из библиотеки Google Fonts, отдельная подборка дизайнерских кириллических шрифтов и загрузка файлов собственных шрифтов в проект.

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

Конечно же в редакторе есть инструменты, которые упрощают процесс вёрстки.

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

В опциях редактора можно включить отображение линеек и направляющих. Сами направляющие можно добавить двумя способами:

Направляющие можно перемещать или указать конкретную координату и она в неё встанет. Направляющие можно использовать вместе с линейками и отдельно от них.

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

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

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

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

Мы назвали такой подход - гибридная сетка.

«А что, так можно?» - спросите вы

«Да, можно» - отвечу я.

Более того, это позволяет экономить время и сильно упростить разработку сайта.

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

В качестве такого контейнера могут выступать разные уровни структуры страницы:

Фактически это означает, что элемент всегда привязан не к «абстрактной странице», а к конкретной области интерфейса.

Положение свободного элемента определяется координатами по осям X и Y относительно выбранного края родительского контейнера.

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

После выбора точки привязки указываются отступы по осям X и Y.

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

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

Это позволяет создавать, например:

Такие элементы остаются на месте даже при прокрутке страницы.

Координаты свободных элементов можно задавать в нескольких единицах измерения:

Абсолютная единица px полезна, когда нужен фиксированный размер.

Относительные единицы (%, vh, vw) позволяют делать интерфейс более адаптивным. Например, можно задать элементу ширину в процентах от экрана, чтобы он занимал одинаковую долю пространства независимо от размера устройства пользователя.

Поскольку мы позиционируем нашу платформу как профессиональный инструмент для дизайнера (и не только), то не могли не реализовать функционал группировки элементов в контейнеры с поддержкой автолейаутов.

Автолейаут - это контейнер, который сам расставляет элементы внутри себя. Элементы автоматически выстраиваются в ряд или колонку с заданными отступами.

Автолейаут можно создать для контейнера или для выделенных элементов. Выделите элементы и нажмите плюс в панели настроек или используйте хоткей «shift + A». А чтобы отключить «cmd/ctrl + shift A» (для Win и MacOS соответственно).

Есть специальная единица измерения - FILL. Она говорит элементу «занимай всё доступное пространство». Если задать FILL для нескольких элементов, то они равномерно распределят доступное пространство между собой.

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

Все элементы внутри автолейаута находятся на одинаковом расстоянии друг от друга. Задайте значение отступа - и оно автоматически применится ко всем элементам.

Автолейауты можно вкладывать друг в друга. Это позволяет настраивать их отдельно и собирать более сложные интерфейсы.

При изменении размера контейнера элементы автоматически сохраняют порядок, отступы и выравнивание.

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

Элементы в автолейауте могут выстраиваться в колонку, в ряд или в ряд с переносом на следующую строку.

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

А если вам нужно просто объединить элементы в том порядке как они находятся сейчас, чтобы работать с ними как с одним элементом, то на этот случай можно создать обычный контейнер без автолейаута (хоткей «cmd/ctrl G»).

Анимации на flexbe - это инструмент для создания интерактивных эффектов, которые привлекают внимание и усиливают UX.

Анимация состоит из шагов (изменение позиции, масштаба, прозрачности, поворота и т.д.) и запускается при разных действиях пользователя или взаимодействиях на странице.

Для перехода в режим анимации можно использовать любой удобный способ из следующих:

Основные триггеры запуска анимаций:

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

Настраиваются даже такие вещи как искажение, 3D-поворот и точка трансформации. Предусмотрен отдельный редактор плавности с пресетами.

Это не совсем про функционал. Но если вам интересна наша платформа и вы хотите собирать на нас крутые сайты (или уже собираете), то ждём вас на площадке наших экспертов.

Присылайте нам ваши лучшие работы, наши дизайнеры их рассмотрят и мы добавим вас в каталог экспертов!

Вот и подошёл к концу мой краткий рассказ про функционал нашей платформы. Пожалуйста, поделитесь в комментариях своими мыслями относительно возможностей нашей платформы.

Если вы дизайнер, напишите в комментариях - весь ли функционал про который я рассказал вы используете?

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

Если вам было интересно - дайте знать. До встречи в следующей статье!