Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Верстка секции с h1, изображением, которое движется и формом


Верстка секции с h1, изображением, которое движется и формом

Эта секция идет после меню сайта и шапки логотипа с телефоном.

Секцию назовем id=main, Будет контейнер с тремя колонками col-md-4.

В первой колонке с классом main-hdr, будет заголовок h1.

Этот заголовок h1 должен состоять из трех основных ключевых слов, один заголовок можно разложить на три ключевых слова.

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

Ниже идет подзаголовок у main.

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

Третий элемент это список ul с классом main-ul.

Списки любят поисковые системы, хотя бы один список должен быть на каждой html страницы.

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

Во второй колонке сделаем изображение main-pic с эффектом rellax, при прокрутке сайта вниз это изображение будет менять положение с учетом параметра data-rellax-speed=30.

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

Третья колонка состоит из формы main-frm.

У формы будет телефон и почта, но лучше использовать либо только телефон, либо почту.

Форма должна быть максимально простой и понятной.

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

Код index.html.

Стилизуем секцию main.

Начинаем от идентификатора секции section#main, зададим цвет фона серый.

Отступ зададим побольше margin: 600px 0, для примера перемещения картинки, при скролле вниз.

  1. У main-hdr установим отступ сверху margin-top: 100px, чтобы сделать заголовок и список по центру вертикали в секции, так как форма будет больше. H1 заголовок большим и красивым шрифтом с акцентным цветом, цвет который не часто используется на сайте, чтобы выделить заголовок. Все буквы заглавные всегда text-transform: uppercase. Для списка ul, каждому элементу списка li уберем точки list-style: none. Зададим отступы между строками элементов line-height: 2em и отступ элементов влево, чтобы добавить иконку margin-left: 25px. Иконка будет перед элементом списка значит задаем псевдоэлемент &:before с абсолютным позиционированием. Шрифт будет font-family: fontawesome с изображением иконки content: \f05d.
  2. Для картинки main-pic делаем относительное позиционирование position: relative и переносим ее вниз bottom: -20em, чтобы она поднималась вверх при прокрутке с ускорением плагина rellax.
  3. main-frm установим цвет фона и отступы от краем padding: 40px. Сделаем бордюр полоска сверху формы border-top: 6px solid blue. У формы будет заголовок h2 с ключевым словом заказать товар в городе, например. Выставим отступы от верха секции и от заголовка до поля ввода. У формы установим action=send.php и метод  method=post. Первое поле в форме input type=hidden будет скрыто, оно нужно для названия формы, чтобы можно было определить в почте, из какой формы прислали письмо. На landing странице форм должно быть в идеале пять штук, это золотая середина. Одна форма с калькулятором параметром товара и сразу отправка на почту, две формы по кнопке в всплывающем окне. Две открытые формы как форма, которую сделали. В этой форме добавим два предложения, одно, что товара количество ограничено. Второе предложение, что будет бесплатный подарок, бонус или скидка, если заказать. Внизу будет кнопка button с ключом как у h1.

Проверим в браузере, как получилась секция main.

Стилизуем секцию main с формой обратной связи

Код в main.sass.

Установим плагин rellax для движения картинки.

Пишем в поисковике rellax и переходим на страничку, чтобы скачать плагин.

После того как скачали, добавляем папку плагина в libs, где лежат все наши плагины.

Откроем файл gulpfile.js и подключим  скрипт app/libs/rellax-master/rellax.min.js.

Теперь в common.js добавим код, чтобы плагин активировать.

Возле любого дива, у нас это изображения добавляем второй класс rellax и задаем любую скорость перемещения параметром data-rellax-speed=10.

Установим плагин rellax для движения картинки.

Проверим как меняется изображение main-pic с учетом скролла вниз.

Изменение изображения в пространстве при скролле мышкой

Комментариев нет