Красивые шаблоны landing page. Шаблоны Landing page

Привет. Одностраничные сайты до сих пор пользуются популярностью, и это не спроста. У них есть ряд преимуществ, в сравнении с полноценными многостраничными сайтами. На одностраничнике (он же лендинг) человек концентрируется на одной идее, одном продукте, что позволяет ему не отвлекаясь изучить ваше предложение и охотнее оставить заявку.

«Окей» — скажете вы — «Я решил сделать себе лендинг, но я ничего не понимаю в программировании» . И это не проблема. Сейчас есть много инструментов создания профессионального сайта без «копания» в коде. Одним из таких является популярная CMS WordPress с конструктором WPBackery или ELementor.

В этой статье я привел классные landing page шаблоны wordpress, которые подойдут для бизнеса, продажи товаров, агенств, фрилансеров и любой другой тематики. Ведь такие шаблоны можно и нужно настраивать под себя и свое предложение.

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

Хватит обсуждений, давайте смотреть подборку!

P.s. Если хотите подробнее узнать что такое Landing page, то , где этот вопрос я подробно разобрал и привел 27 примеров лендингов.

Подборка из 40 премиум шаблонов для создания лендинга (landing page) на CMS WordPress1. Bridge

Для меня это топовый шаблон, потому что имеет 376+ демо на разные тематики. С помощью данного шаблона можно передать абсолютно разные эмоции. Мощный и интуитивно понятный.

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

Делайте неповторимую презентацию своего товара или предложения. Есть наглядные инструкции в тексте и также видеоинструкции.

2. The7

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

Кстати именно The7 сейчас стоит на моем блоге.

3. BeTheme

Betheme — масштабнейший по объему функциональности и количеству предустановленных вариантов раскладок шаблон. На сегодняшний день существует свыше 400+ демо лендингов на основе этой темы, любой вы можете выбрать и адаптировать под свои задачи. В готовых лендингах на Betheme активно применяются:

скроллинг-эффекты — от parallax до анимированных преобразований элементов дизайна
фоновые видео во весь экран
«социальные» кнопки
анимированные счетчики
формы онлайн-заявок
секции портфолио
секции «Наши сотрудники»

Еще некоторые демо:

Обновления темы выполняются автоматически, обновления плагинов — по кнопке. На демо-сайтах используется Revolution Slider. Темплейт предлагает 5 вариантов раскладки для страниц, 20 настраиваемых хедеров, неограниченное количество стилей для Google карт, множество стильных иконок.

Инструмент Muffin Builder поможет создать любой дизайн без каких-либо знаний в веб-разработке. При желании можно добавлять css правила и js скрипты, не затрагивая основной код темплейта.

Ronneby отличается высокой производительностью и расширенной панелью опций. В темплейт добавлены лучшие премиальные плагины для создания landing pages WordPress. Разработчики шаблона уделяют особое внимание поддержке пользователей — на любой вопрос следует быстрый ответ, описывающий способы решения проблемы. Тема уже локализована для двух языков, но к ней также приложены файлы для перевода, позволяющие организовать мультиязычную поддержку сайтов.

Еще пример демо:

5. Jupiter

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

Есть удобные обучающие материалы, включающие 240 страниц и 20 видеоуроков о том, как сделать ваш сайт просто потрясающим!)

Шаблон Jupiter также адаптирован для СЕО. Проверки через Google PageSpeed показывают хорошие показатели, что говорит о том, что поисковики будут любить ваш сайт.

Шаблон чистый, аккуратный, используется качественная типографика. Из-за использования визуальных эффектов, типа parallax тема получается живая и очень приятно смотреть на такой сайт.

6. WoodMart

Одна из самых крупных Вордпресс подборок. Темплейты написаны профессиональными веб-программистами, а дизайны отрисованы квалифицированными мастерами по визуальным и UX-решениям. Благодаря этому можно смело ставить любой темплейт, каждый готов к использованию на компьютере, мобильном телефоне, планшете. В комплекте премиум плагины:

WPBackery

Slider Revolution

Отличная адаптация с WooCommerce (интернет-магазин)

7. Brooklyn

Brooklyn имеет 16 демо скинов на разные тематики. Современный стиль страниц, сочетание изображений и шрифтов придает элегантность любому сайту, где стоит эта тема. Красиво выполнен блок с портфолио. Шаблон отлично подойдет для агентств, деловых компаний. Шаблоны выполнены в темных тонах, что придает уверенности и вызывает доверие. Шаблон адаптивный и выглядит отлично на всех устройствах.

Плавный и легкий шаблон, который никого не оставит равнодушным. Качественная типографика и элементы интерфейса делают этот теймплейт шикарным. Номинант и победитель разных известных конкурсов и рейтингов, таких как awwwards. Имеет более 30+ скинов разных тематик на выбор

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

9. H-code

Шаблон новый, но уже успел себя зарекомендовать. Имеет 8 тематик (многостраничный, лендинг, корпоративный, портфолио, блог, e-commerce, заглушки) по 3-12 скинов в каждой. По мимо красоты и аккуратности, данный шаблон имеет просто арсенал разных виджетов и элементов. Можно сделать landing красивым и функциональным. Нужен слайдер? Пожалуйста. Показать портфолио, отзывы, выгоды? И это есть.

10. Native

