Редактор Studio: управление стилями сайта
5 мин. чтения
Управляйте стилем текста и цветовой палитрой сайта. Это отличный способ сэкономить время и обеспечить единообразие дизайна.
Как получить доступ к стилям сайта?
Содержание:
Редактирование стилей типографики
Настройте и сохраните 9 стилей типографики для сайта - 6 заголовков (H1 - H6) и 3 стиля абзацев. Измените шрифт, цвет и форматирование каждого стиля в соответствии с вашими пожеланиями.
Совет:
H1 - H6 - это теги заголовка, которые автоматически назначаются заголовкам. Соблюдение иерархии заголовков сверху вниз, в соответствии с тегами заголовков, помогает как SEO, так и доступности.
Чтобы обновить стиль типографики:
- Нажмите Стили сайта
в левой части редактора. - Нажмите Типографика.
- Нажмите на значок Редактировать типографику
рядом со стилем. - Настройте типографику по своему усмотрению.
- Настройте шрифт, размер и цвет.
- Выделите текст жирным шрифтом или курсивом.
- Сделайте масштабирование текста пропорциональным экрану посетителя. Когда переключатель включен, вы также можете установить минимальный и максимальный размер шрифта.
- Установите межстрочный и межбуквенный интервал в тексте.
- Нажмите Применить.
Используете тяжелые пользовательские шрифты?
Активируйте переключатель Оптимизировать загрузку сайта с помощью шрифтов по умолчанию в нижней части панели. Это дает указание браузеру посетителя временно отображать быстро загружаемый шрифт по умолчанию, пока пользовательский шрифт не загрузится полностью.
Добавление стилей текста на страницу
Стилизованные заголовки и абзацы доступны для использования в панели «Добавить элементы». Нажмите Текст и перетащите соответствующий стиль из раздела Стили текста в нужное место.
Применение стиля к текстовому элементу
Вы также можете применить стиль типографики к любому существующему текстовому элементу на странице. Нажмите Редактировать текст на элементе и выберите соответствующий стиль из раскрывающегося списка Стили в Инспекторе.
Если после выбора стиля элемента, вы меняете его шрифт, размер или цвет, вы создадите «переопределение дизайна». Это означает, что все обновления выбранного стиля не будут применяться к этому текстовому элементу.
Однако вы всегда можете повторно применить стиль к переопределенному текстовому элементу. Откройте раскрывающийся список Стиль и нажмите Сбросить внизу.
Редактирование цветов сайта
Определите цветовую палитру сайта. Цветовая палитра разделена на категории, чтобы отразить различные варианты использования и части сайта. Например, вы можете настроить цвета кнопок и ссылок.
Вы также можете изменить основной цвет каждой категории или определенные оттенки в одной из палитр.
Совет:
Это действие мгновенно влияет на элементы с выбранным цветом, который вы хотите изменить. Сюда входят добавленные элементы с этим цветом, а также любые другие элементы, которые вы создали с помощью этого цвета.
Чтобы изменить цвета сайта:
- Нажмите Стили сайта в левой части редактора.
- Нажмите Цвета.
- Выберите, что вы хотите сделать:
- Настроить оттенок: наведите курсор на оттенок и нажмите значок Изменить .
- Изменить цвет: нажмите значок Изменить рядом с цветом.
- Настроить оттенок: наведите курсор на оттенок и нажмите значок Изменить
Добавление перехода между страницами
Добавьте переход между страницами, чтобы сделать навигацию более увлекательной для посетителей. Как только вы выберете переход в панели «Стили сайта», он начнет отображаться на каждой странице сайта.
Чтобы добавить переход между страницами:
- Нажмите Стили сайта в левой части редактора.
- Нажмите Переходы страниц.
- Выберите переход из списка:
- Нет: переход не отображается, когда посетители перемещаются между страницами.
- Наложение: текущая страница исчезает, а новая страница появляется.
