Инструкция по настройке шаблонов

(Все на самом деле проще, чем вы думаете...)

Навигация по странице:

 Стоимость моих услуг по редактированию шаблонов, загрузке на хостинг и т.д.:
- Изменить текст на ваш (вы четко напишите, что и на что изменить) - 1499 рублей.
- Заменить картинки (вы присылаете новые изображения) - 999 рублей.
- Заменить картинки (я сам их ищу под ваш текст) - 1499 рублей.
- Нужно создать новую фоновую иллюстрацию (уникальную картинку на 1-й экран) - 1499 рублей.
- Хостинг и домен (регистрация + выгрузка) - 999 рублей. (+ стоимость хостинга и домена)
p.s. Если же вы намерены редактировать сайт под себя сами, то ниже приведена подробная инструкция:

Начнем с того, как менять текст на сайте?

Первым делом, вам нужно скачать и установить: Notepad++ (жмите по нему, это ссылка) с его помощью мы будем редактировать текст.
В купленном вами шаблоне, весь текст сайта находится в файле index.html
Открыв архив вы его сразу увидите.
Распакуйте архив в удобное вам место (допустим на рабочем столе создайте папку допустим "Сайт", и поместите туда содержимое архива).

А теперь создайте на рабочем столе папку "Резервная копия" и туда скопируйте недавно созданную папку "Сайт" в которой у нас распакован архив с сайтом. Это делается для того, что если вы в процессе изменения сайта под себя сделаете что-то не так и не будите знать как вернуть все как было, вы всегда сможете восстановить ту версию сайта, которая не "поломана". Эту процедуру можно делать и потом, в процессе правок, например, вы поменяли текст и создали резервную копию сайта, а потом решили удалить часть текста, а через 5 минут решили, что недавно удаленный текст все таки был нужен, и тут осознаете как же хорошо, что есть копия сайта, где этот текст все еще имеется.
В качестве примера будет рассматривать шаблон №1 (с остальными все точно так же).

Значит распаковали мы содержимое архива в папку, выглядеть это будет так:
index.html - это и есть по сути ваш сайт. Там весь текст содержится и сейчас мы научимся его редактировать.
mail.php - там вы укажите свою почту, что бы на нее приходили заявки с сайта (ниже покажу как именно это делается).
Папка images - содержит в себе все картинки:
Все остальное для вас грубо говоря не важно и изменять его вам не придется.
С этим разобрались, возвращаемся в корень сайта (это то место где находится файл index.html).

Сейчас было бы хорошо посмотреть на сам сайт. Для этого можно открыть сайт локально, (файл index.html с помощью браузера, советую гугл хром).
Для этого кликаем по файле index.html правой кнопкой мыши, в выпадающем меню выбираем открыть с помощью и потом в новом списке нажмите левой кнопкой мыши по Google Chrome (можно, конечно же и другим браузером открыть, так же если в этом списке нет нужной вам программы, то в самом низу списка есть пункт "Выбрать другое приложение", кликнув по которому вы сможете найти тот же гугл хром).
Сайт откроется в браузере и теперь мы тут сможем просматривать сайт, после того когда что-то на нем поменяем. Допустим мы сейчас хотим изменить заголовок сайта, сейчас он "Ваше предложение, от которого человек не способен отказаться" а изменить мы хотим его на "Семинар по продажам в интернете от новичка до профи всего за 2 дня", сейчас мы видим же такую картину:
Сворачиваем браузер, (вкладка с открытым локально сайтом нам еще пригодится). Возвращаемся в нашу папку где находится сайт.

Теперь нам нужно открыть файл index.html в блокноте (Notepad ++).
Для этого кликаем по файле index.html правой кнопкой мыши, в выпадающем меню выбираем открыть с помощью и потом в новом списке нажмите левой кнопкой мыши по Notepad++
Файл откроется в блокноте, будет выглядеть оно так:
Сплошное полотно текста нам не подходит, поэтому мы в верхней менюшке блокнота ищем "Синтаксисы" и в выпадающем меню выбираем "HTML"
Теперь файл будет показываться как нужно (с подстветкой важного):
Сейчас нам надо найти тот текст который мы хотим заменить (мы выше определились, что начнем с заголовка),  для этого скопируем в хроме его кусок, "Ваше предложение, от которого", теперь свернем хром и вернемся в блокнот (Notepad++) и в нем нажмем комбинацию клавиш ctrl f - одновременно надо нажать две клавиши, кнопку ctrl и кнопку f

