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

И так, переходим на оф сайт программы по
ссылке, и выбираем вкладку DOWNLOADS как на рисунке:

Рис 1

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

Рис 2

Откроется следующая страница, и по умолчанию начнется скачивание. Находим ваш установочный файл, щелкаем 2 раза:

Рис 3

Следуем подсказкам мастера, значения не меняем, устанавливаем:

Рис 4

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

Рис 5

Раскрываем окно на весь экран и приступаем к работе.
Об Особенностях и Как правильно сделать сайт воронку, мы говорили в предыдущих публикациях, где рассматривали ключевые моменты, структуру и особенности написания таких страниц.
Переходим в интерфейс программы, и вначале необходимо сделать таблицу, выбираем: Таблица и в появившемся окне выбираем 1 ячейку, щелкаем на нее:

Рис 6

Появилась наша таблица. Это границы нашего сайта воронки, нам необходимо настроить ширину, для этого щелкаем правой кнопкой мыши по таблице – Свойства ячейки таблицы…:

Рис 7

В появившемся окне выбираем вкладку Таблица, и настраиваем Ширину, ставим 700 пикселов, нажимаем Ок:

Рис 8

Наша таблица с узилась, и нужно поставить ее по центру, нажимаем Выровнять по центру:

Рис 9

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

Рис 10

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

Рис 11

Буквы необходимо сделать красным цветом, для этого жмем на значок выбора цвета для текста:

Рис 12

Нам нужно выбрать правильный цвет, лучшие цвета для заголовка #CC0000 или #FF0000, прописываем его в поле, Ок:

Рис 13

Увеличиваем размер заголовка, по своему усмотрению, нажимая на букву А в панели инструментов:

Рис 14

Получился вот такой у нас заголовок:

Рис 15

Далее мы поставим с вами картинку, для этого идем в меню и выбираем: ВставкаИзображение:

Рис 16

В открывшемся окне, нажимаем на папку, находим наше изображение, выбираем:

Рис 17

Выбираем: не использовать альтернативный текст, Ок:

Рис 18

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

Рис 19

Клавишей Enter опустим ее немного вниз, ниже вставляем остальной текст:
Я ставлю его по левому краю; шрифт делаю Verdana; вступление текста выделяю; расставляю его по пунктам при помощи маркированного списка на панели инструментов:

Рис 20

Осталось вставить форму подписки. Для этого мы идем с вами в Смартреспондер, и копируем нужный код формы подписки. Если еще не сделали форму, то делаем через генератор форм подписки. Копируем код:

Рис 21

Нам нужно вставить эту форму на наш сайт. Вставляем для этого еще одну таблицу: выбираем ТаблицаВставитьТаблица:

Рис 22

Выбираем так же 1 ячейку, щелкаем на нее. Появляется новая ячейка, центрируем ее:

Рис 23

Ячейка встала посередине. Внизу редактора настраивается вид страницы, сейчас у нас по умолчанию стоит Дизайн. Ставим курсор внутрь нашей ячейки и выбираем внизу вкладку Код:

Рис 24

Появляется HTML код страницы. Курсор должен стоять в этом месте, между тегом: <td style=»vertical-align: top;»> и тегом <br>

Рис 25

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

Рис 26

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

Рис 27

Вот такая получилась у нас форма:

Рис 28

Мы видим что вокруг формы образована еще одна рамка, она нам мешается, поэтому убираем ее:
Возвращаемся в обычный режим: в меню ВидОбычный режим редактирования.
Выбираем рамку, кликаем на нее и выделяем таблицу:

Рис 29

Далее кликаем по таблице правой кнопкой, выбираем Свойства таблицы. В поле Рамка убираем наш пиксель, ничего не ставим и нажимаем Ок:

Рис 30

Все, теперь наша рамка исчезла, можно посмотреть через Предварительный просмотр:

Рис 31

Все отлично, рамка стала невидимой.
Если после вставки формы какой то элемент сместился: щелкните на него правой кнопкой мыши, выберете: Свойства ячейки таблицы, в появившемся окне выберите: Таблица, Выравнивание таблицы поставьте По центру, Применить, Ок:

Рис 32

На этом мы заканчиваем конструирование нашего сайта воронки. Мы создали заголовок, вставили картинку, описание, и сделали предложение подписаться в виде формы подписки. Сохраним его в HTML формате: ФайлСохранить как… Закрываем. Находим наш сохраненный сайт, щелкаем 2 раза что бы просмотреть его в браузере, и вот такая у нас получилась страница:

Рис 33

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


1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)