Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
Главная       Скачать       Уроки        Новости        Статьи        Контакты        Карта сайта
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
                                               Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

                               Всем желаю удачи и смелых воплощений идей на вашем сайте !
Полезные программы
Скачать Web Page Maker
Инструкция по WPM
Видеоуроки по WPM
Скачать шаблоны для WPM
Скачать Wordpress rus
Установка CMS WordPress
Установка темы WordPress
Скачать темы для WP
Скачать Joomla 3.0 rus
Установка CMS Joomla
Установка шаблона Joomla
Скачать темы для Joomla
Выбор хостинга
Пятерка лучших хостеров
Регистрация домена
Создание фавикона
Установка счетчика
Создание карты сайта
Юзабилити сайта
Кроссбраузерность
Бесплатные гостевые
Комментарии для сайта
Html-цвета для сайта
Декодер абракадабры





2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla, Adobe Muse  -  русские версии.
Автор и администратор  данного проекта - SvetLana_TSV.  Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Оригинальная подписная форма для сайта

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

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

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

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

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

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

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

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

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



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


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

После замены картинок нужно загрузить их и файл css на сервер, для этого воспользуйтесь любым FTP-клиентом, установленным на вашем компьютере, будь-то Total Commander или FileZilla. После загрузки файлов на хостинг, останется подключить стили и разместить форму на странице сайте.

Подключаются стили формы одной строкой кода, которую нужно прописать между тегами <head> и </head> в html-коде страницы:

<link rel="stylesheet" type="text/css" href="free_form.css">

Далее между тегами <body> и </body> в том месте страницы, где вы хотите видеть форму подписки (чаще всего в правом сайдбаре), вставляется основной код формы. В архиве это файл free_form_kod, открываете его, копируете все содержимое и вставляете на свою страницу. Данный код  для Смартреспондера, поэтому перед установкой формы у вас должен быть зарегистрирован аккаунт в серисе рассылок Смартреспондер.

В основном коде вам останется лишь заменить значения uid и did на свои. Эти значения представляют собой набор из шести цифр и узнать их можно в личном кабинете Смартреспондера, зайдя в раздел Формы Генератор формы.






<!--=== START | Free Form ===-->
<div id="free_form">
<div class="text1">Как создать сайт новичку без знаний программирования?</div>
    <img class="podarok" src="form_images/kurs_oblozhka1.png" alt="Видеокурс по созданию сайта" title="Как создать сайт самому без технических знаний">
    <div class="text2">Узнай подробности прямо сейчас:</div>
    <div class="form_bg">

        <!-- SmartResponder -->
        <form name="SR_form" target="_blank" action="http://smartresponder.ru/subscribe.html" method="post" onsubmit="return SR_submit(this)">
            <input type=hidden name=version value="1">
            <input type=hidden name=tid value="0">
            <input type=hidden name=uid value="803871"> <!-- Ваш uid -->
            <input type=hidden name=lang value="ru">
            <input type=hidden name="did[]" value="976035"> <!-- Ваш did[] -->
            <input name="field_name_first" class="name" type="text" value="Ваше имя="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
            <input name="field_email" class="email" type="text" value="Ваш E-Mail" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
            <input type="submit" name="SR_submitButton" value="Узнать детали" />
        </form>
        <!-- / SmartResponder -->

    </div>
    <div class="form_confident"><img class="form_lock" src="form_images/lock.png">Ваш E-Mail в безопасности</div>
</div>
<!--=== END | Free Form ===-->

Как узнать uid и did рассылки в Смартреспондере
Быстрый поиск uid и did в рассылке Смартреспондера
На открывшейся странице в Настройках формы выбираете нужную рассылку (если у вас их несколько) и в самом конце страницы в сгенерированном коде находите значения uid и did.

Для быстрого поиска можно воспользоваться сочетанием клавиш CTRL+ F, посде чего в окошко поиска, появившееся в верхнем правом углу, ввести uid, данный параметр тут же будет подсвечен в коде, останется его только скопировать, затем таким же образом найти did и тоже скопировать.



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

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

Кто еще не освоил CSS и не знает, какой параметр за что отвечает, рекомендую почитать учебник по CSS, чтобы с легкостью править любой элемент формы (да и не только) под дизайн своего сайта.

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

А пока скачивайте архив с формой, редактируйте дизайн, меняйте картинки, вообщем, готовьте форму к сбору подписчиков:))

Скачать бесплатно архив с формой подписки

В завершение повторим шаги установки подписной формы на свой сайт:

1. Скачать архив с файлами формы.
2. В папке с картинками произвести замену обложки продукта на свою и при желании можно сменить фоновую картинку.
3. В файле со стилями подправить внешний вид формы, чтобы максимально вписать в дизайн сайта.
4. Загрузить папку с картинками и файл со стилями в корневую директорию хостинга.
5. HTML-код формы вставить на страницу сайта в то место, где должна быть подписная форма и сменить параметры uid и did на свои.
6. Загрузить страницу на хостинг.
7. Проверить работоспособность формы.
  
Вот и все, теперь и на вашем сайте установлена стильная функциональная форма подписки.

На этом материал завершаю. До новых встреч!
С ув. Светлана (SvetLana_TSV)

P.S. Подписчики вместе с анонсом этого материала получили отличный бонус - доступ к платному VIP-контенту. Быть подписчиком сайта ВЫГОДНО! Присоединяйся и получай платные материалы бесплатно!


Не забудь заглянуть в свою почту и подтвердить подписку!