Wordpress

WordPress шаблоны лендинг пейдж: 40 landing page шаблонов на WordPress 2023, которые вам понравятся

04.05.2023

Содержание

Лендинг страница на WordPress

Вступление

У вас есть конкретный товар или вы оказываете уникальную услугу? Может быть вы хотите позвать коллег на конференцию или иное конкретное событие? Если да, то вам нужен лендинг пейдж, иначе целевая страница. Лендинг страница на WordRess один из  вариантов её создания.

Лендинг страница на wordpress: мифы и иллюзии

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

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

Во-первых, лендинг пейдж не «листик в тетрадке», а большой объем информации показанной без пагинации под одним URL.

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

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

  • Оставить свои координаты;
  • Присоединиться к сообществу;
  • Записаться на приём;
  • Заказать услугу;
  • Записаться на семинар;
  • Скачать файл и т.д.

Если у вас есть предложение, которое можно поместить под кнопку, вам нужен лендинг пейдж.

Размер лендинг пейдж

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

Нет технических ограничений по объёму целевой страницы. Технически её можно сделать бесконечной. Однако есть ограничения по оптимизации. Лендинг страница не должна «весить» больше 3 мб, рекомендовано 1,5 мб. Использование более тяжёлых целевых страниц (например с большим количеством видео) должно быть оправдано интересами читателя.

Варианты лендинг страниц

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

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

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

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

Платформы для лендинг страниц

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

Создать свою посадочную страницу можно на конструкторах (частичная собственность): uKit, uLanding, Wix, LPgenerator, uCoz, PlatformaLP, Ucraft, LPMotor, Flexbe, Mobirise. Интересные я выделил шрифтом.

Для полной собственности контента лучше выбрать CMS. Здесь, как обычно, лидируют Joomla и WordPress. WordPress проще в освоении, Joomla будет чуть шустрее.

Лендинг страница на WordPress

Создать лендинг страницу на WordPress можно быстро, без освоения сложной вёрстки. В этом вам помогут специальные плагины WordPress «Landing Page». Чтобы их найти, идёте в архив плагинов в поиске пишите Landing Page и изучаете результаты.

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

  • Beaver Builder
  • Leadpages
  • Elementor
  • Divi
  • OptimizePress
  • Coming Soon Pro by SeedProd.

Теперь о плюсах и минусах.

Плюсы

  • Во-первых, лендинг страница на WordPress создаётся очень быстро, без знаний программирования, методом перетаскивания (drag and drop tools) готовых модулей.
  • Во-вторых, большинство плагинов в лёгкой версии бесплатны и начать работать можно без затрат.
  • В-третьих, WordPress имеет достойную репутацию и поддержку на всех уровнях.
  • В-четвёртых, сама WordPress бесплатна и тратиться сразу на тарифы, как в конструкторах, не нужно.
  • В-пятых, создав лендинг страницу на WordPress вы становитесь её полным хозяином.

Минусы

Есть и минусы.

  • Прежде всего, на бесплатных версиях плагинов лендинг страницы получаются хорошими, но не «люкс». Все интересные шаблоны, важные и красивые модули за деньги.
  • Во-вторых, придётся решать проблему скорости загрузки страницы. Без настройки кэша и подбора сервера WordPress не так шустра как хочется.
  • В-третьих, совсем без опыта работ на WordPress не обойтись. Это не WIX, а умная CMS и её нужно понять.

Итак, возможна ли лендинг страница на wordpress

Несмотря на минусы, лендинг страница на WordPress может получиться великолепной. Рекомендую, как минимум, попробовать. Для начала на Elementor или Beaver Builder. Они бесплатны с большим функционалом. Дальше больше, Divi для студии, или Leadpages для профи.

©www.wordpress-abc.ru

Еще статьи

Похожие посты:

Создание landing page на WordPress

Категория: WordPress, Сайтостроение, Опубликовано: 2016-11-11
Автор:

Приветствую вас на сайте Impuls-Web!

Продолжаем рассматривать способы создания Landing Page и в данной статья я покажу вам как можно самостоятельно создать Landing Page на базе CMS WordPress.

В качестве примера я буду использовать CMS WordPress, но для создания Landing Page можно также использовать и другие движки.

Навигация по статье:

  • Выбор и настройка шаблона для Landing Page
  • Редактирование меню
  • Создание структуры Landing Page
  • Добавление карты на Landing Page
  • Доработка шаблона WordPress
  • Видеоинструкция

Выбор и настройка шаблона для Landing Page

