• Какие есть причины, которые влияют на высокую конверсию лендинга, попробуем разобраться.

Почему у страницы захвата конверсия выше, чем у продающей страницы?

Причина 1: Уровень стресса

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

Рассмотрим ,как работать с цифрами, с полями для ввода, с расчетом.

Используем input, select и radio.

Структура калькулятора состоит из двух частей.

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

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

В итоге получим все файлы скриптов плагинов, jquery, bootstrap в одном минимизированном файле scripts.min.js, что удобно и выполняет требования google у сервиса page speed по скорости загрузки сайта на все сто процентов.

Генератор углов css будет включать ползунок при движении, которого будут меняться углы css.

Внизу будет блок для визуального отображения закругления и поле для вывода css кода стилей.

Добавим каркас для трех элементов отображения.

Сделаем игру крестики нолики на javascript.

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

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

Записываем это в массив dataX или dataO каждого игрока.

Например, есть форма обратной связи с полем введите номер телефона.

Изначально без маски телефона можно ввести любой номер в любом формате даже с буквами.

Мы сделаем, чтобы ввод телефона строго соответствовал заданной маске.

Сделаем красивую таблицу в html, с разными цветами у ячеек.

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

Сделаем структуру таблицы html.

Установим плагин слайдера bootstrap carousel, подключим к проекту.

Сделаем настройку навигации стрелочками и точками для карусели.

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

Подключаем bootstrap carousel и создаем две секции.

Создадим новую секцию у landing page с названием мои преимущества и добавим три иконку.

Установим у иконок анимацию css стилей с помощью библиотеки animate.css и скрипта, который будет вызывать анимацию относительно расположения иконки экрана монитора при скролле страницы мышкой вниз.

Как подключить анимацию блоков animate.css подробно тут.

Для товара, который продается на landing страничке можно сделать буклет или маркет кит, в развороте, который будет открываться при hover css наведении на изображение.

Разберем простой пример создания эффекта 3d разворота листа бумаги.

Эффект переворота листа.

Добавим секцию, в которую поместим один див с классом pict.

Код в index.html.