Сайт создания тем для сайта: из чего состоит тема, генератор онлайн и тёмная тема

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

Тридцать страниц поиска: конструкторы тем, документация и редакторы для соцсетей

Я разобрал тридцать страниц, которые поиск показывает по запросам о сайтах для создания тем. Восемь — конструкторы и генераторы тем и шаблонов. Ещё восемь — документация и руководства по темам WordPress. Три — документация других систем управления. Пять — редакторы дизайна для соцсетей и видео, четыре — платформы для создания сайтов. Одна страница — о темах для Windows, ещё одна вместо ответа показала проверку «Вы не робот?».

Выдача смешивает три смысла слова «тема»: оформление сайта, тему для соцсетей и тему для рабочего стола. Конструкторы тем частично на английском, а страница одного из когда-то популярных генераторов шаблонов теперь только благодарит пользователей за то, что они были частью его истории. Документация WordPress подробна, но рассчитана на разработчиков. Ни одна страница не объясняет владельцу сайта, из каких частей состоит тема и как проверить, что она удобна для чтения, — с этого и начнём.

Что такое тема сайта: три слоя

Тема — это всё, что отвечает за внешний вид сайта, отдельно от его содержимого. Тексты, товары и записи хранятся в базе, а тема решает, как они выглядят. Поэтому тему можно сменить, не трогая содержимое. Внутри у любой темы три слоя.

• Значения. Основной и акцентный цвета, цвет фона и текста, шрифты заголовков и текста, размеры, шаг отступов, радиус скругления углов, тени. В современных темах они записываются один раз как переменные, и все элементы берут их оттуда.
• Компоненты. Кнопки, карточки, поля форм, шапка, меню, подвал. Каждый компонент нарисован один раз и использует значения из первого слоя.
• Шаблоны страниц. Главная, страница записи, каталог, карточка товара, страница 404. Шаблон говорит, какие компоненты стоят на странице и в каком порядке.

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

Создание темы для сайта онлайн: генератор с проверкой контраста

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

Попробуйте выбрать акцентом ярко-жёлтый — генератор сам поставит на кнопке тёмный текст, потому что белый на жёлтом почти не читается. А теперь сделайте основной цвет светло-зелёным: ссылки в тексте сразу получат красную отметку. Это самая частая проблема фирменных цветов на сайтах: цвет, который отлично смотрится на логотипе, не годится для текста и ссылок. Хорошая тема решает это не отказом от фирменного цвета, а отдельным, более тёмным оттенком для текста. Переключите фон на тёмный — и уже тёмно-зелёная ссылка получит предупреждение: для тёмной темы нужен более светлый оттенок того же цвета.

Сайты для создания тем: пять видов инструментов

Инструменты, которые выдача показывает по запросу «сайт по созданию тем», делают очень разные вещи. Полезно понимать, какой слой темы закрывает каждый.

• Генераторы палитр и переменных. Собирают первый слой: цвета, шрифты, размеры. Результат — набор значений, который вставляется в любую тему. Так работает генератор выше и конструкторы тем для дизайн-систем.
• Встроенные редакторы тем. Во многих системах управления и конструкторах есть визуальный редактор: в WordPress это редактор сайта для блочных тем, в конструкторах — настройки проекта. Удобно, но результат живёт только внутри этой платформы.
• Конструкторы тем на готовом фреймворке. Генерируют тему на основе популярного набора компонентов вроде Bootstrap. Быстро, но код типовой, и сайт выглядит похоже на другие сайты с тем же набором.
• Редакторы макетов. В них тему рисуют, а не собирают: дизайнер делает компоненты и шаблоны страниц, а вёрстку потом выполняет разработчик.
• Генераторы на нейросетях. Предлагают готовый шаблон по описанию. Хороши для первого варианта, но значения в них редко собраны в одном месте — перекрашивать такой шаблон потом долго.

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

Тёмная тема: как сделать правильно

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

