Создание лендингов
В Albireo CMS лендингов может быть любое количество с любыми адресами. Лендинги могут иметь собственное оформление, никак не пересекаясь с основным сайтом.
Что такое лендинг?
Лендинг или более правильно landing page — это «посадочная» (целевая) страница. Есть много сайтов, состоящих только из одной страницы-лендинга.
Обычно лендинг используется как рекламная страница, которая предполагает какое-то ответное действие посетителя, например предложение оставить свой контакт для получения скидки.
Но сейчас лендинги — это более широкое понятие, потому что одностраничные сайты могут использоваться и просто как информационная страница. Например в профиле ТикТока можно разместить только одну ссылку, и часто указывают именно одностраничный сайт, на котором уже приведены другие ссылки.
Структура лендинга
Все лендинги по сути представляют собой просто набор последовательных блоков. Каждый блок может иметь собственное оформление, тексты, фото, ссылки, кнопки и т.д. Не имеет большого значения для чего именно используется блок, с технической точки зрения — это просто блок.
Для затравки посмотрите страницу Блоки Berry CSS. Это и есть примеры готовых блоков. Если какой-то из этих блоков вы решили использовать для блока лендинга, то нужно его просто скопировать и поправить тексты и ссылки. Именно по такому принципу и строится любой лендинг.
Начальная страница лендинга
Поскольку Albireo CMS по умолчанию предполагает всё-таки вывод записей как обычный блог, то в конфигурации как правило указываются поля, которые будут иметь все страницы. Например шапку, подвал, блоки навигации и т.п. Для лендинга это ничего не нужно, поэтому для начала на странице лендинга нужно это всё отключить. Поэтому поля лендинга в типовом варианте будут такими:
title: Пример лендинга description: Описание лендинга # изображение для OGP image-large: [UPLOADS_URL]landing.webp # модульная сетка layout: landing.php # отключим стили и скрипты css.fstyle: - css.theme: - js.lazy: - # прочие отключения sitemap: - comments: - stat: - other-pages: - headers: - footers: - headers: - footers: - compress: + parser: textsimple # возможно эти библиотеки тоже не нужны use.scrolltotop: - use.alpine: - use.bootstrap-icons: - # свой счетчик head.counter: - # своя фавиконка head.favicon: -
Либо можно использовать уже предопределённый файл с этим полями в config/page-data/langing.php:
title: Пример лендинга description: Описание лендинга file-page-data: landing.php
С точки зрения Albireo CMS такой лендинг — самая обычная страница, которую мы настраиваем под «нулевой» вывод. Таким образом, если на странице всё-таки нужны будут какие-то поля, то нужно просто их отметить.
Модульная сетка langing.php создаёт такую разметку:
<!DOCTYPE HTML> <html> Секция HEAD <body> здесь будет код страницы </body> </html>
Прототип лендинга
Если вы хотите сделать лендинг, то лучше начать с его прототипа. Прототип — это рабочий вариант страницы, только без красот и особого дизайна. В прототипе важно разместить все тексты, потому что именно от них нужно будет двигаться в плане оформления.
Для удобства вы можете использовать простую разметку, которая будет из простых div-блоков, которые вы постепенно заполните текстами.
Кликните, чтобы посмотреть примеры блоков
Для того, чтобы эта разметка сработала добавьте к странице Berry CSS и TextSimple:
css.theme: berry.css parser: textsimple
Код блоков:
div(mar20 pad20 bg-primary100)
__(h2 mar0) Шапка сайта
**
* Логотип
* Дескриптор
* Меню
* Контакты
**
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Первый экран
**
* Оффер
* Подзаголовок
* Преимущества
* Призыв к действию
* Форма захвата
* Фоновое изображение
**
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Товар/Услуга
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Портфолио
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) О компании
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Текстовое описание
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Фотографии
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Сертификаты, грамоты, лицензии
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Схема сотрудничества
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Клиенты/Партнеры
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Отзывы
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Вопрос-Ответ
/div
div(mar20 pad20 bg-primary100)
__(h2 mar0) Контакты
/div
После того, как прототип будет готов, можно уже думать над дизайном.
Лендинг на основе готового дизайна
Вы можете взять уже готовый лендинг. Обычно это набор файлов, включая стили, html-разметку, изображения, js-скрипты и т.д. Для того, чтобы это всё заработало на Albireo CMS нужно выполнить несколько задач.
- Первая — это разобраться какие файлы нужны для работы лендинга.
- Вторая — это скопировать html-код в тело страницы.
- Третья задача — изменить адреса на свои.
Рассмотрим пример лендинга Chain App Dev Template. Скачаем его файлы.
Первый шаг
Архив лендинга состоит из каталогов assets, vendor и файла index.html. Файл index.html содержит весь html-код страницы. Остальные каталоги содержат используемые и подключаемые файлы.
Создадим отдельный каталог для этих файлов среди других страниц. Пусть это будет каталог pages/chain-app-dev/. В него мы скопируем каталог assets. Каталог vendor содержит уже присутствующие в Albireo CMS файлы Bootstrap CSS 5.x и jQuery 3.x, поэтому их копировать не нужно
website/
pages/
chain-app-dev/
assets/
css/
fonts/
images/
js/
mylanding.php — это файл с html-кодом лендинга
Теперь создайте файл mylanding.php — страницу лендинга с начальными полями:
title: Пример лендинга description: Описание лендинга # адрес по коорому будет доступен лендинг slug: landing # предопределённые поля для лендингов file-page-data: landing.php
И в тело страницы скопируйте содержимое index.html которое между <body> и </body>.
Второй шаг
Как правило css-файлы подключаются в секции HEAD, а js-файлы могут подключаться как в HEAD, так и в конце BODY (lazy-загрузка).
css.head.url[]: https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap css.head.url[]: https://use.fontawesome.com/releases/v5.8.1/css/all.css css.head.url[]: [current-path]assets/css/owl.css css.head.url[]: [current-path]assets/css/animated.css css.head.url[]: [current-path]assets/css/templatemo-chain-app-dev.css js.lazy.url[]: [current-path]assets/js/owl-carousel.js js.lazy.url[]: [current-path]assets/js/animation.js js.lazy.url[]: [current-path]assets/js/imagesloaded.js js.lazy.url[]: [current-path]assets/js/popup.js js.lazy.url[]: [current-path]assets/js/custom.js use.bootstrap5: + use.jquery3: +
Поскольку лендинг использует Bootstrap CSS 5 и jQuery 3, которые уже есть в Albireo CMS, то мы просто подключаем их с помощью полей «use.».
Обратите внимание, что мы используем [current-path], который система заменит на полный url-адрес к текущему каталогу файла. Именно поэтому нам достаточно указывать относительный путь к подключаемым css/js-файлам.
Шаг третий
Теперь проверим тэги img, поскольку в них также нужно поправить пути к изображениям. Для этого нужно указать полные пути, например:
<img src="assets/images/logo.png" alt="Chain App Dev">
заменить на
<img src="<?= getPageData('current-path') ?>assets/images/logo.png" alt="Chain App Dev">
Проверяем
Посмотрите готовый пример. Дальнейшая работа — это наполнение лендинга готовыми текстами, которые вы сделали на этапе прототипирования.
Использование empty-layout
В некоторых случаях, если код лендинга слишком сложный и запутанный, можно использовать его html-код целиком. Для этого следует использовать layout-файл empty.php. Эта модульная сетка выводит код страницы как есть, поэтому требует полный html-код, включая всю секцию HEAD, а также открывающие тэги HTML и BODY.
layout: empty.php # эти поля используются на уровне ядра parser: - compress: - sitemap: - stat: -
Единственное, что нужно будет сделать, так это указать правильные пути к изображениям и подключаемым файлам, как это указано выше.