Native — мощный инструмент для раскрутки стартапа. WordPress landing page шаблоны на базе темы используют различные parallax эффекты для перемещения между смысловыми блоками сайта. Расширенная документация и видео туториалы помогут начинающим пользователям CMS быстро разобраться в функционале панели администрирования. Плагины Visual Composer, Layer Slider и Slider Revolution идут бесплатным приложением к темплейту.

11. Salient

Salient — универсальная тема с «отзывчивым» дизайном, которую часто выбирают . Премиальная типографика и проявляющиеся при прокрутке страницы parallax-эффекты помогают усилить впечатление от лендинга. Оптимизация в соответствии с частотой смены кадров обеспечивает плавные анимационные переходы между блоками контента. В темплейте используются адаптивные размеры картинок, что способствует быстрой загрузке страниц и экономии трафика.

12. TheGem

TheGem — современная тема для креативных проектов, seo-оптимизированная и дополненная «отзывчивой» раскладкой. Небольшой вес страниц, быстрота их загрузки и продуманный UX гарантируют высокую производительность шаблона. При необходимости продвижения бизнеса с помощью landing page купить этот шаблон стоит хотя бы из-за его seo-friendly кода, который обеспечит высокие позиции в выдаче Google. В 11 имеющихся демо-версиях посадочных страниц учтены потребности разноплановых проектов.

Элементы дизайна для сайта на TheGem настраиваются при помощи плагина Visual Composer. Отображение большого количества контента в блоках лендинга (портфолио, отзывы, услуги) организовано через подгрузку — автоматическую или «по кнопке», а также через слайдер переключения вкладок. В шаблоне предусмотрено 6 вариантов анимации для загрузки компонентов секций, появляющихся при прокрутке содержимого посадочной страницы. Фоном блоков контента могут быть видео с vimeo и youtube или выведенные из файловой системы сайта посредством html5.

13. Marketing Pro

Marketing Pro — шаблон, разработанный с прицелом на конверсию, маркетинг и seo. Каждый из 9 демо-сайтов на нем создан с учетом особенностей конкретной маркетинговой ниши. Бонусом к адаптивному дизайну лендинга идут стилизованные шаблоны для блоков организации мероприятий.

Oshine находится в топе наиболее продающихся тем креативной направленности. Этот шаблон с прекрасным дизайном и мощным функционалом может быть использован при создании лендингов для творческих проектов и бизнеса. Пятьдесят модулей для настройки внешнего вида сайта, каждый из которых был тщательно проработан, помогают получить идеальные результаты. Опция «отменить/переделать» и возможность задать определенным действиям «горячие клавиши» упрощают процесс настройки.

15. Jevelin

Jevelin — шаблон с премиальным адаптивным дизайном, облегчающий создание landing page и одностраничных сайтов на wordpress. Тема поможет запустить проект в краткие сроки. Благодаря многообразию инструментов настройки — 9 вариантов хедеров в различной раскладке, 40 уникальных элементов, к каждому из которых можно применить отдельные стили, встроенный функционал для организации перепостов в соцсети, 6 стилевых решений для оформления секции портфолио — кастомизация скинов выполняется быстрее, чем когда-либо.

16. Kalium

Kalium — тема, к которой обращаются представители различных профессиональных сфер, чтобы получить сайт для продвижения своих услуг. Особый акцент в дизайне сайтов на Kalium сделан на типографике — за нее отвечает специализированная библиотека для управления шрифтами. В шаблоне могут применяться 4000 шрифтов — Google, Typekit, Font Squirrel, премиальные и кастомные (загруженные пользователем).

17. Inbound

Inbound — шаблон, способный облегчить создание одностраничных сайтов для приложений, электронных книг, видеокурсов и похожих продуктов. Настройка дизайна выполняется с помощью визуального генератора посадочных страниц Landing Page Builder. Темплейт также позволяет выделить каждому продвигаемому продукту мини-раздел в формате лендинга в рамках одного сайта и может быть использован для секций категорий товаров в WooCommerce.

18. Intact

Intact — тема со множеством опций, созданная для помощи в решении задач интернет-бизнеса. В нее включены такие важные составляющие современного лендинга, как: блоки «Тарифные планы» и «Сотрудники компании», слайдер с отзывами, наборы тематических иконок, формы подписки, онлайн-консультант.

19. Comet

Comet — полностью адаптивный pixel-perfect темплейт на Visual Composer и . Пользователям предлагается 5 скинов для лендингов, в которых реализованы следующие эффекты: слайдер для текста, parallax, фоновое видео — импортированное с youtube или встроенное на html5, анимированный zoom слайдер. Новые пользователи легко разберутся в настройках темы при создании wordpress landing pages — инструкция и видео уроки доступны онлайн.

20. LeadEngine

Универсальная WordPress theme, в которой есть все необходимое для создания лендинга:

200 блоков для «сборки» в темплейт в любом порядке;
адаптивность на любом этапе;
35 полностью разработанных страниц - можно просто менять текст и фото;
высокая скорость загрузки - на 94% быстрее среднего.

Дизайн разработок можно оценить перед покупкой. Цветовые схемы и настройки меняются в визуальном редакторе. Авторы обещают поддержку в любое время.

Разработчик предлагает шаблон сайта в разных тематиках - от строительства до ветеринарных услуг. Простые и эффективные landing page помогут донести до потенциальных клиентов ваши преимущества, условия работы и другие необходимые детали. Дизайн респонсивен, хорошо смотрится на всех устройствах, от мониторов Retina до мобильных гаджетов. Есть плагины для портфолио, часов работы, календаря, а также собственные иконки.