• Не чистый чёрный и не чистый белый. Тёмно-серый фон и светло-серый текст утомляют глаза меньше, чем белый на чёрном.
• Глубина через оттенки. В светлой теме карточки выделяют тенью, в тёмной — фон карточки делают на шаг светлее фона страницы.
• Фирменный цвет светлее. Тёмно-зелёная кнопка на тёмном фоне теряется; в тёмной теме используют более светлый оттенок того же цвета.
• Логотип в двух версиях. Тёмный логотип на тёмном фоне не виден — нужна светлая версия.
• Переключатель и память. Сайт по умолчанию следует настройкам системы, но даёт переключить тему вручную и запоминает выбор.

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

Готовая тема, своя или переделанная: что выбрать

Создание тем к сайту идёт тремя путями, и выбор зависит не от вкуса, а от задачи.

Третий путь — переделка готовой темы через дочернюю тему или настройки: основа остаётся от автора и обновляется, а изменения хранятся отдельно и не пропадают при обновлении. Для сайта компании на системе управления это обычно разумная середина. Названия различаются: в WordPress и OpenCart это темы, в 1С-Битрикс — шаблоны сайта, в Тильде — настройки проекта и стили блоков. Подробнее о том, что брать готовым, а что делать своим, — в статье «Шаблоны для создания сайта: дизайн, бриф и ТЗ», а о выборе темы для WordPress — в статье «Создание сайта на WordPress».

Сколько стоит создание темы для сайта

Цена зависит от того, какой слой темы создаётся заново. Ориентиры по часам — для сайта компании на 10–15 страниц:

• Настройка готовой темы под фирменный стиль — 4–8 часов: цвета, шрифты, логотип, проверка контраста и мобильной версии.
• Переделка готовой темы через дочернюю — 15–30 часов: свои компоненты и шаблоны ключевых страниц поверх готовой основы.
• Своя тема по готовому макету — 40–80 часов: вёрстка всех компонентов и шаблонов, подключение к системе управления, настройки для владельца.
• Тёмная версия существующей темы — 4–10 часов, если тема построена на переменных, и в разы больше, если цвета прописаны в каждом блоке.

При ставке частного вебмастера 1 000–1 500 рублей в час это от 4–12 тысяч за настройку до 40–120 тысяч за свою тему. Как складывается цена сайта целиком — в статье «Сколько стоит создание сайта: часы, ставки и калькулятор».

Тема и скорость сайта

Тема влияет не только на вид, но и на скорость. Готовые темы часто продают как «всё в одном»: слайдеры, анимации, десятки шаблонов, встроенный конструктор страниц. Всё это загружается на каждой странице, даже если вы используете десятую часть.

• Шрифты. Каждое начертание — отдельный файл. Два шрифта по два начертания — разумно, шесть шрифтов по четыре — заметная задержка на мобильном интернете.
• Скрипты темы. Слайдеры, анимации при прокрутке, эффекты наведения. Проверьте, какие из них действительно используются.
• Встроенный конструктор страниц. Удобен в работе, но добавляет к каждой странице лишний код. Для сайта на 10–15 страниц он редко оправдан.
• Картинки оформления. Фоны, декоративные изображения, иконки. Иконки — в формате SVG, фоны — сжатые и в современных форматах.

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

Что передать вебмастеру для создания темы

Чтобы тема совпала с фирменным стилем с первого раза, подготовьте небольшой набор:

1. Логотип в векторе — файл SVG или PDF, а также светлую версию для тёмного фона, если она есть.
2. Фирменные цвета кодами — HEX или RGB, а не «наш зелёный, как на визитке».
3. Шрифты с лицензией. Коммерческие шрифты для сайта лицензируются отдельно от печати. Бесплатные шрифты разумно размещать на своём сервере, а не подключать с зарубежных: так страница грузится быстрее и данные посетителей не уходят за рубеж.
4. Два-три сайта, которые нравятся, с пояснением, что именно нравится: кнопки, шрифт, расстояния.
5. Ограничения — что точно нельзя менять: например, положение логотипа или цвет, закреплённый в брендбуке.

