Дайте угадаю: вы либо предприниматель без инвестиций, либо маркетолог, который стремится к развитию, но не знает как подступиться к сайтам из-за страшного слова КОД. Попробую уравновесить ваше ЧСМ информацией о том, как сделать лендинг пейдж на WordPress без всяких ужасов. Поехали!
- Почему лендинг на WordPress?
- Основное отличие лендинга от обычной страницы
- Что можно и что нельзя сделать без кода?
- Скорость загрузки сайта
1. Почему лендинг на WordPress?
Ну, хотя бы потому, что 70% мировых сайтов сделаны на нём из-за открытости и бесплатности WordPress.
Ещё потому, что это одна из CMS, которую любят поисковики — а значит, при правильном обращении, есть шанс на органическое продвижение ваших страниц в топ. Ещё для Вордпресса существует 100500 плагинов – платных и бесплатных – которые позволяют работать без кода (хотя, увы, не без ж*па-часов).
Секундочку, но это все доводы в пользу Вордпресс на этапе создания сайта с нуля, а мы-то хотим лендинг пейдж!
Да, но возможно вы исполнитель, а у вашего заказчика есть всего один сайт на Вордпресс и он хочет на нем лендинг. И нет желания заводить новый домен, поддомен или просто заказчик нечего про это не понимает и отвечает вам: «Зачем мне новый сайт? Сделай мне на моем Вордпрессе».
Опустим полуклинические случаи. Итог: вам остается сделать лендинг пейдж на WordPress. Разберем, для начала, в чем отличие лендинга от других страниц?
2. Основное отличие лендинга от обычной страницы
Нам нужно сверстать Лендинг Пейдж — такой красивый, продающий сайт, который состоял бы из разных блоков, вау-картинок и больших секси-кнопок. На картинке ниже приведен пример типичного расположение блоков и элементов на лендинге:
Давайте посмотрим на блоки лендинга глазами WordPress верстальщика:
- Во-первых, нам понадобится возможность разделять блоки по цвету фона
- Текст лендинга, если сравнить его с текстом статьи, разбит на множество маленьких кусочков, распределённых по разным местам
- Многие картинки являются частью стиля 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:
<link href=»landing/js/sitescripts.js «>
<link src=»landing/css/style.css «>
<a href=»landing/images/icon.png «>..</a>
Методом проб и ошибок вы добьетесь, что для вашей страницы с лендингом все стили и медиа-файлы будут прилинкованы правильно.
Бинго! Вы добавили посадочную страницу на WordPress путем создания шаблона страницы.
Минус метода в том, что редактировать его можно только через код. Иначе нужно достаточно много возни с php функциями. Так зачем же так заморачиваться?
Затем, например, что так можно создать мультилендинг. Например, создавать несколько страниц с разными заголовками или офферами — которые мы подцепим из заголовков H1 каждой конкретной статьи. При этом, нужно в шаблоне страницы page-landing.php отредактировать тег H1 таким образом:
<h1><?php single_post_title(); ?></h1>
Это только одна идея одного изменения. Если вы захотите больше — нужно больше кода PHP. Не совсем для начинающих.
3.3 Плагины для веб-дизайна: Elementor, Page Builder
А теперь расслабимся и поговорим о приятном: создание страниц на Вордпресс без кодинга.
Сегодня множество шаблонов WordPress поставляется с так называемым drag-and-drop редактором, который позволяет перетягивать столбцы, элементы верстки прямо в поле редактора.
Где бы я брал тему Вордпресс сейчас:
- бесплатная тема OceanWP (ищется в Вордпресе)
- лес премиальных тем от Энвато, (камон, темы от $13!)
Среди множества бесплатных редакторов я бы выделил такие два:
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 млн. рублей.