22. Incubator

«Идеальная тема для стартапа»,- говорят о своей разработке авторы. Легкий минималистичный дизайн 2019 года подойдет интернет магазинам, ивент-агентствам и многим другим видам бизнеса для визитки или дальнейшей разработки в более масштабный проект. В комплекте:

визуальный конструктор - детали меняются в онлайн-режиме;
мобильная адаптивность;
WooCommerce - лучший плагин тематики online shop;
поддержка любого языка.

23. Phlox Pro

Мультишаблонная заготовка с тридцатью демо, в которых можно только подставить нужный текст. Также предлагают более 90 темплейтов для слайдеров и эффектов, более 130 вариантов для отдельных страниц. Включено 9 основных плагинов, которые пригодятся для продвижения сайта визитки или более крупного ресурса. Все это со скидкой, сейчас можно приобрести за 30 долларов. Один из самых востребованных шаблонов для лендингов.

24. Porto

Еще один мультишаблон-конструктор для лендингов и визиток. Чистый код с бесконечным количеством вариантов подбора хедеров и футеров без необходимости обучаться программированию. Множество дизайнов, элементы которых легкозаменяемы благодаря плагину «сетки». Легко превратить из одностраничника в полноценный магазин за счет расширенного поиска. Поддержка всегда готова ответить на вопросы.

25. XTRA

Недорогой и популярный мультишаблон для landing, который отличается:

профессиональными дизайнерскими заготовками - всего 55 штук;

быстрым откликом за счет оптимизации;

настройкой методом drag and drop;

более 200 блоков для контента;

более 1000 опций.

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

26. Ave

«Мультишаблон нового поколения», - заявление смелое, но авторы говорят о своем продукте именно так. Всего за 35 долларов можно получить:

200 лендингов с красивым «европейским» дизайном;
WooCommerce и расширенные формы заказа;
установка за минуту;
настройки для портфолио, слайдеров.

Плагин визуального редактора Elementor действительно обновлен до последней версии и очень прост в использовании.

27. The Ark

«Лучший среди 9500», - отмечают разработчики. В шаблоне сделана ставка на людей, которые никогда не занимались кодингом. Настройка дизайна осуществляется с помощью визуального плагина-конструктора Элементор, что позволяет работать в режиме «один к одному», не использовать сторонних установок и сразу же задействовать полностью рабочий функционал одного из 300 темплейтов. Удобно и быстро настраивается.

28. Amedeo

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

плагин WooCommerce для интернет магазина;

плагин продвинутых контакт-форм;

подборку эффектов прокрутки в разной стилистике;

подборку анимаций.

Чистый и понятный Вордпресс шаблон для визиток и онлайн-шоппинга. В режиме магазина есть настройки характеристик товара, поиска по ним.

29. Bolge

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

30. Makoto

Несколько решений для дизайнеров, фотографов, художников. Полезные предустановки для размещения портфолио позволят защитить от копирования, подгружать по мере просмотра пользователем, что экономит время загрузки. Легкая загрузка видео. Есть опция для ведения блога. Заготовлены элементы для размещения инфографики. Визуальный конструктор поможет легко настроить все детали.

32. Landscaping

Разработчики сделали интересный «зеленый» дизайн для услуг по озеленению, помощи в садоводстве и эко-тематике. Однако заготовку можно применять для других целей. Красивые иконки, чистые Google-шрифты, превосходная респонсивность и внешний вид, в том числе, на Retina-устройствах подразумевают широкое использование Вордпресс темы.

33. Crowdmerc

Сделано под новейшую версию WordPress. Темплейт постоянно обновляется. Предусмотрен функционал для интернет-магазина за счет удобного плагина расширенного поиска и заказа. Также есть предустановки для ивентов, календарных дат и записи. Используется Elementor для создания новых страниц. Поддерживает любые дополнительные плагины.

34. Creedence

Креативная «музыкальная» тема запомнится посетителям ярким дизайном, а владельца сайта заинтересует:

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

36. Education

Education является усовершенствованной версией старой темы eLearning с более продвинутым UX и предназначен для образовательных интернет-ресурсов: онлайн курсов и сайтов учебных заведений. Шаблон имеет привлекательный дизайн и предоставляет исчерпывающий функционал, необходимый для учебного процесса.

37. One

One — креативная тема для создания лендингов с акцентом на продвижение продуктов. Фронтенд шаблона сделан на html5 и bootstrap 3, с ним могут быть интегрированы MailChimp и Contact Form 7. Разработчиками UX темы было изучено множество похожих проектов, в результате чего пользователи получили готовые шаблоны лендингов Вордпресс, в которых имеются все важные для бизнес-проектов инструменты.

38. Total

Total — подходящий под многие проекты шаблон. При создании страниц на нем применяются: метод перетаскивания, неограниченные цветовые схемы, кастомизация в режиме реального времени, легкие в использовании премиальные слайдеры. Среди демо-сайтов темы представлены лендинг пейдж шаблоны для 11 разноплановых проектов.

39. Stockholm

