WordPress landing: Как сделать лендинг на WordPress: разбираемся пошагово

20.07.2023 alexxlab

Содержание

Создание Responsive Landing Page на WordPress от А до Я

Дизайн
2 мин на чтение
2048

Пользователь HabraHabr Алексей (wdmaster) записал видео-курс по созданию Responsive Landing Page на WordPress, состоящий из 13 уроков.

Новый видеокурс по созданию адаптивного одностраничного сайта и посадке на CMS WordPress. В процессе обучение рассмотрены такие моменты, как проектирование интерфейса, создание скетча, адаптивная верстка и подключение Front-End плагинов, посадка на WordPress и создание опций шаблона. При разработке темплейта учитывалась возможность дистрибуции и распространения темы.

Материалы на GitHub: https://github.com/agragregra/wordpress-landing-page-lesson
Демо фронтенда: http://dev.

webdesign-master.ru/_wp_html/

Видеокурс

Первый урок

Второй урок

Третий урок

Четвертый урок

Пятый урок

Шестой урок

Седьмой урок

Восьмой урок

Девятый урок

Десятый урок

Одиннадцатый урок

Двенадцатый урок

Заключительный урок

Что использовалось

ru. wordpress.org — Собственной персоной
elementary.io — Спасибо за логотип 🙂
getbootstrap.com — Адаптивная сетка
jquery.com — Популярнейший javaScript Framework
stocksnap.io — Сервис качественных бесплатных фотографий для веб-дизайна
wireframe.cc — Отличный сервис для скетчинга
gist.github.com — Сервис для хранения полезного кода
inkscape.org — Векторный редактор SVG
linea.io — Тонкие векторные иконки
fortawesome.github.io — Векторные иконки. Использовали для соц. сетей
codepen.io — Много интересного кода. Спасибо за Sandwich 🙂

pixelcog.github.io/parallax.js — Параллакс эффект
dimsemenov.com/plugins/magnific-popup — Респонсив попап менеджер
github.com/malihu/page-scroll-to-id — Плагин навигации по Landing Page
imakewebthings.com/waypoints — Триггер для скролла
daneden.github.io/animate.css — Анимация элементов на странице
mixitup.kunkalabs.com — Сортабельные анимированные плитки в портфолио
bourbon. io — Коллекция миксинов для SASS
sass-lang.com — Препроцессор SASS
koala-app.com — Компилятор для препроцессоров

fontsquirrel.com/fonts/raleway — Бесплатный шрифт для нашей темы
sublimetext.com — Редактор для фронт-енда
jetbrains.com/phpstorm — Редактор для бэк-енда
formspree.io — Отправка заявок с сайта

#веб
#дизайн

Читайте далее

Статьи по теме

Landing Page на WordPress — плюсы и минусы

Автор Сергей Чесноков Просмотров 401 Опубликовано 14. 09.2015 Обновлено 25.01.2022

Приветствую вас, друзья!

Основной целью Landing Page (или посадочной страницы) является получение контактных данных потенциального клиента. Посетитель оставляет свой телефон или E-mail при заполнении формы заявки, регистрации на сайте или при получении какой-то бесплатной плюшки.

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

Есть разные способы создания лендингов:

На специальном сервисе (которых в Интернете довольно много), где с помощью конструктора вы сделаете собственный лендинг. Чаще всего за пользование сервисом берётся абонентская плата.
С помощью программ (к примеру, Adobe Muse).
С нуля, посредством отрисовки дизайна и вёрстки страницы на HTML-коде.
Landing Page на WordPress (либо на какой-то другой системе управления).

Среди вышеперечисленных способов наиболее подходящим является последний. Почему? Поговорим об этом подробнее.

Содержание

Плюсы лендингов на CMS
Плюсы WordPress
CMS не всегда нужна

Плюсы лендингов на CMS

Основным плюсом системы управления контентом (сокращённо — CMS) является лёгкость и простота в использовании. Это значит, что в любой момент времени (после того, как сайт уже создан) вы сможете САМОСТОЯТЕЛЬНО редактировать посадочную страницу: менять картинки, текст, номера телефонов, заголовки блоков, адрес электронной почты и т.д.

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

