Мой шаблон, с которого я начинаю создание landing page

Шаблон для создания посадочной страницыДобрый день, Друзья! Недавно, наконец-то написал первый человек в раздел "Ваши предложения" (Как давно я этого ждал:)) И девушка обратилась с просьбой, рассказать об инструментах, которые я использую при создании посадочной страницы:

html шаблон с котороно я начинаю создание landing page

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

Первое, о чем стоит сказать, это файл reset.css. Его вы видите почти в каждом исходнике, который присутствует на сайте. При помощи этого файла я сбрасываю стили, которые браузеры применяют по умолчанию. Это позволяет избежать неприятных ситуаций и регулярного прописывания одних и тех же стилей сброса. Например outline:none для полей формы, различные отступы, обводки  и т.д.

файл сброса стилей

Второй крутой штукой, которой я пользуюсь уже около 3 - 4 месяцев - это Font Awesome (Официальная страничка).

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

Как этим пользоваться?

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

<i class="fa fa-vk"></i>

Где vk - это идентификатор иконки. Узнать идентификатор можно на странице сайта:

Иконический шрифт font awesome

Иконки удобно разбиты по категориям (медицинские, транспортные, бренды, элементы управления и т.д.) и постоянно обновляются. Как я уже говорил, все это добро управляется как обычный текст, то есть действуют те же css правила, например:


Подписывайтесь на новости:
<a href=""><i class="fa fa-vk"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>

И задаем ссылке цвет, размер и т.д. Очень удобно :)

Подписывайтесь на новости:

Так как, по возможности, я стараюсь делать адаптивные элементы, то в шаблоне обязательно присутствует мета тег viewport:эту и эту статью.

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

Сейчас разве что в шаблонах по 500 рублей можно встретить. Я вот давно не встречал таймеры, особенно в премиум шаблонах. И без них прекрасно продается товар или услуга. Хотя в более простых нишах, наверное, он все еще прекрасно работает и справляется со своей задачей.

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

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

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

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

А какие у вас обязательные инструменты при создании landing page?

6 комментариев

  1. Дмитрий Давыдов

    "шаблон для связи с crm системой битрикс"
    Ищу скрипт создания лида в битрикс 24 с внешнего сайта (с моего LP). У Вас есть такой?)

    1. Дмитрий Давыдов
  2. Дмитрий Давыдов

    Хорошо, что есть Profipages, где можно создавать сайты даже таким как я, а то бы я никогда не смогла разобраться с такими сложными штуками, как вы это делаете))
    А как вы относитесь к конструкторам сайтов?

    1. Дмитрий Давыдов

      Здравствуйте, да я писал уже пару раз об этом. На примере adobe muse и когда писал обзор онлайн конструкторов landing page

  3. Дмитрий Давыдов

    Здравствуйте, очень интересна ваша тема для Brackets, часто вижу ее, не могли бы вы сказать ее название?

    1. Дмитрий Давыдов

      Здравствуйте, никакого секрета :) Son of Obsidian Themes

Добавить комментарий

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности