Работа с Визуальным конструктором лендингов (ВКЛ)

Скопировать прямую ссылку на статью

Общая информация

Лендинг — страница на портале Госуслуг, которая содержит информацию о сервисе, государственной услуге, каком-либо событии, жизненной ситуации и об ином инфоповоде. Цель лендинга — популяризация и привлечение внимания к сервисам, государственным услугам или мероприятиям

Визуальный конструктор лендингов (ВКЛ) — инструмент, который поможет самостоятельно собрать лендинг

Примеры лендингов:

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

Дополнительные примеры лендингов:

Получение доступа

Визуальный конструктор лендингов (ВКЛ) доступен по ссылке

Данные для авторизации можно найти в Телеграме [ВКУ] Разработка услуг в теме «Конструктор лендингов»

Согласование лендинга к реализации

Перед началом работы над лендингом нужно согласовать его реализацию в Телеграме [ВКУ] Разработка услуг

В теме «Конструктор лендингов» напишите сообщение

Просьба согласовать лендинг к реализации

Сфера лендинга: жизненная ситуация/сервис/инфоповод/значимое событие
Наименование лендинга
НПА/поручение/указ — при наличии
Наименование ведомства
Ответственный от ведомства
Ответственный разработчик
Переходы на сторонние ресурсы — не ЕПГУ — «Да, с указанием ссылок/Нет»

Также необходимо добавить хештег #согласованиеВКЛ

Если лендинг не был согласован в чате, то вам могут отказать в его публикации

Вспомогательные материалы

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

Редакционная политика — это обязательные требования к текстам на Госуслугах. Редполитика применяется для всех текстов Госуслуг: на портале, в рассылках, в приложениях, в соцсетях, в лендингах

Чек-лист

Заполнение этого файла обязательно при разработке лендинга. Чек-лист поможет оформить тексты в соответствии с правилами Госуслуг

Для лендингов обычно нужны иллюстрации. Если у вас нет подходящей, то направьте заявку без иллюстрации, в ответе с комментариями вам будет направлена ссылка на иллюстрацию или время, когда она будет создана

Работа в конструкторе

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

Обучающие видеоролики

Введение

Настройка блока «Обложка»

Настройка текстового блока

Настройка блока «Аккордеоны»

Настройка блока «Плашки»

Настройка блока «Попап» и якорных ссылок

Начало работы

После авторизации на стартовом экране вы увидите шаблоны и функциональные кнопки:

создать новый — выбирайте, когда нужно с нуля создать все блоки лендинга, самостоятельно определить их очерёдность и наполненность
редактирование существующего лендинга — выбирайте, если у вас уже есть json-файл или вы ранее уже работали с ВКЛ, скачали и сохранили черновик, а теперь хотите продолжить с ним работу
по шаблону с доработкой под свои цели – выбирайте, если уже заранее понимаете, какого типа информация будет в блоках и вам нужно её распределить. Шаблонные решения помогут быстро сформировать страницу

Рисунок1.png

Создание нового лендинга

Рисунок2.jpg

После нажатия на кнопку «Создать новый» откроется модальное окно «Параметры лендинга». Поля в нём нужно заполнить — данные будут использоваться поисковыми системами при выдаче

Структура модального окна «Параметры лендинга»

Параметр	Описание
Мнемоника лендинга	Последняя часть url-адреса лендинга, которая указывается после landing/ и служит его уникальным идентификатором на портале. Например, для лендинга с адресом `https://gosuslugi.ru/landing/esia-help` мнемоника — esia-help Правила заполнения: указывается произвольно разрешённые символы: буквы латинского алфавита, дефис, символ нижнего подчёркивания
Виден пользователям	Выбор, показывать ли лендинг пользователям. Если переключатель неактивен, пользователя будет перенаправлять на ошибку «Страница не существует»
Мeta title — заголовок страницы	SEO-данные. Отображаются в названии вкладки, влияют на поисковую выдачу. В качестве title рекомендуется писать название лендинга Максимальное количество символов — 200
Meta description — описание страницы	SEO-данные с описанием содержимого страницы для поисковой выдачи. В качестве description рекомендуется давать описание к названию лендинга Максимальное количество символов — 500
Заголовок для Яндекс.Метрики	Название для второго уровня Яндекс.Метрики. Используется для отправки метрики. Рекомендуется писать название лендинга — из поля Мeta title Максимальное количество символов — 100

