Как опубликовать лендинг-страницу с помощью 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 лендинг-страницы, чтобы проверить, как отображается сообщение о неверно введенном адресе.

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

  • +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

  • +1
    Евгений Петров Евгений Петров 24 апреля 2020 12:16 #

    Прошу помочь понять некоторые нюансы --- не могу понять текст. 

    В своей лендинг-теме в разделе «Дизайн → Шаблоны» удалите все содержимое файла index.html и замените его своим HTML-кодом. Определите, какая часть страницы должна быть заменена на сообщение «Страница не найдена», если посетитель добавит неправильный фрагмент к URL вашей лендинг-страницы. Скопируйте эту часть HTML-кода страницы и замените ее на строку
    include file="`$wa_active_theme_path`/main.html" inline

    В моем понимании, если посетитель добавит неправильный фрагмент к URL моей landing page, то что? 

    В разделе «Страницы» создайте для лендинг-поселения единственную страницу с пустым адресом (URL), переключитесь в режим редактирования HTML-кода и вставьте в окно редактора основное содержимое страницы, скопированное в предыдущем шаге.

    Созданное landing settlement --- если сделать его скрытым, то даже старые страницы на базе дефолт 3.0 становятся скрытыми; в моем понимании, если создается новое правило landing page, то оно должно базироваться на новом дизайне (клон старого дизайна)? 

    • +1
      Михаил Ушенин Михаил Ушенин Webasyst 24 апреля 2020 12:29 #

      В моем понимании, если посетитель добавит неправильный фрагмент к URL моей landing page, то что?

      Поясните смысл своего вопроса, пожалуйста.

      • +1
        Евгений Петров Евгений Петров 24 апреля 2020 12:41 #

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

        Как здесь понять --- определите какая часть страницы должна быть заменена на сообщение "Страница не найдена" ?

      • +1
        Михаил Ушенин Михаил Ушенин Webasyst 24 апреля 2020 12:31 #

        Созданное landing settlement --- если сделать его скрытым, то даже старые страницы на базе дефолт 3.0 становятся скрытыми; в моем понимании, если создается новое правило landing page, то оно должно базироваться на новом дизайне (клон старого дизайна)?

        Поясните, как ваш вопрос связан с цитатой

        В разделе «Страницы» создайте для лендинг-поселения единственную страницу с пустым адресом (URL), переключитесь в режим редактирования HTML-кода и вставьте в окно редактора основное содержимое страницы, скопированное в предыдущем шаге.

        • +1
          Евгений Петров Евгений Петров 24 апреля 2020 12:44 #

          Ну вот здесь, нужно вставить тот html код, который был вырезан по причине --- определите как часть должна быть заменена на "Страница не найдена" ? Не могу понять идею этих манипуляций. Если я хочу создать landing page на базе своего дизайна, то не проще ли было создать клон старого дизайна, создать новую страницу на базе клона, а в самом клоне почистить все, кроме новых стилевых css & js ?

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

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