Разработчик может пропасть (уехать в отпуск, не брать трубку, забросить свою работу и т.д.).
За каждые новые правки нужно платить. Вряд ли разработчик будет таким альтруистом, что согласится ковыряться в вашем сайте бесплатно.
Если изменения придётся вносить часто, то есть риск надоесть своими просьбами — разработчик вас просто пошлёт.

Landing Page с установленной CMS лишён этих недостатков. Любые изменения делаются быстро и легко. Новичку, который впервые видит интерфейс административной панели CMS, на первых порах будет непросто. Но через несколько дней и он сможет редактировать всё сам — это не сложнее работы в Word.

Плюсы WordPress

Среди бесплатных систем управления контентом выделяются: WordPress, Joomla, Drupal. Накопившийся опыт работы, а также отзывы пользователей говорят о том, что Landing Page на WordPress является лучшим решением. Отметим основные плюсы этой CMS.

Простой интерфейс. Это, пожалуй, основное преимущество для людей, впервые сделавших себе сайт. Разобраться в Вордпрессе — дело нескольких часов. Не пройдёт и пары дней, как человек, далёкий от компьютера, сможет с лёгкостью вносить правки на свой лендинг, удивляясь своим новым возможностям.
Существование огромного количества специальных плагинов — дополнений, с помощью которых можно значительно расширить функционал сайта. Например, плагин Yoast SEO позволяет за несколько кликов провести базовую SEO-оптимизацию, что благоприятным образом скажется на отображении сайта в результатах поисковой выдачи. Нужно отметить, что СЕО-продвижение лендингов имеет свои особенности.
Существование большого количества готовых шаблонов для Landing Page. Если у вас нет средств на уникальный дизайн, то вы сможете существенно сэкономить, купив подходящий платный шаблон. Такие лендинги делаются гораздо быстрее, но у них есть свои минусы.

Итак, преимущество Landing Page на CMS в том, что под вашим контролем будет весь размещённый на сайте контент, включая фотографии. Для его изменения вам не понадобится посторонняя помощь, а значит, вы сможете легко и просто управлять целевой страницей.

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

CMS не всегда нужна

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

Поэтому в тех случаях, когда использование WordPress будет лишним для Landing Page, желательно отказаться от системы управления. Если на странице не планируется никаких обновлений, если контент размещается раз и навсегда, то проще создать лендинг на HTML. В каждом конкретном случае нужно смотреть, есть ли целесообразность установки CMS. Не переплачивайте лишние деньги!

В стартовую стоимость наших услуг по созданию Landing Page не включена установка WordPress. Если выяснится, что система управления вам необходима, то итоговая стоимость будет не намного выше. Хотите узнать подробнее? Пишите! Звоните!

Публикация целевых страниц с помощью WordPress | Справочный центр

Если ваша веб-страница работает на WordPress и вы хотите отображать на ней свои целевые страницы, вы можете сделать это благодаря одному из специальных плагинов: Landingi Landing Pages , который доступен в поисковой системе плагинов в Панель управления WordPress.

ПОМНИТЕ: Убедитесь, что ваша целевая страница опубликована в редакторе Landingi до ее импорта в WordPress.

Получите токен API от Landingi

1. Войдите на платформу Landingi. В верхнем меню нажмите My Account и выберите API Tokens в выпадающем меню.

2. В новом окне нажмите кнопку Добавить токен .

3. В окне Create new API Token введите имя вашего токена (например, «WordPress») и нажмите Generate new token .

4. Сгенерированный токен будет автоматически сохранен на вкладке API Token . Скопировать ит.

5. Загрузите и установите один из наших плагинов WordPress.

Установите плагин в WordPress

1. Войдите в свою учетную запись WordPress.

2. На боковой панели слева нажмите Плагины (1) . Выберите Добавить новый (2) , найдите Landingi Landing Pages (3), и добавьте его в свой аккаунт.

3. Перейдите на вкладку Installed Plugins , найдите там Landingi Landing Pages и нажмите Activate .

4. В боковой панели появится вкладка Landingi (1) . Перейдите к нему и нажмите Настройки (2) . В окне Setup connection вставьте созданный ранее API-токен (3) и нажмите Сохранить API-токен .

