Лендинг вордпресс. Делаем Landing page на WordPress. Темы для лендингов

Дайте угадаю: вы либо предприниматель без инвестиций, либо маркетолог, который стремится к развитию, но не знает как подступиться к сайтам из-за страшного слова КОД. Попробую уравновесить ваше ЧСМ информацией о том, как сделать лендинг пейдж на WordPress без всяких ужасов. Поехали!

1. Почему лендинг на WordPress?

Ну, хотя бы потому, что 70% мировых сайтов сделаны на нём из-за открытости и бесплатности WordPress.

Ещё потому, что это одна из CMS, которую любят поисковики — а значит, при правильном обращении, есть шанс на органическое продвижение ваших страниц в топ. Ещё для Вордпресса существует 100500 плагинов – платных и бесплатных – которые позволяют работать без кода (хотя, увы, не без ж*па-часов).

Секундочку, но это все доводы в пользу Вордпресс на этапе создания сайта с нуля, а мы-то хотим лендинг пейдж!

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

Опустим полуклинические случаи. Итог: вам остается сделать лендинг пейдж на WordPress. Разберем, для начала, в чем отличие лендинга от других страниц?

2. Основное отличие лендинга от обычной страницы

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

Как-то надо воссаздать такой макет в WordPress

Давайте посмотрим на блоки лендинга глазами WordPress верстальщика:

  1. Во-первых, нам понадобится возможность разделять блоки по цвету фона
  2. Текст лендинга, если сравнить его с текстом статьи, разбит на множество маленьких кусочков, распределённых по разным местам
  3. Многие картинки являются частью стиля CSS (кода, короче) и по идее не должны напрямую загружаться через WYSIWYG редактор Вордпресса

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

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

3. Что можно и что нельзя сделать без кода?

Переходим от проблем к решениям. Что же можно поделать-то?

Все зависит от вашей ситуации: у кого-то ноль на старте, кто-то имеет уже лендинг — только на шаблонезаторе типа Тильды, а кто-то может и покодить (ну ладно — попросить верстальщика покодить).

3.1 Лендинг в подпапке на хостинге

Когда у вас есть лендинг на HTML, включающий все управляющие файлы (HTML, CSS, JS, картинки) — вы можете разместить его в корневой папке вашего Вордпрессного сайта, вот тут:

Просто создаете новую папку, например, Action на одном уровне с WP-admin, WP-content и прочими файлами — и закидываете в нее все файлы/папки вашего лендинга, включая index.html (файл главной страницы).

Теперь вы можете открыть данный index.html по адресу: yoursite.ru/action.

Это гениально! При этом технически мы никак не связываем новый лендинг с основным сайтом на Вордпресс. Стили не перемешиваются.

Посмотрите, как выглядит мой старый лендинг, залитый по такой схеме: potoklab.ru/works/2017.

Минус в том, что если у вас нет лендинга — то вам нечего и заливать в подпапку. Однако, если вы пояндексите или пообщаетесь — например, с сообществом предпринимателей — вам удастся найти готовый HTML шаблон лендинга примерно вашей тематики.

Тогда порядок действий такой:

  • Скачиваем HTML шаблон лендинга в вашей теме (только не используйте сомнительные источники — занесете вредоносный код себе на хостинг, испортите карму домена)
  • Скачиваем программку textolite.ru и, следуя руководству: кидаем ее файлы в вашу новую папку лендинга
  • Включаем режим правки, перейдя на yoursite.ru/textolite и спокойно меняем текст и картники

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

3.2 Кастомный шаблон страницы Вордпресс

Этот способ, опять же, предполагает, что у вас есть HTML шаблон лендинг пейдж.

Для любой темы Вордпресс можно создать новый шаблон страницы (не путать с шаблоном темы!) — и использовать его для вашего лендинга.

В папке вашей темы дублируем файл page.php (или single.php) и задаем название по принципу page-{slug}.php, например, вот так — page-landing.php. Подробнее описано вот тут.

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

/** Template Name: Full Width Page*/

