Эффективный Landing Page для электронного руководства

Данный лендинг для электронного руководства поможет вам наиболее эффективно собрать подписную базу для продвижения вашего электронного руководства (ebook). Шаблон эффективной Landing Page для электронного руководства, содержит блок презентации самой электронной книги (обложка с названием), всплывающие формы подписки (внизу и вверху желтые кнопки), минигалерею для демонстрации страниц разделов или содержания вашей книги, блок с отзывами, блок с видео презентацией, страницей об Авторе и блоком "мы в социальных сетях".

Готовый шаблон можете скачать нажав на кнопку "Скачать" в самом низу статьи.

Демо просмотр

Как сделать еще лучше наш шаблон
Landing Page для электронного руководства

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

1. Как переделать обложку книги в шаблоне на свою;
2. Как сделать меню фиксированным в верху и более удобным;
3. Как сделать плавные переходы по разделам (блокам) Landing Page ;
4. Как добавить кнопку Наверх;
5. ... и другое.

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

Как переделать обложку книги в шаблоне на свою

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

Как сделать меню Landing Page фиксированным в верху и более удобным

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

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

#header {
background: none repeat scroll 0 0 #2f2f2f;
box-shadow: 0 0 3px 0 rgba(50, 50, 50, 0.6);
color: #fff;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 9999;
}

Небольшое изменение в стиле и наше меню фиксируется пр прокрутке страницы. Теперь нужно добавить плавности при переходе после нажатия пункта меню.

Как сделать плавные переходы по разделам Landing Page

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

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

Здесь нас может выручить скрипт Smooth Scroll. Взять его можно здесь: https://github.com/kswedberg/jquery-smooth-scroll. Полезная штука скачайте - пригодится для ваших Landing Page и сайтов одностраничников.

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

Как добавить кнопку Наверх

Теперь осталось добавить кнопку Наверх.

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

Тут нам также понадобится небольшой скрипт, который вы можете взять здесь http://jsfiddle.net/neeklamy/RpPEe/. Если вы заглядывали в исходный код Демо 2, то под скриптом плавного переход могли увидеть как раз его. Копируйте и используйте если он вам как и мне, кажется необходимым и удобным дополнением.

Изображения PNG для кнопок Наверх, можно скачать здесь. Там их около 70 видов:

А вот и демонстрация готового результата - Демо 2:

Демо просмотр № 2

Итоги

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

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