Дизайн и макеты.

ВОЗМОЖНОСТИ ДИЗАЙНА

Впечатляющий пользовательский опыт для любого размера экрана.

Дизайн и макеты

Эффекты и взаимодействия

Элементы дизайна и медиа

Настраиваемые размеры экранов

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

resize handle
resize handle
resize handle
Изображение веб-сайта журнала о дизайне под названием Daylong, отображаемое на брейкпоинте планшета. Там есть два квадратных изображения, выровненных по горизонтали, с белым текстом поверх каждого из них. Изображение слева представляет собой цветной градиент, а изображение справа - женщину в розовом платье.
Изображение веб-сайта журнала о дизайне под названием Daylong, отображаемое на мобильном брейкпоинте. На нем есть квадратное изображение женщины в розовом платье, а сверху размещен белый текст.
Изображение синего текста на белом фоне с надписью "Добавить брейкпоинт”.
Изображение веб-сайта журнала о дизайне под названием Daylong, отображаемое на брейкпоинте рабочего стола. Здесь есть три квадратных изображения, выровненных по горизонтали, с белым текстом поверх каждого из них. Изображение слева — цветной градиент, изображение в центре — женщина в розовом платье, а изображение справа — разноцветный пиксельный дизайн.
Изображение веб-сайта журнала о дизайне под названием Daylong, отображаемое на брейкпоинте планшета. Там есть два квадратных изображения, выровненных по горизонтали, с белым текстом поверх каждого из них. Изображение слева представляет собой цветной градиент, а изображение справа - женщину в розовом платье.
Изображение веб-сайта журнала о дизайне под названием Daylong, отображаемое на мобильном брейкпоинте. На нем есть квадратное изображение женщины в розовом платье, а сверху размещен белый текст.
Image of desktop, tablet, mobile and ellipses icons aligned horizontally with mobile highlighted.
resize handle
resize handle
resize handle
Изображение женщины с наушниками на голове на красном градиентном фоне. Открыто меню единиц измерения и выбрано значение Min/Max.
Изображение женщины с наушниками на голове на красном градиентном фоне. Открыто меню единиц измерения и выбрано значение Min/Max.
Изображение женщины с наушниками на голове на красном градиентном фоне. Открыто меню единиц измерения и выбрано значение Min/Max.
Изображение женщины с наушниками на голове на красном градиентном фоне. Открыто меню единиц измерения и выбрано значение Min/Max.

Сетка CSS

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

Два изображения, наложенные друг на друга на синем градиентном фоне. На переднем изображении - сайт портфолио, на котором на желтом фоне отображаются три фотографии. На заднем изображении - система управления контентом Editor X..
Два изображения, наложенные друг на друга на синем градиентном фоне. На переднем изображении - сайт портфолио, на котором на желтом фоне отображаются три фотографии. На заднем изображении - система управления контентом Editor X..

Репитер

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

Лейаутер

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

Изображение мужчины в металлической куртке с рюкзаком. Слева - раздел "Стыковка и поля" на панели инспектора Editor X.
Изображение мужчины в металлической куртке с рюкзаком. Слева - раздел "Стыковка и поля" на панели инспектора Editor X.

Фиксация

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

Изображение контейнера с текстом и скриншотом панели Слои слева, на синем текстурированном фоне.

Слои

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

Масштаб текста

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

Еще больше возможностей для дизайна и создания макетов:

Увеличенное изображение верхней левой части макета с заголовком, выделенным зеленым цветом.

Образцы

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

Три вектора макета и форма кнопки на сером фоне.

Ассеты дизайна

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

Изображение двух заголовков на белом фоне и значка карандаша рядом с каждым из них.

Менеджер стилей

Просматривайте и редактируйте шрифтовые и цветовые тем сайта. Здесь можно полностью настроить стили текста и цветовую палитру сайта.

Изображение пустых прямоугольных и овальных значков, выстроенных горизонтально на сером фоне.

Специальные меню

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

Изображение серого квадрата с синей мерой высотой 100 высоты области просмотра.

Высота вьюпорта

Установите любой раздел сайта на 100% высоты области просмотра. Таким образом, он всегда будет занимать всю высоту экрана, независимо от того, на каком устройстве он просматривается.

Изображение тумблера, показывающего Fixed и Fluid, расположенного внутри контейнера на сером фоне.

Фиксация, гибкость, масштабирование

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

Увеличенное изображение правой верхней части холста и белый текст, расположенный над серой цилиндрической формой.

Холдеры

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

Изображение выбранного контейнера с графически очерченным дизайном макета.

Стеки

Сохраняйте вертикальные поля между элементами в любом окне просмотра и не допускайте перекрытия на небольших экранах.

Изображение выбранного контейнера с белым квадратом, окруженным светло-зеленым фоном.

Отступы

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

Изображение синих иконок настольных компьютеров, планшетов и мобильных устройств, выровненных по вертикали, со стрелкой, направленной вниз, расположенной слева.

Правило каскада

Любые изменения стиля, сделанные на одном размере экрана, распространятся на меньшие размеры, но не наоборот.

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

Копирование в брейкпоинт

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

Изображение двух квадратных коробок с графически очерченными макетами на сером фоне.

Копирование форматирования

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

Изображение вертикально выровненных значков страницы и якоря на белом фоне.

Якоря

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

Изображение серых горизонтальных линий и синего текста на белом фоне.

Загрузка шрифта

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

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

Единицы измерения

Устанавливайте размеры элементов в пикселях, процентах или в соответствии с высотой или шириной области просмотра. Меняйте размеры столбцов и строк в сетке с помощью fr, calc и других параметров.

Смотреть все →

И это только малая часть возможностей Editor X.

Узнайте больше о продвинутых функциях платформы для создания, управления и запуска сайтов на Editor X.

Пакет инструментов для совместной работы.

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

Разработка.

Создавайте продвинутые веб-приложения используя JavaScript и API на Velo — открытой интегрированной среде разработки.

CMS без программирования.

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

Маркетинг и SEO.

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

Решения для бизнеса

Закрывайте любые потребности бизнеса с помощью надежных инструментов eCommerce — от решений для интернет-магазинов до систем подписки и бронирования онлайн.

resize handle
resize handle

Editor X

Остальное за тобой.