Для создания Landing Page на WordPress большое значение имеет шаблон оформления сайта.

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

Из бесплатных шаблонов WordPress для создния Landing Page я могу вам посоветовать тему Vantage.

Преимущества данного шаблона WordPress:

  • Позволяет выводить виджеты в правом верхнем углу шапки.
  • Имеет много различных настроек.
  • Есть два типа шапки.
  • Позволяет переключаться между двумя типами макета страницы (широкоформатная страница или с фиксированной шириной).
  • Адаптивный.
  • Можно изменять количество колонок в футере.
  • Бесплатный.

Основной недостаток шаблона:

  • Не даёт возможность настраивать цвета сайта из админки.

Установить данный бесплатный шаблон можно из репозитория WordPress.

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

Для настройки данного шаблона нужно сделать следующее:

  1. 1.Переходим в раздел «Внешний вид» => «Настроить».
  2. 2.Далее, переходим в раздел «Theme Settings», и здесь нажимаем на ссылку Logo, после чего, на ссылку «Выбрать файл» и загружаем изображение.
  3. 3.Так же, вы можете вместо надписи «Phone number» ввести свои контактные данные. Но я не советую вам это делать именно таким способом. Мы это лучше сделаем при помощи виджета.
  4. 4.Возвращаемся в предыдущее меню, нажимая на стрелочку в верхнем левом углу и переходим в раздел «Layout». Здесь мы можем выбрать один из видов макета страницы:

    «Boxed» – макет страницы с фиксированной шириной.

    «Full Width» – макет на всю ширину страницы.

  5. 5.В разделе Masthead Layout можно выбрать макет шапки для Landing Page
    «Default Masthead» — меню выводится под шапкой и справа можно вывести виджеты
    «Logo in menu» — меню располагается в один ряд с логотипом (виджеты в шапке в этом случае не выводтся)
  6. 6.Далее, возвращаемся в предыдущее меню. Переходим в раздел «Navigation», и здесь мы, прежде всего, ставим галочку
    «Mobile menu»    , что бы у нас на мобильных устройствах появлялось мобильное меню.
  7. 7.Далее, при желании, можно убрать эффект прилипающего меню. Для этого достаточно снять галочку «Sticky Menu».
  8. 8.Так же убираем галочку «Search in Menu», что бы убрать иконку поиска. Потому как нам на Landing Page поиск, в принципе, не нужен.
  9. 9.И в самом конце ставим галочку «Mobile Navigation».
  10. 10.Теперь нажимаем на кнопку «Сохранить и опубликовать». Нажимаем на крестик в левом верхнем углу и переходим в раздел
    «Внешний вид»     => «Виджеты».
  11. 11.Здесь у нас есть область виджетов, которая называется «Header», в неё мы можем добавить свои контактные данные, либо кнопку для всплывающей формы. Для этого воспользуемся виджетом «Текст».
  12. 12.Если вам нужно указать просто один номер телефона, то вы можете ввести его в заголовке. Если же вам нужно будет вставлять какой-то фрагмент кода, или фрагмент текста, то вы вставляете его в поле «Содержимое».

    Здесь можно вывести всплывающую форму «Заказать звонок». Если вы не знаете, как на WordPress можно создать такую форму, то вот ссылка на статью с пошаговой инструкцией и видео.

  13. 13.Фрагмент кода из статьи про всплывающие формы нужно вставить в поле «Содержимое» в виджете «Текст». В данном коде нужно будет удалить или заменить надпись «Текст», заменить шорткод формы обратной связи на свой, а также изменить текст надписи на кнопке. Из этой же статьи можно взять CSS код для стилизации ссылки.
  14. 14.После этого нажимаем на кнопку «Сохранить».

Редактирование меню

Далее, переходим к редактированию меню Landing Page. Для этого:

  1. 1.Заходим в раздел
    «Внешний вид»     => «Меню» и добавляем сюда нужные пункты как произвольные ссылки. Сейчас я здесь буду в качестве ссылки ставить решетку, а затем, когда у меня будет сформирована структура страницы, я буду здесь проставлять якоря, при помощи которых можно будет переходить в различные части страницы.
  2. 2.После того, как все пункты добавлены, смотрим, что бы у нас была выбрана область темы и нажимаем на кнопку «Сохранить меню».

Создание структуры Landing Page

Для облегчения работы по созданию структуры страницы воспользуюсь бесплатным плагином Page Builder By Site Origin.

На самом деле таких плагинов на сегодняшний день просто огромное количество.

