Контент и инфоблоки · 2 МИН ЧТЕНИЯ

Как редактировать этот промосайт

Как изменять главную, инфографику, сравнение CMS, экраны интерфейса, меню и инструкции.

Где редактировать промосайт

Откройте «Инфоблоки → Инфоблоки». Главная, описания возможностей и руководство хранятся в трёх отдельных инфоблоках. Их данные выводятся штатными виджетами и шаблонами темы promo.

Главная страница

  1. Откройте элементы инфоблока «Промосайт: главная».
  2. Выберите запись: первый экран «Меньше рутины. Больше контроля.», преимущества, инструменты продаж, один из трёх примеров интерфейса, сравнение, тест каталога, подходящие сценарии, вопросы или заключительное предложение.
  3. Измените заголовок, основной текст, подписи и ссылки кнопок. Поле «Элементы раздела» содержит повторяемые пункты: название, описание, примечание и ссылку.
  4. У записей «Товары», «Акции» и «Контент» поле изображения задаёт реальный экран панели. При замене сохраните понятную подпись и укажите, если на экране демонстрационные данные.
  5. У записи сравнения редактируйте «Преимущества в сравнении»: заголовок преимущества, факт о DaaaCMS, описание соответствующей платформы и выгоду для бизнеса. Официальные ссылки находятся в поле «Элементы раздела». Проверяйте факты и дату сравнения при обновлении.
  6. Сохраните запись и проверьте соответствующий раздел главной.

Порядок секций задаётся темой, а отображаемые записи — привязками виджетов. Старый блок примера сайта сохранён; его виджет на главной выключен. Подробные возможности доступны в своём разделе.

Возможности и инструкции

Инфоблок «Возможности CMS» содержит подробные описания функций. «Документация» разделена на девять категорий. Для новой инструкции выберите категорию, заполните заголовок, краткое описание, время чтения и текст. Подзаголовки второго уровня образуют оглавление.

Обычное изменение заголовка или категории сохраняет существующий публичный URL. Меняйте адрес только осознанно через соответствующее поле.

  • Ссылки шапки находятся в меню promo_main, подвала — в promo_footer.
  • Кнопка «Обсудить проект» в шапке задаётся меню promo_action. Кнопка внизу страницы редактируется в заключительной записи главного инфоблока.
  • Логотип, фавикон и основные цвета задаются стандартными настройками дизайна. Тема использует эти настройки.

Проверка после сохранения

Откройте страницу на компьютере и телефоне, проверьте ссылки и изображения. На главной переключите три примера интерфейса; на телефоне прочитайте все три карточки преимуществ. Убедитесь, что обновлённый текст и источники соответствуют друг другу.

Карта возможностей и диаграммы

Карта инструментов хранится в отдельной записи «Ваш сайт. Все инструменты связаны.». В поле «Элементы раздела» редактируются названия модулей, пояснения и ссылки. В записи этапов продажи поле «Покупатель и команда: этапы» задаёт обе стороны процесса. В записи теста каталога поле «Данные диаграммы каталога» задаёт подписи и количества; длины полос рассчитываются автоматически относительно наибольшего значения.

Основной текст темы имеет размер 18–20 px, подписи и управляющие элементы — не меньше 16 px. При обновлении контента проверьте переносы и читаемость на телефоне; не уменьшайте шрифт ради размещения длинного текста.

Интеграции на главной

Раздел состоит из семи записей инфоблока «Промосайт: главная»: общий заголовок «Подключите сервисы, с которыми работает бизнес.» и шесть групп — CRM, данные, доставка, продажи, карточка товара, развитие сайта. Названия и описания дополнений находятся в поле «Элементы раздела» каждой группы. Поле «Пример из работы» используется для короткой пометки «Тест», когда она есть в каталоге.

Счётчик дополнений рассчитывается из опубликованных пунктов этих записей. Список сверён с разделом «Интеграции»; визуальный редактор не включён. Для обновления перечня отредактируйте записи и проверьте актуальные названия и статусы в каталоге. Сам публичный блок ничего не устанавливает и не включает. Его привязка — «Интеграции и дополнения DaaaCMS» в позиции promo-integrations; общая запись должна оставаться первой по порядку.

Как редактировать преимущества в сравнении

