Дневник Предпринимателя "inDV"
УстановитеFlash player
On-Line Радио от автора Дневника Предпринимателя "inDV" для действующих и начинающих предпринимателей и бизнесменов.

Формат радиостанции: All Talk

Жанры: House, Trap, Dubstep, Drum&Bass

Сейчас в эфире: Загрузка ...

  • Подписаться на статьи

    Введите свой Email-адрес:

    Подписавшись, вы будете получать все новые статьи себе на почту сразу после их публикации.
Рубрики: Интернет-Бизнес | Разработка | 13.06.2016 | 20:51 | 157 Просмотров

Создать одностраничный сайт для продажи товаров

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

Создать одностраничный сайт для продажи товаров? Легко!

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

Хочу отметить, что статья подойдет не только тем, кто хочет продавать свои курсы в интернете, но и желающим подзаработать на перепродаже товаров, например, закупаете у поставщика, допустим, наушники и начинаете рекламировать свой одностраничник с качественным описанием, отзывами и т.д. через контекстную рекламу или в группах социальных сетей, ну, и продаете, разумеется. Речь о продажах сегодня не пойдет, об этом я напишу отдельную статью, чтобы ее не упустить, рекомендую подписаться на статьи моего блога в боковой колонке, речь пойдет о создании одностраничного сайта для продаж. А теперь поехали!

Как создать одностраничный сайт для продажи товаров с плагином?

Хочется начать с того, что не все имеют многостраничные ресурсы, а хотят подзаработать лишь на этом виде деятельности, поэтому многим просто необходимо будет сначала зарегистрироваться на хостинге (рекомендую этот хостинг), после чего зарегистрировать доменное имя (адрес сайта) и установить на него WordPress.

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

Какие плагины можно использовать для создания такого сайта? Ну, я могу отметить только три плагина:

  1. WP PAGE
  2. Magic Landing Page
  3. Elegant Builder

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

Все главные принципы рекламной страницы в эти плагины давно заложены:

  • Иконки
  • Формы для заполнения
  • Кнопки
  • Разделы под тот или иной аспект рекламирования
  • Возможность создания формы оплаты любыми способами
  • Возможность создания формы подписки для автоматизации доставки инфопродукта

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

Как создать одностраничный сайт для продажи товаров, используя тему WordPress?

А вы знаете, что такое верстка? Да? Тогда вы и должны знать, что из любого шаблона WordPress можно удалить ненужные составляющие. Все ведь видели эти одностраничные сайты, там нет сайдбаров (боковых колонок), почти везде отсутствует шапка и подвал сайта. Так чего нам стоит их взять и удалить? Это проще простого, к тому же и бесплатно.

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

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

Создаем одностраничный сайт для продажи товаров на отдельной странице HTML.

Итак, в этом аспекте я буду наглядно показывать, как я при помощи кодов смогу создать одностраничный продающий сайт, для примера использую свой курс “Создай и заработай”. Я не стану слишком много креативничать, просто смысла нет, а основа вам сама даст понять, в какое направление начинать размышление.

Первое: Создайте отдельную папку в корне своего сайта, адрес которой должен быть примерно таким: www.ваш-сайт.ru/папка с будущей рекламной страницей

Второе: Создайте два файла (odnostranichnik.html) и (style.css), кстати, файл odnostranichnik.html вы можете переименовать на любой другой. Если вы рекламируете часы, то можете назвать его chasy.html, если наушники, то naushniki.html

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

Код odnostranichnik.html:


<html>
<head>
<title>Бесплатный курс "Создай и заработай"</title>
<link rel="stylesheet" media="screen" href="style.css" />
</head>

<body>

<div id="osnova">

<div id="nazvanie">Бесплатный курс "Создай и заработай"</div>

<div id="conteiner">

<div id="video">
<iframe src="https://www.youtube.com/embed/FBeM109R7R8?autoplay=0&amp;loop=1&amp;&amp;playlist=Video_ID" height="308" width="550" allowfullscreen="" frameborder="0"></iframe>
</div>

<div id="forma">
<div role="form" class="wpcf7" id="wpcf7-f21-p2-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response"></div>
<form action="http://indv.center/themes/odnostranichnik/odnostranichnik.html" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="21" />
<input type="hidden" name="_wpcf7_version" value="4.4.1" />
<input type="hidden" name="_wpcf7_locale" value="ru_RU" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f21-p2-o1" />
<input type="hidden" name="_wpnonce" value="4b5b55d680" />
</div>
<p>Ваше имя (обязательно)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </p>
<p>Ваш e-mail (обязательно)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </p>
<p><input type="submit" value="Отправить заявку" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
</div>

<div id="text">
Здесь можно добавить какой-нибудь текст
</div>

<div id="description">
<p>Курс очень простой. Любой пользователь сети интернет способен пройти его. Объясняется все быстро, четко и по делу в пять этапов, но необходимо сначала записаться на этот курс, чтобы техническая поддержка отправила пароль от первого шага. Как только выполнятся работы по первому уроку, необходимо будет отправить простенький отчет, после чего пользователь получает пароль от следующего шага и так далее. Доступ к видео урокам ученик получает бесплатно, однако, ему будет необходима сумма в размере 250 рублей, чтобы оплатить хостинг и зарегистрировать домен.</p>

<p>Этот курс не предназначен для создания серьезных проектов, поскольку там я открываю глаза на быстрый доход, который можно получить с сайта – он не совсем белый, поэтому не рекомендую вкладывать таланты и душу в создание сайта по этим урокам. Этот курс был создан специально для того, чтобы у простых людей, у которых нет денег, появился шанс заработать первые инвестиции для серьезного проекта.</p>
</div>