Я обычно использую именно этот из-за следующих преимуществ:

  • Данный плагин не даёт большой нагрузки на сайт.
  • Имеет визуальный редактор и набор дополнительных виджетов.
  • Помимо своих виджетов он позволяет так же задействовать стандартные виджеты WordPress, а так же виджеты других плагинов.
  • Позволяет создавать адаптивные страницы.
  • Работает практически со всеми шаблонами и плагинами WordPress.
  • Бесплатный.

Устанавливается он так же как и все остальные плагины.

После установки и активации переходим к формированию непосредственно самой структуры страницы.

  1. 1.Для этого создадим новую страницу. Заходим в раздел «Страницы» => «Добавить новую», назовем ее «Главная».
  2. 2.Здесь, сразу же в правой части окна, в поле шаблон, нам нужно выбрать «Full Width Page No Title». Это позволяет нам сделать данную Landing Page на всю ширину без использования сайдбаров и без вывода заголовка страницы.
  3. 3.Теперь мы видим, что у нас, помимо обычных вкладок «Визуально» и «Текст», появилась вкладка «Page Builder». Переходим на нее и здесь мы видим панель инструментов данного плагина. Для формирования структуры Landing Page мы будем использовать две основные кнопки, это «Добавить строку» и «Добавить виджет».
  4. 4.При добавлении строки мы можем задавать, сколько колонок будет расположено в этой строке. При этом можно регулировать ширину каждой из колонок путем перетаскивания границы. В моем случае сейчас понадобится одна колонка. После выбора параметров нажимаем на кнопку «Вставить».
  5. 5.Далее, мне нужно добавить в эту строку какой-то виджет. Для этого я кликаю по ней и затем нажимаю на кнопку «Добавить виджет».
  6. 6.Для того, что бы вывести в строке текст, форму или изображение можно использовать виджет «Site Origin Редактор». Единственное, для того, что бы этот редактор работал, нужно будет доустановить еще один плагин. Он называется «Набо виджетов Site Origin».
  7. 7.После вставки данного виджета наводим на него курсор и нажимаем на ссылку «Редактировать», после чего переходим по предложенной ссылке «набор виджетов Site Origin» для установки плагина, а затем активируем его.
  8. 8.Теперь вернемся к редактируемой странице, закроем данный виджет и нажмем на кнопку «Опубликовать» для того, что бы страница обновилась и WordPress увидел установленный плагин.
  9. 9.Теперь, если мы нажмем на ссылку «Редактировать» на добавленном виджете, то у нас откроется визуальный редактор, в котором мы можно добавить свой текст, изображение или шорткод. После внесения изменений нажимаем на ссылку «Выполнено».
  10. 10.Для задания фона для строки Landing Page наводим курсор на ключик в верхней правой части строки и выбираем здесь пункт редактировать строку.
  11. 11.У меня открывается панель с правой стороны, которой есть три вкладки: «Атрибуты», «Макет» и «Дизайн».

    На вкладке «Атрибуты» можно дописать для этой строки дополнительный идентификатор, дополнительный класс строки, дополнительный класс для ячеек, которые будут размещаться внутри данной строки, а так же можно здесь прописать css-свойства.

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

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

    13. При этом, фон будет распространяться на всю ширину, а контент будет идти с фиксированной шириной. Для того чтобы контент был на всю ширину окна, нужно выбрать «Во всю ширину (растянуто)».

  13. 13.Теперь переходим к вкладке «Дизайн». Здесь мы можем задать цвет фона, нажив на кнопку выбрать цвет. Открывается палитра, в которой можно задавать тот цвет, который вам больше нравится.
  14. 14.Так же, вы можете здесь выбрать какое-то фоновое изображение для данной строки . Для этого нажимаем на кнопку выбрать изображение и загружаем его с компьютера.
  15. 15.На этой же вкладке можно задать позицию фонового изображения и применить к нему паралакс-эффект. После внесеия изменений нажимаем на кнопку «Выполнено» в нижнем правом углу.
  16. 16.Для того чтобы увеличить высоту определённой строки можно задать для неё верхний и нижний отступ. Для этого на панели редактирования строки переходим на вкладку «Макет».

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

Нажимаем на ссылку «Добавить строку», задаем здесь четыре колонки и нажимаем «Вставить». Теперь добавляем в одну из колонок тот же виджет «Site Origin Редактор».

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

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

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

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

Для удаления строки, точно так же, наводим указатель на ключик и нажимаем на ссылку удалить строку, а затем нажимаем на ссылку «Вы уверены».

Вот таким образом вы можете добавлять другие строки и блоки на вашу Landing Page и заполнять их текстом и изображениями.