В инфоблоке «Промосайт» откройте запись со slug compare (ID 17). Заголовок и вводный текст задают общий посыл блока, краткое описание — вывод под карточками, поля кнопки — переход к панели.

В поле «Преимущества в сравнении» каждый пункт задаёт отдельную карточку: заголовок преимущества, конкретный факт о DaaaCMS и выгоду для бизнеса. Заполните описание соответствующей платформы — WordPress, 1С-Битрикс или Tilda. Пустые описания других платформ не выводятся. Пункты можно переставлять штатными кнопками повторителя.

Ссылки на официальные источники находятся в «Элементах раздела». При изменении фактов проверьте их и дату сравнения. Сравнивайте конкретные задачи; ценовые и количественные обещания должны иметь подтверждение. На телефоне видны все карточки, переключать платформу не нужно.

Мобильная версия на главной

Блок «Управляйте сайтом с телефона.» хранится в записи mobile инфоблока «Промосайт: главная». Заголовок и основной текст объясняют преимущество, «Элементы раздела» содержат два пункта — для команды и для посетителей. Краткое описание задаёт заключительную строку, поля кнопки — ссылку на инструкцию.

Изображение — настоящий экран мобильной админпанели с материалом этого сайта. Его можно заменить через штатное поле изображения. Используйте экран без персональных данных и секретов; подпись к изображению задаётся дополнительной подписью. Привязка виджета — «Управление с телефона» в позиции promo-mobile, после примеров интерфейса. В записи вопросов добавлен ответ об управлении с телефона.

Слайдер-баннер на главной

Три баннера после первого экрана управляются штатным компонентом Слайдер. Откройте «Медиа → Слайдер» и выберите DaaaCMS — главная: продажи, команда, телефон. Для каждого слайда можно изменить заголовок, описание, ссылку, подпись изображения, цвета и отдельные изображения для компьютера и телефона. Заголовки и кнопки остаются текстом сайта, поэтому их не нужно перерисовывать в картинке.

Текущие изображения — иллюстрации, созданные для промосайта; настоящие экраны панели расположены ниже в разделах интерфейса и мобильной версии. Рекомендуемые размеры загрузки: компьютер — 1672 × 941, телефон — 836 × 471. Вариант «Текст слева, изображение справа» на телефоне располагает текст над иллюстрацией, сохраняя крупный шрифт. «Без текста» оставляет кликабельное изображение; другие штатные варианты меняют сторону или выравнивание текста.

Порядок слайдов и публикация меняются в списке слайдов. Стрелки, точки, автоматическое переключение и интервал задаются в виджете Главная — слайдер возможностей, позиция promo-showcase, шаблон Showcase. Сейчас автоматическое переключение выключено: посетитель листает кнопками, клавишами или свайпом. Если включить его, появится кнопка паузы; при фокусе, наведении, скрытой вкладке или предпочтении уменьшенного движения автоматическая смена приостанавливается.

Скриншоты и схемы в базе знаний

Откройте инфоблок «Документация» и нужную статью. Скриншоты, подписи, пояснения и схемы хранятся в её основном контенте и редактируются штатным редактором. Нажатие на скриншот на сайте открывает увеличение; «Крупнее» показывает исходный размер, «Закрыть» или Escape возвращает к статье.

Используйте настоящие экраны текущей панели, обрезайте лишний контекст при съёмке и не включайте данные покупателей, пароли и токены. Учебные значения подписывайте как пример. Под каждым снимком объясняйте конкретные поля и ожидаемый результат. Схемы остаются текстом HTML: их подписи можно менять без перерисовки изображения.

Чтобы сохранить оформление, копируйте целый существующий блок через исходный HTML редактора. Классы kb-screen, kb-flow и kb-cards задают внешний вид. Нумерованные метки привязаны к конкретному снимку: при замене его композиции удалите метки или скорректируйте их положение в теме. Подробные пути файлов и правила сопровождения находятся в локальном документе doc/PROMO_SITE.md.

Анимации инфографики на главной

Схемы команды, возможностей, этапов покупки, интеграций и тестового каталога используют короткую анимацию при прокрутке. Каждый элемент проигрывается один раз после появления в зоне просмотра; постоянного движения нет. Цифры, подписи и ссылки берутся из тех же записей и виджетов, поэтому изменение контента в панели автоматически отражается в схемах.

