Шаблоны сайтов HTML: где взять, как отредактировать и когда они не подходят

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

Что внутри HTML-шаблона

Типичный архив выглядит так:

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

Шаблоны сайтов HTML и CSS: где скачать

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

• Открытые каталоги HTML-шаблонов. Сотни одностраничников и визиток, у многих лицензия разрешает коммерческое использование при ссылке на автора в подвале.
• Репозитории на GitHub. Много учебных и открытых проектов. Смотрите файл лицензии и дату последнего изменения.
• Магазины вёрстки. Платные наборы на десятки страниц, часто в комплекте с макетом для Figma.
• Сборники «скачать бесплатно всё». Сюда лучше не ходить: платная вёрстка там перепродана без разрешения, а в скриптах бывают чужие вставки.

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

Как отредактировать HTML-шаблон без программиста

Простой одностраничник реально поправить самому за вечер. Порядок такой.

1. Установите редактор кода. Подойдёт любой бесплатный с подсветкой синтаксиса. Блокнот тоже откроет файл, но в нём легко случайно удалить закрывающий тег.
2. Откройте index.html в браузере и в редакторе одновременно. Нашли на странице фразу — ищите её в файле поиском, меняйте, сохраняйте, обновляйте браузер.
3. Картинки меняйте с тем же размером. Положите свою фотографию в папку img под тем же именем или поправьте путь в коде. Большие фото сначала ужмите, иначе страница будет грузиться долго.
4. Цвета ищите в CSS. Основной цвет обычно повторяется в файле стилей десятки раз, его меняют заменой по всему файлу.
5. Не трогайте то, чего не понимаете. Удалённый кусок скрипта ломает меню на телефоне, и заметить это можно только через неделю.

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

Форма заявки в HTML-шаблоне

Это главный подводный камень. Кнопка «Отправить» в скачанном шаблоне почти всегда никуда не отправляет: для формы нужен обработчик на сервере. Варианты:

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

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

Сколько стоит запустить сайт на HTML-шаблоне

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

Когда HTML-шаблон подходит, а когда нет

Подходит:

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

Не подходит:

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

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

HTML-шаблон или шаблон для создания сайта на движке

Коротко о главном

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

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

---

Если сайт услуг должен обновляться без правки кода, посмотрите шаблоны в магазине Flekk: они сделаны на WordPress под конкретные ниши, тексты меняются в визуальном редакторе, у каждого открыто живое демо со всеми страницами.