Настройки оформления ^#3420

Настройки оформления позволяют отредактировать внешний вид кнопок, текстов и элементов форм на странице - изменить цвет, оформление (рамки, тени), поменять шрифты.

Данные настройки доступны только на лендингах, созданных на основе шаблона Nordic Lidda.

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

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

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

Слева отобразится перечень доступных настроек. 

Рассмотрим каждую из вкладок подробнее.

Это первая вкладка настроек - она открывается по умолчанию. На ней вам будут доступны для редактирования два вида цветов:

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

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

Откроется окно выбора цвета. Тут вам необходимо:

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

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

В конце не забудьте сохранить изменения.

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

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

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

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

Откроется окно с несколькими блоками настроек. Разберем каждый блок.

Текст - тут вы сможете изменить текст, используемый для подписи кнопки, а именно:

• Выбрать шрифт,
• Задать размер шрифта,
• Изменить размер строки с текстом относительно выбранного размера шрифта (чем больше значение, тем больше кнопка).
• Выбрать цвет для текста кнопки - тут вам также будет доступна палитра, с возможностью задать цвет, оттенок и прозрачность.
• Задать форматирование текста - выделить жирным или курсивом.

Фон - в этом блоке вы можете определить фоновый цвет для кнопки. Задайте тип заливки:

• Без заливки - кнопка без цвета,
• Сплошной цвет - тут вам будет необходимо выбрать один цвет из палитры (и задать прозрачность при необходимости),
• Градиент - выберите два цвета, в которые будет окрашена кнопка, а также угол уклона/перехода между ними.

Рамка - позволяет включить и настроить обводку для кнопки.

• Для начала включите рамку с помощью соответствующей настройки.
• Задайте цвет и прозрачность рамки в блоке "Цвет".
• Определите толщину рамки.
• Укажите радиус углов:
  • Общий - одинаковый для всех углов рамки,
  • Отдельный для каждого угла.

Тень - позволяет включить и настроить тень, падающую от кнопки.

• Для начала включите отображение тени с помощью соответствующей настройки.
• Задайте цвет и прозрачность тени в блоке "Цвет".
• Укажите сдвиг тени относительно самой кнопки - по вертикали и по горизонтали.
• С помощью бегунка "Размытие" задайте уровень расплывчатости, "нечеткости" тени.
• С помощью бегунка "Распыление" укажите, насколько тень будет масштабной.

В конце не забудьте сохранить изменения.

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

Просто нажмите на понравившийся вам набор в списке - изменения сразу будут сохранены.

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

Просто нажмите на иконку с изображением шестеренки.

Откроется окно с доступными для редактирования видами полей. Раскройте список настроек рядом с нужным полем.

Для строки ввода вам будут доступны следующие настройки:

Текст - настройки текста в строке:

• Шрифт,
• Размер шрифта,
• Размер строки,
• Цвет и прозрачность текста,
• Форматирование текста - выделение жирным или курсивом.

Фон - а точнее тип заливки и его параметры:

• Без заливки - поле без цвета,
• Сплошной цвет - выберите один цвет из палитры (и задайте прозрачность при необходимости),
• Градиент - выберите два цвета, в которые будет окрашено поле, а также угол уклона/перехода между ними.

Рамка:

• При необходимости включите рамку для поля.
• Задайте цвет и прозрачность в блоке "Цвет".
• Определите толщину.
• Укажите радиус углов:
  • Общий - одинаковый для всех углов рамки,
  • Отдельный для каждого угла.

Тень:

• При необходимости включите отображение тени для поля.
• Задайте цвет и прозрачность тени в блоке "Цвет".
• Укажите сдвиг тени относительно самого поля - по вертикали и по горизонтали.
• С помощью бегунка "Размытие" задайте уровень расплывчатости, "нечеткости" тени.
• С помощью бегунка "Распыление" укажите, насколько тень будет масштабной.

Далее аналогичным образом задайте параметры для других полей.

Для списка выбора:

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

В конце не забудьте сохранить изменения.

• До момента сохранения на любой из вкладок вы можете сбросить изменения с помощью кнопки "Сбросить настройки".