Всплывет окно поиска, во вкладке найти есть поле которое так и называется "Найти:" кликаем по нему и вставляем ранее скопированный кусок заголовка который нам надо изменить, после чего нажимаем по кнопке "Искать далее":
Нас перебросит на тот кусок кода где и прописан наш заголовок, еще и выделит тот кусок текста, что мы искали. Тут мы четко видим наш заголовок.
Единственный момент там написано "Ваше предложение, от которого <br> человек не способен отказаться".
Все вроде нормально, заголовок наш, но почему то посреди этого заголовка <br> - это означает перенос строки. То есть, вместо то, что бы быть в одну строку, наш заголовок в две строки, что бы красиво было, а то когда он в одну строку это выглядит не очень.
Давайте на практике это рассмотрим, значит меняем старый заголовок на новый (просто пишем новый заголовок вместо старого):
Если вы внимательный человек, то успели уже заметить, что выше нашего заголовка зеленым цветом написано, что Ниже текст надо менять (заголовок, и подзаголовок), такие комментарии (зеленого цвета), будут и дальше вам помогать.
Значит заголовок мы наш изменили, тупо старый (вместе с <br>) все удалили и на его месте написали новый заголовок. Теперь логично, что надо сохранить наши изменения, для этого нажимаем по иконке дискеты, в левом верхнем углу блокнота (Notepad++):
Нажали, иконка стала черно-белой, все успешно сохранилось. Теперь пора посмотреть на наш сайт. Для этого возвращаемся в хром и обновляем вкладку:
Заголовок тот что нужно, единственное, я бы сделал его в две строки не так как сейчас, что бы переносилось на вторую строку не "2 дня", а "от новичка до профи всего за 2 дня". Для этого пропишем (а точнее скопируем с участка ниже) <br> и вставим там, где нам требуется перенос строки.
Снова идем в браузер, обновляем вкладку и видим красоту:
Таким образом можно изменить буквально любой текст на сайте:
И как результат:
p.s. Если же вы продвинутый пользователь, то вам может быть полезно ускорение этого процесса.
Допустим какой то текст повторяется несколько раз на сайте, то его можно одновременно во всех местах заменить на новый (например изменить старый номер телефона на новый, или старую цену на новую и т.д). То тогда при нажатии ctrl f можно кликнуть по вкладке "Заменить" в поле найти напишем допустим старую цену 1999, а в поле "Заменить на" новую цену 1499. После жмем на кнопку "Заменить все" и автоматически везде произойдет замена (она доже напишет внизу окошка, что произведено столько-то замен), и вместо 1999 руб. будет уже 1499 руб.
Значит с этим разобрались, текст менять по сути просто, находим старый и меняем на новый - готово!
Забегая наперед, скажу, что с картинками аналогичная ситуация, там тоже находим старую, меняем на новую - готово.
 Как сделать, что бы заявки с сайта приходили на мою почту?
Тут тоже все просто, что бы результаты заполнения форм, приходили к вам на почту, нужно открыть в корне файл mail.php в блокноте (Notepad++).
Там вы сразу увидите пример почты 777@gmail.com, ее надо заменить на вашу, так же вы можете заголовок письма изменить, вместо "ВАШ САЙТ" написав то что нужно:
В результате получите что-то вроде этого:
 Как поменять картинки?
Папку с картинками мы уже видели:
Она находится в корне сайта и называется "images".
Суть такова: нужно заменять старые картинки на новые, соблюдая расширение (jpg, png) и размер (сколько на сколько пикселей).
Для удобства можете скачать программку FastStone Image Viewer (да, это ссылка, можно нажать по названии и скачать).
Значит допустим нам надо заменить одну из картинок:
Смотрим, называется strategy и имеет расширение png (это ее формат и значит, что она на прозрачном фоне). Еще нам надо выяснить ее размер, для этого открываем ее уже знакомым нам методом, но уже не в Notepad++, а в FastStone Image Viewer. Потом наводим курсор к левому углу и видим как всплыло окошечко, в котором написан размер картинки в пикселях, он там подписан словом "Атрибуты", там же и указано расширение (формат) картинки, в данном случае PNG:
Видим, что размер нашей картинки 128 пикселей на 128 пикселей.
Но она нам не подходит, нам нужна другая.
Где ее взять иконки в нашем случае? А по ссылке flaticon.com

