Создание и настройка пользовательской темы в Google Sites

Быстрые ссылки

• Создать тему в Google Sites
• Настроить тему
• Редактировать, копировать или удалить тему

Создание привлекательного сайта включает не только содержимое, но и оформление. Внешний вид влияет на восприятие аудитории — гармоничная тема повышает доверие и улучшает удобство. Google Sites предоставляет готовые темы, но с конца 2021 года доступна возможность создавать собственные пользовательские темы. Это даёт контроль над цветами, шрифтами, навигацией и компонентами. Ниже — подробное руководство и практические дополнения.

Создать тему в Google Sites

1. Откройте Google Sites и войдите в аккаунт. Откройте существующий сайт или создайте новый.
2. В правой боковой панели выберите вкладку “Темы” вверху.
3. Разверните раздел “Пользовательские” при необходимости и нажмите значок плюс, чтобы создать новую тему.

Дальше настройка темы проходит в три шага.

Шаг 1. Имя и изображения

Дайте теме имя и при желании добавьте логотип или баннер. Нажмите “Далее”.

Советы:

• Имя должно ясно отражать назначение (напр., “Корпоративная тема — Бренд X”).
• Логотип используйте в формате PNG с прозрачным фоном при необходимости.
• Баннер лучше подготовить в соотношении сторон, близком к тому, как он отобразится в заголовке страницы.

Шаг 2. Цветовая палитра

Выберите один из предустановленных наборов или нажмите “Настроить цвета”, чтобы задать свои. Можно выбрать три базовых цвета из выпадающих списков или ввести HEX-коды вручную. Нажмите “Далее”.

Короткое правило контраста: проверьте контраст текста и фона по минимуму для обычного текста и заголовков (WCAG контраст рекомендуется, но если не измеряете — используйте тёмный текст на светлом фоне или светлый текст на тёмном фоне).

Шаг 3. Шрифты

Выберите шрифты для заголовков и основного текста. Списки показывают превью с вариациями (light, regular, bold). Нажмите “Больше шрифтов”, чтобы открыть полный каталог Google Fonts. Нажмите “Создать тему”.

После создания тема появится в боковой панели в разделе “Пользовательские” и будет готова к дальнейшей настройке.

Настроить тему

Изменения сохраняются автоматически, как и в других приложениях Google. На момент написания статьи пользовательские темы доступны только для текущего сайта и не могут быть напрямую применены к другим сайтам в аккаунте.

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

Цвета

Помимо базовых цветов темы можно отдельно задать цвета для фона, заголовков и основного текста. Нажмите “Дополнительные параметры” внизу секции Цвета, чтобы увидеть все доступные настройки.

Для каждого типа текста выберите цвет и посмотрите превью. Чтобы увидеть, как это выглядит на странице, нажмите значок глаза рядом с опцией.

Текст

Выберите стиль, размер, выравнивание, межстрочный интервал и другие параметры. В выпадающем списке сверху выберите тип текста: Заголовок, Подзаголовок или Обычный текст.

После изменения параметров нажмите значок глаза, чтобы просмотреть результат в реальном времени.

Изображения

В секции Изображения можно выбрать или загрузить Заголовок, Логотип и Favicon.

Нажмите “Выбрать”, чтобы загрузить изображение из Google Диска или Фото, по URL или через поиск Google Картинок. Нажмите “Загрузить”, чтобы выбрать файл с устройства.

Советы по изображениям:

• Логотип: PNG, 72–300 px по высоте в зависимости от дизайна, прозрачный фон по возможности.
• Баннер: ширина не менее 1200 px для качества на больших экранах, формат JPEG или PNG.
• Favicon: квадратный 48×48 или 32×32 px, формат ICO или PNG.

Навигация

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

Нажмите значок глаза для предварительного просмотра каждого варианта.

Компоненты

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

Редактировать, копировать или удалить тему

Чтобы изменить имя темы или её настройки, дублировать или удалить тему, откройте вкладку Темы в боковой панели, разверните Пользовательские, нажмите три точки рядом с темой и выберите нужное действие.

Когда пользовательская тема не подходит

• Если вам нужно единовременно применить одинаковую тему к десяткам сайтов, встроенной возможности распространения темы по аккаунту нет — придётся вручную копировать настройки или экспортировать шаблоны содержимого.
• Для сложных динамических интерфейсов или кастомного JavaScript лучше использовать более гибкий движок сайта или CMS.
• Если бренд строго регламентирован и требует точной типографики и сетки — возможно, придётся использовать внешнюю верстку вне Google Sites.

Альтернативные подходы

• Использовать одну из встроенных тем Google Sites и кастомизировать страницы вручную при помощи блоков контента.
• Создать справочник стиля (style guide) в Google Документах и обучить контент-менеджеров следовать ему при создании страниц.
• Для корпоративных порталов использовать платформы с централизованным управлением темами и шаблонами.

Мини-методология разработки темы (быстрый SOP)