Stockholm входит в топ-30 наиболее продающихся за время существования WordPress шаблонов. При работе с темой разрешается задать цветовую схему для всего сайта или его отдельных элементов, применить любой из 600 Google шрифтов, комбинировать опции и блоки разных демо-сайтов. Пользователи, которым нужно готовое решение для бизнес-проекта, могут скачать шаблоны лендинг пейдж, сразу же установив их из секции конструктора сайтов.

Еще вариант демо:

40. Massive Dynamic

Более 70+ виджетов, с которыми ваши лендинги будут неповторимыми и современными. Гугл шрифты, инфографика, адаптация к СЕО, чистый код, создание удобных портфолио — это только часть преимуществ данного темплейта. Ленды, в прямом смысле, можно собирать буквально как мозайку, обычным перетаскиванием. На странице описания вы можете увидеть наглядные примеры.

При просмотре демо сайтов хочется использовать их все.

» Бесплатные landing page шаблоны WordPress — ТОП 30

Бесплатные landing page шаблоны WordPress — ТОП 30

Конкретно в этой статье будут рассмотрены лучшие landing WordPress шаблоны, которые могут подойти для вас. Они все будут включать в себя скриншот и демо версию дизайна, чтобы вы могли оценить тему и сразу скачать ее если понравится.

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

Вам так же может быть интересно Для тех кто ищет хостинг 1.

— это одностраничная тема, которая поможет вам создать сайт без особых усилий. С другой стороны, она имеет профессионально нарисованный дизайн, параллакс скроллинг, что позволяет назвать эту тему «красивой». Данный шаблон подойдет для стартапов и малых бизнесов.

— это многофункциональная вордпресс тема. Она включает в себя яркий интерфейс, классический parallax effect и другие анимации, которые делают просмотр темы еще приятнее. Zerif Lite является кроссбраузерной темой, которая так же качественное написана с точки зрения кода.

3. Alhena Lite

Alhena Lite — это бесплатная корпоративная тема для WordPress, которая полностью интегрирована с WooCommerce плагином , для того, чтобы вы легко могли настроить свой интернет-магазин.

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

5. Palmas

Palmas — это современная тема, выполненная в светлых тонах, которая подойдет для ведения личного или фэшн блога. Этот шаблон так же поддерживает такие плагины как Yoast SEO, GravityForms, Pirate Forms, W3 Total Cache и многие другие.

6. Brasserie

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

7. XT Corporate lite

XT Corporate lite — это простая и минималистическая тема, которая подойдет для небольшого продукта или сервиса.

— это приятная тема, выполненая в светлых тонах. Включает в себя разные анимации и визуально пирятные переходы и parallax эффект. В дополнении Freesia Empire поддерживает такие плагины как Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, Newsletter, bbPress и WooCommerce.

— это тема, которая подойдет для презентации малого или среднего бизнеса. Она включает в себя огромное количество функций и дополнений для полного управления лендинг структурой.

10.

— это разносторонняя тема, с большим количеством функционала. Она адаптивна, все элементы анимированы параллакс эффектом. One page легко настраивается, а так позволяет смотреть измененное в режиме реального времени. Текущая landing тема так же поддерживает большое количество основых вордпресс плагинов.

11. FotoGraphy

FotoGraphy — это лендинг, который подойдет для фотографов или дизайнеров. Простота и наличие большого количества функцией делают его еще более масштабной и настраиваемой.

12. Integral Theme

Integral Theme — это одностраничная тема с parallax, которая подойдет для креативных личностей, владельцев бизнеса или агентам. У вас займет всего пару минут, чтобы настроить ее.

13. Square

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

14. Enliven

Enliven — это качественное выполнения тема. Я бы ее назвал премиальной, так как она сочетает в себе качество и красоту в одном флаконе. Она так же поддерживает многие популярные плагины и легко настраивается.

15. Latte

Latte — это шаблон для фотографов. В нем есть все, чтобы вы могли достойно показать ваше портфолио, а так же рассказать о себе. Настройка происходит в пару кликов.

16. The Monday

The Monday — это элегантная тема которая подойдет для бизнеса или фрилансера. Она имеет при себе большое количество функций и дополнений и дополнений.

17. Business World

Business World — это шаблон, который связан с бизнес тематикой. В нем сочетается стиль и качество. Business world может так же быть настроена под личный, корпоративный или сайт фотографа. Ее возможности позволяют сделать из нее почти все что вам угодно.

18.

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

19. Onetone

Onetone — это одностраничный шаблон для WordPress который подойдет для презентации «Я» в интернете (показать свое портфолио и/или рассказать о себе).

20. Arise

Arise — это минималистический одностраничный шаблон для WordPress, который подойдет для небольшого продукта или малого бизнеса. В нем нет ничего лишнего, только все самое важное.

21. Woot

Woot — это минималистический шаблон выполненный в темных тонах, который ведения интернет-магазина. Он работает c WooCommerce и многими другими популярными плагинами.

22. West

West — это простая тема, которая подойдет для агенства, малого бизнеса или сайта-портфолио. Она включает в себя большое количество функций, настроек и расположений элементов.

23. Anaglyph Lite

Anaglyph Lite — это простой и элегантный шаблон, который подойдет для блогинга и интернет-магазина. На нем уже настроен WooCommerce и другие популярные плагины.

24.

Для бизнеса использование лендингов стало одним из наиболее простых и выгодных решений. Популярным инструментом для создания таких сайтов стали лендинг пейдж шаблоны WordPress. В их основе лежит продуманная и мощная «система вовлечения» для трансформации трафика в доход.

