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

Общие положения

В документе изложена информация о:

• настройке страницы
• работе с текстом
• работе с таблицами
• работе с кнопками
• настройках кода
• работе с основными шаблонами

Рабочий сценарий курса представлен в виде макета в Figma пример можно посмотреть нажав на ссылку.

Цвета макета

Цвета, используемые в макете, соответствуют брендбуку Центров госуслуг.

Основная цветовая палитра

Палитра с кодами HEX

Шрифтовая гарнитура Open Sans

При создании курсов используется шрифтовая гарнитура Open Sans.

В верстке используются начертания:

• Regular
• Bold
• Semibold
• Italic

Краткое описание начертаний, используемых в курсах:

Макет, это не только цвета и текст — это прототип будущего курса, который мы будем верстать в Tilda. Пример макета можно посмотреть по ссылке, либо в окне ниже.

Структура макета

Макет состоит из нескольких стандартных составных частей:

1. Хедер, включает в себя:

• меню-бургер
• прогресс-бар
• кнопку
• строку состояния

2. Обложка, включает в себя:

• логотип
• заголовок
• дату создания курса
• кнопку

5. Следующий блок идентичный для всех курсов — это блок «Введение. Цель и краткое содержание курса». Из курса в курс в данном блоке изменяется только текст, в зависимости от его цели и задач.

Навигационные элементы

Для размещения контента в курсе и удобной навигации используются:

• всплывающие окна (pop-up)
• подсказки (hint)
• ссылки (link)
• кнопки (button)

pop-up — элемент, который в наших курсах носит информационный характер.

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

hint — элемент, который в наших курсах носит информационный характер.
Появляется при наведении на выделенное слово (фразу и т. д.) в виде текстового окна.

link — ссылка размеченный текст (либо графическое изображение), при клике на который происходит переадресация слушателя на страницу ресурса: сайта, облачного хранилища документов. Ссылка всегда открывается в новом окне браузера.

button - кнопка

В курсе применяются несколько типов кнопок. Мы не будем рассматривать кнопки бургер-меню, кнопку завершить, основную кнопку.

Непосредственно в теле лонгрида применяются:

• кнопки под скачивание и просмотр документов
• кнопки начала и окончания вопросов самопроверки

Отступы

Рассмотрим систему отступов для десктопной версии:

На изображении мы видим, что отступы между:

• заголовком и основным текстом — 40px
• подзаголовком и основным текстом — 20px
• разделительным блоком и заголовком — 60px
• разделом и кнопкой — 40px

Создание папки

Процесс создания папки курса можно посмотреть в видео:

Шаблоны

Перед тем как приступить к верстке, можете ознакомиться с другими курсами в папке.

Мы рассмотрим два способа создания страницы курса:

1. Дублирование страницы готового курса
2. Создание новой страницы курса

Дублирование страницы готового курса

Для того, чтобы перенести страницу в другую папку возле созданной страницы:

• перейдите в Настройки
• перейдите в Действия
• нажмите Перенести страницу
• выберете Папку для переноса

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

Для просмотра без возможности редактирования можно перейти нажав на кнопку Шаблоны

Неразрывный пробел — специальный символ, который «связывает» два слова. Это позволяет избежать ситуации, когда одно слово остается на одной строке, а второе переносится на следующую.

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

Чтобы поставить неразрывный пробел, добавьте между словами:

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

• Инициалы (Пушкин А. С.)
• Сокращения с точками (и т. д., и т. п.)
• Числа с последующим словом или единицей измерения (20 котят, 42 км, 1984 г.)
• Предлоги, союзы и некоторые частицы (ни страны, ни погоста)
• Тире с предыдущим словом (иду — красивый, двадцатидвухлетний)

Мягкий перенос — спе­ци­аль­ный неви­ди­мый сим­вол для ука­за­ния мест внут­ри сло­ва, по ко­то­рым это сло­во мо­жет быть пе­ре­не­се­но на дру­гую строку.

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

Работа с текстовым редактором

Текстовый редактор — важный инструмент при работе над контентом.

Добавление и редактирование текста

Наполнить блоки курса текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.

Форматирование текста

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

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

Типограф

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

Дополнительно размер, цвет, насыщенность, межстрочное и межбуквенное расстояние можно отрегулировать в меню «Настройки» у блока, с которым вы работаете: Настройки → Типографика

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

Если вам нужно применить к тексту блока другой шрифт, то это также можно сделать в настройках. Можно выбрать один из шрифтов, установленных в основных настройках вашего проекта.

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

Zero Block позволяет создать собственный уникальный элемент для сайта, поэтому содержит расширенные настройки. Такой настройкой для текста является параметр 'Spacing' — он дает возможность изменить кернинг (межбуквенное расстояние) у слова.

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

Горячие клавиши при работе с текстовым редактором

Работа с кодом

Прежде, чем приступить к работе с отдельными блоками кода, рассмотрим их применение по всему курсу.

Общий обзор блоков с кодом можно посмотреть в видео:

Изменению подлежит код, отвечающий за вопросы промежуточного тестирования.

для отображения в хедере навигации (на изучении какого раздела слушатель в данный момент находится) необходимо изменить следующий код:

Для этого в коде прописывается название текущего раздела. Обратите внимание — название должно совпадать и в меню.

Следующий код, который мы меняем/проверяем — это тест-контейнер в промежуточном тестировании.

После того, как вы закончили верстку, в макете Figma остались нереализованными вопросы самоконтроля с вариантами ответов.

Прежде чем приступить к их реализации в Tilda, откройте в браузере две одинаковые страницы со своим курсом.

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

Посмотрите видео:

После переноса макета в Tilda у нас остались нереализованными вопросы для самоконтроля (самопроверки) с вариантами ответов.

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

Далее в наш код необходимо внести текстовую составляющую вопросов самопроверки.

Возвращаемся к нашему макету Figma, копируем вопрос и его варианты ответа, и вставляем в соответствующие поля:

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

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

Для более наглядного понимания, предлагаем ознакомиться с видео:

Работа с кодом кейсов

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

В строке const initHidden прописываем id трех блоков, представленных на изображении:

В строке "question" прописываем описание кейса до тега <br>. Далее после тега <strong> прописываем вопрос.

В строках "answers" прописываем варианты ответа.

В строке "correct" прописываем верный вариант ответа.

Работа с кодом кейсов

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

В строке window.initHidden прописываем id трех блоков, представленных на изображении: