---
title: "Style Book: гид по дизайну"
description: "Style Book в WordPress — цифровой style guide для визуального проектирования блочных тем: как открыть, как устроен, практические примеры."
---

## Что такое Style Book

**Style Book** — встроенный инструмент блочных тем WordPress, цифровой style guide, который показывает, как каждый блок или компонент вашего сайта выглядит и взаимодействует с другими. Это аналог UI kit в традиционном дизайне, но работающий внутри WordPress.

## Как открыть Style Book

1. **Внешний вид → Редактор сайта**
2. Нажмите **Styles** (иконка стилей) в правом верхнем углу
3. Нажмите на **иконку глаза** — откроется Style Book

Другой путь: нажмите на иконку карандаша для редактирования Styles — Style Book откроется слева, а настройки Global Styles — справа.

## Как устроен Style Book

Style Book организован по вкладкам:

| Вкладка | Содержание |
|---|---|
| **Text** | Заголовки H1–H6, параграфы, списки, цитаты и другие текстовые элементы |
| **Media** | Изображения, галереи, видео и другие медиа-блоки |
| **Design** | Кнопки, колонки, разделители и другие элементы вёрстки |
| **Widgets** | Календарь, последние записи, социальные иконки |
| **Theme** | Site Logo, Site Title, Query Loop, Featured Image — специфичные для темы блоки |

## Связь с Global Styles

Style Book — это **окно предпросмотра** для решений, принимаемых в Global Styles. Когда вы меняете стили:
- Изменения видны **в Style Book** — фокус на конкретных блоках
- Изменения видны **в Site Editor** — в контексте реального шаблона или страницы

Это особенно полезно, когда на сайте ещё мало контента: можно стилизовать галерею, даже если ни в одной записи ещё нет галереи.

## Практические сценарии

### 1. Тестирование вариантов стилей (style variations)
Откройте Style Book → выберите один из вариантов стилей темы → сразу видите результат на всех блоках.

### 2. Настройка шрифтов
Style Book → Typography → установите или загрузите кастомные шрифты. Например:
- Текст: Frauncis, line-height увеличен
- Заголовки: Rubik
- H3 и H4: appearance → Light

Все изменения видны мгновенно.

### 3. Настройка цветов
Style Book → Colors → Palette → добавьте свою палитру. Затем Elements → настройте:
- Цвет фона сайта
- Цвет текста
- Цвета кнопок (Buttons block)
- Цвета заголовков

### 4. Стилизация отдельных блоков
- **Media → Image** → радиус скругления 10px — применится и к Gallery block
- **Design → Buttons** → настройка стилей кнопок
- **Theme → Featured Image** → скругление, тень

## Вывод

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

## Материалы и источники

- [Using the Style Book as a design guide (learn.wordpress.org)](https://learn.wordpress.org/lesson/using-the-style-book-as-a-design-guide/)

## Связанные страницы

- [Настройки темы: цвета, шрифты, типографика](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/theme-settings.md)
- [Site Editor для прототипирования](https://wpcraft.ru/kb/stacks/wordpress/themes/practices/site-editor-prototyping.md)
- [Site Editor: визуальное редактирование](https://wpcraft.ru/kb/stacks/wordpress/block-editor/site-editor.md)