Страница-гайд по стилям

Страница-гайд по стилям — служебная страница, на которой собраны типографика, кнопки, цветовые темы и другие элементы, которые вы используете на сайте. Её держат в разделе Не прилинкованы: страница не попадает в меню, но помогает настраивать оформление «на живом примере», не трогая главную и другие публичные страницы.

Отдельного типа «гайд по стилям» в Photosquare нет — это обычная страница, которую вы собираете сами. Обзор панели «Стили сайта» — в Стили сайта: обзор.

Зачем она нужна

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

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

Как создать

1. Откройте редактор: ваш-id.photosquare.ru/config.
2. В главном меню выберите Страницы.
3. Внизу панели найдите раздел Не прилинкованы и нажмите +, чтобы добавить обычную страницу. Подробнее — Раздел «Не прилинкованы» и Добавление страниц в меню.
4. Назовите страницу понятно для себя, например «Гайд по стилям» или «Style Guide». Адрес (URL) может быть style-guide — он не обязан совпадать с заголовком.
5. Откройте страницу, нажмите Редактировать и наполните секциями и блоками (см. ниже).

[изображение: панель «Страницы» с разделом «Не прилинкованы» и новой страницей]

Страница не обязана быть красивой — достаточно, чтобы на ней были все элементы, стили которых вы настраиваете. Можно использовать черновой текст и заглушки вместо реального контента.

Что разместить на странице

Соберите «витрину» того, что реально встречается на сайте. Минимальный набор:

Типографика

В блоке текста добавьте примеры:

1. заголовок первого уровня (как на главной);
2. подзаголовки второго и третьего уровня;
3. обычный абзац;
4. хотя бы одно слово со ссылкой — чтобы проверить цвет и подчёркивание ссылок в теме.

Настройка шрифтов — в Шрифты сайта.

Кнопки

Добавьте три блока кнопки (или один блок с тремя кнопками рядом):

1. основная;
2. второстепенная;
3. дополнительная.

Подробнее — Стили кнопок и Блок кнопки.

Цветовые темы

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

Если тем много, удобно подписать секции («Белая тема», «Тёмная тема») и при желании задать якорные ссылки, чтобы быстро переходить к нужному образцу.

Глобальные темы и палитра — в Цвета и цветовые темы; оформление секции — в Оформление отдельной секции.

Дополнительно (по необходимости)

1. Блок цитаты — если цитаты есть на сайте (Блок цитаты);
2. Блок линии — разделитель между группами образцов;
3. Блок формы — если на сайте есть формы (Добавление форм на сайт);
4. образец фонового изображения секции и разделителя — если используете их на публичных страницах.

[изображение: пример страницы-гайда с секциями типографики, кнопок и цветовых тем]

Как пользоваться при настройке стилей

1. Откройте страницу-гайд в редакторе и нажмите Редактировать.
2. На панели над превью нажмите иконку Стили сайта (кисть) или перейдите в главном меню: Стили → нужный раздел (Шрифты, Цвета, Кнопки, Размеры и отступы).
3. Меняйте параметры и смотрите результат на гайде — все правки глобальные и применятся ко всему сайту, но проверять удобнее на одной «витрине».
4. Переключите превью на мобильную версию и убедитесь, что образцы читаются на телефоне. Подробнее — Как сайт выглядит на мобильных.
5. Отступы и ширину контента сверяйте по Размеры и отступы.

Скрыть страницу от посетителей

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

1. Отключить страницу — в настройках страницы выключите Включить страницу. Тогда её увидите только вы в редакторе. Подробнее — Включение и отключение страниц.
2. Скрыть из поиска — на вкладке SEO включите Скрыть эту страницу из результатов поиска. Настройки страницы — в Настройки страницы.
3. Пароль — если нужен доступ только у вас или у команды (там же, в основных настройках страницы).

Комбинация «Не прилинкованы» + отключена или скрыта из поиска — типичный вариант для внутреннего гайда.

Сохранение

Сохраните контент страницы-гайда — Сохранить на панели над превью. Изменения в «Стили сайта» сохраняются отдельно — кнопка Сохранить в шапке панели стилей, когда есть несохранённые правки.