Создание редактируемого лендинга через механизм Ленды
Введение
Возможности подсистемы:
- разделение ленда на секции,
- редактирование параметров ленда и его секций под админом и редактором,
- возможность менять структуру ленда (изменение порядка секций, скрывать секции),
- изменение блоков в head и перед закрывающим тегом /body
- возможность подключать как статичные HTML блоки, так и динамические (с хранимой процедурой).
Ноябрь 2022. Создали типовые блоки для лендингов - примеры блоков https://demo.web-automation.ru/allsections
Образ действий при работе с лендингом
0. Кладем файлы лендинга в папку /uploads/lands/{landCode} (через FTP или RDP) - в ней стили, скрипты, картинки от исходного лендинга.
1. создаем лендинг (указываем код страницы landCode) через форму newLand
2. настраиваем параметры лендинга и создаем его секции
3. Указываем у лендинга подключения скриптов и стилей (примечание - вы можете использовать {baseurl} для подстановки пути к папке ресурсов лендинга).
Из head убираем теги title, meta desc, meta keywords и ссылки на favicon (эти теги добавятся автоматически на основе данных в свойствах лендинга).
4. Для каждой секции прописываем HTML блок (admin или editor) либо, SP процедуру генерации блока (SP может редактировать только админ)
Все управление по ленду находится прямо на странице ленда. Внизу кнопки редактирования настроек ленда и кода в Head, body bottom.
При наведении на каждую секцию - справа внизу появляется Кнопка редактирования блока.
Детали реализации системы лендингов
Лендинг - это страница-копия со страницы example-land с пустым шаблоном.
Вся генерация ленда происходит в процедуре [dbo].lnd_getLanding, которая возвращает все настройки, а также собирает HTML блоки от секций.
ВАЖНО! Для Core версии платформы Falcon Space необходимо передавать параметр @isCore = 1
В ленде подключаются системные скрипты и стили платформы для обеспечения работы форм управления (а также некоторые возможности могут потребоваться для нужд лендинга, например для формы обратной связи или регистрации).
По умолчанию каждая секция оборачивается в section class="as-lnd-section". Если это мешает вашей разметке, это можно отключить в параметре @enableAddingSectionCodes =0 процедуры lnd_getLanding. Если обертка не используется, то нельзя будет установить высоту секции, фон секции, а также не будет кнопок контекстного редактирования блока секции.
Данные по лендам и секциям хранятся в таблицах с префиксом lnd_
Части решения:
- страница example-land
- процедура [dbo].lnd_getLanding
- структура от html блоков таблицы для хранения кода секций
- формы editLand, landScriptsAndStyles, newLand
- таблица landSections
- ресурс - landImages
Редактирование секции лендинга
Высота секции - это установка CSS свойства min-height для секции. Если указать просто число (например, 500), то будет добавлено px (т.е. 500px).
Фон секции - указываем либо hex код через #aabbcc либо путь к картинке. Картинку можно загрузить через ресурсы ленда.
Каждая секция ленда имеет соответствующий HTML блок (он создается автоматически при создании секции) с кодом land_{landCode}_{sectionCode}. HTML блок может быть как статичным, так и динамическим.
Если требуется вставить картинку в секцию, то можно загрузить в настройках ленда картинку и использовать путь от картинки в разметке.
Секцию можно перенести или отключить (в итоге она не попадет на ленд, но останется для возможности вернуть обратно).
Пример подобного ленда можно посмотреть по адресу: https://falcon.web-automation.ru/land2
Для неавторизованного пользователя не подгружаются скрипты для управления лендом (эти скрипты указываются в процедуре lnd_getLanding).
Примечания к адаптации лендингов
- jQuery, Bootstrap по умолчанию присоединяется к лендингу, поэтому нужно их исключить из скриптов лендинга
- Иногда в лендинге прописаны глобально отступы у section (а в ленде они используются как служебные секции). Поэтому можно добавить следующий CSS в стили лендинга:
.as-lnd-section{padding: 0 0 !important;} - Коды секций не должны содержать пробелы, спецсимволы. Также эти коды не рекомендуется менять (т.к. будет потерян связанный с секцией HTML блок).
Перенос лендингов на другую базу
Ленд можно переносить как SQL пакет. Используйте форму elementSQL
- Management
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация Layout. Panels with shadows Layout. Adding animation Layout. How to style an icon Layout. Restrictions on changing the design Layout. Changing the styling via CSS HOWTO. Animation of elements. How to work with animation HOWTO. How to animate icons HOWTO. How to create a new site design theme How to make a sticky panel on the top of a page CSS. How to embed your own CSS styles on each portal page CSS. Custom CSS files Guidance on usability of solutions on the Falcon Space platform Styling elements in the Falcon Space page markup Создание редактируемого лендинга через механизм Ленды Как внедрить форму настроек внешнего вида сайта Pages. How to implement a landing page with your own template and styles Layout. How to embed a ready-made layout in a page Layout. How to embed a new font in a project CSS. How to use CSS to manage the styles of specific pages Custom markup of the top panel (TopMakeup) How to change the degree of background darkening in a dialog box Layout. How to swap columns on a smartphone Managing animation for forms and tables How to make the main menu horizontal How to make the main menu white Control the icon in the alert window at the top right of the window How to make a complete customization of the top strip of the site (customHeader) Как сделать дизайн сайта со скругленными элементами (или без скруглений) Вывод на экран денежных сумм (отображение рублей, валюты) - as-money Как увеличить картинку на странице Визуализация воронки на основе данных Создание своей темы для сайта
- Integrations
- Каталоги
- Навигация
- Документы
- Additional component
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
Falcon Space Platform
This is a reduction in the cost of ownership
at the expense of fewer people to support
This is a quick change
while using the program
This is a modern interface
full adaptation for mobile devices
- Falcon Space Video
- Platform features demo will allow you to understand how this or that component looks and works
- Have a question? Write to the chat at the bottom right