Они предлагают:

встроенный конструктор страниц;

кроссбраузерность и адаптивную верстку, которые обеспечивают охват большей клиентской аудитории;

выверенный профессиональный дизайн;

бесплатные обновления в течение неограниченного периода.

50+ премиум лендинг пейдж шаблона на WordPressШаблон Bridge

Шаблон с высококлассной типографикой, входящий в топ творческих тем. Бесплатные плагины в составе темы: Visual Composer, Layer Slider, Timetable, Visual Composer. В Bridge включена обширная коллекция шорткодов — от базовых структурных блоков до интерактивной инфографики и продвинутых демонстрационных элементов, таких как вертикальные прогресс-бары.

1. Автосалон

На сайте размещены выгодные предложения, модели авто, тарифные планы на обслуживание. Особое внимание привлекают слайдер с parallax и вертикальный слайдер.

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

3. Дантист, зубной кабинет

Посадочная страница в ярких бело-голубых тонах с информацией об услугах и встроенной системой букинга.

4. Животные

Демо сайт приюта для животных с каталогом подопечных и функционалом сбора пожертвований.

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

6. Лендинг про мебель

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

7. Личный сайт фотографа

Черно-белый сайт-портфолио. Основной контент главной страницы — горизонтальный слайдер во весь экран и навигационное меню.

8. Бизнес, стартап

Демо сайт для бизнес-проекта применяет скролл-эффекты, которые так любят современные шаблоны лендинг пейдж, и привычные для wordpress слайдеры и графики.

9. Йога

Простой одностраничник для йога студии. Среди его компонентов — блок с показателями достижений и большой слайдер в хедере.

Черно-белый лендинг с тематическими блоками «Направления тренировок», «Расписание занятий», «Тренерский состав».

11. Путешествия

Демо для туристического портала. В его верхней части расположен широкий баннер с всплывающим текстом, меню меняет цвет при прокрутке.

12. Часы

Лендинг для демонстрации элитных часов использует много фото и parallax фон. Цветовая схема страниц — белая с темно-серыми вставками.

13. Digital-агентство

Простой дизайн сайта содержит минимум анимации — меняющее цвет верхнее меню, которое разворачивается до полноэкранного, блоки с фоном parallax.

14. Бизнес

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

15. Музыка

Сайт для рок-музыканта, делающий основной акцент на гастрольной деятельности: крупные блоки используют концертные фото в качестве фона, на главную выведены последние записи в блоге.

Шаблон BeTheme

Популярный шаблон, главными свойствами которого являются «отзывчивость» дизайна, Retina совместимость и универсальность. На выбор пользователю представлены 2 визуальных конструктора — MuffinBuilder и Visual Composer, а также плагины для слайдеров Slider Revolution, Layer Slider.

На BeTheme созданы следующие готовые шаблоны лендинг пейдж:

16. Суши

Демо для суши-бара. Основной контент сайта расположен на светлом фоне в обрамлении темно-серых меню и футера. Верхний баннер и слайдер из блюд меню позволяют продемонстрировать новинки ассортимента.

17. СПА-салон

Белый фон с контрастным текстом основного блока обеспечивает хорошую читабельность. Вспомогательные элементы — шапка, левый сайдбар, футер выполнены в мягкой темно-синей гамме. Прокрутка страницы сопровождается parallax смещением фона.

18. Пиво

Landing page WordPress для локальной пивоварни. Страница оформлена в коричневых тонах с вкраплением зеленого. При скроллинге можно наблюдать впечатляющий parallax эффект.

19. Портфолио художника/иллюстратора

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

20. Барбершоп

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

21. Аквапарк

Шаблон в ярких тонах желтого, белого и голубого для сайта аквапарка, платного пляжа, бассейна. На его страницах представлены раскрывающийся FAQ, галерея в стиле Masonry, интерактивная карта, панели с призывом к покупке.

22. HR

Сайт кадрового агентства, выдержанный в деловом стиле. Основной цвет страниц, зеленый, дополнен блоками серых и белых оттенков. В демо есть кнопки перехода на страницы с подробной информацией, секция презентации услуг с видео.

23. Парфюм

Темплейт с «воздушным» дизайном в розовато-сиреневых тонах. Подойдет под сайт МЛМ компании или персональную страницу агента, занимающегося продвижением сетевой косметики Faberlic, Avon и похожих марок.

Шаблон The7

Универсальная адаптивная WordPress тема, интегрированная с конструктором страниц Visual Composer и плагином Ultimate Addons. Среди ее демо сайтов можно найти и скачать шаблон лендинг пейдж, задача которой — привлечение клиентов и повышение конверсии веб-ресурса. В шаблон встроены премиальные плагины Go Pricing Tables, Slider Revolution, ConvertPlug, Layer Slider.

24. Небольшой интернет-магазин

Онлайн магазин органических снэков. Лендинг содержит слайдер продукции, блок с описанием ее преимуществ, карточки ингредиентов, отзывы покупателей.

25. Лендинг — продажа книг

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

27. Психология

Демо для клиники психологического консультирования. Спокойный дизайн сайта располагает клиента и вызывает доверие к консультирующим специалистам.

28. Лендинг пейдж тренинга, конференции

29. Интернет-магазин одежды