При включённой системной настройке уменьшения движения эффекты отключаются. Без JavaScript все схемы сразу видны в окончательном виде. Анимация не меняет значения диаграммы и не запускает автоматическое переключение баннеров: настройки слайдера по-прежнему задаются его виджетом.

Цвета, кнопки и свободный полёт

Палитра согласована с основным сайтом Daaa!: почти белый фон, сиреневые элементы интерфейса и небольшие коралловые акценты. Цвета задаются через Настройки → Дизайн → Цвета сайта: основной — #6167cc, вторичный — #ff4544. Основные кнопки используют более насыщенный оттенок основного цвета и плотную белую надпись. После сохранения CMS сама обновляет оттенки, используемые темой.

Светлый SVG-самолётик свободно летает по видимой области главной, делает широкие развороты и остаётся в кадре при прокрутке. Направление чередуется. Цикл занимает около 32 секунд на компьютере и 24 секунд на телефоне, включая короткий перерыв.

Самолётик не перехватывает нажатия. Над текстом, кнопками, схемой команды и экранами интерфейса он становится почти прозрачным; при открытом мобильном меню или окне просмотра изображения скрывается. Круглая кнопка возле логотипа останавливает и запускает полёт. Пауза сохраняется при перезагрузке этой вкладки, управление доступно с клавиатуры.

На паузе самолётик скрыт, чтобы неподвижная картинка не закрывала текст. При уменьшении движения в системных настройках или без JavaScript декор также отключён. В неактивной вкладке полёт приостанавливается. Анимации самих схем по-прежнему срабатывают однократно при прокрутке.

SVG хранится в themes/promo/images/brand-plane.svg, траектория и длительность — в themes/promo/js/brand-flight.js, размеры и оформление — в themes/promo/css/brand-flight.css. Тексты, кнопки и схема команды редактируются в прежней записи главного инфоблока.

Преимущество инфоблоков на главной

Раздел «Сложные сайты. Простая работа с контентом.» — запись iblocks инфоблока «Промосайт: главная». Он расположен после общих преимуществ, перед картой возможностей.

  • Заголовок, надзаголовок и краткое описание задают вступление.
  • Основной текст содержит пример дерева, карточку проекта и два раскрывающихся примера реальной админпанели. Тексты редактируются в штатном редакторе; при изменении структуры разметки сохраните классы iblocks-*.
  • «Элементы раздела» содержат 11 тематических групп, охватывающих все 17 типов полей. Название — заголовок группы, описание — назначение типов, примечание — дополнительное пояснение. Переносы строк в описании сохраняются.
  • Дополнительная подпись задаёт заголовок раскрывающегося каталога; поля кнопки и дополнительной ссылки ведут к инструкциям.

Штатный виджет «Инфоблоки: структура и поля» использует шаблон PromoIblocks и позицию promo-iblocks. Скриншоты хранятся в upload/iblock/promo/iblock-quick-create.jpg и iblock-structure.jpg. Это заполненные примеры: тестовые инфоблоки и категории при съёмке не сохранялись.

При обновлении перечня сверьте доступные типы в панели, обновите число в подписи, группы на главной и полный справочник полей. Иллюстрация объясняет модель данных; она не имитирует форму редактирования.

Инфографика типов полей

В раскрывающемся каталоге полей на главной у каждой из 11 тематических групп появился наглядный пример. Все 17 типов сохранены: иллюстрации дополняют существующие объяснения.

Откройте запись iblocks в инфоблоке «Промосайт: главная», раскройте нужный пункт поля «Элементы раздела» и измените необязательное поле «Инфографика». Это штатный вложенный HTML-редактор. Текст примера и подпись редактируются здесь; пустое значение скрывает иллюстрацию. При изменении HTML сохраняйте классы field-demo* и пути изображений /themes/promo/images/fields/.

Примеры показывают назначение и содержимое полей: они не являются работающими формами ввода, видеоплеером или настоящими снимками интерфейса. Графика нарисована средствами HTML, CSS и SVG, масштабируется и переносит текст на телефоне. Рисунки дома, интерьера и плана условные.

Необязательное вложенное поле visual добавлено в общую схему points. В других разделах его можно оставить пустым; существующие значения пунктов и число разрешённых строк не изменены. За показ иллюстраций отвечает шаблон PromoIblocks.

Скриншот инструкции