Как создать одностраничный сайт бесплатно и быстро?

Всем привет, и очередной урок по теме, «Как создать одностраничный продающий сайт бесплатно и быстро». Расскажу в подробностях, что и как делается, даже для полных нулей и новичков, которые вообще не понимают, будет понятно.

Рассмотрим как сделать одностраничный сайт для вашего курса или какой-либо другой информации. Вот пример моего одностраничного сайта, который создан под курс «Как создать блог и сделать его популярным ?» внизу страницы этого курса, есть форма подписки, на данный момент курс еще не вышел, по этому я сделал такой простенький одностраничный сайт.

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

Как создать одностраничный сайт?

Для начала работы, нам нужна программа Web Page Maker, она бесплатная, впишите её в поисковик и скачайте. Скачали, установили и запускаем программу, значок выгладит вот так.

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

Жмем по центру, на чистом листе правой кнопкой и выбираем «Свойства»

Открывается окно, и переходи к пункту «Мета Тэги» и прописываем здесь, название, автор, ключевые слова и описание.

Название — это тот текст который будет виден в браузере после иконки фавикон, по этому пишите название вашего курса, ну или название вашего сайта.

Далее заполняем автора, затем ключевые слова и описание странички, я писать не буду а вы пишите. Переходим на следующий пункт «Фон» и ставим галочку возле «Фон рисунка» жмем обзор и выбираем фоновый рисунок для нашего одностраничного сайта. У меня размер фона 100×100, вот вам кину свой фон как пример.

Переходим дальше к самому основному пункту «Вид» этот пункт один из самых важных, по этому не пропустите его. Ставим выравнивание по «центру» затем ниже кодировку страницы ставим «UTF-8». Ребята это очень важно и нажимаем Ок. Вот пример.

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

Выбираем картинку которую вам нужно вставить и жмем Ок. Картинка должна появится.

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

Выравниваю изображение по центру и все, затем нужно вставить форму подписки. Где её взять и как её создать ? Подписка вставляется с помощью HTML кода, где взять HTML формы подписки ?

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

Прежде чем создать подписку, вам нужно будет для начала перейти в раздел «Рассылки/Создать новую рассылку»

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

И нажимаем в низу странички «Получить HTML код» выделяем этот код и копируем. Затем переходит обратно к нашей программе Web Page Maker, в раздел «Вставить/Html-код или скрипт-код»

В окне которое появилось вставляете ваш скопированный код подписки, и жмем Ок. Перетягиваем с помощью мышки, зажав левую кнопку, в то место, которое хотите поставить форму. Не пугайтесь что в программе не видно никакой формы подписки, просто она её не показывает, посмотреть можно нажав кнопку F5 или в панели в верху «Файл/Посмотреть в браузере».

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

В разделе «Вставка/Текст» затем жмем два раза, и вписываем любой текст и редактируете, шрифт, размер и так далее и жмем ок, выравниваем как нужно, ставим на то место, где вам нужно. Таким образом вставляется в принципе все.

После всего жмем «Сохранить», после того как сохранили, в раздел идем «Файл/Экспорт HTML» и Ок.

Ищем сохраненные файлы, те которые вы сохранили, которые находятся в папке и открывает её, в ней есть файл который называется Index.html, нам нужно его отредактировать, чтобы это сделать нужна программа «Notepad++» об этой программе я уже говорил в статье Как создать почтовый ящик для своего домена?

Скачать Notepad++ можно в интернете, она тоже бесплатная, просто введите название и скачайте, после установите. Итак идем в папку с вашим одностраничным шаблоном, и нажимаем на Index.html, правой кнопкой и выбираем Edit with Notepad++

И видим краказяблики а не русский текст, чтобы сделать все красиво, нажимаем «Кодировки/Кодировать в ANSI» и еще раз нажимаем "Кодировки/Преобразовать в UTF-8 без BOM" и сохраняем.

Если вы хотите сделать фавикон для вашего одностраничного сайта как у меня например, у меня есть пост на блоге, я недавно написал, он называется «Как сделать фавикон для сайта?» в статье в самом низу скопируйте код и вставьте между тегами head. На видео ниже я показал куда и как его вставить так что смотрите видео.

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

Вот в конце видео там все подробно, для тех кому что-то не понятно.

Создать одностраничный сайт с Wppage для WordPress

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

Для тех, кто надумает приобрести этот плагин по моей ссылке, тому верну 50% от прибыли !!!

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

С уважением Евгений Смецкий