Далее удаляем все содержимое page.php и копипастим HTML контент вашего лендинга. Данное действие разорвет все связи с элементами Вордпресса, такими как редактор WYSIWYG, шапка и футер сайта или даты публикации.

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

После сохранения файла page-landing.php в паке текущей темы переходим в редактор и создаем новую страницу (не запись!). В поле редактора ничего не пишем — это бессмысленно.

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

В соответствии с вашим новым шаблоном при открытии данного URL загрузится контент использованного HTML файла. Последний штрих — подключить все стили и файлы.

В любом месте сайта (лучше в корне, чтобы не пришлось думать над путем URL) создается дополнительная папка с файлами нового лендинга — CSS, JS, Images — назовем ее Landing.

Дальше немного кода, увы. Надо открыть наш page-landing.php и заменить все начала путей ссылок с того, что там было, на вашу новую папку landing:

..

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

Бинго! Вы добавили посадочную страницу на WordPress путем создания шаблона страницы.

Минус метода в том, что редактировать его можно только через код. Иначе нужно достаточно много возни с php функциями. Так зачем же так заморачиваться?

Затем, например, что так можно создать мультилендинг. Например, создавать несколько страниц с разными заголовками или офферами — которые мы подцепим из заголовков H1 каждой конкретной статьи. При этом, нужно в шаблоне страницы page-landing.php отредактировать тег H1 таким образом:

Это только одна идея одного изменения. Если вы захотите больше — нужно больше кода PHP. Не совсем для начинающих.

3.3 Плагины для веб-дизайна: Elementor, Page Builder

А теперь расслабимся и поговорим о приятном: создание страниц на Вордпресс без кодинга.

Сегодня множество шаблонов WordPress поставляется с так называемым drag-and-drop редактором, который позволяет перетягивать столбцы, элементы верстки прямо в поле редактора.

Где бы я брал тему Вордпресс сейчас:

Среди множества бесплатных редакторов я бы выделил такие два:

Elementor

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

Промо-видео про работу Elementor

Даже без видео можно легко разобраться, как работать с плагином. Вставляем виджет с элементом (от текста до видео) и настраиваем позиционирование и стили.

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

Для нашей цели — создания лендинг пейдж — в Elementor уже заложена функция создания пустой страницы без Хедера и Футера. По сути, мы хотим создать кастомный Хедер (короткий, лаконичный), а затем готовый лендинг можно дублировать для новой услуги.

Редактор особенно хорош для создания таких трудных по верстке блоков, как блок с ценами, сравнительные таблицы преимуществ или эффектные блоки захвата лидов (формы заявок плюс картинка). Хотя, в принципе, Elementor позволяет разрабатывать полноценные темы для Вордпресс.

Полный список бесплатных виджетов Elementor включает:

  • Заголовки
  • Картинки
  • Редактор текста WYSIWYG
  • с Ютуба / Вимео
  • Кнопка
  • Image box — блок из картинки с заголовком и текстом
  • Отзывы
  • Иконка 600+ на выбор
  • Icon box — блок из иконки, заголовка и текста
  • Социальные иконки
  • Галерея картинок
  • Карусель картинок (слайдер)
  • Список с иконками вместо буллетов
  • Счетчик чисел
  • Прогресс бар
  • Табы — горизонтальные и вертикальные закладки для контента
  • Аккордион — показ/скрытие блоков
  • Toggle — аккордеон для рубрики Частые вопросы
  • звездами
  • Текст предупреждения
  • Код  HTML
  • Шорткоды — для вставки шорткодов других плагинов
  • Анкор меню — возможно отослать к этом пункту из меню
  • Читать дальше
  • Сайдбар
  • Гугл карты
  • SoundCloud — виджет аудио из SoundCloud
  • Разделитель (линия)
  • Spacer — разделитель (пространство)
  • Колонки (доступна вложенность)
  • Обратный отсчет

Page Builder from SiteOrigin

