Идеи Малого Бизнеса

Пожалуйста, войдите или зарегистрируйтесь.

Автор Тема: Мастер-класс по созданию лендингов (продающих страниц)  (Прочитано 18333 раз)

0 Пользователей и 1 Гость просматривают эту тему.
Понравилась эта тема - поделитесь ссылкой на нее в соцсетях:

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

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

Получилось вот что:



Вы можете спросить еще, как у меня получились абзацы с пропусками?
Я сейчас покажу вам редактор страницы в админке, переключенный на "Текст". Посмотрите и сравните с тем, что вы уже видели до этого. Там ничего особенного. Если будут вопросы - спрашивайте.
А вот и сама страничка редактора:

<h1 style="text-align: center;"></h1>
<h1 style="text-align: center;"><strong><img class="aligncenter size-full wp-image-23" src="http://kaktus.yur1.ru/wp-content/uploads/2014/07/заголовок.png" alt="заголовок" width="619" height="100" />Что это за зверь такой?</strong></h1>
&nbsp;
<p style="text-align: justify; text-indent: 35px;"><img class="alignleft size-full wp-image-17" src="http://kaktus.yur1.ru/wp-content/uploads/2014/07/я.jpg" alt="я" width="269" height="270" />Здравствуй уважаемый посетитель моего сайта! Сначала - два слова о себе. Я долго искал возможность самостоятельно зарабатывать деньги на жизнь, не работая на "дядю". И нашел интересный вариант, которым и хочу поделиться с тобой. Ведь и у тебя, возможно, есть желание тоже работать на себя, а не на "дядю".</p>
<p style="text-align: justify; text-indent: 35px;">Обещаю, что не будет обещаний сразу милионных денег, не будет никакой профанации типа всяких форексов и опционов, не будет никаких писем счастья и прочих лохотронов.</p>
<p style="text-align: justify; text-indent: 35px;">Всё просто, открыто, и реально.</p>
&nbsp;
Записан

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Сейчас добавлю немного текста и вставлю видео с ютубе.

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

Текст.

"Не буду тянуть с саморекламой (она мне не нужна), а сразу возьму быка за рога. То, что ты, мой уважаемый посетитель, увидишь ниже на видео - и есть тот самый электроцикл, как я его называю. Другие называют его моноколесом.
Сначала посмотри видео, а потом я расскажу как на этом можно зарабатывать, и весьма неплохо - тысячу-полторы долларов ежемесячно. Это как минимум.
Итак, смотрим видео."

Вот этот текст сейчас и вставлю.
Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Ну все, текст добавил. Смотрится это так:



А ниже сейчас скопирую и покажу здесь страничку редактора сайта под кнопкой "Текст":


<h1 style="text-align: center;"></h1>
<h1 style="text-align: center;"><strong><img class="aligncenter size-full wp-image-23" src="http://kaktus.yur1.ru/wp-content/uploads/2014/07/заголовок.png" alt="заголовок" width="619" height="100" />Что это за зверь такой?</strong></h1>
&nbsp;
<p style="text-align: justify; text-indent: 35px;"><img class="alignleft size-full wp-image-17" src="http://kaktus.yur1.ru/wp-content/uploads/2014/07/я.jpg" alt="я" width="269" height="270" />Здравствуй уважаемый посетитель моего сайта! Сначала - два слова о себе. Я долго искал возможность самостоятельно зарабатывать деньги на жизнь, не работая на "дядю". И нашел интересный вариант, которым и хочу поделиться с тобой. Ведь и у тебя, возможно, есть желание тоже работать на себя, а не на "дядю".</p>
<p style="text-align: justify; text-indent: 35px;">Обещаю, что не будет обещаний сразу милионных денег, не будет никакой профанации типа всяких форексов и опционов, не будет никаких писем счастья и прочих лохотронов.</p>
<p style="text-align: justify; text-indent: 35px;">Всё просто, открыто, и реально.</p>
&nbsp;
<p style="text-align: justify; text-indent: 35px;">Не буду тянуть с саморекламой (она мне не нужна), а сразу возьму быка за рога. То, что ты, мой уважаемый посетитель, увидишь ниже на видео - и есть тот самый электроцикл, как я его называю. Другие называют его моноколесом.</p>
<p style="text-align: justify; text-indent: 35px;">Сначала посмотри видео, а потом я расскажу как на этом можно зарабатывать, и весьма неплохо - тысячу-полторы долларов ежемесячно. Это как минимум.</p>
<p style="text-align: justify; text-indent: 35px;">Итак, смотрим видео:</p>
&nbsp;

