Как настроить блок Карточка (о себе)

Блок «Карточка» объединяет картинку, заголовок и текст. В нём удобно рассказать о себе, представить услугу, товар или сотрудника. Карточка бывает и шапкой страницы: большое фото во весь размер или аватар на фоновой обложке с именем рядом. Всю карточку можно сделать ссылкой.

Как добавить

1. Откройте проект, вкладку «Редактор».
2. В панели «Добавить блок» выберите группу «Информация» → «Карточка». Если на странице уже есть блоки, панель свёрнута — нажмите на её заголовок.
3. Блок появится в конце страницы и откроется на вкладке «Содержимое». В новой карточке заголовок «Заголовок» — замените его своим.

Шапку обычно ставят первым блоком: поднимите карточку наверх стрелкой ↑ в открытом блоке.

Виды карточки

Вид выбирается в поле «Вид карточки» на вкладке «Содержимое». Поля ниже меняются под выбранный вид.

• Картинка сверху, текст внизу — классическая карточка в рамке: картинка, под ней заголовок и описание.
• Текст сверху, картинка снизу — то же, но картинка под текстом.
• Шапка: фото во весь размер — фото на всю ширину страницы, внизу оно плавно переходит в цвет фона, а имя и подзаголовок стоят крупно поверх перехода. Если карточка — первый блок, фото начинается от самого верха экрана.
• Шапка: аватар, фон и подпись рядом — круглый аватар с именем и подзаголовком. Если добавить фоновую обложку, она растянется на всю ширину страницы, а аватар зайдёт на её нижний край. Без обложки получится аватар с подписью сбоку.

Настройки

Содержимое

• Заголовок — имя, название услуги или товара.
• Текст (в шапках — Подзаголовок) — описание или род занятий: «Фотограф», «Мастер маникюра · Екатеринбург». Переносы строк сохраняются, для выделения подойдут <b>жирный</b>, <i>курсив</i> и <u>подчёркнутый</u>.
• Картинка (в шапках — Фото или Аватар) — нажмите «Выбрать изображение» (PNG, JPEG, WebP, GIF, AVIF, BMP или ICO до 8 МБ) или «ИИ», чтобы создать картинку по описанию. Можно вставить и прямую ссылку на изображение. Без картинки карточка покажет только текст.
• Высота фото — только для вида «Шапка: фото во весь размер»: «Высокое (4:5)», «Квадрат (1:1)» или «Пониже (4:3)». Фото обрезается по краям, а не сжимается.
• Фоновая обложка — только для вида с аватаром: широкая картинка за аватаром. Кнопка «ИИ» у этого поля создаёт сразу широкое изображение. Обложка необязательна.
• Заголовок и подзаголовок — тоже для вида с аватаром: «Рядом с аватаром» или «Под аватаром, по центру».
• Ссылка — если заполнить, вся карточка станет ссылкой и откроется в новой вкладке.

В одном блоке — одна карточка. Для нескольких похожих карточек используйте «Дублировать блок» на вкладке «Действия».

Дизайн

Нажмите «Настроить этот блок» и откройте «Содержимое: цвета и шрифты». Настройки разделены на три группы:

• Заголовок — «Цвет», «Стиль» («Обычный», «Жирный», «Курсив», «Зачеркнутый», «Подчеркнутый»), «Размер» от 12 до 32 px и «Шрифт». В шапках имя по умолчанию крупное — 30 px у фото во весь размер и 24 px у аватара; выбранный «Размер» его заменит.
• Текст карточки — те же настройки для описания или подзаголовка.
• Картинка — «Размер» (от «В полном размере» до «Очень маленькая»), «Закругление» («Не закруглять», «Мягкий квадрат», «Круг»), «Заполнение» и «Ссылка на карточку (общая)» — она срабатывает, если поле «Ссылка» на вкладке «Содержимое» пустое.

Для вида с аватаром «Размер» картинки задаёт диаметр аватара: «Большая» — 180 px, «Средняя» — 150 px, «Маленькая» — 100 px; при «В полном размере» аватар — 120 px. «Мягкий квадрат» делает аватар квадратным со скруглёнными углами, остальные варианты — круглым.

Если выбранный цвет текста плохо читается на фоне, страница сама подставит контрастный. Фото во весь размер переходит в цвет фона страницы, а если у блока задан свой сплошной фон — в него. Ниже — общие разделы оформления блока: «Готовые стили», «Фон, скругление и отступы», «Тень», «Рамка» и другие. Кнопка «Сбросить» снимает с блока тень, рамку, градиент, стекло и эффект при наведении.

Действия

«Скрыть блок» убирает карточку со страницы, ничего не удаляя, — вернуть можно кнопкой «Активировать блок». «Дублировать блок» ставит копию в конец страницы, «Удалить навсегда» удаляет блок после подтверждения.

Советы

• Для шапки «фото во весь размер» берите вертикальное фото, где лицо в верхней половине кадра: нижняя часть уходит под имя и плавный переход.
• Для обложки подойдёт спокойная широкая картинка — фактура, интерьер, коллаж работ. Важное не ставьте в нижнюю часть: там будет аватар.
• Классическая карточка «О себе» без шапки: «Размер» картинки — «Средняя (обрезать)», «Закругление» — «Круг», в заголовке — имя, в тексте — чем вы занимаетесь и для кого.
• Чтобы вести из карточки на запись или в каталог, заполните «Ссылку» — отдельная кнопка не понадобится.
• Для нескольких услуг сделайте по карточке на каждую и расставьте их стрелками ↑ ↓ в открытом блоке.
• Только текст без картинки удобнее вести в блоке «Текст».
• Картинок от ИИ в месяц: 3 на бесплатном тарифе, 10 на «Базовом», 20 на «Про», 200 на «Бизнесе».