С таким набором настройка готовой темы под стиль занимает один-два дня, а не неделю согласований.

Как сменить тему и ничего не потерять

Содержимое при смене темы остаётся в базе, но часть настроек и элементов живёт именно в теме. Порядок, который я использую, чтобы смена прошла незаметно для посетителей и поиска:

1. Резервная копия файлов и базы данных — до любых изменений.
2. Тестовая копия сайта. Новая тема ставится сначала на копию, а не на работающий сайт.
3. Опись того, что живёт в теме: меню, виджеты, формы, счётчики, вставленные в шаблон, разметка для поиска, коды подтверждения в Вебмастере.
4. Проверка страниц по списку: главная, каждый тип страницы, формы, корзина, страница 404 — на компьютере и телефоне.
5. Проверка для поиска: заголовки страниц, описания, адреса и микроразметка должны остаться прежними.
6. Перенос и наблюдение. Включить тему на работающем сайте в спокойное время и первую неделю следить за заявками и ошибками в Вебмастере.

Самая частая потеря при смене темы — не дизайн, а счётчик Метрики или код формы, вставленные прямо в файлы старой темы. Сайт выглядит отлично, а заявки и статистика пропали.

Создать тему на сайте-форуме или в сообществе

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

• Сначала поиск. Возможно, такая тема уже есть, и ответ в ней найден.
• Говорящий заголовок. Не «Помогите!», а «WordPress: после смены темы пропала форма заявки».
• Один вопрос — одна тема. Два разных вопроса в одной теме получают половину ответов.
• Подробности сразу. Что делали, что ожидали, что получили, какие версии программ. Скриншот вместо описания.
• Отметьте решение. Когда ответ найден, напишите, что помогло, — следующему человеку с тем же вопросом.

Если вы владелец сайта и хотите, чтобы посетители могли создавать темы у вас, — это раздел сообщества или форум с регистрацией, модерацией и защитой от спама. О регистрации на сайте — в статье «Регистрация на сайте: нужна ли она и как сделать правильно».

Темы для телефона и рабочего стола

Третий смысл — сайты, где делают темы оформления для телефона или Windows: обои, значки, цвета системы. Это отдельный мир, не связанный с сайтами. Одно предупреждение: скачивайте такие темы только из официальных магазинов приложений или с сайтов, которым доверяете. Под видом «темы» на неизвестных сайтах нередко распространяют программы, которые получают доступ к телефону или компьютеру.

Случай из практики: жёлтый магазин игрушек и кнопка, которую не видели

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

Проверка контраста показала то, что глаз привык не замечать: белый текст на этом жёлтом — около 1,7:1 при норме 4,5:1, жёлтые ссылки на белом фоне — примерно столько же. На телефоне при ярком солнце кнопка превращалась в жёлтое пятно без надписи.

Менять фирменный цвет не стали. Мы перестроили тему на переменных: кнопки остались жёлтыми, но с тёмным текстом, а для ссылок и мелких элементов добавили тёмный оттенок того же жёлтого — почти горчичный. Работа заняла около семи часов. За следующий месяц доля посетителей, нажавших «В корзину» на карточке товара, выросла примерно на 18% при той же рекламе. А когда через полгода к Новому году понадобилась праздничная версия сайта, её сделали за час — сменой нескольких значений.

Как это ищут

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

Итог

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

Если нужна тема под фирменный стиль или сайт целиком — подробнее на странице создания сайтов.

Александр Рожков

Вебмастер · SEO-специалист · 15+ лет · 200+ проектов

Частный вебмастер в Москве. 200+ сайтов под ключ, 15+ лет опыта. Создаю сайты, настраиваю SEO и рекламу лично — без субподрядчиков.

О себе