Бесплатные HTML-шаблоны с ThemeForest

Наверное каждый краем уха слышал про Envato — это площадка (маркетплейс) одноименной австралийской компании, которая славится своим разнообразием контента для творческих людей из мира IT (и не только) — сюда входит продажа различных графических элементов, 3D-моделей, аудио и видео заготовок, стоковых фотографий и, конечно же, шаблонов веб-сайтов.

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

Сегодня — про то, как можно получить любой HTML-шаблон c ThemeForest бесплатно. В общих чертах это будет выглядеть вот так: бесплатно ≠ быстро

О ThemeForest и шаблонах

Средняя стоимость HTML-шаблона составляет от $5 — $30

Лирическое отступление. Надо сказать, что в былые времена мы сами частенько закупали на ThemeForest шаблоны для своих клиентов. Особенно это актуально для тех, кто не хочет вкладывать в дизайн хотя бы over $500+, но при этом хотят более-менее уникальный и красивый дизайн. Конечно же они не подозревают о том, что этот шаблон уже купили +100500 раз.

Обычно после покупки начинается адаптация и «допиливание» шаблона, благодаря чему его внешний вид меняется процентов на 30-40% + размещение «русского» контента.

Итак, заходим на сайт https://themeforest.net/ и переходим в раздел «HTML».

Список HTML-шаблонов с ThemeForest
Список HTML-шаблонов с ThemeForest

На текущий момент всего доступно 14 333 шаблона. Есть из чего выбрать,  согласитесь?

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

Вариант №1. Купить HTML-шаблон

Все просто и понятно — утром деньги, вечером стулья.

Плюсы: быстро, оплатил — получил ссылку на скачивание

Минусы: надо платить, а голодных ртов в семье много

Вариант №2. «Файл — Сохранить как…»

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

Да и по времени в общем занимает какие-то 5-10 минут чтобы сохранить все страницы шаблона. Метод называется «отстрелялся и готово»

Да, все так и есть — технически вы скачали шаблон. У меня это выглядит вот так:

Сохраненная главная страница шаблона
Сохраненная главная страница шаблона

Но если вы откроете сам файл .html, то сразу немного огорчитесь отсутствуем тех картинок, которые прописаны через background-image в CSS.

Кроме этого каждая сохраненная страница будет выглядеть как отдельный файл .html + папка со скриптами стилями этой страницы (имеет вид «название_страницы_ files»). Если в нее зайти, то глаза просто вываливаются из орбит — стили, иконки, скрипты и так далее все в одной этой папке.

Содержимое папки сохраненой страницы
Содержимое папки сохраненой страницы

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

А теперь представьте понравившийся вам шаблон состоит из 15 страниц. Вам проще явно будет купить этот шаблон.

Плюсы: бесплатно, быстрое сохранение всех страниц шаблона

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

Вариант №3. Работа с инспектором и исходным кодом

На мой взгляд это лучший вариант. Тут придется потратить много времени, но результат будет стоить того. Иногда я и сам пользовался этим методом (крайне редко, но все же).

Кратко в чем суть — заходим на какую-нибудь страницу выбранного шаблона (я рекомендую главную). В отдельной вкладке или окне открываем исходный код страницы. В другой вкладке открываем Инспектор кода (я пользуюсь штатным Firefox инструментом «Исследовать элемент»). И неспеша начинаем заниматься копированием кода.

Мне нравится в этом подходе несколько вещей.

  1. Во-первых, мы сами можем определять структуру файлов и папок скопированного шаблона.
  2. Во-вторых, вариант ошибиться и скопировать что-то не то минимальная (в случае если копировать страницу «сверху-вниз»).
  3. В-третьих, мы сразу же можем менять текст на свой и вставлять свои картинки.

Естественно, все это требует времени, «больше-мало» зависит от сложности шаблона ну и от ваших умственных способностей и внимания.

Плюсы: бесплатно + качественный вариант на выходе с уже готовым своим контентом

Минусы: требует наличия времени, а также минимальных знаний в HTML/CSS

Переходим к практике

Долой диванный теоретизм — время переходить к практике. Как вы уже поняли, я использую вариант №3.

Возьмем какой-нибудь простой минималистичный HTML-шаблон. И выберем страницу — это детальная страница статьи.

Еще раз о главном — это не кнопка «Скачать». Здесь надо потратить свое время и уметь делать определенные (но простые) действия, чтобы получить результат.

Страница HTML-шаблона
Страница HTML-шаблона

Я специально выбрал простую страницу чтобы не делать инструкцию-портянку, так как принцип одинаковый для всех шаблонов.

Итак, мы хотим получить чистый HTML-файл этой страницы шаблона. Будем все делать по шагам.

Создаю структуру проекта

Сначала я создаю у себя на локальной машине папку, в которой буду воссоздавать шаблон. У меня получилось классическая структура.

Структура шаблона
Структура шаблона

Пока все понятно. Каждый сайт имеет как минимум CSS-файлы, JS-файлы, шрифты и картинки. Для них созданы соответствующие папки. Название страницы я сделал blog-detail.html.

Копипаст исходного кода

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

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

Сохраняемся, пробуем открыть файл браузером.

Результат на этом этапе
Результат на этом этапе

Получил оригинальную HTML-разметку. Далее пойдут наиболее трудозатратные этапы.

Меняю пути для файлов

Сейчас в нашем файле все пути к картинкам, CSS-файлам и скриптам прописаны так, как это сделано в оригинальном шаблоне. Но так как я поменял структуру, то надо поменять все пути на соответствующие нашей структуре.

Иду в созданный HTML-файл и меню пути к файлам. Ниже справка в формате «старый путь — новый путь».

assets/img/ => images/

assets/js/vendor/ => js/

assets/js/ => js/