</div></div>

</body>

</html>

Код style.css:

body
{
background: url('background.jpg') no-repeat center 0;
background-attachment: fixed;
background-size: 100%;
color: #323232;
margin: 0px auto 0px;
padding: 0px;
}

#osnova
{ 
width: 1000px;
height: auto;
margin: 0px auto 0px;
padding: 0px;
}

#nazvanie
{ 
background: rgba(0, 0, 0, 0.55);
margin: 20px 20px 0px 20px;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
width: auto;
height: auto;
color: #ffffff;
text-align:center;
font:30px/35px Times new roman, Arial, Helvetica, sans-serif; 
font-weight:bold;
}

#video
{ 
float: left;
background: rgba(0, 0, 0, 0.55);
margin: 20px 0px 0px 20px;
padding: 20px 20px 20px 20px;
border-radius: 10px 10px 10px 10px;
width: 550px;
height: 308px;
}

#forma
{ 
float: right;
background: rgba(0, 0, 0, 0.55);
margin: 20px 20px 0px 0px;
padding: 20px 0px 20px 0px;
border-radius: 10px 10px 10px 10px;
width: 350px;
height: auto;
color: #ffffff;
text-align:center;
font:20px/25px Times new roman, Arial, Helvetica, sans-serif; 
font-weight:bold;
}

#text
{ 
float: right;
background: rgba(0, 0, 0, 0.55);
margin: 20px 20px 0px 0px;
padding: 20px 0px 20px 0px;
border-radius: 10px 10px 10px 10px;
width: 350px;
height: auto;
color: #ffffff;
text-align:center;
font:20px/25px Times new roman, Arial, Helvetica, sans-serif; 
font-weight:bold;
}

#description
{ 
float: right;
background: rgba(0, 0, 0, 0.55);
margin: 20px 20px 0px 20px;
padding: 0px 20px 0px 20px;
border-radius: 10px 10px 10px 10px;
width: auto;
height: auto;
color: #ffffff;
text-align:left;
font:15px/15px Times new roman, Arial, Helvetica, sans-serif; 
font-weight:bold;
}

Для объяснения возьму только один пункт – Заголовок рекламной страницы.

Код на странице:

<div id="nazvanie">Бесплатный курс "Создай и заработай"</div>

DIV – открывающийся и закрывающийся атрибут, заданный в файле стилей, в нашем случае это nazvanie

Код в файле style.css:

#nazvanie
{ 
background: rgba(0, 0, 0, 0.55);
margin: 20px 20px 0px 20px;
padding: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
width: auto;
height: auto;
color: #ffffff;
text-align:center;
font:30px/35px Times new roman, Arial, Helvetica, sans-serif; 
font-weight:bold;
}

Весь этот код является настройками отображения атрибута nazvanie.


background: rgba(0, 0, 0, 0.55); – Фон, настройки цвета Red, Green, Blue, A – это прозрачность

как создать одностраничный сайт для продажи товаров


margin: 20px 20px 0px 20px; – отступы объекта


padding: 10px 10px 10px 10px; – отступы текста внутри объекта


border-radius: 10px 10px 10px 10px; – закругление углов объекта


width: auto; – ширина


height: auto; – высота


color: #ffffff; – цвет текста


text-align:center; – расположение текста по центру


font:30px/35px Times new roman, Arial, Helvetica, sans-serif; – шрифты текста (если первый не установлен на компьютере у посетителя, включается второй и т.д.)


font-weight:bold; – значение жирного шрифта текста

Ссылка на получившийся сайт для продаж

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

Ссылка на архив с готовыми файлами

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

Правила и принципы наполнения одностраничника

Как создать одностраничный сайт для продажи товаров мы разобрались. Наполнить одностраничный сайт не сложно, сложно подстроиться под требования рекламных сетей, ведь требования разные, но объективные, поскольку в интернете слишком уж распространено торговать всякими липовыми курсами, кстати, я уже писал статью про мошеничество в интернете, рекомендую почитать и не рекомендую создавать сайты для мошенничества, во-первых, это является нарушением уголовного кодекса РФ, во-вторых, вы много не заработаете, почему, давайте разберемся.

Дело в том, что пользователи интернета становятся с каждым годом умнее и сразу видят высококачественный продукт или тупой и наглый прикол. Если вы тратите свое драгоценное время на создание хорошего продукта, а потом вкладываете душу в свою страницу, она 100% будет приносить вам постоянную прибыль. Мошеннику никогда не захочется создавать страницу аккуратно, красиво, он ее наполнит за десять минут и начинает рекламировать – наблюдаются частые орфографические и пунктуационные ошибки, многие изображения стоят криво, нет ни телефона, не адреса техподдержки, нету ничего, только банальное описание непонятного продукта… Вообщем, вы поняли, если заниматься, то серьезно, идем далее.

При наполнении страницы, посмотрите внимательно требования Яндекс Директ, они взвешенные и, исполнив только их, вашу рекламную страницу примут в любых других рекламных сетях, будьте уверены.

Итак, самое необходимое:

  • Вразумительные контактные данные продавца (номер телефона, скайп, icq…);
  • ОГРН, если продавец предприниматель;
  • Сертификаты и Лицензии, если продаваемый продукт должен иметь сертификацию.

Это пока все, что обязательно должно быть на одностраничнике на сегодняшний день, если в Законодательстве РФ что-то поменяется в связи с этим, я обязательно дополню статью.

На этих строчках я завершаю сегодняшнюю статью о том, как создать одностраничный сайт для продажи товаров, надеюсь, еще встретимся! Удачи!

C этой статьей также читают следующие:

Оставить комментарий

Наверх