Вид редактора WYSIWYG сменяется на блочный вид, сверху становится доступной панель инструментов: Выбор виджетов, создать новый ряд (блок), количество/ширина колонок и некоторые других функции.

Все очень интуитивно. В поле редактора добавляется сначала ряд (Row), В него помещается нужное количество колонок (Layouts), в отдельную колонку — нужный виджет.

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

Проще всего один раз посмотреть промо-ролик с возможностями Page Builder:

4. Скорость загрузки сайта

Многие пользователи отмечают увеличенную скорость работы сайта из-за тяжести drag-and-drop редакторов. Не зря Elementor скорость сайта ставят на первое место среди своих преимуществ. Но, объективно, она не может не страдать, если вы наворотите кучу всего на одной странице. А поскольку это не голый HTML, там будет чему отнимать ресурсы при загрузке в браузере.

Один вариант — использовать Elementor на поддомене, посвященном только лендингам для рекламного трафика. Тогда вы не замедляете ваши SEO статьи на основном домене, которым не нужна вся эта колоночность.

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

Источник: https://potoklab.ru/landingpage-on-wordpress/

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

Лендинг вордпресс. Делаем Landing page на WordPress. Темы для лендингов

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

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

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

Вам так же может быть интересно

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

Если кого интересует поэтапное создание своего личного блога, то вы можете посмотреть запись — 1/3: Как создать свой сайт с нуля (Пошаговая инструкция).

1. Llorix One

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

2. Zerif Lite

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

3. Alhena Lite

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

4. Uniform

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

5. Palmas

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

6. Brasserie

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

7. XT Corporate lite

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

8. Freesia Empire

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

9. AccessPress Basic

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

10. One Paze

One Paze — это разносторонняя тема, с большим количеством функционала. Она адаптивна, все элементы анимированы параллакс эффектом. 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. Parallax One

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

19. Onetone

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

20. Arise

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

21. Woot

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

22. West

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

23. Anaglyph Lite

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

24. BeOnePage Lite

BeOnePage Lite — это приятная тема выполненная в темных тонах в сочетании в цветными элементами, которая подойдет для презентации вашего бизнеса, портфолио или продукта. После того как пройдете по ссылке, нажмите на «Download now» в блоке BeOnePage Lite и вы скачаете бесплатную версия этой темы.

25. SKT BeFit

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

26. Aglee Lite

Aglee Lite — это простой корпоротивный шаблон, выполненный в светло-серо-синих тонах. Данная тема прекрасно подойдет для стартапа или малого бизнеса.

27. Wimpie Lite

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

28. BootFrame Core

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

29. Zincy Lite

Zincy Lite — это бизнес, корпоративная, а так же e-Commerce шаблон. Дополнительно, он так же включает в себя большое количество функций настраивания дизайна.

30. eVision corporate

eVision corporate — это мощная, а так же красивая бизнес тема. Она была создана после долгого процесса поиска и анализа подобных шаблонов. eVision corporate должна прекрасно подойти для любого типа бизнеса.

Источники

  • Что такое «Целевая страница»/landing page?

Источник: http://Bologer.ru/besplatnye-landing-page-shablony-dlya-wordpress-top-30/

Подборка бесплатных WordPress шаблонов посадочных страниц

Лендинг вордпресс. Делаем Landing page на WordPress. Темы для лендингов

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

Что такое целевая страница

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

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

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

Такая же ситуация складывается и с основным сайтом и целевыми страницами.

Темы в этом списке тщательно подобраны с учетом основ идеального сайта целевой страницы. Это минималистичные темы – большинство из них – одностраничные темы с эффектом прокрутки параллакса. Темы позволят вам создать идеальную целевую страницу с призывом к действию (CTA), изображениями, видео, текстом, заголовками, учебными пособиями, отзывами, и другими полезными фишками.

The Launcher

The Launcher – отличная тема целевой страницы WordPress для запуска нового товара или услуги. Тема предлагает адаптивный дизайн и множество функций для создания выигрышной целевой страницы.

