S Subster
RUEN

Текст и разметка

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

Они лежат на вкладке «Блоки», в группах «Текст» и «Макет и визуал», и ставятся и в квиз, и на экран с ценами. Как поставить блок на экран — Собрать воронку.

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

Цвета и шрифт всей воронки задаёт не блок, а тема — Оформление: тема и стиль. «Фон блока», внутренние отступы и расстояние до соседних блоков есть в этой же панели у любого блока и ниже не повторяются.

Заголовок

Самая крупная надпись экрана, по центру. Берите под главную мысль экрана. Настраивается: «Размер» ступенями S, M, L или точным числом в поле «Размер шрифта (px)» — если число задано, выбранная ступень не учитывается; выравнивание, цвет, шрифт. Не делает: ответа не собирает — вопрос квиза задают блоки группы «Вопросы».

Подзаголовок

Строка мельче и бледнее заголовка, тоже по центру. Берите под уточнение или обещание в одну фразу. Настраивается: то же, что у заголовка. Не делает: связного текста — для нескольких предложений есть «Абзац».

Заголовок раздела

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

Абзац

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

Разделитель

Горизонтальная линия между кусками экрана. Берите, когда пустоты мало и нужна видимая граница. Настраивается: «Стиль линии» — сплошная или пунктирная, цвет, «Края» — прямые или скруглённые, длина и толщина. Не делает: вплотную к соседям не встаёт — сверху и снизу линия сама оставляет по 16 пикселей.

Длину линии задаёт поле «Ширина (px)», пустое — во всю ширину. Толщину — поле «Высота (px)».

Отступ

Пустое место между блоками. Берите, чтобы развести тесные блоки, отодвинуть кнопку от текста или прижать кнопку к низу экрана. Настраивается: «Режим» — «Фиксированный» или «Заполнить свободное место»; в режиме «Фиксированный» — поле «Высота (px)» от 8 до 2000, по умолчанию 32. Не делает: ни линии, ни подложки. Зазор внутри одного блока правится его внутренними отступами, а не «Отступом».

В режиме «Заполнить свободное место» отступ забирает всю свободную высоту экрана и прижимает блоки под ним к низу. Вместо «Высоты» здесь другое поле — «Минимальная высота (px)», по умолчанию 0: когда места на экране нет, отступ остаётся этой высоты и прокрутки не добавляет.

Смена режима стирает введённую высоту и ставит умолчание нового режима: 32 или 0.

Иконка + текст

Значок и строка текста рядом. Берите для короткого пункта, который надо пометить глазом: выгода, условие, оговорка. Настраивается: «Иконка» — один из 21 готового значка (звезда, галочка, замок и другие), текст, его размер, цвет, выравнивание, шрифт. Не делает: своей картинки вместо значка не ставит — она есть у «Плашек-фичей» на странице Картинки, видео, отзывы.

Маркированный список

Пункты с точками. Берите для равнозначного перечня: что входит в подписку, что человек получит. Настраивается: пункты, выравнивание списка целиком, цвет, шрифт. Не делает: вложенных подпунктов и своего значка вместо точки нет — список с галочками собирают из нескольких «Иконок + текст» подряд.

Нумерованный список

То же, но с цифрами. Берите, когда порядок важен: шаги, этапы. Настраивается: то же, что у маркированного. Не делает: счёт всегда начинается с единицы, продолжить нумерацию прошлого списка нечем.

Аккордеон

Список вопросов, каждый раскрывается нажатием. Берите для частых вопросов внизу экрана с ценами: несколько строк вместо экрана текста. Настраивается: пункты из полей «Вопрос» и «Ответ», цвет и размер вопросов и ответов отдельно. Не делает: двух ответов сразу не показывает — нажатие на второй вопрос закрывает первый, а при показе экрана закрыты все.

2 колонки

Две колонки рядом, у каждой свой заголовок и текст. Берите для короткого сравнения вроде «было и стало». Настраивается: заголовок, текст и выравнивание каждой колонки, цвет и размер заголовков и текста. Не делает: на телефоне в столбик не складывается — колонки остаются рядом, и длинный текст вытягивается узкой полосой. Сетка из значков с подписями — это «Плашки-фичи».

Для длинного текста поставьте друг под другом два «Абзаца» с «Заголовками раздела».

Карточка

Картинка сверху, под ней заголовок и описание, всё в рамке. Берите, когда одну мысль надо отделить от остального экрана. Настраивается: «Вид карточки», «Заголовок карточки», «Описание», картинка по ссылке или из «Вашего медиа-хаба», толщина, цвет и скругление рамки, выравнивание, цвет и размер текста. Не делает: нажатие на карточку никуда не ведёт — для перехода поставьте рядом кнопку.

«Вид карточки» — «Сплошная» или «Стекло». Стеклянная карточка полупрозрачна и размывает то, что под ней: берите её на экран с фотографией на фоне.

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

Дальше