Сайт одежды, использующий светлую тему и темно-синие декоративные элементы (меню, кнопки, футер). Главные составляющие страницы — слайдер с анимированными баннерами и карточки товаров.

Шаблон Ronneby

Шаблон повышенной производительности, помимо набора плагинов и модулей оснащенный Панелью Безграничных Опций. В нем используются премиальные плагины Revolution Slider, Visual Composer. Активная поддержка темы, наличие видео и текстовых мануалов делают ее хорошим вариантом для тех, кто собирается купить шаблон лендинг пейдж в первый раз.

30. Веб-студия

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

31. Ресторан

Наиболее эффектные составляющие демо — блок ресторанного меню с ценами и секция с видео, к заставке которого при скроллинге применяется parallax смещение.

32. Креативное портфолио

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

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

34. One-page с эффектом 3D пролистывания

При прокрутке страницы мышью разделы сменяют друг друга, полностью занимая экран. Последний «лист» выводит контактную форму.

35. Мобильное приложение

Графичные блоки темно-серого и светло-серого оттенков описывают преимущества рекламируемого ПО. Слайдер показывает скриншоты на экране виртуального телефона.

36. Модельное агентство

Страница разделена на 2 части — текст и фото. При прокрутке контент меняется: левая часть поднимается, правая — опускается, при этом текстовый и фото контент чередуются.

Шаблон TheGem

Универсальный темплейт под проекты, рассчитанные на высокую производительность. Тема поддерживает мультилингвальность и режим RTL. Демо-сайты на TheGem включают адаптивные шаблоны лендинг пейдж. В подарок к шаблону идут: конструктор Visual Composer и плагины, ответственные за адаптивные слайдеры — LayerSlider, NivoSlider, Revolution Slider.

37. Креативное агентство

Сайт творческой студии. Темно-серая цветовая гамма страниц разбавлена блоками светлых цветов. Многоуровневое меню облегчает навигацию, расширенный футер содержит формы обратной связи и подписки.

38. Лэндинг продукта/товара

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

39. Сайт-визитка для приложения

Одностраничник для продвижения ПО. Пункты верхнего меню перемещают посетителя по секциям страницы. Интересный элемент сайта — слайдер из скриншотов, один за другим подстраивающихся под экран мобильного телефона.

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

Что такое Лендинг пейдж (landing page)? Это страница, на которую люди попадают, как правило, после клика по объявлению. Создается под одно предложение: товар, услугу или подписку. Эффективная посадочная страница - краеугольный камень успешного интернет-маркетинга. Товар может быть лучшим на рынке, объявления доведены до совершенства, но без хорошей landing page усилия не дают 100% результата. Она рассказывает посетителям, что предлагается, и почему они должны хотеть это получить. Ощущение срочности способствует быстрому принятию решений и переходу юзера в разряд клиента.

Как создать Лендинг? Неверно полагать, что ответ кроется в умении верстать. Хорошая посадочная страница - результат слаженной работы над целями, текстом, дизайном и кодом. Лендинг пейдж, примеры которых будут ниже, помогут освоить новичкам азы работы с версткой, но не заменят собой конверсионные тексты и понимание ЦА. Также вы можете создавать их с помощью различных конструкторов Лендинг пейдж .

Поэтому перед тем, как создать целевую страницу, спросите себя:

Что сделает человек после попадания на landing page? Будет ли он что-то покупать? Заполнит форму? Подпишется на рассылку? Прежде, чем отслеживать коэффициент конверсии, определите четкие цели.
Кто мои конкуренты? На самом деле, это три вопроса: кто, насколько они успешны и как можно применить их достижения? Имитация - самая искренняя форма лести. Если конкуренты делают то, что работает, повторите подобное на своем сайте.
Кто моя аудитория? Чем лучше вы понимаете свою нишу и ЦА, тем больше шансов, что старания окупятся.

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

Примеры создания лендинг пейдж + кодинг для чайников

Перед тем, как приступить к делу, кратко рассмотрим HTML и CSS. Понимание, как они работают, поможет создать landing.

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

Тег открывается () и закрывается () вокруг начинки:

содержимое

Для точечной настройки после имени добавляются атрибуты:

содержимое

CSS - определяет, как расположить HTML элементы. Состоит из селекторов, свойств и значений:

#селектор {свойство: значение;}

Селектор соответствует названию конкретного тега в html. Изменением значений и добавлением свойств регулируется его внешний вид. Можно создавать непохожие друг на друга страницы, применяя различные CSS-стили к одному и тому же HTML.

5 начальных шагов

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

Выглядит скромно.

Из этой рыбы создается сайт на любой вкус за несколько этапов.

Структура каталогов в папке:

index.html: Это главный файл, который будем редактировать.
/assets: здесь лежат вспомогательные файлы:
/css: каталог содержит стили бутстрап и иконок. Файл, который будем редактировать - main.css.
/img: папка для картинок сайта.
/fonts: шрифты иконок.
/js: яваскрипт-файлы bootstrap.

Шаг 1: Использование заголовка

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

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

Шаг 2. Краткость - сестра конверсии. Добавление преимуществ и тарифов

Потребуется 4 секции:

преимущества;
тарифы;
отзывы;
призыв к действию.

Оформим раздел основного контента “main”, в который вставим необходимые секции:

…..
…..
…..
…..

Заполняем начинкой вместо многоточий.

Для секции преимуществ потребуется этот код:

Преимущества
Быстро

Надежно