Формы подписки с полноэкранным фоном слайдера соберут пользовательские данные, добавят больше подписчиков, а привлекательные кнопки Call To Action (CTA) обязательно превратятся в более высокие лиды.

В шаблоне липкое меню, раздел служб, раздел видео, избранные посты, блог, раздел клиентов, таблицы цен и многое другое. Он основан на WordPress Live Customizer – настройте вашу тему с предварительным просмотром в реальном времени.

Основные особенности The Launcher:

  • Адаптивный параллакс страницы.
  • Экран запуска сайта – встроенный обратный отсчет.
  • Красивый призыв к действию.
  • раздел – добавить видео / Vimeo.
  • SEO оптимизация и быстрая загрузка.

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

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

AccessPress Parallax

AccessPress Parallax – удивительная бесплатная тема WordPress с дизайном прокрутки.

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

У AccessPress Parallax фон параллакса с липким меню, раздел функций, портфолио в стиле галереи, раздел команды, раздел отзывов и блог. Кроме того, тема интегрирована с замечательным плагином WooCommerce – продавайте свои продукты онлайн.

Основные особенности AccessPress Parallax:

  • Полностью адаптивная тема с эффектом параллакса.
  • Привлекательные варианты призыва к действию (CTA).
  • Формы контактов и интеграция с картой Google.
  • Возможность магазина WooCommerce.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Llorix One Lite

Llorix One Lite – простая бесплатная тема WordPress. С ее помощью вы легко создадите современный веб-сайт. Домашняя страница темы имеет несколько красивых разделов с фоном прокрутки параллакса.

Можно добавить привлекательную кнопку призыва к действию в самом первом разделе, за которой последуют разделы: сервисы, наши истории, последние новости, отзывы и карты Google. В шаблон встроены контактные страницы, блог, магазин и многое другое.

Полностью адаптивная тема, которая отлично смотрится на всех устройствах.

Основные особенности Llorix One lite:

  • Бесплатная тема с плоским и чистым дизайном.
  • Электронная коммерция – поддержка WooCommerce.
  • Интеграция с сеткой фотогалереи, Contact Form 7.
  • Красивые кнопки.
  • SEO оптимизирована.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Gaga Lite

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

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

Основные особенности Gaga Lite:

  • Бесплатная одностраничная тема стиля для целевых страниц.
  • Построена на WordPress Live Customizer.
  • Красивые разделы домашней страницы – о нас, услуги, портфолио, отзывы.
  • Наш магазин и раздел тарифных планов.
  • Контактные формы и иконки социальных сетей.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Intro

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

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

Шаблон прост в использовании и удобен для новичков – для настройки темы не требуется кодирование.

Основные особенности Intro:

  • Полностью адаптивная бесплатная тема.
  • Параллакс заголовок и фоны.
  • Доступ к Google шрифтам.
  • Пользовательские цвета.
  • Готовые виджеты.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Parallax One

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

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

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

Основные особенности Parallax One:

  • Параллакс WordPress тема.
  • Неограниченные варианты цвета.
  • Интеграция WooCommerce.
  • Варианты CTA.
  • Иконки социальных сетей.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Parallax One — функции и основные параметры темы WordPress от Themeisle.

One Paze

One Paze – бесплатная одностраничная тема для WordPress. Тема предлагает ослепительный адаптивный дизайн, который идеально подходит для создания целевой страницы.

Собственный логотип, липкое меню и полноэкранное изображение на фоне CTA сделают лендинг привлекательным и полезным.

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

Основные особенности One Paze:

  • Адаптивная тема на одной странице.
  • Полностью настраиваемая.
  • Несколько макетов блога.
  • Встроенные виджеты.
  • Перевод готов.
  • Контактные формы, карту Google и иконки социальных сетей

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Venture Lite

Venture Lite – бесплатная адаптивная тема, созданная на основе Bootstrap. Тема предлагает изящный одностраничный дизайн с эффектом прокрутки параллакса.

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

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