После сохранения параметров появляется экран добавления блоков лендинга

Рисунок3.png

Редактирование существующего лендинга

Рисунок4.png

Чтобы продолжить работать с ранее сохранённым файлом, загрузите его с компьютера. Поддерживается загрузка только одного файла с расширением json

Учитывайте, что:

редактировать можно только лендинги, созданные в этом конструкторе. При несоответствии формата появится ошибка
редактирование итогового json вручную может привести к некорректной работе конструктора

Как открыть черновик

Конструктор автоматически сохраняет черновик. При повторном открытии страницы появляется модальное окно:

Рисунок5.png

«Продолжить» — конструктор откроет имеющийся лендинг
«Начать заново» или нажатие на крестик — черновик удалится, откроется стартовый экран, и вы сможете создать лендинг с чистого листа

Сохраняйте файл json на компьютер перед длительной паузой между работой с лендингом

Как добавить новый блок

Чтобы создать блок контента, нажмите кнопку «Добавить блок». Слева откроется меню:

Рисунок6.jpg

Нажмите на нужный блок, и он отобразится в превью лендинга. Далее вы можете корректировать его содержимое, используя меню настроек

Как заполнить блоки

Текстовый блок – основной блок, в котором ведётся работа в конструкторе. Представляет собой заголовок и возможность выбора оформления текста из 11 компонентов внутри:

текст
список с буллитами
список с тире
нумерованный список
ссылка
кнопки
дисклеймер
пояснение
кнопки сторов
раскрывающийся текст
иллюстрации

Ознакомиться с правилами формирования и оформления элементов текстового блока можно в чек-листе

Другие смысловые блоки для формирования лендинга

Аккордеон — блок, состоящий из заголовка и основного текста. Изначально виден только заголовок, а основной текст раскрывается при нажатии. Аккордеон можно использовать, если нужно скрыть большой объём текста
Аккордеоны всегда используются при формировании раздела «Частые вопросы»

Рисунок1.png

Плашка — Подходит для важных фактов, которые можно описать 5—10 словами. Плашка состоит из иконки, которую вы можете выбрать в библиотеке Госуслуг, заголовка и текста. Заголовок — 1—5 слов, текст — 1—4 строки. Желательно размещать не меньше 4 таких плашек в одном блоке — такое количество элементов смотрится наиболее гармонично в теле лендинга. Если у вас нет информации для 4 плашек, лучше выберите другой элемент

Рисунок2.png

Например, на плашке можно разместить номер службы поддержки или электронный адрес. В заголовке указать номер и электронную почту соответственно, а ниже подписать, чьи это контакты

Плашка с иллюстрацией — блок подходит, если хотите обратить внимание пользователя на какой-то факт. Иллюстрация поможет привлечь внимание и обозначить важность информации. Плашка состоит из иллюстрации, заголовка и текста. Заголовок — 1—5 слов, текст — 1—4 строки

Рисунок3.png

Иллюстрацию нужно заранее запросить или заказать у отдела медиа — это делается по отдельной заявке

Универсальная плашка — в универсальную плашку можно добавить любой текстовый компонент: простой текст, список, пояснение, дисклеймер и другие. Информацию в плашках лучше формировать из идентичных элементов

Рисунок4.png

В меню блока можно настроить, сколько плашек вы хотите в ряду. Лучше размещать не менее 2 плашек в одном блоке — такое количество смотрится наиболее гармонично в теле лендинга

Кликабельная плашка — нужна, если хотите разместить на плашке ссылку для перехода на услугу, сервис, документ на статике. Состоит из иконки, текста и ссылки. Лучше размещать не менее 3 плашек в одном блоке — такое количество смотрится наиболее гармонично в теле лендинга

