Редактор Studio: управление стилями сайта

5 мин. чтения
Управляйте стилем текста и цветовой палитрой сайта. Это отличный способ сэкономить время и обеспечить единообразие дизайна. 
GIF, показывающий все вкладки в панели стилей сайта
Содержание:

Редактирование стилей типографики

Настройте и сохраните 9 стилей типографики для сайта - 6 заголовков (H1 - H6) и 3 стиля абзацев. Измените шрифт, цвет и форматирование каждого стиля в соответствии с вашими пожеланиями. 
Совет:
H1 - H6 - это теги заголовка, которые автоматически назначаются заголовкам. Соблюдение иерархии заголовков сверху вниз, в соответствии с тегами заголовков, помогает как SEO, так и доступности. 

Чтобы обновить стиль типографики:

  1. Нажмите Стили сайта  в левой части редактора.
  2. Нажмите Типографика.
  3. Нажмите на значок Редактировать типографику  рядом со стилем.
  4. Настройте типографику по своему усмотрению.
    • Настройте шрифт, размер и цвет.
    • Выделите текст жирным шрифтом или курсивом.
    • Сделайте масштабирование текста пропорциональным экрану посетителя. Когда переключатель включен, вы также можете установить минимальный и максимальный размер шрифта.
    • Установите межстрочный и межбуквенный интервал в тексте.
  5. Нажмите Применить.
Вкладка Типографика в панели стилей сайта, редактирование стиля Заголовок 1
Используете тяжелые пользовательские шрифты?
Активируйте переключатель Оптимизировать загрузку сайта с помощью шрифтов по умолчанию в нижней части панели. Это дает указание браузеру посетителя временно отображать быстро загружаемый шрифт по умолчанию, пока пользовательский шрифт не загрузится полностью.
Переключатель, который нужно нажать в редакторе Studio, чтобы включить загрузку шрифтов по умолчанию первыми

Добавление стилей текста на страницу

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

Применение стиля к текстовому элементу

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

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

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

Чтобы изменить цвета сайта:

  1. Нажмите Стили сайта  в левой части редактора.
  2. Нажмите Цвета.
  3. Выберите, что вы хотите сделать:
    • Настроить оттенок: наведите курсор на оттенок и нажмите значок Изменить .
    • Изменить цвет: нажмите значок Изменить рядом с цветом.
Скриншот вкладки цвета в панели стилей сайта с наведением курсора на оттенок для редактирования.

Добавление перехода между страницами

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

Чтобы добавить переход между страницами:

  1. Нажмите Стили сайта  в левой части редактора.
  2. Нажмите Переходы страниц.
  3. Выберите переход из списка:
    • Нет: переход не отображается, когда посетители перемещаются между страницами.
    • Наложение: текущая страница исчезает, а новая страница появляется.
Скриншот вкладки «Переходы страниц» в панели стилей сайта

Была ли статья полезна?

|