Основные особенности Venture Lite:

  • Многоцелевой WP шаблон.
  • Чистый и современный дизайн.
  • Эффект параллакса.
  • Электронная коммерция.
  • Оптимизирована для SEO и скорости.
  • Включены контактные формы.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

West

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

West предлагает красивый одностраничный макет веб-сайта с множеством опций для демонстрации товара или услуги. В шаблоне красивые макеты для представления команды, проектов/услуг, CTA, иконок социальных сетей.

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

Основные черты West:

  • Адаптивная тема на основе HTML / CSS3.
  • WordPress Live Customizer.
  • Пользовательские параметры заголовка.
  • Пользовательские шрифты и цвета.
  • Призыв к действию.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Business Elite

Business Elite – целевая страница WordPress, разработанная специально для бизнес-сервисов и корпоративных фирм. Тема использует прокрутку страницы и технологию параллакса.

Интегрирована с мощными плагинами WordPress, такими как JetPack, Contact Form 7, Photo Gallery и другими.

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

Основные особенности Business Elite:

  • Красивая адаптивная одностраничная тема.
  • Полноэкранные слайдеры с CTA.
  • Липкое меню.
  • Виджеты и шорткоды.
  • О нас, нашей команде, раздел отзывов.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Pixova Lite

Pixova Lite – красивая тема One Page Parallax, благодаря которой вы получите профессиональный веб-сайт. Она идеально подходит для эффективного продвижения вашего продукта в Интернете.

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

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

Основные особенности Pixova Lite:

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

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

OnePress

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

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

Это очень гибкая тема, позволяет настраивать большинство параметров.

Основные особенности OnePress:

  • Современная адаптивная одностраничная тема.
  • Поддержка WooCommerce.
  • 8 красивых разделов домашней страницы.
  • Полноэкранные слайдеры..
  • SEO дружественная.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Minimable

Minimable – основанная на Bootstrap полностью адаптивная тема для WordPress. Она использует плагин Superscrollorama jQuery для великолепных эффектов прокрутки. Minimable позволяет добавить привлекательную страницу блога, где вы можете поделиться своими статьями и последними обновлениями.

Основные особенности Minimable:

  • Современная бесплатная тема на основе Bootstrap.
  • Неограниченные варианты цвета.
  • Отображение портфолио во вкладках / категориях.
  • Прекрасный раздел галереи.
  • Контактные формы и социальные сети.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

Vega

Vega – легкая тема параллакса, предлагает три встроенных варианта цвета: зеленый, синий и оранжевый.

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

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

Основные особенности Vega:

  • Адаптивная и мобильная тема.
  • Параметры текста или изображения логотипа.
  • Полноэкранное изображение баннера.
  • Параллакс, баннер и фоны.
  • Социальные медиа.

Скачать / Демо / Детали | Заказать сайт на этой теме | Потестировать хостинг

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

Источник: accesspressthemes.com

Источник: https://Hostenko.com/wpcafe/themes/10-luchshih-besplatnyh-tem-dlja-ledingov-wordpress-s-vysokimi-pokazateljami-konversii/

? Как быстро создать Landing Page для бизнеса на WordPress в 2019 году? Пошаговая инструкция

Лендинг вордпресс. Делаем Landing page на WordPress. Темы для лендингов

Здравствуйте, сегодня расскажу вам как создать лендинг за один день. Интернет — отличный канал для привлечения клиента, потому необходимо, например, запустить рекламу в Яндекс Директ или Google ADS. В таком случае лучше всего сделать сайт одностраничник и запустить рекламу на него.

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

Кстати, если желаете всё сделать максимально просто, то можете использовать подходящие темы для лендинга. Установка, минимальная настройка, знаний кода не нужно от слова совсем. Вот список таких тем для WP.

Этап 1: готовим платформу для Landing Page

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

  • хостинг, на котором будем размещать сайт;

  • доменное имя;

  • графический редактор (опционально);

  • начальные знания HTML и CSS (опционально).

Как видите, ничего особенного не нужно. Строить лендинг будем на WordPress, самая популярная и довольно дружелюбная к неофитам CMS (система управления содержимым).

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

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