Рисунок5.png

Текст с иллюстрацией или видео — блок можно использовать, если хотите выделить важную информацию, которую обязательно должен заметить пользователь. В блоке есть заголовок, основной текст и иллюстрация. Иллюстрацию нужно заранее заказать или запросить у отдела медиа

Рисунок6.png

Отображение элементов настраивается: слева, по центру, справа. Можно добавить все стандартные текстовые компоненты

Иллюстрация или видео — их нужно заранее заказывать у отдела медиа. Блок содержит заголовок и визуальный элемент — иллюстрацию или видео

Рисунок7.png

Отображение элементов настраивается: слева, по центру, справа. Можно регулировать размер визуального элемента

Нестандартное оформление блоков

Размещение двух типов блоков под одним заголовком и настройка корректной передачи данных в Яндекс.Метрику

В конструкторе каждый контентный элемент представлен отдельным блоком. Но иногда нужно визуально объединить два разных типа блоков под одним заголовком. Чтобы поисковая система правильно воспринимала текст в таком блоке, настройте передачу информации

Пример: размещение текстового блока и блока «Плашки» под одним заголовком

Рисунок13.png

Как настроить блоки

Добавьте «Текстовый блок» и введите нужный заголовок и описание. Переведите бегунок «Настроить отступы вручную» в активное положение
В соответствующих полях установите отступ снизу = 0, чтобы следующий блок прилегал к тексту

Рисунок14.png

Добавьте блок «Плашки» сразу после текстового блока

Рисунок8.png

В настройках блока переведите бегунок «Настроить отступы вручную» в активное положение и установите отступ сверху = 32

Рисунок15.png

В параметрах Яндекс.Метрики у блока «Плашки» укажите тот же заголовок, что использовался в текстовом блоке

Рисунок16.png

Список с несколькими уровнями вложенности

В некоторых случаях нужно создать список с буллитами, где один или несколько пунктов содержат вложенность второго уровня

Рисунок9.png

Как настроить блоки

Добавьте блок «Текстовый блок»
Внутри текстового блока добавьте компонент «Список с буллитами»

Нажмите «Enter» и на новой строке нажмите иконку списка или введите элемент звёздочка «*» и начинайте вводить буллиты вложенного списка

Рисунок10.png

Рисунок11.png

5. В поле «Пункт списка 2» введите текст второго пункта. Если требуется, создайте вложенные буллиты

Пример заполнения:

Для поступления на бюджетной основе:
* документ о завершении предыдущей ступени обучения — аттестат за 9 или 11 класс. Или его электронный дубликат
* фото анфас 3,5×4,5 см для личного дела — цветное или чёрно-белое

Для поступления на коммерческой основе:
* диплом о среднем специальном образовании, документ о завершении предыдущей ступени обучения — аттестат за 9 или 11 класс. Или его электронный дубликат
* фото анфас 3,5×4,5 см для личного дела — цветное или чёрно-белое

Настройки блоков

Настройки блока делятся на несколько групп, объединённых одной логикой. Настройки отображены несколькими интерактивными элементами:

Настройки полей могут быть несколькими интерактивными элементами:

поле ввода
выбор из списка
переключатель

Рисунок7.png

Рисунок8.png

В текстовом блоке есть разные типы компонентов. В зависимости от типа компонента будут появляться необходимые настройки. Например, в компоненте «Дисклеймер» есть переключатель «Ссылка». При его включении появится дополнительное поле ввода

Настройки групп элементов

Некоторые настройки или группы настроек могут быть массовыми — группой одинаковых полей или групп полей. Для управления ими появляются дополнительные элементы

Наличие кнопок зависит от логики работы с массивами

Чтобы добавить ещё одно поле или группу полей, нажмите на кнопку «Добавить ххх», где ххх – название элемента. Если добавлено максимальное количество элементов, кнопка «Добавить ххх» пропадает

Рисунок9.png

Чтобы поменять местами элементы, зажмите выбранный элемент левой кнопкой мыши и перетащите
Для удаления нажмите на иконку корзины
Чтобы скопировать элемент, нажмите на кнопку копирования — два листа бумаги
При редактировании изменения сохраняются автоматически