Sed diam nonummy

Выгодно

Elit, sed diam nonummy

Технично

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Надежно

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Выгодно

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Технично

Lorem ipsum dolor sit amet, consectetuer adipiscing

Надежно

Lorem ipsum dolor sit amet, consectetuer adipiscing

Выгодно

Lorem ipsum dolor sit amet, consectetuer adipiscing

Содержимое для наглядности:

Пока смотрится неаккуратно, но поводов для паники нет, продолжаем.

Прописываем расценки. Содержимое меняется по аналогии с первым шагом. Общее описание с классом “tarifs” и три тарифа.

Тарифные планы

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Тариф №1
$10

в месяц/с человека

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Заказать
Тариф №2
$20

в месяц/с человека

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Заказать
Тариф №3
$30

в месяц/с человека

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Заказать

Выглядит так.

Пока нас не интересует внешний вид будущей лендинг пейдж - примеры изменения стилей рассмотрим ниже.

Шаг 3: Сигналы доверия и призыв к действию

Использование целевых сигналов указывает посетителям, что бренд заслуживает доверия. Сигналы могут принимать различные виды, но классика – это отзывы клиентов.

Отзывы клиентов

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Установим "призыв к действию".

Выгода при заказе сегодня

Заказать сейчас!

Отзывы помогут потенциальным клиентам принять решение купить продукт. Для наглядности нужны аватарки, поэтому сразу пропишем их на место - под каждой цитатой.

Имя клиента.

Шаг 4: Интеграция с сеткой и Mobile Friendly

Для внедрения сетки нам потребуются контейнеры Bootstrap. Важно запомнить общее количество допустимых сегментов колонок - 12. Класс определяет ширину отображения контента. Плюс этой готовой сетки в том, что контейнеры рассчитаны с учетом адаптивности и сразу применимы для мобильных устройств. Подробное описание на официальном сайте . Сетка выглядит так.

Содержимое “main” обернем в контейнер. Для этого в его верхней части прописывается:

… .

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

Все элементы, требующие расположения друг над другом, обернем разделителями строк.

Колонки мы теперь можем настроить по ширине, ориентируясь на сетку бутстрапа. После обертывания начинка перестала прилипать к краям экрана, появились аккуратные отступы.

Выставляем расценки в ряд, применив класс колонок col-lg-4. Внутри строк row уже не обязательно прописывать отдельные дивы для обертывания, можно комбинировать с имеющимися через пробел.

По аналогии выставляем колонки для раздела отзывов и преимуществ. Если требуется сдвинуть элемент в сторону, используем класс оффсетных колонок col-lg-offset-2. Цифра в конце определяет, на какое количество базовых столбцов произойдет сдвиг.

Шаг 5. Шрифты и иконки

Мы реализуем шрифты для заголовков Google Font. При выборе открываем вкладку импорт и копируем данные из нее в файл main.css. Также добавляем в файл селекторы заголовков, для которых применяется новый шрифт.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* импорт шрифта для заголовков */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto Condensed", sans-serif; /* Гуглфонт вывод */
}

Для наглядности преимуществам прописан класс с говорящим названием text-center и иконки FontAwesome из набора бутстрапа.

На этом подготовка полностью завершена.

Лендинг пейдж: примеры кодов с предложением, параллаксом и счетчиком

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

Пример 1: с предложением

Установим фон главной части и отступы, чтобы был покрыт первый экран.