Подготовка домена и хостинга

В первую очередь нужно выбрать доменное имя и хостинг. В плане хостингов я перепробовал многое. Результаты многочисленных проб привели меня на Макхост: https://mchost.

ru/ Вполне возможно, что вам по вкусу другой хостинг, но лично для меня оказался наиболее подходящий вариант.

Если сомневаетесь, то вот обзор хостингов, которые отлично подходят для работы: https://workinnet.ru/hosting-for-wordpress/

После выбора хостинга нужно выбрать домен. Несмотря на нелюбовь к Reg.ru, как к хостингу, домены всегда приобретаю у них: https://www.reg.ru/

А вот вам промокодик со скидкой в 5% на приобретение домена. Немного, но лучше, чем ничего: 8404-F30B-D292-4306

Конечно, я немного покривил душой, когда заявил, что один день. DNS-адреса домена могут изменяться до 24 часов. Сейчас все объясняю. Мы покупаем домен, вводим интересующее название, смотрим, занято или нет. Например, podso.site.

Он занят, но это я его выкупил. Таким образом можно долго перебирать, потому поступаем иначе. Выбираем меню «Домены» → «Подрать домен».

Следом появляется такое окно. Ищем домен либо по ключевому слову. В меню слева, либо вводим все интересующие варианты в правое меню. Левое использовать проще.

Вводим ключевое слово, например “Zae” и получаем такую выборку. Так можно найти нужный домен.

Отлично, после выбора домена нужно его добавить на хостинг. Заходим в панель управления Reg.ru.

Нажимаем кнопку «Мои домены» и выбираем нужный.

Теперь нужно указать DNS-серверы, для этого ткните в указанное место. Я покажу на примере свободного домена, который купил, но так и не применил нигде.

Если у вас хостинг от Reg.ru, то просто ничего не трогайте, в крайнем случае можете DNS поменять на ns1.hosting.reg.ru и ns2.hosting.reg.ru. Если же послушались моего совета и выбрали Макхост, то вам придется указать ns1.mchost.ru, ns2.mchost.ru, ns3.mchost.ru, ns4.mchost.ru.

Тыкаем кнопку «Изменить» и наблюдаем такое сообщение.

Как видите, придется ждать до 24 для изменения DNS-серверов. Чаще всего ждать приходится меньше, но стоит готовиться к худшему так что, чем раньше сделаете это, тем быстрее приступите к следующей части. Лучше делегировать DNS сразу после покупки, если уже точно знаете, где будете размещать свой лендинг.

Готовим сайт

Когда DNS-серверы обновятся, придет время подготовить базу для создания Landing Page. Заходим на хостинг, в моем случае это Макхост и начинаем работу. Сначала добавляем зарегистрированный домен на хостинг.

Теперь настроим хостинг перед размещением сайта.

Выбираем настройки PHP, здесь нужно указать версию 7.3 и заказать сертификат SSL. Он нужен для того, чтобы к вам могли заходить через HTTPS (безопасный протокол соединения), учтите, на лендинге всегда есть формы обратной связи, так что сделайте сертификат, иначе есть вероятность, что данные посетителя перехватят злоумышленники. У меня уже готов, но у вас будет кнопка заказать.

Отлично, теперь нужно установить WordPress. Для этого нужно скачать архив с официального сайта: https://ru.wordpress.org/download/, подготовить для размещения на хостинге и распаковать его там. Я подготовил для этого отдельную статью, читайте: https://workinnet.ru/setup-wp-hosting/

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

Этап 2: делаем Landing Page

Итак, после установки WordPress пора перейти ко второму этапу: быстрому созданию лендинга. В первую очередь выбираем тему, подробная инструкция есть здесь: https://workinnet.ru/choice-theme-wordpress/

Но в данном случае рекомендую что-нибудь красивое из коробки. Я, например, выбрал тему Sydney. Чтобы установить тему, достаточно перейти в панель администратора WP, справа в меню найти раздел «Внешний вид», выбрать «Темы» и нажать кнопку «Добавить новую». В инструкции все это указано. После установки темы не забудьте нажать кнопку «Активировать».

