Универсальный блок «Карточки»: мощный инструмент для структурной подачи информации
Блок идеально подходит для презентации услуг, команды, преимуществ, этапов, отзывов и многого другого. Благодаря широким возможностям настройки, блок легко адаптируется под любые задачи вашего сайта.
1. Что такое карточки
Карточки — это визуальные блоки с информацией, которые удобно считываются пользователями.
Каждая карточка может включать следующие элементы:
Каждая карточка может включать следующие элементы:
- Интро — короткий вводный текст;
- Заголовок — основной акцент карточки;
- Текст — расширенная информация;
- Список с маркерами — структурированное перечисление;
- Теги — можно проставить ссылки;
- Изображение — визуальный акцент;
- Бейджи на изображении — текстовые метки (например, "Новинка", "Хит", "Скоро");
- Фон — можно включить обводку для лучшего визуального разделения;
- Кнопки (одна или две) — призыв к действию.
Каждый из этих элементов можно включать или выключать по отдельности, что дает полную свободу в формировании внешнего вида блока.
2. Настройка блока
Элементы карточки можно располагать в любом удобном порядке (за исключением кнопок — они всегда находятся внизу). Это позволяет адаптировать карточки под разные типы контента: от простых анонсов до подробных описаний.
2.1. Изменение последовательности элементов и выравнивание
Можно переставлять элементы в любом порядке (кроме кнопок, они всегда внизу). Это даёт гибкость: например, для витрины услуг поставить изображение выше заголовка, а для инструкции — наоборот.
Например, перенесем изображение вниз, тогда карточки будут выглядеть так:
А теперь перенесем изображение под заголовок:
Таким образом, один и тот же блок, благодаря гибкой сортировке элементов, без лишних усилий может выглядеть по-разному и решать самые разные задачи.
Выравнивание контента в карточках может быть: слева, посередине, справа. Применяется ко всем элементам (кроме текстового бейджа) автоматически.
Примеры отображения карточек с доступными вариантами выравнивания:
Примеры отображения карточек с доступными вариантами выравнивания:
Экспериментируйте с комбинациями, пробуйте разные варианты сортировки — так вы найдёте оптимальный вариант, который будет не только красиво выглядеть, но и эффективно работать на ваши цели.
2.2. Включение и отключение элементов
Каждый элемент — интро, заголовок, текст, список, изображение, теги, бейджи и фон — можно показывать или скрывать по отдельности. Это позволяет сделать карточки минималистичными или, наоборот, насыщенными.
Примеры отображения карточек с включенным или выключенным элементом:
2.3. Гибкая сетка
Вы можете выбрать, сколько карточек отображается в ряд — от одной до шести. И можно выбрать последовательность: друг за другом или листание влево-вправо.
Это удобно как для десктопной, так и для мобильной версий сайта.
Это удобно как для десктопной, так и для мобильной версий сайта.
Примеры отображения карточек с разной сеткой:
Примеры отображения карточек с разной последовательностью:
На мобильных два варианта отображения карточек, одна или две в ряд. И также отдельно от десктопной версии настраивается последовательность:
3. Как начать
3.1. Перейдите в редактор сайта
Выберите иконку карандаша на синей плашке в правом верхнем углу:
3.2. Добавьте блок из раздела библиотеки "Карточки и колонки"
В библиотеке представлен блок с универсальными карточками несколько раз в разном виде. Мы это сделали для того, чтобы пользователям было легко придумать, как использовать блок.
В разделе универсальные карточки представлены со следующими названиями: Crd02 – Crd08, Crd19.
В разделе универсальные карточки представлены со следующими названиями: Crd02 – Crd08, Crd19.
3.3. Настройте структуру карточек
Включите нужные элементы и задайте порядок.
3.4. Наполните карточки контентом
Загрузите изображения, введите тексты, добавьте кнопки и бейджи при необходимости.
3.5. Задайте сетку
Выберите количество карточек в ряду и сохраните изменения
4. Где использовать
Ниже покажем примеры использования карточек:
4.1. Превосходно подходит для описания услуг
😊
Проектирование и дизайн
Разрабатываем функциональные и эстетичные решения, учитывая особенности пространства, задачи и пожелания клиента.
Реализация проекта
Организуем полный цикл выполнения работ — от закупки материалов до финальной отделки, строго по согласованному плану.
акция
Сопровождение
Остаёмся на связи после завершения проекта: помогаем с доработками, уходом за материалами и решением возникающих вопросов.
4.2. Представьте команду с фото, должностью и кратким описанием
Анна Васильева
Терапевт
Дмитрий Орлов
Невролог
Елена Круглова
Онколог
Сергей Минаев
Офтальмолог
4.3. Оформите отзывы с рейтингом, именем и цитатой
4.4. Используйте карточки для пошагового объяснения процесса
Подбираем преподавателя
Методист проанализирует ваши речевые привычки и особенности, после чего мы подберём преподавателя, который наилучшим образом соответствует вашим потребностям.
Развиваем разговорные навыки
60% времени каждого урока вы будете говорить — именно так вы сможете научиться общению на английском. Домашние задания также будут связаны с развитием разговорных навыков.
Индивидуальные и эффективный подход
Наш подход включает использование мышечной памяти лица при изучении английского языка. В результате обучения вам не придется вспоминать необходимые слова.
Составляем программу обучения
Методист проанализирует ваши речевые привычки и особенности, после чего мы подберём преподавателя, который наилучшим образом соответствует вашим потребностям.
4.5. Структурно и наглядно отобразите преимущества вашего продукта или компании
4.6. Покажите свои проекты с кратким описанием
частная коллекция
Сбор и кураторство коллекции для загородного дома
Подобрали 12 произведений российских и европейских художников для частного клиента. Каждое произведение — акцент, не перекрикивающий интерьер, а раскрывающий его глубину.
для бизнеса
Искусство для офиса tech-компании: от холла до переговорной
Разработали концепцию интеграции современного искусства в корпоративное пространство. Закупили 8 работ молодых авторов, организовали выставочное размещение и разработали принципы сменной экспозиции.