5. Перейти на вкладку Доступные лендинги (1) . С правой стороны вы увидите список ваших целевых страниц, созданных на нашей платформе. Выберите целевую страницу, которую вы хотите импортировать, и нажмите Import (2) . Отныне каждый из них будет автоматически активен (опубликован).

6. В Импортных Посадках (1) , вы увидите ранее импортированные целевые страницы. Если вы хотите изменить настройки какой-либо страницы, выберите нужное действие, которое появится после наведения курсора на выбранную целевую страницу (2) .

7. Чтобы изменить URL-адрес, наведите указатель мыши на выбранную целевую страницу и нажмите Изменить .

Прямая ссылка появится в новом окне. Нажмите Редактировать (1) , измените адрес и сохраните, нажав ОК (2) .

8. По умолчанию наш плагин работает с опцией Post name .

Помните:

Установка сертификата SSL на вашей стороне.
Ваши лендинги должны быть опубликованы внутри платформы.
Обновление происходит до нескольких минут после внесения изменений.
Ваш WordPress должен быть обновлен до последней версии и версии языка PHP: 7.4 или выше.
Все, что вам нужно сделать, это импортировать вашу целевую страницу в плагин только один раз . Все изменения, сделанные и опубликованные в редакторе, будут автоматически обновлены на вашей целевой странице.
Если вы хотите использовать различные настройки постоянных ссылок или уровни пути (например, landpage.sales.com/coupon/blackfriday/… ), установите еще один плагин: Permalink Manager Lite. Этот плагин позволяет установить любой URL-адрес с любыми путями для любых опубликованных страниц (включая импортированные целевые страницы).

Чтобы узнать, как импортировать всплывающие окна, созданные в Landingi, прочитайте, как добавить их на свой сайт WordPress.

Устранение неполадок

Если вы пытаетесь опубликовать свою целевую страницу через WordPress и видите критическую ошибку И вы используете плагин Elementor , выполните следующие действия:

1. Перейдите к Elementor вкладка и нажмите Настройки .

2. В Experiments выберите inactive в разделе Целевые страницы .

Сохраните изменения. Проблема должна быть решена.

Дизайны целевых страниц WordPress, темы, шаблоны и загружаемые графические элементы на Dribbble

Посмотреть исследование целевой страницы Pondasi
Исследование целевой страницы Pondasi
View Sala Web Site Design: целевая страница saas, дизайн веб-сайта saas
Sala Дизайн веб-сайта: целевая страница Saas, дизайн веб-сайта Saas
Посмотреть исследование целевой страницы Kontrako 💥
Исследование целевой страницы Kontrako 💥
Посмотреть целевую страницу Shopify
Целевая страница Shopify
Просмотр пользовательского интерфейса целевой страницы shopify
пользовательский интерфейс целевой страницы shopify
Посмотреть онлайн-обучение Skillex
Skillex Online Education
Посмотреть исследование целевой страницы Superbank 🏦
Исследование целевой страницы Superbank 🏦
Посмотреть целевую страницу веб-сайта shopify
Целевая страница сайта Shopify
Посмотреть целевую страницу Shopify
Целевая страница Shopify
Посмотреть ирландский. — Целевая страница конструктора сайтов без кода
Ирландский. — Целевая страница конструктора сайтов без кода
Посмотреть интерфейс магазина shopify

Shopify Store UI
Посмотреть анимацию целевой страницы Tradlr
Анимация целевой страницы Tradlr
Посмотреть дизайн целевой страницы Shopify

Дизайн целевой страницы Shopify
Посмотреть целевую страницу веб-сайта Shopify
Целевая страница веб-сайта Shopify
Посмотреть целевую страницу одежды
Исследование целевой страницы одежды
Посмотреть веб-сайт веб-дизайна и разработки, веб-сайт агентства workhu
веб-сайт веб-дизайна и разработки, веб-сайт агентства workhu
Посмотреть дизайн сайта Shopify
Дизайн веб-сайта Shopify
Посмотреть целевую страницу веб-сайта Shopify
Целевая страница веб-сайта Shopify
Посмотреть целевую страницу WeTrade
Исследование целевой страницы WeTrade
Посмотреть дизайн сайта блога.