1. Исходные требования: определите целевую аудиторию, брендовые цвета и допустимые шрифты.
2. Прототип: сделайте простую страницу-макет с ключевыми блоками (хедер, навигация, контент, футер).
3. Базовая тема: создайте тему в Google Sites и задайте имя, цвета и шрифты.
4. Тестирование: проверьте читаемость, адаптивность и визуальную иерархию на тестовых страницах.
5. Финализация: сохраните тему, документируйте параметры и раздайте инструкции командам.
6. Поддержка: периодически обновляйте тему и ведите журнал изменений.

Чек-листы по ролям

Дизайнер:

• Утвердить палитру и шрифты.
• Подготовить логотип и баннер в требуемых соотношениях.
• Протестировать контраст и иерархию заголовков.

Контент-менеджер:

• Проверить корректное отображение шрифтов в тексте и ссылках.
• Убедиться, что кнопки и CTA видны и кликабельны.
• Подготовить изображения в правильных размерах.

Администратор сайта:

• Создать и задокументировать тему.
• Дублировать тему перед глобальными изменениями.
• Убедиться, что права на файлы из Google Диска соответствуют доступам сайта.

Критерии приёмки

• Тема добавлена и отображается в списке “Пользовательские”.
• Цвета заголовков, фона и основного текста соответствуют утверждённой палитре.
• Шрифты заголовков и основного текста соответствуют спецификации бренда.
• Логотип отображается корректно во всех основных браузерах и мобильных устройствах.
• Навигация корректно выделяет текущую страницу и удобна на мобильных устройствах.
• Все критические кнопки видимы и соответствуют стилю.

Тестовые сценарии и приёмка

• Откройте сайт на десктопе и мобильном, проверьте отображение заголовков и основного текста.
• Измените палитру в теме и убедитесь, что изменения применились ко всем страницам.
• Загрузите новый логотип и проверьте, что он не искажён и корректно обрезается.
• Проверьте переходы по навигации и выделение текущей страницы.

Шаблоны и контрольные списки (копируемые)

Шаблон имени темы: [Бренд] — [Назначение] — [Дата] (напр., “Acme — Внутренний портал — 2025-12”)

Чек-лист загрузки изображений:

• Логотип: формат PNG, прозрачный фон, высота 72–300 px.
• Баннер: ширина ≥ 1200 px, оптимизирован для JPG/PNG, вес ≤ 500 KB.
• Favicon: 32×32 px, формат PNG или ICO.

Советы по доступности и SEO

• Убедитесь, что заголовки следуют логической иерархии (H1 для главной страницы, H2 для разделов и т. д.).
• Поддерживайте достаточный контраст текста и фона для читабельности.
• Используйте понятные ALT-тексты для всех изображений (для Google Sites это важно при вставке изображений с описанием).
• Минимизируйте использование декоративных изображений, которые не несут смысловой нагрузки.

Конфиденциальность и соответствие GDPR

• Если вы загружаете изображения с личными данными или используете внешние сервисы для аналитики, убедитесь в наличии прав и согласий пользователей.
• Проверьте настройки доступа на Google Диске для изображений, используемых в теме: публичный доступ может раскрыть материалы.

Часто задаваемые вопросы

Можно ли применить пользовательскую тему к нескольким сайтам одновременно?

На текущий момент встроенной функции распространения темы по нескольким сайтам нет. Тему нужно воссоздать вручную для каждого сайта или применять документированные настройки.

Можно ли импортировать шрифты, не входящие в Google Fonts?

Google Sites использует библиотеку Google Fonts, импортировать сторонние шрифты напрямую нельзя.

Как отменить изменения темы?

Перед глобальными изменениями дублируйте тему. Удалить или восстановить старую тему можно через меню опций (три точки).

Короткое объявление для команды (100–200 слов)

Мы ввели возможность создавать пользовательские темы в Google Sites для наших внутренних и внешних сайтов. Теперь можно задать имя темы, загрузить логотип и баннер, выбрать цветовую палитру и шрифты, настроить навигацию и компоненты интерфейса. Это упростит соблюдение бренда и ускорит создание новых страниц. Перед публикацией новой темы следуйте чек-листам: проверьте контраст, размеры изображений и корректное выделение активного пункта навигации. Тема доступна в разделе “Темы” → “Пользовательские”. Чтобы избежать потери настроек, дублируйте тему перед масштабными правками. Если нужны шаблоны или помощь с подготовкой графики, обратитесь к дизайнеру команды.

Резюме

• Пользовательские темы позволяют контролировать визуальную идентичность сайта.
• Процесс создания простой: имя → цвета → шрифты → корректировки компонентов.
• Перед запуском протестируйте тему на разных устройствах и подготовьте шаблоны изображений.

Файлы изображений и пути в статье сохранены в исходном виде. Вспомогательные чек-листы и шаблоны помогут внедрить тему последовательно и без ошибок.