«Медиа + текст»: универсальный блок для любого сайта на Базиуме
Это гибкий, многофункциональный блок, который может заменить сразу несколько секций сайта.
Он подойдёт для презентаций товаров и услуг, рассказа о компании, анонсов событий, акционных предложений и множества других задач.
Он подойдёт для презентаций товаров и услуг, рассказа о компании, анонсов событий, акционных предложений и множества других задач.
1. Из чего состоит блок
Блок разделён на две части:
Вы сами определяете:
- Информационная часть — здесь вы размещаете текст, кнопки, теги, списки, формы, таймеры и другие интерактивные элементы.
- Графическая часть — место для изображений, галерей, видео или даже HTML-вставки.
Вы сами определяете:
- какая часть будет слева, а какая — справа;
- какая из частей будет шире или уже;
- будет ли у блока подложка, обводка или фон только под текстом.
2. Вид блока
Раздел «Вид блока» в настройках отвечает за то, как будут расположены и отображены графическая и информационная части.
Что можно настроить:
Структура
- Графическая часть слева, информационная справа.
- Графическая справа, информационная слева.
- Пропорции частей (одна шире или уже другой).
Положение информационной части по вертикали
- Фиксированное сверху при прокрутке — удобно, когда графическая часть длинная, например, галерея или вертикальное видео: при скролле текст «следует» за пользователем.
- Просто сверху — стандартное размещение.
- По центру — красиво смотрится при коротких текстах.
Отображение на мобильных устройствах
- Сначала графическая часть, потом текст.
- Сначала текст, потом графика.
- Возможность не выводить графическую часть на мобильных (удобно, если картинка не критична или нужно ускорить загрузку).
Максимальная ширина частей
- Отдельная настройка для графической и информационной части, чтобы добиться нужного визуального баланса.
💡 Если у вас важный визуал (фото, видео, коллаж), ставьте графическую часть первой.
💡 Если же важен текст (оффер, форма, кнопки), лучше начинать с информационной части.
💡 Если же важен текст (оффер, форма, кнопки), лучше начинать с информационной части.
Примеры отображения блока с разной структурой:
Примеры отображения блока с разным положением по вертикали:
3. Подложка
Подложка — это фоновая область. Она помогает выделить блок на странице, добавить визуальной глубины или улучшить читаемость текста.
Ниже разберем варианты включения.
Ниже разберем варианты включения.
3.1. Общая подложка для графической и информационной части.
Можно включить опцию «Изображение без отступов», чтобы картинка «прилегала» к краям подложки без пустого пространства.
3.2. Подложка только под информационной частью.
Можно «Растянуть подложку по высоте», чтобы она была такой же высокой, как и графическая часть, даже если текстовой контент короче.
3.3. Общие настройки подложки
- Отступы внутри подложки — регулируют расстояние от краёв подложки до содержимого.
- Скругление углов — добавляет мягкости или, наоборот, строгих форм.
- Цвет подложки: сплошной цвет, градиент с выбором направления (диагональ, сверху вниз, слева направо).
💡
Используйте градиент, чтобы плавно «связать» блок с остальной страницей. Для акцентных блоков (акции, спецпредложения) лучше подходят яркие сплошные цвета.
4. Возможности информационной части
Все элементы включаются и выключаются по отдельности, а их последовательность можно менять. Это значит, что вы сами решаете, какие блоки информации нужны именно в вашем случае.
Доступные элементы:
Доступные элементы:
- Изображение — чаще используется для логотипа или иконки, но может быть любым (например, фото спикера).
- Интро — короткий вводный текст перед основным заголовком.
- Заголовок и подзаголовок — главный акцент блока.
- Основной текст — используйте как описание.
- Списки с маркерами — удобно для перечисления или состава чего-либо.
- Списки с иконками — более наглядный и визуально привлекательный способ перечисления (например, ✔, ⭐, 📦).
- Раскрывающиеся пункты — позволяют спрятать подробности, которые открываются по клику. Это удобно для FAQ, описания этапов или технических характеристик.
- Списки с заголовками — для более структурированной информации.
- Выделенный текст с фоном — для важных акцентов (например, для выделения цитаты, ключевых выводов).
- Теги — набор ключевых слов или меток, которые помогут акцентировать внимание на категориях, темах или особенностях.
- Две произвольные кнопки — например, «Заказать» и «Подробнее».
- Кнопки для мессенджеров — WhatsApp и Telegram.
- Таймер обратного отсчёта — для акций и событий.
- Форма — для сбора заявок или подписок.
- Несколько изображений — можно показать разные варианты товара или логотипы партнёров.
4.1. Включение и отключение элементов
Каждый элемент можно показывать или скрывать по отдельности. Это позволяет сделать карточки минималистичными или, наоборот, насыщенными.
Примеры отображения карточек с включенным или выключенным элементом:
4.2. Изменение последовательности элементов и выравнивание
В информационной части блока можно менять порядок всех элементов. Это позволяет расставлять акценты, тестировать разные варианты подачи и адаптировать блок под любую задачу. Хотите, чтобы таймер был первым? Перетащите его наверх. Нужно, чтобы форма была выше — переместите её в пару кликов..
Например:
- поставить таймер перед кнопкой, чтобы создать срочность — так он будет сильнее мотивировать на действие;
- отправить раскрывающиеся пункты ниже, чтобы подробности были для заинтересованных;
- поставить форму — сразу под описанием, чтобы сделать запись максимально простой.
💡
При перестановке элементов представляйте, что читатель видит блок впервые. Главное — захватить внимание в первые 3–5 секунд, а значит, «тяжёлые» и визуально цепляющие элементы лучше ставить в начало.
Выравнивание информационной части для каждого элемента настраивается отдельно и может быть: слева, посередине, справа. Применяется ко всем элементам, кроме: раскрывающихся пунктов, списка с иконками и списка с маркерами.
Примеры отображения блока с доступными вариантами выравнивания:
Примеры отображения блока с доступными вариантами выравнивания:
Экспериментируйте с комбинациями, пробуйте разные варианты сортировки — так вы найдёте оптимальный вариант, который будет не только красиво выглядеть, но и эффективно работать на ваши цели.
5. Возможности графической части
Вы можете выбрать любой из следующих форматов:
У каждого варианта графической части свои настройки.
- Одно изображение (картинка, фото продукта, портрет).
- Композиция из 2 или 3 изображений.
- Слайдер (перелистываемые изображения).
- Галерея.
- Видео с YouTube, RuTube, Vimeo.
- Видео, загруженное напрямую (MP4).
- HTML-вставка (например, интерактивная карта или 3D-модель).
У каждого варианта графической части свои настройки.
5.1. Изображение
Настройки:
- Пропорции — выбирайте соотношение сторон (квадрат, горизонтальное, вертикальное).
- Скругление углов — от строгих прямых до плавных закруглений.
- Тень — создаёт объём и отделяет картинку от фона.
5.2. Композиция из 2 или 3 изображений
Настройки:
- Выбор количества: 2 или 3 изображения.
- Скругление углов для каждого изображения.
- Тень — одинаковая для всех элементов композиции.
5.3. Галерея
Настройки:
На мобильных:
- Сетка: одно изображение в ряд или два.
- Пропорции изображений — подгонка под нужный формат.
- Отступ между изображениями.
- Скругление углов и тень.
- Галочка «Увеличить при клике» — открывает картинку в крупном формате.
На мобильных:
- Отображение друг за другом.
- Горизонтальное листание (влево–вправо).
5.4. Слайдер
Настройки:
- Изображения: пропорции, скругление углов.
- Переход между слайдами: сдвиг или проявление.
- Скорость перехода.
- Галочка «Включить автолистание» + настройка времени показа слайда.
- Кружки навигации: видимость (вкл/выкл), цвет, размер, расстояние между кружками.
5.5. Видео MP4 (загруженное в блок)
Настройки:
- Вид проигрывателя: классический плеер, интерактивный плеер, зацикленное видео без звука.
- Автовоспроизведение.
- Скругление углов видео.
HTML-вставка воспроизводится без настроек внешнего вида — дизайн полностью определяется вставляемым кодом.
💡
Если у вас длинный текст, используйте слайдер или галерею с листанием — так графика будет компактной, но разнообразной. Если же нужно сделать сильный акцент на одном фото, выбирайте одиночное изображение с крупной пропорцией и мягким скруглением.
6. Как начать
6.1. Перейдите в редактор сайта
Выберите иконку карандаша на синей плашке в правом верхнем углу:
6.2. Добавьте блок из раздела библиотеки "Медиа+Текст"
В библиотеке блоку посвящен целый раздел. Там представлены разные варианты использования блока. Мы это сделали для того, чтобы пользователям было легко придумать, как адаптировать блок под свою задачу.
6.3. Настройте структуру вид блока
- Решите, с какой стороны будет графическая часть (слева или справа).
- Настройте пропорции и максимальную ширину частей.
6.4. Наполните информационную часть
- Добавьте необходимые элементы: интро, заголовок, подзаголовок, списки, выделенный текст, теги, кнопки, таймер, форму, раскрывающиеся пункты, иконки.
- Включайте или выключайте элементы по необходимости.
6.5. Настройте порядок элементов
Перетащите блоки внутри информационной части, чтобы расставить акценты.
6.6. Выберите и настройте графическую часть
- Определите тип медиа (изображение, галерея, слайдер, видео, HTML).
- Настройте внешний вид по доступным параметрам.
6.7. Сохраните и протестируйте
- Посмотрите, как блок выглядит на разных устройствах.
- При необходимости вернитесь в настройки и внесите правки.
💡
Сначала создайте простую версию блока, а затем постепенно добавляйте элементы и настройки — так будет легче контролировать результат и не перегрузить страницу.
7. Где и как использовать
Блок Медиа+Текст универсален и подходит для самых разных задач — от информирования до продажи. Его можно встроить в любой раздел сайта, чтобы красиво сочетать визуальный контент и текст.
Ниже покажем примеры использования карточек:
Ниже покажем примеры использования карточек:
7.1. Используйте как первый экран
Тур агенство «Август»
Откройте Россию заново
Уникальные туры по самым красивым маршрутам страны — от Калининграда до Камчатки, с заботой о вашем комфорте и впечатлениях
7.2. Презентация продукта или услуги
фото показывают результат услуги, а текст раскрывает преимущества и характеристики
Авторский надзор
В процессе авторского надзора мы контролируем, чтобы результат строительных работ соответствовал дизайн-проекту и замыслу автора
Как это происходит:
-
01Выезжаем на объект и проверяем все этапы реализации проекта
-
02Даем экспертные консультации по телефону или в очном формате
-
03Вносим необходимые изменения в проект
-
04Ведем электронный журнал с фотоотчетами и замечаниями
Авторский надзор не заменяет технический надзор, который ведут инженеры-строители, и не направлен на оценку качества выполненных работ
7.3. Используйте как карточку специалиста
Кирилл Соколов
Невролог
Мой приоритет — обеспечить индивидуальный подход и квалифицированную помощь для восстановления вашего здоровья и улучшения качества жизни.
7.4. Портфолио или кейс
галерея выполненных работ + описание результата и отзыв клиента
Проект: упаковка для линейки ухода
Создали визуальную систему для бренда средств по уходу за кожей. В результате: узнаваемость, фотогеничность, рост прямых продаж с полки и онлайн.
«После обновления дизайна упаковки наш продукт буквально засиял на полках! Новая графика и цветовая палитра делают товар заметным даже среди конкурентов, а современная типографика подчёркивает премиальность. Клиенты отмечают, что упаковка теперь выглядит более стильной и “дорогой”, а сам бренд воспринимается как более надёжный и актуальный. Особенно радует, что при редизайне сохранили ключевые элементы фирменного стиля, поэтому постоянные покупатели легко узнают наш продукт»
— основатель бренда, Филипова Вера
7.5. Рекламный баннер акции
таймер и кнопка «Забронирова стол» создают эффект срочности
Акция в честь дня рождения Кафе
Это отличная возможность попробовать любимые блюда, провести время с друзьями и зарядиться праздничным настроением
До конца акции осталось:
Дней
Часов
Минут
Секунд
7.6. Преимущества компании
текст в две колонки с ценностями компании
-
СочувствиеМы понимаем тех, кто меняет мир — поэтому вместе находим лучшие решения для перемен.
-
ЕдинствоОбъединив наши различные навыки и точки зрения, мы создаем условия для достижения нашей миссии и реализации нашего видения.
-
КапиталМы — команда, и каждому из нас важно своё: чтобы раскрыться, расти и по-настоящему чувствовать себя на своём месте.
-
ИнновацииМы всегда ищем лучшие решения — для некоммерческих организаций и для себя.
-
УправлениеМы обязуемся приумножать добро с помощью доверенных нам средств.
-
ПрозрачностьМы живем в мире ценностей и учимся на неудачах, будучи откровенными и честными во всем, что мы делаем.
7.7. Контакты и форма
HTML вставка с адресами, форма и кнопки для перехода в мессенджеры
Контакты
Заполните форму и мы вам перезвоним
Все данные бережно хранятся в защищённом датацентре
Спасибо, ваша заявка получена