&nbsp;
Записан

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Теперь будем вставлять видео.

Идем в ютуб и находим нужный нам видеоролик.



Ниже, под экранчиком, есть слово "поделиться". Тыкаем в него.



После того, как жамкнули по слову "поделиться", тыкаем в кнопку "HTML-код". Там выбираем подходящий размер, или вообще устанавливаем свой. Я выбрал готовый формат - 640 пикселей по ширине.

Выделил код. Теперь захожу в редактор сайта, жму в кнопку "Текст", и вставляю этот код ниже текста. Вот что получается. Сначала смотрим этот код на страничке:

<h1 style="text-align: center;"></h1>
<h1 style="text-align: center;"><strong><img class="aligncenter size-full wp-image-23" src="http://kaktus.yur1.ru/wp-content/uploads/2014/07/заголовок.png" alt="заголовок" width="619" height="100" />Что это за зверь такой?</strong></h1>
&nbsp;
<p style="text-align: justify; text-indent: 35px;"><img class="alignleft size-full wp-image-17" src="http://kaktus.yur1.ru/wp-content/uploads/2014/07/я.jpg" alt="я" width="269" height="270" />Здравствуй уважаемый посетитель моего сайта! Сначала - два слова о себе. Я долго искал возможность самостоятельно зарабатывать деньги на жизнь, не работая на "дядю". И нашел интересный вариант, которым и хочу поделиться с тобой. Ведь и у тебя, возможно, есть желание тоже работать на себя, а не на "дядю".</p>
<p style="text-align: justify; text-indent: 35px;">Обещаю, что не будет обещаний сразу милионных денег, не будет никакой профанации типа всяких форексов и опционов, не будет никаких писем счастья и прочих лохотронов.</p>
<p style="text-align: justify; text-indent: 35px;">Всё просто, открыто, и реально.</p>
&nbsp;
<p style="text-align: justify; text-indent: 35px;">Не буду тянуть с саморекламой (она мне не нужна), а сразу возьму быка за рога. То, что ты, мой уважаемый посетитель, увидишь ниже на видео - и есть тот самый электроцикл, как я его называю. Другие называют его моноколесом.</p>
<p style="text-align: justify; text-indent: 35px;">Сначала посмотри видео, а потом я расскажу как на этом можно зарабатывать, и весьма неплохо - тысячу-полторы долларов ежемесячно. Это как минимум.</p>
<p style="text-align: justify; text-indent: 35px;">Итак, смотрим видео:</p>
&nbsp;
<iframe width="640" height="360" src="//www.youtube.com/embed/reKGWU6wU7g" frameborder="0" allowfullscreen></iframe>
&nbsp;



А теперь смотрим что получилось:



Решил, что не удержусь, и вставлю еще несколько роликов.
Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Ну вот. Навставлял аж 5 видеороликов!

Обычно на станице лендинга "обсасывают" каждое слово, каждую запятую, каждую картинку. Но выглядят такие лендинги академично. Вроде как диктор официальное сообщение выдает.

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

Так и тут. Я не стараюсь выдавать материал академично на своем одностраничнике. Пусть он выглядит спонтанно и неуклюже. Это как-то ближе к читателю. Уже испытано на моих бывших продающих страницах. Если просто, по-человечески, то люди клюют.

Если академично, как положено - ни одного заказа!
Записан

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

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

Что для этого я сделаю?

Войду в админку-страницы-редактор, и нажму кнопку "Текст", где страничка высвечивается в виде кодов. Найду внизу свои HTML-вставки роликов.

И перед каждой вставкой добавлю вот такой код:
<p style="text-align: center;">

А после каждой вставки добавлю вот такой код:
</p>

Жму справа "Обновить" и иду смотреть с парадного входа на сайт что получилось.
Все ролики выстроились по центру. Это куда лучше, нежели когда они были прижаты к левой стороне сайта.

На всякий случай даю код редактора этих вставок с поправкой на центр:

