Группы: вид, размер и формат
Группа — это один блок карточек на странице. У группы три общих настройки: вид, размер и формат. Они применяются ко всем её карточкам. Выбор делается нажатием на картинку-подсказку; выбранный вариант выделен жёлтой рамкой.
Вид карточек
Вид определяет, где стоит текст и как карточка реагирует на наведение мыши. Номера идут слева направо.
| Вид | Как выглядит | При наведении |
|---|---|---|
| 1 | Текст в левом нижнем углу поверх картинки | Картинка затемняется |
| 2 | Картинка без текста | Картинка затемняется, в центре появляется текст |
| 3 | Текст по центру на полупрозрачной тёмной полосе | Картинка плавно увеличивается |
| 4 | Картинка приглушена, текст по центру внизу | Картинка становится яркой, под текстом появляется тёмная подложка |
Текст на карточках белый. Лучше всего он читается на картинках средней и тёмной яркости; на очень светлых фонах выбирайте вид 3 или 4, где под текстом есть затемнение.
Размер карточек
Размер — это высота карточек. Ширину задаёт формат.
| Вариант | Высота | Подходит для |
|---|---|---|
| Первый | 150 px | Узкая лента с коротким заголовком |
| Второй | 200 px | Заголовок и кнопка |
| Третий | 250 px | Заголовок, описание, кнопка, таймер |
| Четвёртый | 400 px | Большой баннер |
Формат карточек
Формат — это раскладка: сколько карточек в ряду и какой они ширины. От него зависит, сколько вкладок «Карточка» доступно ниже: для формата из трёх карточек видны вкладки «Карточка 1», «Карточка 2» и «Карточка 3».
| Формат | Карточек | Ширина |
|---|---|---|
| 1 | 1 | На всю ширину |
| 2 | 2 | Поровну, по 50% |
| 3 | 3 | Поровну, по трети |
| 4 | 4 | Поровну, по 25% |
| 5 | 5 | Поровну, по 20% |
| 6 | 2 | Первая шире (60%), вторая уже (40%) |
| 7 | 2 | Первая уже (40%), вторая шире (60%) |
Когда вы меняете формат на меньшее число карточек, данные лишних карточек не стираются: они просто не показываются. Если вернуть формат, вкладки снова появятся с прежним содержимым.
Совет. В форматах из четырёх и пяти карточек каждая карточка узкая (около 180 px при ширине блока 900 px). Пишите короткие заголовки в одно слово и откажитесь от описания.
Адаптивность
Карточки перестраиваются сами. Ширина считается по окну браузера:
- до 1200 px: формат 4 — по две карточки в ряду; формат 5 — по две, пятая на всю ширину;
- до 800 px: форматы 6 и 7 — две карточки поровну;
- до 780 px: формат 3 — карточки друг под другом;
- до 600 px: форматы 6 и 7 — друг под другом;
- до 500 px: форматы 2, 4 и 5 — друг под другом.
Несколько групп
Внизу страницы настроек находится ссылка «Добавить группу». Новая группа появляется под предыдущей. У каждой группы:
- свой код установки с её номером (
{shopStart_promocardsPlugin::setPromocardsGroup(2)}для второй группы); - свои вид, размер и формат;
- свои пять вкладок карточек.
Новая группа получает значения по умолчанию: вид 1, размер 150 px, формат из пяти карточек.
Ссылка «Удалить группу» убирает последнюю группу; она появляется, когда групп больше одной. Первую группу удалить нельзя. Если код удалённой группы остался в шаблоне, уберите его оттуда.
Группы вставляются в шаблон независимо друг от друга. Так на главной можно вывести баннер из трёх карточек, а на странице категории — одну широкую карточку с акцией.