Превью лендинга

Когда вы добавили новый блок, он отобразится в правой части экрана. Тексты в блоке нужно заполнить вручную

Рисунок10.png

Управление блоками

При наведении мыши на блоки превью, на них появляются кнопки управления

Рисунок12.png

Кнопка «Настройки» открывает меню блока, где вы можете добавлять элементы, заполнять блок своими текстами
При помощи кнопок «Вниз» и «Вверх» можно перенести блок выше или ниже на странице
Кнопка «Копировать» — обозначена двумя листами бумаги — дублирует блок
Кнопка «Удалить» — иконка корзины — удаляет блок без возможности восстановления

Редакторский и дизайнерский контроль. Вывод лендинга в прод

Перед тем как лендинг будет выведен в прод, его должен проверить редактор и дизайнер на соответствие требованиям гайдов Госуслуг:

редакторский контроль — проверка на соответствие редакционной политике ЕПГУ, а также на отсутствие орфографических и пунктуационных ошибок
дизайн-контроль — проверка на соответствие правилам оформления лендингов

Что нужно делать

Чтобы ваш лендинг мог быстрее выйти в прод, создан чек-лист для самопроверки. Он поможет сократить время на проверку и минимизировать ошибки
Направьте заявку в ФГИС СЦ

К заявке обязательно приложите json с лендингом, заполненный чек-лист самопроверки и Форму заявки для публикации или экспертизы лендинга на ВКЛ
В заявке укажите следующие данные:

Соглашение/Услуга: Поддержка ИС ИЭП
Тип запроса: Регламентная процедура
Система ИЭП: ЕПГУ
Тип регламентной процедуры: Публикация контента на ЕПГУ
Тема: Публикация лендинга. Название вашего лендинга
Описание: описание вашего лендинга в двух предложениях

Также необходимо отправить сообщение в Телеграме [ВКУ] Разработка услуг. В теме «Конструктор лендингов» напишите сообщение:

Название вашего лендинга. Номер заявки в СЦ (SCR)
#публикация

Если после проведения редакторского и дизайнерского контроля есть замечания, то лендинг направят ведомству на доработку. Если замечаний нет, лендинг выведут в прод

При повторном направлении лендинга на дизайнерский контроль, каждый раз создаётся новая заявка в ФГИС СЦ. К заявке прикладывается заполненный чек-лист с замечаниями к предыдущей итерации, добавляются новые статусы исправлений, в Форме заявки указываются блоки, которые были изменены

Обновление лендинга в продуктивной среде

Если нужна доработка или исправление уже опубликованного в проде лендинга, направьте заявку на изменение в ФГИС СЦ. В заявке укажите:

Соглашение/Услуга: Поддержка ИС ИЭП
Тип запроса: Регламентная процедура
Система ИЭП: ЕПГУ
Тип регламентной процедуры: Публикация контента на ЕПГУ
Тема: Изменение лендинга. Название вашего лендинга
Описание: обязательно должно содержать ссылку на лендинг в проде

Название вашего лендинга. Номер заявки в СЦ (SCR)
#изменение

К заявке нужно прикрепить: json актуального лендинга, заполненный чек-лист самопроверки и Форму заявки для публикации или экспертизы лендинга на ВКЛ

Скрытие или удаление лендинга из продуктивной среды

Если нужно скрыть или удалить уже опубликованный в проде лендинг, направьте Форму заявки для удаления контента в ФГИС СЦ. В заявке укажите:

Соглашение/Услуга: Поддержка ИС ИЭП
Тип запроса: Регламентная процедура
Система ИЭП: ЕПГУ
Тип регламентной процедуры: Публикация контента на ЕПГУ
Тема: Скрытие лендинга. Название вашего лендинга
Описание: обязательно должно содержать ссылку на лендинг в проде

Название вашего лендинга. Номер заявки в СЦ (SCR)
#скрытие

, чтобы оставить комментарий к статье

Оглавление