Сейчас важный момент, вот ссылки на страницы где брать иконки в зависимости от того какой вы купили шаблон:
- Для №1 иконки брать тут
- Для №2 тут
- Для №3 тут и тут
- Для №4 тут
Переходим и видим, что нам подходит допустим эта:
Наводимся на нее курсором мышки, кликаем по символу "глазик":
Во всплывшем окошке, нажимаем сначала по кнопке "PNG" (мы же помним, что именно этого формата наша картинка), а потом кликаем по "128" (у нас же картинка имеет размер 128 на 128 пикселей, а на этом сайте они все квадратные).
Когда кликните по размеру (в нашем случае 128), всплывет новое окошко, в нем нажимаем "Free download" и картинка скачается. (Конечно можете нажать и по Premium download, и отблагодарить автора финансово, тут уже все на вашей совести).
Если иконка не цветная, то ее можно покрасить в нужный цвет, для этого кликните по символу "круглой радуги", а потом в поле # вставьте код необходимого цвета. Взять его можно пипеткой с существующих иконок. Рекомендую для этого приложение pixie (да это тоже ссылка на скачку).
Теперь у нас есть картинка:
Одна в ней проблема, называется она не так как старая. Теперь пора ее переименовать, что бы получилось так:
А теперь просто перетаскиваем ее в папку images (там находятся картинки нашего сайта) и соглашаемся с заменой:
Все, видим, что старая картинка заменилась на новую в папке:
Теперь возвращаемся в браузер и очередной раз обновляем вкладку с открытым сайтом и вуаля:
Тут уже раз мы меняли картинку, то и текст под ней скорее всего нас не устраивает, поэтому поменяем и его, находим нужный кусок текста (в нашем случае подойдет слово "Стабильность"):
Вот оно нашлось:
Меняем его на то что нужно и снова вуаля:
Таким образом можно поменять и все остальные преимущества, но допустим нам надо поменять фото человека, который оставил отзыв, допустим надо парня с первого отзыва поменять на нового:
Смотрим сначала на исходное фото называется оно очень просто - 1.png (открываем в FastStone Image Viewer, и подводим курсор мыши в правый бок):
Что мы видим? Правильно, размер картинки 220 на 220 пикселей и формат ее PNG. Окей, пора "подогнать" нашу картинку под требуемые характеристики. Так же открываем ее в FastStone Image Viewer, и наводим курсор мышки уже на левый бок, в выпадающем окне нас интересуют только 2 пункта: "Изменить размер" и по "Обрезка". Наша картинка явно больше чем 220 на 220 пикселей (можете сами посмотреть наведя курсор в правый бок). Значит изменим ее размер по меньшей стороне, для этого кликаем по "Изменить размер":
Что мы видим? Правильно, размер картинки 220 на 220 пикселей и формат ее PNG. Окей, пора "подогнать" нашу картинку под требуемые характеристики. Так же открываем ее в FastStone Image Viewer, и наводим курсор мышки уже на левый бок, в выпадающем окне нас интересуют только 2 пункта: "Изменить размер" и по "Обрезка". Наша картинка явно больше чем 220 на 220 пикселей (можете сами посмотреть наведя курсор в правый бок). Значит изменим ее размер по меньшей стороне, для этого кликаем по "Изменить размер", после во всплывшем окне кликаем по полю "Высота" (поскольку мы определились, что она имеет меньшее значение). И вводим в поле 220 (именно 220 пикселей высота нашей фотографии человека, оставившего 1й отзыв). После кликаем по кнопке "Ок":
Окошко пропадет, и теперь снова наводимся мышкой в левый угол и теперь уже кликаем по пункту "Обрезка", далее, вам нужно в левом нижнем углу выставить в полях 220 и 220 (в пункте размер бумаги должно быть произвольно). После чего жмем по кнопке в правом нижнем углу "Обрезать":
Теперь нам предложит сохранить измененную картинку. В имя объекта пишем название нашей старой картинки (1), формат у нее как мы помним все тот же png (кликаем по "Тип файла" и с выпадающего списка выбираем png:
Таким образом у нас получится такая картина, тперь пора нажать на кнопку "Сохранить":
И теперь пора провести замену старой фотки на новую, этот процесс уже описан выше, в примере с иконкой в преимуществах. Когда мы заменим старую картинку на новую у нас получится так:
Да, оригинальная фотография была на прозрачном фоне и выглядела немного стильнее, но тут тоже нет проблем, с помощью фотошопа можно вырезать фото человека с фона, и сделать его на прозрачном фоне:
Этот процесс описывать нет смысла, можете найти готовые инструкции на просторах интернета, или же поступить проще и вместо того, что бы заморачиваться со всеми этими правками, просто закажите их внесение у меня. если вдруг забыли то вот моя почта: artstrangers@gmail.com
 После настройки сайт нужно его загрузить на хостинг:
Сайт отредактирован и готов к выгрузке в интернет? Отлично!Для начала зархивируйте его в zip архив и назовите допустим 1.zip (По сути у вас должен получится такой же архив, который вы получили после покупки сайта у меня, только уже измененный под ваши нужды).

Надо его залить на хостинг, я советую beget.com (да это ссылка и кликнув по ней, откроется то о чем я говорю).
Если вы не в курсе что к чему, то хватит минимального тарифа Blog, сейчас он по цене 115 руб./месяц. Тут все просто, переходите по ссылке. жмете по кнопке "Заказать" проходите интуитивно понятную регистрацию, оплачиваете хостинг и дальше покупаете домен.

Как это сделать? А очень просто. В панели управления https://cp.beget.com/ кликаете по:
Далее все так же интуитивно понятно, просто читаете что ан странице написано и сразу становится все ясно:
На крайняк вы и в службу поддержки хостинга можете написать, если что-то не ясно.

Допустим домен вы зарегистрировали, а теперь пора грузить сайт, в панели управления кликаем по:
Далее кликаем по .bget.ru (перед точкой у вас будут свои цифры и буквы, это если что, ваш бесплатный домен):
Далее открываем папку public_html, и вот уже в нее загружаем сам архив (1.zip):
Когда архив загрузится, кликаете по нему правой кнопкой мыши и нажимаете в появившейся менюшке по "Распаковать Архив":
Потом в появившемся окошке нажимаем по кнопке "ОК":
Теперь переходим по адресу нашего домена и радуемся результату!

Если все описанное выше вам не понятно,
сложно, некогда или хотите что бы все было четко,
то можете обратится за внесением правок ко мне:

Просто пишите мне на почту: artstrangers@gmail.com