Добавление карты на Landing Page

В Landing Page часто используются карты Яндекс или Google. Для того, что бы добавить такую карту, вам нужно:

  1. 1.Cгенерировать скрипт на специальном сервисе Яндекса или Google. Более подробно о том, как это сделать вы можете узнать из следующих статей:

    Как вставить карту яндекс на сайт WordPress
    Как добавить гугл карту на сайт

  2. 2.Добавляем новую строку. Делаем для нее ширину 100%, после чего, в разделе макет нам нужно задать «Во всю ширину (растянуто)», и сделать нижнее поле 0 px. Нажимаем на кнопку «Выполнено» и добавляем в эту строку виджет текст.
  3. 3.Теперь в данный виджет нам нужно вставить скрипт, который мы получили в сервисе Яндекс. Карты.
  4. 4.Далее, нажимаем на кнопку «Выполнено» и нажимаем на кнопку «Обновить» чтобы изменения применились.

Доработка шаблона WordPress

В данном шаблоне у нас еще присутствует отступ снизу и отступ сверху. К сожалению, в настройках шаблона они не убираются, поэтому их можно убрать путем внесения правок в файл стилей данного шаблона WordPress.

Более подробно о внесении изменений в тему WordPress, вычислении классов, идентификаторов и дописании им дополнительных свойств вы можете узнать из этой статьи:

Изменение темы WordPress. Определение Class и ID

Если вы будете использовать данный шаблон для создания своей Landing Page, то вам нужно будет в конце файла style.css для блока с идентификатором main задать следующие свойства:

#main{ padding:0px!important; }

#main{

padding:0px!important;

}

После чего нажать на кнопку «Обновить файл».

Видеоинструкция

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

Если статья была для вас полезной – не забудьте нажать на одну из кнопок соцсетей ниже.
А также подписывайтесь на рассылку чтобы не пропустить ничего нового.
Хорошего вам дня! Жду вас в следующей статье 🙂

С уважением Юлия Гусарь

шаблонов целевых страниц | Бобер Строитель

Получи это сейчас

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

Шаблон для малого бизнеса

Наш шаблон Probiz поможет вам быстро создать веб-сайт для малого бизнеса. Нам доверяют фальшивые компании, такие как Swingers Golf Clubs и Mafia Medical. Обязательно посетите живую демонстрацию, чтобы полностью ощутить Probiz.

Шаблон для фитнеса, тренажерного зала, кроссфита

Если вам или вашему клиенту нужен вдохновляющий фитнес-шаблон для пресса, The Body Factory — это ответ. Легко настраивается для студии йоги, тренажерного зала, кроссфит-бокса или любого другого веб-сайта с высокими физическими нагрузками.

Передовая статья, Шаблон блога о моде

Не позволяйте названию Fashion ввести вас в заблуждение. Fashion Freaks — это универсальный высококачественный дизайн, сочетающий в себе класс и изысканность. Идеальное начало для взыскательного клиента или бренда класса люкс.

Юрист, юридическая фирма Шаблон

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

Шаблон портфолио фотографа

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

Шаблон для музыканта, ди-джея, группы

В комплекте с расписанием гастролей, разделом с дискографией и кнопкой iTunes. DJ Beaver — отличный дизайн для диджея, группы или любого другого гастролирующего артиста.

Шаблон ресторана

Не соглашайтесь на устаревший вид веб-сайта вашего ресторана. Lets Meat — это свежий дизайн с разделами меню, отзывов клиентов и часов работы.

Полноэкранный шаблон

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

Креатив, шаблон веб-агентства

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

Шаблон электронной книги

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

Образовательный, университетский шаблон

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

Автомобильный шаблон

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

Шаблон мобильного приложения

Ищете быстрый старт для веб-сайта вашего мобильного приложения? Не откладывайте использование шаблона Procraz, чтобы быстро реализовать идею приложения для iOS или Android.

Общий бизнес-шаблон

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

Construction Template

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

Скоро появится Шаблон

Если вы пробуете новый продукт или услугу, целевая страница «скоро» — отличный способ оценить интерес и проверить соответствие рынку. В сочетании с нашим модулем подписки этот шаблон позволит вам начать собирать адреса электронной почты в выбранном вами ESP за считанные минуты.

Новостная рассылка

Получайте последние новости первыми

Наш информационный бюллетень составляется лично и рассылается примерно раз в месяц. Это ничуть не раздражает и не спамит. Мы обещаем.

  • Имя*
  • Электронная почта*
  • hCaptcha*