Заменил пути к картинкам и JS-файлам. CSS-файл я трогать не стал, ниже будет описана причина.

Копирую CSS-стили, шрифты, картинки и JS-файлы в свой проект

На этом этапе начинаю приводить голую разметку в нормальный вид при помощи CSS и JS-файлов. Для начала нужно найти URL-адреса всех CSS и JS. Это можно делать несколькими вариантами:

  1. Через инспектор кода;
  2. Через вкладку «Сеть».

Раньше я всегда делал через инспектор кода — искал в инспекторе CSS и JS-файлы, затем прописывал их через адресную строку.

Но сейчас написал эту инструкцию и понял как чертовски просто и здорово это делать через вкладку «Сеть».

Во вкладке «Сеть» содержится список всех подгружаемых данных на странице: CSS, JS-файлы, шрифты, изображения и так далее.

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

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

Поиск файла style.css
Поиск файла style.css

Как видим тут два файла — выбираю первый вариант, так как он лежит в корне сайта у них на сервере, соответственно это то что мне нужно.

Копирование style.css

Копирование style.css

Нажимаю на строку, беру URL, открываю в новом окне, CTRL+S и сохраняю себе в корневую папку шаблона,

Открываю этот файлик и вижу, что в нем идет импорт других css-файлов, а также гугл-шрифтов. Сразу же заменяю пути к css-файлам на свои.

Замена путей подключения CSS-файлов
Замена путей подключения CSS-файлов

Заметьте что на 25 строке подключается еще один style.css. Это тот самый второй style.css из вкладки «Сеть». Поэтому чтобы не было конфликтов меня двумя файлами с одинаковыми названиями, один лежит в корне сайта, а другой в папке /css/

По вышеописанной схеме копирую все остальные CSS-файлы в свой шаблон, это:

  1. bootstrap.min.css
  2. material-design-iconic-font.min.css
  3. et-lineicons.min.css
  4. venobox.css
  5. slick.min.css
  6. style.css
  7. responsive.css

Итого вот такая структура папки /css/ у меня получилась.

Структура папки /css/
Структура папки /css/

Теперь прохожу по каждому файлу и меняю в нем пути — в 99% случаев это пути для картинок. То есть нахожу в CSS такое:

1
background-image: url("../img/bg/1.png");

И меняю примерно на такое:

1
background-image: url("../images/1.png");

Теперь про оставшийся 1% — это локальные шрифты. Чтобы понять о чем речь открываю, к примеру, et-lineicons.min.css и вижу там локальное подключение шрифта.

Локальное подключение шрифта
Локальное подключение шрифта

Скажу сразу — со шрифтами жопа! Они не отображаются ни в инспекторе, ни через «Сеть». Их приходится скачивать каждый ручками, вводя URL-адрес.

Если смотреть по скриншоту выше, то для него ссылка на скачивание шрифта будет иметь вид:

http://webpuls.org/tf/gimri/gimri/assets/fonts/et-line.eot

Почему так: gimri (второй) — это корневая папка шаблона, в ней обычно всегда (по крайней мере в зарубежных шаблонах) присутствует папка /assets/, в которой хранятся все материалы для сайта. Ну а в папке /gimri/assets/fonts/ соответственно лежат шрифты.

В таком ключе я скачал все нужные шрифты, которые у меня лежат в моей папке /fonts/ в корне сайта.

Скачанные шрифты
Скачанные шрифты

Далее копирую картинки — они копируются по аналогии с CSS-файлами. Просто прохожу по моему HTML-исходнику и ищу вхождения «.jpg / .png».

Далее копирую JS-файлы с такой же легкостью.

Пробую повторно запустить HTML-страницу из корневой папки у себя на компе:

Идеально! Как на оригинале
Идеально! Как на оригинале

Якорь мне в глотку! Созданная страница повторяет оригинальный  HTML-шаблон пиксель в пиксель, абсолютно идентичные блоки, расстояния, анимации и всякие JS-плюшки. Задача выполнена.

Резюме по этому варианту

Если вы пойдете этим путем, вам обязательно нужна будет тренировка на нескольких шаблонах. Если чего-то непонятно или не получается, то ловите мой результат (ага, кнопка «Скачать»), возможно прольется свет на какие-то непонятные моменты.

Сложно? Нет, действия однотипные и порой даже туповаты.

Долго? Снова нет, вопрос практики, не более. Скажу так — я поднял бы такую структуру (именно эту страницу) у себя за 5-10 минут. Максимум 15 если пить чай и отвлекаться почесать кота.

Сделайте несколько итераций и вы поймете что это можно сделать очень оперативно, к примеру, поднять простой HTML-шаблон полностью (страниц 5-7) можно за 30-40 минут. Ну или платите от $5 — $30.

Конечно, бывают ситуации когда время «копирования» увеличивается, например за счет того, что на разных страницах сайта используются картинки с одинаковыми именами — тут приходится в /images/ создавать еще отдельные папки для разных страниц сайта.

Что самое классное? Поднимая первую страницу шаблона (неважно какую) вы параллельно поднимаете все остальные страницы на 80-90%, так как CSS-стили у сайта общие, JS-скрипты общие, шрифты общие. Вам не нужно будет для другой страницы снова сохранять все CSS и JS (если только не попадете в ситуацию когда на какой-то странице подключается скрипт только для этой страницы — хотя это легко тестится). Останется только скопировать саму HTML-разметку и сохранить все фотографии. Круто, да?

Резюме общее

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

Пишите в комменты что понятно — непонятно, что получились — не получилось, пробовали — не пробовали и т.д. К диалогу открыт.

Комментарии1
  1. Vlad

    Неееее, как по мне — так лучше заплатить 5 баксов за шаблон, чем столько гемора.

Добавить комментарий

Трудовой Шмель