Как изменить дизайн сайта?

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

Общие настройки дизайна элементов сайта

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

Ниже приведен список элементов, дизайн которых можно настроить в разделе «Дизайн» — «Изменить дизайн элементов сайта»:

Все страницы

Настройка общих параметров: шапка, меню, фон страницы, заголовок, подвал.

• Шапка — настройка дизайна таких элементов, как логотип, описание, кнопка, телефон, адрес, режим работы, контейнер с соцсетями.
• Главное меню — здесь вы можете настроить цвет активного пункта меню, фон, отображение элементов в мобильной версии и т. д.
• Контейнер страницы — настройка фона страницы.
• Заголовок страницы — форматирование текста заголовка, настройка границы и прозрачности, а также вид хлебных крошек на странице.
• Подвал — настройка копирайта, ссылок, политики конфиденциальных данных, кнопок, соцсетей, адреса и т. д.

Все блоки

Настройка общих параметров для всех блоков: элементы и тексты, навигация.

• Элементы блока — настройка контейнера блока и заголовка, форматирования текста заголовков, колонок.
• Навигация по элементам — стрелки влево/вправо, контейнер страниц, ссылка на страницу, активная страница, кнопка «Смотреть еще».
• Элементы в текстах — маркированные списки, цитаты, кнопки, абзацы и т. д.

Блоки по типам

Настройка параметров для блоков определенного типа и их элементов: слайды, списки, формы и т. д.

Пример 1: Настройка дизайна адреса в шапке (с добавлением цвета)

Мы настроим вид адреса в шапке сайта. Для этого переходим в раздел «Дизайн» — «Изменить дизайн элементов сайта» — «Шапка» — «Адрес». Изменяем выравнивание и цвет текста у адреса.

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

Пример 2: Настройка маркера в списке

Настроим вид маркера в маркированном списке по тексту. Для этого переходим в раздел «Дизайн» — «Изменить дизайн элементов сайта» — «Элементы в текстах» — «Маркер в списке». В поле «Контент» указываем новый символьный код значка, который будет использоваться в качестве маркера. Изменения будут применены ко всем маркированным спискам в добавленных блоках на сайте.

Пример 3: Настройка скругления фото в блоке «Отзывы»

Давайте настроим скругление углов фото для блока «Отзывы». Для этого перейдем в раздел «Дизайн» — «Изменить дизайн элементов сайта» — «Блоки по типам» — «Отзывы» — «Фотография». Найдем параметр «Скругление углов» и укажем со всех сторон скругление в 60 пикселей. Также можно изменить ширину блока с фото.

Настройка стиля, цвета и шрифтов сайта

В разделе «Готовый дизайн» вы можете выбрать один из семи готовых стилей для сайта, цветовую схему, шрифт для заголовков и текстов. Чтобы перейти к настройке, нажмите на кнопку «Дизайн» в левом верхнем углу редактора, далее нажмите на кнопку «Готовые стили, цвета, шрифты». Далее вы можете перейти к разделам «Стиль», «Цвета» и «Шрифты».

Стиль

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

Цвета

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

Шрифты

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

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

CSS-код

Раздел предназначен для специалистов веб-разработки. Здесь вы можете добавить свой CSS-код, который будет совмещен со стандартным кодом страницы. Если вы не знаете, как работать с CSS, оставьте поле пустым.

1. Чтобы перейти к добавлению кода, нажмите на кнопку «Дизайн» в левом верхнем углу редактора сайта и выберите вкладку «Добавить свой CSS-код».
2. Вставьте в редактор CSS-код и нажмите на кнопку «Сохранить и посмотреть».

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

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

Здесь вы можете перейти к настройке расположения элементов блока и дизайну элементов. Помимо параметров оформления в разделе «Дизайн элементов» можно применить один из готовых или добавленных пользователем стилей, а также добавить значения CSS-параметров. Например, вы можете добавить фото в качестве фона блока или изменить цвет шрифта текста.

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

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

Расположение элементов блока

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

Настройки расположения элементов для блока типа «Список» будут включать: вид элементов (список, карточки, карусель), количество карточек в строке, параметры ссылок и т. д.

Дизайн элементов

В разделе «Дизайн элементов» вы можете задать оформление любого элемента блока, например цвет текста заголовка блока, толщина границы для контейнера блока, фон для строк таблицы и т. д. Настройка данных параметров аналогична настройке дизайна элементов через панель управления сайтом — «Дизайн сайта» (см. выше). Единственное отличие — изменения в данном случае будут внесены только в текущий редактируемый блок.

Если данный блок связан с другим, то изменения будут внесены и в связанный с ним блок.

Например, вот как выглядит изменение толщины границы контейнера карточки в блоке «Список»:

Если ранее для всего сайта (через раздел «Дизайн») были заданы настройки дизайна, то при попытке внести изменения в данные параметры появится соответствующее всплывающее окно. В этом случае вы можете продолжить редактирование и изменить настройки дизайна для всех блоков на сайте (кнопка «Изменить стиль сайта») или только для данного элемента в редактируемом блоке (кнопка «Изменить только здесь»).

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

Фон, размер, отступы

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

Фон
Вы можете добавить фотографию в качестве фона блока. Чтобы это сделать:

1. Наведите на блок курсор и нажмите на значок шестеренки. Справа откроется панель настроек.
2. Перейдите в раздел «Фон, размер, отступы».
3. Нажмите на кнопку «Выберите фото» и добавьте фото из хранилища или загрузите новое.
4. Под фото выберите параметр отображения фонового фото: по центру — область справа и слева от фото будет заполнена фоновым цветом из схемы; растянуть — фото будет растянуто на всю область блока, некоторые детали на фото (сверху и снизу) могут быть обрезаны границами блока; повторять — фото будет повторяться по горизонтали.
5. Настройте яркость фона. Чем ниже значение, тем сильнее будет затемнен фон.

Размер

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

• Блок по высоте на весь экран — фото будет растянуто на всю область блока.
• Блок по ширине на весь экран — все элементы блока будут растянуты на ширину экрана.

Отступы

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

1. Наведите курсор на верхнюю или нижнюю границу блока — появятся направляющие стрелки.
2. Зажмите левой кнопкой мыши границу в любом месте и потяните вверх или вниз, отпустите.

Также настроить отступы можно через настройки блока. Для этого:

1. Наведите на него курсор и нажмите на значок шестеренки. Справа откроется панель настроек.
2. Перейдите в раздел «Фон, размер, отступы».
3. С помощью ползунка отмерьте нужное значение. Отступ указан в пикселях: минимальный — 15, максимальный — 135. Изменения вступят в силу автоматически.

Оптимизация фото

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

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

Если вы хотите реализовать на Воздухе сайт с дизайном, созданным вашим дизайнером, – отправьте заявку в службу поддержки, и мы сверстаем для вас персональный шаблон по вашим макетам. При этом вы получите все преимущества Воздуха: удобный редактор, высокая скорость работы сайта и не только.