<p style="text-align: justify; text-indent: 35px;">Итак, смотрим видео:</p>
&nbsp;
<p style="text-align: center;"><iframe width="640" height="360" src="//www.youtube.com/embed/reKGWU6wU7g" frameborder="0" allowfullscreen></iframe></p>
&nbsp;
<p style="text-align: center;"><iframe width="640" height="480" src="//www.youtube.com/embed/VHK8jJHPITc" frameborder="0" allowfullscreen></iframe></p>
&nbsp;
<p style="text-align: center;"><iframe width="640" height="360" src="//www.youtube.com/embed/Mw150zwiG6E" frameborder="0" allowfullscreen></iframe></p>
&nbsp;
<p style="text-align: center;"><iframe width="640" height="360" src="//www.youtube.com/embed/QXBR9OoyQls" frameborder="0" allowfullscreen></iframe></p>
&nbsp;
<p style="text-align: center;"><iframe width="640" height="360" src="//www.youtube.com/embed/msgFRcbJ0vQ" frameborder="0" allowfullscreen></iframe></p>
&nbsp;

Как видите, все просто.
Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Вот так стал выглядеть наш сайт с высоты птичьего полёта 



Записан

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

       Дорогие форумчане! Для тех из вас, кто пока только еще читает эту ветку, но сам ничего не начал, я предлагаю отслеживать нарождающийся одностраничник по адресу:
kaktus (точка) yur1 (точка) ru  (без пробелов, конечно)

       Этот сайт я создаю на временном поддомене чисто для демонстрации приемов его создания. когда ветка будет мной окончена, я этот временный сайтик ликвидирую. Ведь для чего я всё здесь расписываю? Для того, чтобы те из вас, кому тема понравилась, сами научились создавать подобное. Будете внимательно следить за данной веткой, у вас тоже появится свой одностраничник к этому времени. А мой временный станет уже никому не нужным.
Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

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

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

Так, вставляю этот текст со смайликом. Где брать смайлики, найдете в моей подписи под каждым сообщением.
Записан

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Как вставить форму обратной связи?
Очень просто. Сначала в графической программе создаем кнопку. Я сделал вот такую:



Захожу в админку-медиафайлы-добавить новый.











URL-адрес картинки и ее размеры пока скопируем и сохраним в блокноте.

Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Так. Теперь устанавливаем плагин обратной всплывающей формы. Он называется:
SimpleModal Contact Form

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

Теперь заходим на страницу этого плагина: админка-настройки-SimpleModal Contact Form



И тыкаем в него.

Нам открылась страница настроек:



У тех из вас, кому я выслал этот плагин, настройка формы будет на русском. Там все интуитивно понятно. Заполняем и сохраняем.

Записан

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Теперь идем в админка-страницы-редактор-"Текст".

Нам нужно вставить вот этот код:

<a class="smcf-link" href="#"><img class="aligncenter" src="http://kaktus.yur1.ru/wp-content/uploads/2014/08/напиши-мне.png" alt="" width="200" height="62" border="0" /></a>

Обратите внимание, что URL-адрес картинки и ее размеры я подставил сюда из блокнота, в который мы до этого все сохранили.

Жмем "Обновить" справа и смотрим что получилось.



Если нажать эту кнопку, то нам откроется форма обратной связи:



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

Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Вы меня можете спросить:
- А почему бы сразу не подключить платежные системы?

Да, можно вместо "напиши мне" поставить кнопку "Заказать". И при нажатии на нее откроются все способы оплаты тут же, на сайте.

Я специально не поднимаю этой темы. Дело в том, что подключение платежных систем - это не так просто. Там нужно списаться с хозяевами сайтов платежных систем, заключить с ними договора, показать им свой сайт. Все это очень длинно. Кому интересно, можете на просторах Интернета найти ответ на вопрос "Как подключить платежную систему к своему сайту".

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

Идеи Малого Бизнеса


vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

В предыдущих топиках мне задавали вопрос:
- Как прикрутить к сайту счетчик обратного отсчета времени акции?

Для этого есть и платные и бесплатные плагины. Бесплатные, как правило, огромные и неуклюжие. Я бы не рекомендовал с ними связываться. Есть платные и в общем-то недорогие. Эти куда приятнее. Наберите в поисковике "плагины счетчика обратного отсчета в wordpress".

Вам откроется уйма предложений! А ставить плагины вы теперь умеете.

Я думаю нет смысла разбирать здесь это.
Записан

vladusan

  • Sr. Member
  • ****
  • Оффлайн Оффлайн
  • Пол: Мужской
  • Сообщений: 1973
  • web-master

Так, о чем еще надо рассказать в этой ветке?
Записан

Идеи Малого Бизнеса


 

Рейтинг@Mail.ru Рейтинг Досок Объявлений

Homeidea.ru © 2006-2024
Мы в социальных сетях
Разместить рекламу

Страница сгенерирована за 1.02 секунд. Запросов: 34.