Help

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

Область редактора условно разделена на 4 части.

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

Рассмотрим подробнее каждый блок

Обертки

Общая

Блок, в который завернута вся форма. Тут имеет смысл поставить главный цвет, шрифт и размеры.

Шапка

Блок в который завернута шапка формы. Имейте ввиду, что если шапка стоит в верхней части сайта (а в 99.9% это будет именно так), то она вытаскивается за рамки тела формы.

Тело

Блок в который завернуты все поля для заполнения и кнопка для отправки.

Заголовок

Это, как правило, крупная надпись. Находится внутри шапки формы.

Подзаголовок

Это, как правило, крупная мелкая надпись. Находится внутри шапки формы, под заголовком.

Вокруг поля

Блок, в котором находится название поля, само поле и его описание. Скорее всего редактирование этого блока вам не понадобится, но тем не менее возможность есть.

Обертки всплывающей

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

Наследуются:

  • Все настройки из раздела "поля"
  • Все настройки из раздела "надписи"

Не наследуются:

  • Настройки шапки (включая заголовок и подзаголовок)
  • Настройки тела формы

Оверлей

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

Всплывающая

То же самое, что и "Общая" в разделе "Обертки", но для всплывающей формы.

Шапка

То же самое, что и "Шапка" в разделе "Обертки", но для всплывающей формы.

Тело

То же самое, что и "Тело" в разделе "Обертки", но для всплывающей формы.

Заголовок

То же самое, что и "Заголовок" в разделе "Обертки", но для всплывающей формы.

Подзаголовок

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

Вокруг поля

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

Надписи

В данном разделе хранятся все надписи, связанные с полями.

Название

Блок, который оборачивает все названия полей. 

Подпись

Блок который оборачивает подписи у полей.

Ошибка

Блок который отображаемые ошибки, рядом с полями.

Поля

Здесь находятся все настройки связанные с полями, которые находятся в теле формы (за исключением ярлыка).

Строка

Параметры от данного поля распространаются на выбиралку в режиме селектора и на однострочные тектовые поля.

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

Имеет два состояния:

  • Обычное
  • Сфокусированное (:focus)

Текст

Параметры от данного поля распространяются на многострочное текстовое поле.

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

Имеет два состояния:

  • Обычное
  • Сфокусированное (:focus)

Чекбокс

Параметры от чекбокса.

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

Параметры разделяются на 4 группы:

  • Обычный
    Чекбокс в своем обычном состоянии. не отмеченный, без фокусировки.
  • Отмеченный
    Чекбокс в отмеченном состоянии, с видимой галочкой.
  • Выделенный
    Данное состояние появляется, если пользователь перебирает поля при помощи клавиши TAB.
  • Галочка
    Галочка внутри чекбокса. Ставится из шрифты, а потому и имеет шрифтовые параметры.

Радио

Параметры от радиокнопки
Так как мы не используем стандартную радиокнопку, то набор параметров может слегка удивить (но после чекбокса это нас уже не удивит!).
Параметры разделяются на 4 группы:

  • Обычный
    Чекбокс в своем обычном состоянии. не отмеченный, без фокусировки.
  • Отмеченный
    Радиокнопка в отмеченном состоянии, с видимой точкой.
  • Выделенный
    Данное состояние появляется, если пользователь перебирает поля при помощи клавиши TAB.
  • Точка
    Точка внутри чекбокса. В отличае от чекбокса, устанавливается при помщи блока, спозиционированного абсолютно внутри радиокнопки.

Ошибка

Параметры, которые накладываются на поле, если у него появляется ошибка при отправке. Как правило имеет смысл переназначить фон или рамку.

Кнопка

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

Каждый слой имеет 4 состояния:

  • Обычное
  • Наведена мышка (:hover)
  • Нажата (:active)
  • Идет загрузка (.btnLoading)
    Для генерации гифок для загрузки, рекомендуем использовать Chimply

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

Ярлык

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

Файл (поле)

Стили от поля для загрузки файлов методом Drag&Drop.

Файл (кнопка)

Стили от кнопки "обзор"