В первую очередь настраиваем тему. Достаточно ткнуть кнопку «Настроить» на панели администратора. Либо, если уже перешли на сайт, в панели сверху. На скриншоте указал.

На вкладке «Общие» указываем название сайта и краткое описание.

Далее роемся по настройкам. У каждой темы они будут свои. В данной теме в разделе «Тип заголовка» можно выбрать полноэкранный слайдер или изображение для шапки. Поменять тексты, сделать более эффектное оформление. Можно даже выбрать видеовставку для шапки. Очень удобно.

После того, как покопались в настройках, придется приступить к редактированию.

Конструируем Landing Page

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

  1. Elementor – специализированный визуальный конструктор страниц для WordPress. Позволяет быстро и без заморочек лепить плагины.

  2. Caldera Forms – плагин для создания форм обратной связи.

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

Поехали. В первую очередь создаем форму обратной связи. В админпанели наводим на Caldera Forms и выбираем «Формы». Сверху нажимаем «Новая форма» и выбираем шаблон «Контактная форма».

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

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

И нажимаем сверху кнопку «Редактировать в Elementor». Пред взором возникает такой конструктор, на котором можно строить элементы простым перетаскиванием.

Пришло время визуализировать. Для начала готовим тексты. Но нам мешает боковая колонка. Находим ее через панель разработчика браузера (кнопка F12). Либо наводим на объект и нажимаем правую кнопку мыши и выбираем «Просмотреть код».

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

display:none;

И снова заходим в кастомайзер (настройки темы) и в раздел дополнительные стили (указал на скриншоте выше) вносим код нужного элемента. Если хотите такой же макет, как у меня и выбрали ту же тему, то внесите в «дополнительные стили» вот такой код:

#secondary, #secondary a, #secondary .widget-title { color: #767676; display: none; } .content-area { width: 100%; } .hentry .title-post { font-size: 36px; font-weight: 600; line-height: normal; padding-bottom: 10px; display: none; margin: 0; }

Редачим. В Elementor можно выбрать кучу разных элементов:

  • текст;

  • изображения;

  • картинки с текстом;

  • разделители;

  • заголовки;

  • иконки;

  • счетчики.

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

Но мы же хотим навести красоту. Например, выровнять виджет вертикально. Тогда смотрим на скриншот.

Нажимаем сюда. Выбираем вертикальное выравнивание «посередине». Отлично. Теперь не помешает фото. Добавляем фото. Но для красоты делаем наложение на него другого.

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

Чтобы одно фото лежало поверх другого, указывайте ему больший z-index, чем тому, что должно быть снизу.

Для разных устройств придется подбирать по-разному. Рядом практически со всеми вкладками есть значок «Компьютер». Нажимаем на него и смотрим результат. Теперь пора перейти к настоящему веселью.

Делаем меню довольные клиенты. Выбираем двухколоночный макет, добавляем виджеты:

  1. Слева «Фото». Потом нажимаем на значок «макет» и редактируем колонку, меняя ее ширину. Я установил 25%.

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

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

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

Собственно, с помощью плагина Elementor построить лендинг очень легко. Так что дерзайте, немного поэкспериментировать и у вас будет готовый сайт.

Осталось последнее: добавить форму обратной связи. Для этого требуется в области виджетов полистать вниз и найти «Шорткод».

У формы обратной связи будет вот такая штука.

Это и есть шорткод. Его надо скопировать и вставить в виджет «Шорткод», тогда у вас на странице появится форма обратной связи, которая позволит бизнесу эффективно функционировать, то бишь собирать заявки.

О настройке почтового сервиса придется написать отдельную статью.

Завершаем эпопею

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

Результаты можете увидеть по адресу: https://podso.site/

Благодарю за внимание, успехов вам и вашему бизнесу!

Источник: https://workinnet.ru/landing-fast-development/

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