Jumbotron {
background: #f5f5f5 url(../img/fon.jpg) top center no-repeat;
max-width: 100%;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Изменим размер заголовка джамботрона с h2 на h1. Далее прописываем стили для элементов, которые нужно изменить.

Начнем с иконок.

Benefits i{
color: #cac4c4;
}

После знака решетки задан цвет. Можно подобрать свой вариант, воспользовавшись таблицами html-цветов или редактором изображений.

Отступы для заголовков секций

section h2 {
padding-top: 30px;
margin-bottom: 25px;
}

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

Тариф №1
$10

в месяц/с человека

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Lorem ipsum dolor

10 Lorem ipsum

Заказать

И много CSS. За какие места отвечают участки, прописано в комментариях - /* между слешами со звездочкой */

/* =========Tarif styles======== */
/* общий вид тарифа */
.pricing_item {
background: #f2f2f2;
position: relative;
display: -webkit-flex;
display: flex;

flex-direction: column;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #262b38;
cursor: default;
overflow: hidden;

}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #daebef;
}
/* индивидуальная подложка ценника в каждом тарифе */
.pricing_item:first-child .price {
background: #9ba9b5;
}
.pricing_item:nth-child(2) .price {
background: #1f6098;
}
/* на широких экранах отступы и выделение средней колонки тарифа */
@media screen and (min-width: 66.250em) {
.pricing_item {
margin: 1.5em 0;
}
.featured {
z-index: 10;
margin: 0;
font-size: 1.15em;
}
}
/* заголовок */
.pricing_item h3 {
font-size: 2em;
margin: 0.5em 0 0;
color: #1d211f;
}
/* подложка ценника */
.price {
font-size: 2em;
font-weight: bold;
color: #fff;
position: relative;
z-index: 100;
line-height: 95px;
width: 100px;
height: 100px;
margin: 1.15em auto 1em;
border-radius: 50%;
background: #77a5cc;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
/* валюта */
.currency {
font-size: 0.5em;
vertical-align: super;
}
/* уточнение предложения */
.sentence {
font-weight: bold;
margin: 0 0 1em 0;
padding: 0 0 0.5em;
color: #2a6496;
}
/* список */
.pricing_item ul {
font-size: 0.95em;
margin: 0;
padding: 1.5em 0.5em 2.5em;
text-align: left;
}
/* пункты списка */
.pricing_item li {
padding: 0.15em 0;
}
/* кнопка заказа тарифа */
.pricing_item button {
font-weight: bold;
margin-top: auto;
padding: 1em 2em;
color: #fff;
border-radius: 5px;
background: #428bca;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
/* смена цвета при нажатии кнопки */
.pricing_item button:hover,
.pricing_item button:focus {
background-color: #285e8e;
}
/* фон тарифов*/
.bg-2 {
background: #dddddd;
}

Результат

Отзывы клиентов. Придадим им аккуратный вид, обозначим расположение.

/* =========Testimonials styles======== */
testimonials {
padding: 4em 0;
text-align: center;
}
.testimonials .avatar img {
border-radius: 50%;
float: left;
display: inline;
margin-right: 1em;
width: 65px;
height: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p {
text-align: left;
padding-top: 1em;
color: #5d5d5d;
font-weight: 900;
}

Осталось украсить последний призыв к действию и футер.

/* Action */
.action {
background: #476177;
min-height: 180px;
width: 100%;
padding: 4em 0;
text-align: center;
}
.action h2 {
color: #fff;
font-weight: 300;

}
.action p {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
font-size: 1.2em;
}
.action .container {
margin-top: 3em;
}
/* Footer */
footer {
background: #333333;
padding: 1em 0;
text-align: right;
}
footer p {
color: #fff;
line-height: 1;
text-transform: uppercase;
font-size: 0.7em;
margin-top: 0.5em;
}

Кнопке для футера присвоен встроенный класс бутстрапа btn-default.

Оживляем шаблон. Внедрим плавную прокрутку и кнопки для разделов, а также анимацию текста на первом экране.

Чтобы переходы сработали, часть классов секций заменим на id - для преимуществ и тарифов. А ссылки на id пропишем к кнопкам. Скрин - что к чему привязывается, выделено желтым маркером.

Задаем отступы кнопкам - jbutton. Прокрутка при нажатии работает, но очень резко.

Плавные переходы создаются при помощи javascript или jquery. Последний по умолчанию подключен к шаблонам Bootstrap.

Теперь прокрутка стала плавной.

Добавление анимации к тексту с помощью Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css ). Это готовый открытый код, он может использоваться на любом сайте. Файл с гитхаба помещаем в папку css и прописываем путь.

Подбираем эффекты здесь: https://daneden.github.io/animate.css/ . У нас выбран fadeInDown. Прописан в коде так:

Теперь при загрузке или обновлении страницы текст будет анимирован. Готово.

Пример 2: с формой и параллакс-эффектом

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

Собирается по аналогии. Менять будем фоны и цвета. И, разумеется, добавим форму.

Начнем с parallax .

Изменим бэкграунд jumbotron на прозрачный:

background: transparent;

Внутри head вставим скрипт:

$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Первой строкой в body ставится контейнер для параллакса:

А в CSS его поведение:

Bgparallax {
background: url(/../img/fon.jpg) repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}

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

Делаем меню темным:

Navbar-default {
background-color: #333;
border-color: #444;
color: darkgrey;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: darkgrey;
background-color: rgba(0, 0, 0, 0.5);
}

Заменяем предложение в jumbotron на новое - с кодом формы:

Landing Page превращает посетителей в клиентов
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

И прописываем внешний вид

/* form */
.headform-list {
list-style-type: none;
line-height: 26px;
font-weight: 400;
padding: 0px;
margin-bottom: 40px;
}
.headform {
overflow: hidden;
position: relative;
background-color: rgba(0,0,0,.4);
padding: 35px 40px;
border-radius: 8px;
}
input, button, select, textarea {
width: 100%;
margin-bottom: 10px;
}
.headform-list li .fa {
position: absolute;
top: 0px;
left: 0px;
width: 42px;
font-size: 24px;
text-align: center;
}
.headform-list li {
position: relative;
min-height: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p {
color: #fff;
font-size: 16px;
font-style: italic;
}

Сюда же попал текст джамботрона, так как он требовал перемен.

Перекрашиваем тарифы.

/* общий вид тарифа */
.pricing_item {
background-color: rgba(0,0,0,.4); /* строка изменена */
border-radius: 4px; /* строка изменена */
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margin: 1em;
color: #f2f2f2; /* строка изменена */
cursor: default;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* смена фона при нажатии */
.pricing_item:hover {
color: #444;
background: #ddd; /* строка изменена */
}

Теперь они выглядят так - прозрачный фон и скругленные уголки.

Шаблон готов.

Пример 3: со счетчиком обратного отсчета

Снова меняем начинку джамботрона и перекрашиваем шаблон под новый фон по аналогии с предыдущим шаблоном. Подключаем скрипт счетчика:

Html

Время не ждет
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

var myCountdown1 = new Countdown({
time: 86400 * 3, // 86400 seconds = 1 day
width: 300
, height: 60
, rangeHi: "day"
, style: "flip" //

Красивые шаблоны landing page. Шаблоны Landing page

Новые статьи

Популярные статьи