Как опубликовать лендинг-страницу с помощью Webasyst

Под лендинг-страницей в этой статье понимается веб-страница, обладающая собственным дизайном, отличным от дизайна остальных страниц сайта и внешне никак с ними не связанная, либо одностраничный сайт с нестандартным размещением содержимого. Как правило, в лендинг-страницах используется много разнообразной HTML-верстки, что делает их редактирование обычным визуальным редактором (WYSIWYG) неудобным, а значит, для их создания обычно требуется ручное редактирование исходного кода.

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

Как самостоятельно создать лендинг-страницу без покупки темы дизайна

Предполагается, что вы знаете, как сверстать веб-страницу с использованием HTML, CSS и JavaScript. Для публикации лендинг-страницы с помощью Вебасиста необходимо оформить такую страницу в виде темы дизайна. Документация по созданию тем дизайна для Webasyst доступна в разделе для разработчиков, однако для публикации одной страницы необязательно подробно изучать тонкости построения тем дизайна — достаточно в качестве заготовки использовать стандартную тему «Дефолт», как описано в этой статье.

  1. В разделе «Структура» приложения «Сайт» добавьте новое правило для приложения «Сайт» и укажите в его свойствах URL будущей лендинг-страницы.

  2. В разделе «Дизайн → Оформление» создайте клон темы «Дефолт».

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

  4. В своей лендинг-теме в разделе «Дизайн → Шаблоны» удалите все содержимое файла index.html и замените его своим HTML-кодом.
  5. Определите, какая часть страницы должна быть заменена на сообщение «Страница не найдена», если посетитель добавит неправильный фрагмент к URL вашей лендинг-страницы. Скопируйте эту часть HTML-кода страницы и замените ее на строку
    {include file="`$wa_active_theme_path`/main.html" inline}    
  6. В разделе «Страницы» создайте для лендинг-поселения единственную страницу с пустым адресом (URL), переключитесь в режим редактирования HTML-кода и вставьте в окно редактора основное содержимое страницы, скопированное в предыдущем шаге.
  7. Из файла main.html в разделе «Дизайн → Шаблоны» можно удалить все содержимое, кроме фрагмента {$content} — вместо этого фрагмента на сайте будет автоматически вставлено содержимое страницы, которую вы создали в разделе «Страницы», либо сообщение «Страница не найдена».
  8. Отредактируйте содержимое шаблона error.html так, чтобы сообщение об ошибке «Страница не найдена» отображалось в соответствии с общей структурой лендинг-страницы.
  9. Содержимое остальных файлов темы дизайна изменять необязательно, т. к. они не будут использоваться на сайте, если вы их явно не подключите.
  10. Если нужно, создайте в лендинг-теме дополнительные файлы с CSS- и JavaScript-кодом и подключите их в коде файла index.html. Графические и другие нетекстовые файлы (например, файлы шрифтов) загрузите в разделе «Файл-менеджер».
  11. В разделе «Структура» в свойствах поселения лендинг-страницы выберите созданную вами тему дизайна и сохраните настройки.

Готово! Откройте URL лендинг-страницы в браузере и проверьте правильность отображения всех элементов, прежде чем приступать к ее продвижению. Добавьте произвольный набор символов после URL лендинг-страницы, чтобы проверить, как отображается сообщение о неверно введенном адресе.

6 комментариев

  • +1
    Sonar Sonar 2 августа 2016 14:53 #

    А как добавить форму захвата лидов на лендинг по такой схеме? Чтобы посетитель, заполнивший, например, форму из 3х полей: Имя, телефон и email и начавший Отправить:

    1. Получал себе письмо на почту по шаблону

    2. Админ получал письмо на почту по своему шаблону

    3. Лид заносился в Контакты или в Покупатели

    4. В идеале создавался Заказ в приложении Магазин

    5. Заказу присваивался статус Новый

    Хотя бы как пп 1-3 реализовать (не подключая приложение Магазин) , подскажите пожалуйста.

  • +1
    Сергей Третьяк Сергей Третьяк 4 апреля 2019 14:31 #

    Можно ли создать лендинг на отдельном домене?

  • +1
    art-vmx art-vmx 10 мая 2019 23:38 #

    Скачал одностраничный лендинг и сделал все по вышеописанной инструкции. Почему-то возникает Ошибка #0.

    По идее я скопировал все css и js файлы в шаблон сайта. Также скопировал index.html

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

    Чтобы добавить комментарий, зарегистрируйтесь или войдите