Style Book: гид по дизайну
Что такое Style Book
Заголовок раздела «Что такое Style Book»Style Book — встроенный инструмент блочных тем WordPress, цифровой style guide, который показывает, как каждый блок или компонент вашего сайта выглядит и взаимодействует с другими. Это аналог UI kit в традиционном дизайне, но работающий внутри WordPress.
Как открыть Style Book
Заголовок раздела «Как открыть Style Book»- Внешний вид → Редактор сайта
- Нажмите Styles (иконка стилей) в правом верхнем углу
- Нажмите на иконку глаза — откроется Style Book
Другой путь: нажмите на иконку карандаша для редактирования Styles — Style Book откроется слева, а настройки Global Styles — справа.
Как устроен Style Book
Заголовок раздела «Как устроен Style Book»Style Book организован по вкладкам:
| Вкладка | Содержание |
|---|---|
| Text | Заголовки H1–H6, параграфы, списки, цитаты и другие текстовые элементы |
| Media | Изображения, галереи, видео и другие медиа-блоки |
| Design | Кнопки, колонки, разделители и другие элементы вёрстки |
| Widgets | Календарь, последние записи, социальные иконки |
| Theme | Site Logo, Site Title, Query Loop, Featured Image — специфичные для темы блоки |
Связь с Global Styles
Заголовок раздела «Связь с Global Styles»Style Book — это окно предпросмотра для решений, принимаемых в Global Styles. Когда вы меняете стили:
- Изменения видны в Style Book — фокус на конкретных блоках
- Изменения видны в Site Editor — в контексте реального шаблона или страницы
Это особенно полезно, когда на сайте ещё мало контента: можно стилизовать галерею, даже если ни в одной записи ещё нет галереи.
Практические сценарии
Заголовок раздела «Практические сценарии»1. Тестирование вариантов стилей (style variations)
Заголовок раздела «1. Тестирование вариантов стилей (style variations)»Откройте Style Book → выберите один из вариантов стилей темы → сразу видите результат на всех блоках.
2. Настройка шрифтов
Заголовок раздела «2. Настройка шрифтов»Style Book → Typography → установите или загрузите кастомные шрифты. Например:
- Текст: Frauncis, line-height увеличен
- Заголовки: Rubik
- H3 и H4: appearance → Light
Все изменения видны мгновенно.
3. Настройка цветов
Заголовок раздела «3. Настройка цветов»Style Book → Colors → Palette → добавьте свою палитру. Затем Elements → настройте:
- Цвет фона сайта
- Цвет текста
- Цвета кнопок (Buttons block)
- Цвета заголовков
4. Стилизация отдельных блоков
Заголовок раздела «4. Стилизация отдельных блоков»- Media → Image → радиус скругления 10px — применится и к Gallery block
- Design → Buttons → настройка стилей кнопок
- Theme → Featured Image → скругление, тень
Style Book — это ваш визуальный гид. Используйте его для экспериментов, доработки и совершенствования дизайна. Всегда сверяйтесь с ним, чтобы убедиться, что все элементы работают гармонично.