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