Мой шаблон, с которого я начинаю создание 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 правила, например:

------------------------------------------------------------------

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

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

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

Так как, по возможности, я стараюсь делать адаптивные элементы, то в шаблоне обязательно присутствует мета тег viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Задав мета-тегу viewport значение device-width, мы сообщаем браузеру, что ширина области просмотра равняется ширине этого устройства, а initial-scale=1.0 говорит, что контент не должен масштабироваться. Это и не нужно, ведь мы делаем удобную версию сайта, где в этом необходимости не возникнет.

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

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

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

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

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

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 6

  1. Иван

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

  2. Валя

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

  3. Андрей

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

    • dimadv7

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

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