Обзор сервиса, возможности и пошаговая инструкция
Framer — no-code конструктор сайтов, сочетающий фишки Tilda, Webflow и других аналогичных сервисов. Среди его преимуществ: продвинутая анимация без кода, автоматическая адаптация под разные экраны, высокая скорость загрузки сайтов и встроенная CMS.
В статье показываем, как работать с платформой даже без навыков дизайна и программирования.
Через конструктор можно собирать как лендинги, так и многостраничные сайты, а также управлять контентом.
Главные фишки:
Бесплатной версии Framer достаточно для проработки дизайна и размещения сайта в сети, но нужно учитывать ограничения.
Например:
В бесплатной версии можно создать портфолио, учебный проект, научиться работать во Framer, в лучшем случае — сделать сайт для малого бизнеса.
Для коммерческих целей платформа предлагает 3 платных тарифа:
Важно Framer — зарубежный сервис, недоступный с российских IP-адресов. Оплата российскими картами напрямую также невозможна.
Заходим на сайт, нажимаем кнопку Start for free и регистрируемся через почту.
После этого платформа предложит создать первый сайт: с чистого листа или по шаблону. Для удобства возьмем шаблон.
В рабочем поле — образец сайта в 3 версиях: для ПК, планшета и смартфона. В интерфейсе сверху находятся инструменты, слева — страницы и слои, внизу — панель управления и навигации.
Разберем подробнее.
Используем верхнее меню.
Заходим в раздел Insert («Вставка») в верхнем меню и выбираем, что хотим вставить: секцию, меню, иконку, картинку, видео, слайдшоу или другое.
Выбираем элемент и перетаскиваем в нужное место.
Пример блока — стандартная обложка лендинга с заголовками и кнопками + виджет для YouTube-видео:
А это — плитка с картинками:
Через раздел Layout выбираем способ расположения элементов: фрейм, сетка, два рядом, плитка.
Для добавления текста нажимаем на отдельную кнопку Text в меню, ставим курсор в нужное место и пишем:
В разделе Vector можно найти стандартный набор фигур в векторном формате: прямоугольник, овал, звезда и другие.
При клике на объект справа появляется панель, где можно настроить размер, эффекты, видимость, границы и прочее.
В самом верху видим Position, «Тип позиционирования», всего их 4:
Дальше идет раздел Size — «Размеры», где можно регулировать ширину и высоту объекта.
Из примечательного здесь — поле Min Max для настройки максимальной/минимальной высоты ширины. Можно задать абсолютное или относительное значение, в пикселях или процентах соответственно. Тогда элемент не станет больше или меньше указанного, если контейнер или другой контент попытается его сжать.
Эта фишка особенно полезна при работе с текстом: даже в мобильной версии надписи останутся читаемыми.
Так меняется контейнер при настройке Min Max:
В разделе Styles («Стили») можно управлять 3 настройками:
Z Index позволяет управлять слоями в пару кликов.
В разделе Transforms («Трансформация») можно менять сам объект: масштабировать, наклонять, искривлять, поворачивать и т.д.
Внизу панели — блок настройки внешнего вида: радиус скругления углов, цвет и толщина границы, тени. Для примера мы установили R = 20 градусов и голубую границу толщиной 5 px.
Для примера возьмем кнопку — она представляет собой фигуру с наложенным на нее текстом.
Нажимаем на текст и находим в меню справа блок Effects. Протестируем несколько эффектов.
Анимация текста — Text → Trigger On Appear:
Появление снизу — Scroll Animation → Scale Out Bottom:
Пульсация при клике — Press:
В верхнем меню находим раздел CMS, нажимаем на него и попадаем в коллекции.
Шаблон включает одну коллекцию с 4 статьями для блога. В этом разделе можно увидеть опубликованные и черновые статьи и краткую характеристику по каждой.
Для публикаций есть карточка с подробной информацией: категория, название, обложка, содержание.
Готовая база контента упрощает управление сайтом: вся информация сосредоточена в одном окне.
Находим в разделе Insert инструмент Wireframer, в текстовом поле пишем промпт. Просим выполнить любую задачу, например, сгенерировать текст с описанием продукта, который подводит к кнопке целевого действия.
Wireframer написал абзац:
ИИ может создавать блоки, располагать их в нужном порядке и практически генерировать сайт за пользователя.
Для начала зададим уникальный URL. Кликаем по иконке «Настройки» в правом верхнем углу. На панели слева выбираем пункт Domains («Домены»). В рабочем поле находим блок Custom и вбиваем свой URL.
На бесплатном тарифе доменное имя будет framer.website.
Нажимаем синюю кнопку Publish в правом верхнем углу — любуемся сайтом.
Оценить возможности платформы и найти готовые шаблоны можно в библиотеке. В этом разделе оставим небольшую подборку для вдохновения.
С видеообложкой и медленной анимацией — чтобы пользователи не пропустили ни одной детали:
Темный минималистичный дизайн в духе современного digital:
С акцентом на продающие слоганы и инфографику — вариант для бизнеса:
С дизайном под рисунок от руки и без анимации — для тех, кто ищет спокойствия и легкости:
Мы рассказали, как создать сайт на Framer с нуля и без опыта в дизайне и программировании. Творите, реализуйте идеи и прокачивайте проекты! А если возможностей покажется недостаточно, изучите другие no-code платформы.
При покупке или продлении тарифа «Стандарт» в Unisender добавляем крутые бонусы:
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
