Под лендинг-страницей в этой статье понимается веб-страница, обладающая собственным дизайном, отличным от дизайна остальных страниц сайта и внешне никак с ними не связанная, либо одностраничный сайт с нестандартным размещением содержимого. Как правило, в лендинг-страницах используется много разнообразной HTML-верстки, что делает неудобным их редактирование обычным визуальным редактором (WYSIWYG), а значит, для их создания обычно требуется ручное редактирование исходного кода.
В большинстве случаев для публикации лендинг-страницы достаточно использования специальной темы дизайна из магазина Webasyst.
Как самостоятельно создать лендинг-страницу без покупки темы дизайна
Предполагается, что вы знаете, как сверстать веб-страницу с использованием HTML, CSS и JavaScript. Для публикации лендинг-страницы с помощью Вебасиста необходимо оформить такую страницу в виде темы дизайна. Документация по созданию тем дизайна для Webasyst доступна в разделе для разработчиков, однако для публикации одной страницы необязательно подробно изучать тонкости построения тем дизайна — достаточно в качестве заготовки использовать стандартную тему «Дефолт», как описано в этой статье.
- В разделе «Структура» приложения «Сайт» добавьте новое правило для приложения «Сайт» и укажите в его свойствах URL будущей лендинг-страницы.
- В разделе «Дизайн → Оформление» создайте клон темы «Дефолт».
- С помощью ссылки «Переименовать тему» измените название и ID созданного клона темы «Дефолт». Так будет удобнее ориентироваться в темах дизайна, если вам понадобиться создать несколько лендинг-страниц с разным оформлением, т. к. для каждой из них будет использоваться собственная тема.
- В своей лендинг-теме в разделе «Дизайн → Шаблоны» удалите все содержимое файла index.html и замените его своим HTML-кодом.
- Определите, какая часть страницы должна быть заменена на сообщение «Страница не найдена», если посетитель добавит неправильный фрагмент к URL вашей лендинг-страницы. Скопируйте эту часть HTML-кода страницы и замените ее на строку
{include file="`$wa_active_theme_path`/main.html" inline} - В разделе «Страницы» создайте для лендинг-поселения единственную страницу с пустым адресом (URL), переключитесь в режим редактирования HTML-кода и вставьте в окно редактора основное содержимое страницы, скопированное в предыдущем шаге.
- Из файла main.html в разделе «Дизайн → Шаблоны» можно удалить все содержимое, кроме фрагмента
{$content}— вместо этого фрагмента на сайте будет автоматически вставлено содержимое страницы, которую вы создали в разделе «Страницы», либо сообщение «Страница не найдена». - Отредактируйте содержимое шаблона error.html так, чтобы сообщение об ошибке «Страница не найдена» отображалось в соответствии с общей структурой лендинг-страницы.
- Содержимое остальных файлов темы дизайна изменять необязательно, т. к. они не будут использоваться на сайте, если вы их явно не подключите.
- Если нужно, создайте в лендинг-теме дополнительные файлы с CSS- и JavaScript-кодом и подключите их в коде файла index.html. Графические и другие нетекстовые файлы (например, файлы шрифтов) загрузите в разделе «Файл-менеджер».
- В разделе «Структура» в свойствах правила для лендинг-страницы выберите созданную вами тему дизайна и сохраните настройки.
Готово! Откройте URL лендинг-страницы в браузере и проверьте правильность отображения всех элементов, прежде чем приступать к ее продвижению. Добавьте произвольный набор символов после URL лендинг-страницы, чтобы проверить, как отображается сообщение о неверно введенном адресе.
14 комментариев
А как добавить форму захвата лидов на лендинг по такой схеме? Чтобы посетитель, заполнивший, например, форму из 3х полей: Имя, телефон и email и начавший Отправить:
1. Получал себе письмо на почту по шаблону
2. Админ получал письмо на почту по своему шаблону
3. Лид заносился в Контакты или в Покупатели
4. В идеале создавался Заказ в приложении Магазин
5. Заказу присваивался статус Новый
Хотя бы как пп 1-3 реализовать (не подключая приложение Магазин) , подскажите пожалуйста.
Для этого потребуется написание плагина, скорее всего. За помощью в реализации такой функции вы можете обратиться к партнёрам Webasyst.
Можно ли создать лендинг на отдельном домене?
Можно.
Скачал одностраничный лендинг и сделал все по вышеописанной инструкции. Почему-то возникает Ошибка #0.
По идее я скопировал все css и js файлы в шаблон сайта. Также скопировал index.html
Посмотрите подробности об ошибке №0.
Прошу помочь понять некоторые нюансы --- не могу понять текст.
В моем понимании, если посетитель добавит неправильный фрагмент к URL моей landing page, то что?
Созданное landing settlement --- если сделать его скрытым, то даже старые страницы на базе дефолт 3.0 становятся скрытыми; в моем понимании, если создается новое правило landing page, то оно должно базироваться на новом дизайне (клон старого дизайна)?
Поясните смысл своего вопроса, пожалуйста.
Как здесь понять --- определите какая часть страницы должна быть заменена на сообщение "Страница не найдена" ?
Для этого нужна квалификация веб-разработчика. Если вам сложно всё это понять и проделать, возможно, стоит использовать готовую тему дизайна из магазина Webasyst.
Думаю, что здесь инструкция не совсем четко изложена.
Поясните, как ваш вопрос связан с цитатой
Ну вот здесь, нужно вставить тот html код, который был вырезан по причине --- определите как часть должна быть заменена на "Страница не найдена" ? Не могу понять идею этих манипуляций. Если я хочу создать landing page на базе своего дизайна, то не проще ли было создать клон старого дизайна, создать новую страницу на базе клона, а в самом клоне почистить все, кроме новых стилевых css & js ?
Сделайте так, как вам проще, если вас устроит такой результат.