Divi Blurb Extended - Плагин WordPress

Руководство по настройке Divi Blurb Extended для карточек, flipbox-блоков и сервисных секций

Divi Blurb Extended нужен не для того, чтобы заменить весь конструктор Divi, а для точечной задачи: сделать блоки с иконкой, изображением, текстом, кнопкой и эффектом наведения гибче, чем стандартный модуль Blurb. В этом руководстве разберём, как безопасно добавить плагин на сайт, где искать его модули в Divi Builder, какие настройки проверять первыми и как собрать рабочую секцию услуг без лишних модулей.

Материал рассчитан на владельца сайта, дизайнера Divi, вебмастера агентства и контент-менеджера, который уже работает с Divi или Extra. Здесь нет инструкции по покупке, активации лицензии или обходу ограничений. Фокус другой: понять, когда плагин действительно экономит время, как выбрать между обычным Blurb Extended и Advanced Flip Box, как настроить равную высоту карточек, как проверить результат на публичной части сайта и что делать, если стили в редакторе выглядят иначе, чем после публикации.

В статье есть практический пример для секции услуг, таблица выбора макетов, аккуратные CSS-улучшения, диагностика частых проблем и сравнение с близкими решениями. Все точные факты о функциях и совместимости вынесены из официальной карточки, документации Divi Extended, Divi Marketplace и справочных материалов по Divi Builder.

Когда этот плагин лучше стандартного Blurb

Стандартный модуль Divi Blurb уже умеет показывать заголовок, текст, изображение или иконку, фон, стили текста, отступы и анимацию. Поэтому перед установкой Divi Blurb Extended важно честно ответить на вопрос: чего именно не хватает в текущей сборке страницы. Если вам нужен обычный блок "иконка + заголовок + короткий текст", стандартного модуля часто достаточно. Плагин становится полезным, когда в секции нужны встроенная кнопка, расширенные положения иконки, дополнительные формы иконок, готовые макеты blurbs или flipbox-сценарий.

Главное отличие в том, что Divi Blurb Extended добавляет не один универсальный переключатель, а два модуля для Divi Builder. Первый модуль называется Divi Blurb Extended и даёт пять макетов: Classic, Flipbox, Easebox, Borderbox и Image Card. Второй модуль, Advanced Flip Box, рассчитан на карточки с передней и обратной сторонами, а также на разные типы анимации: flip, zoom, slide, 3D cube, grow и cover.

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

Быстрая проверка перед установкой: если вы просто хотите поменять цвет иконки, радиус или текст стандартного Blurb, начните со штатных настроек Divi. Если вам нужны встроенная кнопка, Image Card, Borderbox, отдельные front/back-настройки или более сложный flipbox, тогда Divi Blurb Extended даёт реальную пользу.

Кому Divi Blurb Extended подходит, а кому может быть лишним

Плагин хорошо ложится на сайты, где много повторяемых коротких карточек: услуги, преимущества, этапы работы, направления обучения, карточки сотрудников, ссылки на разделы, преимущества продукта, локальные страницы агентства. В таких сценариях карточка должна быть не просто текстовым блоком, а маленьким навигационным элементом: пользователь видит понятный заголовок, получает короткое объяснение и может перейти по кнопке.

Для агентства Divi Blurb Extended удобен тем, что карточки остаются внутри привычного Visual Builder. Не нужно собирать композицию из трёх отдельных модулей - картинки, текста и кнопки - а потом синхронизировать отступы между ними. Для контент-менеджера это снижает риск случайно удалить соседний модуль или разорвать структуру ряда.

Но плагин может быть лишним, если сайт почти не использует Divi Builder, если вы делаете минималистичный блог без карточных секций или если весь дизайн уже собран на глобальных блоках другой системы. Ещё один важный случай - жёсткие требования к доступности. Flipbox-эффекты и скрытый текст на обратной стороне нужно проверять осторожно: важная информация не должна быть доступна только при наведении мыши, потому что часть пользователей открывает сайт с сенсорных экранов или клавиатуры.

Сценарии, где плагин обычно оправдан

• Секция услуг с кнопкой внутри каждой карточки, где отдельный модуль кнопки усложняет выравнивание.
• Карточки преимуществ с разными формами иконок: круг, квадрат, шестиугольник.
• Блоки "до подробностей" и "после наведения", где нужен front/back-контент.
• Сетки карточек на страницах агентства, клиники, школы, SaaS-сервиса или локального бизнеса.
• Переиспользуемые секции Divi Library, которые нужно быстро переносить между страницами.

Сценарии, где лучше не усложнять

• На странице всего 2-3 простых информационных блока без ссылок и эффектов.
• Команда хочет максимально облегчить фронтенд и уже использует минимум сторонних модулей.
• Важный текст должен быть всегда виден без наведения, клика или анимации.
• Сайт строится не через Divi Theme, Extra или Divi Builder Plugin.

Что проверить перед установкой на WordPress-сайт

Перед установкой не стоит начинать с красивых демо. Сначала проверьте базовые зависимости. По документации плагину нужен Divi Builder: это может быть Divi Theme, Extra Theme или Divi Builder Plugin на другой теме. Если страница редактируется через другой конструктор или обычный редактор блоков, модуль Divi Blurb Extended там не появится.

Вторая проверка - текущая архитектура страниц. Если сайт уже использует кастомные CSS-классы на blurbs, глобальные presets Divi, оптимизаторы CSS/JS и кеширование, подготовьте тестовую страницу. Не начинайте заменять карточки на рабочей главной странице без копии. Лучше создать черновик, собрать один ряд карточек, опубликовать его в непубличном разделе или на staging-сайте и только затем переносить настройки в рабочий макет.

Третья проверка - доступы и откат. Для установки нужен администратор WordPress. Для безопасного отката достаточно знать, какие страницы были изменены, и иметь актуальную резервную копию. Сам плагин добавляет модули в Divi Builder, но ваши карточки становятся частью макета страницы. Если отключить плагин, секции, зависящие от его модулей, могут перестать отображаться корректно. Поэтому не используйте его как временный инструмент для страниц, которые потом должны жить без плагина.

Мини-чеклист подготовки

• Убедитесь, что страница редактируется через Divi Builder, а не только через стандартный редактор WordPress.
• Проверьте, что тема, дочерняя тема и Divi-расширения обновлены штатным способом.
• Создайте тестовую страницу или копию секции, где можно проверить модуль без риска для главной страницы.
• Очистите кеш после установки и после публикации, чтобы не сравнивать редактор с устаревшей публичной версией.
• Запишите, какие секции вы заменяете, чтобы при необходимости быстро вернуться к прежнему макету.

Установка и первичная проверка модуля в Divi Builder

Установка выполняется как у обычного WordPress-плагина. В админ-панели откройте Plugins - Add New - Upload Plugin, выберите ZIP-файл плагина, нажмите Install Now, затем Activate Plugin. Документация Divi Extended также описывает ручную загрузку через FTP в каталог wp-content/plugins/, но для большинства сайтов безопаснее использовать стандартный экран WordPress, потому что он снижает риск ошибиться с папкой.

После активации откройте страницу в Divi Builder, добавьте строку и найдите модуль Divi Blurb Extended или Advanced Flip Box в библиотеке модулей. Если модуль не находится, не начинайте сразу переустанавливать плагин. Сначала проверьте, что редактируемая страница действительно использует Divi Builder, что кеш админ-панели очищен, а пользователь имеет права на редактирование страниц и установленных плагинов.

Проверка после установки

1. Создайте тестовую страницу и включите Divi Builder.
2. Добавьте обычную секцию, строку с тремя колонками и модуль Divi Blurb Extended в первую колонку.
3. В Blurb Content задайте короткий заголовок и текст.
4. В Button включите Read More Button и задайте текст кнопки.
5. В Design выберите один из макетов, сохраните модуль и опубликуйте страницу.
6. Откройте страницу в отдельном окне без режима редактирования и проверьте, что карточка отображается так же, как в редакторе.

Мини-итог: после установки важно увидеть не просто активный плагин в списке Plugins, а новый модуль внутри Divi Builder и рабочий опубликованный блок на публичной части сайта.

Как выбрать между Divi Blurb Extended и Advanced Flip Box

Оба модуля похожи по задаче, но решают разные уровни сложности. Divi Blurb Extended лучше подходит для карточек, которые должны быть всегда понятны: иконка или изображение, заголовок, текст, ссылка, кнопка, цвет и лёгкий эффект. Advanced Flip Box нужен тогда, когда сама механика раскрытия информации является частью интерфейса: пользователь наводит курсор, видит обратную сторону, получает дополнительный текст или кнопку.

Не стоит делать каждую карточку flipbox только потому, что эффект выглядит современно. Чем важнее информация, тем осторожнее нужно прятать её на обратной стороне. Для преимуществ продукта и коротких интригующих карточек это нормально. Для юридических условий, контактных данных, инструкций или ключевых ценностных тезисов лучше использовать обычную видимую карточку.

Логика выбора макета

После выбора макета сохраните один образцовый модуль и продублируйте его в соседние колонки. Так проще сохранить одинаковые отступы, высоту, цвет кнопки и стиль иконок. Если начать настраивать каждую карточку с нуля, ряд быстро станет неровным, особенно когда заголовки и тексты разной длины.

Подробная настройка карточки после установки

Настройку лучше проходить не сверху вниз по всем вкладкам, а от смысла карточки к визуальному результату. Сначала определите, что карточка сообщает, куда ведёт и как пользователь поймёт, что она интерактивна. Потом настройте контент, ссылку, кнопку, изображение или иконку. Только после этого переходите к макету, цветам, hover-состояниям, высоте и дополнительному CSS.

Контент, ссылка и кнопка

В модуле Divi Blurb Extended начните с Blurb Content: задайте понятный Blurb Title и короткий Blurb Content. Если карточка должна вести на отдельную страницу, заполните Blurb Link. Не включайте открытие в новом окне автоматически. Оно уместно для внешних страниц, документов или сторонних сервисов, но для внутренних страниц услуг обычно мешает.

Если нужен призыв к действию, включите Read More Button в настройках Button и задайте текст. Хороший текст кнопки описывает действие: "Подробнее об услуге", "Посмотреть кейс", "Открыть программу". Не используйте одинаковое "Read More" во всех карточках русскоязычного сайта, если остальной интерфейс переведён.

Изображение, иконка и alt-текст

В Image & Icon выберите, будет ли карточка использовать изображение или иконку. Для стандартного Divi Blurb важно помнить, что обычно это выбор "или/или". Divi Blurb Extended расширяет сценарии за счёт макетов и дополнительных возможностей, но всё равно лучше не перегружать маленькую карточку несколькими визуальными акцентами. Если выбран Image Card, используйте изображение только тогда, когда оно добавляет смысл: фото направления, скриншот результата, миниатюра кейса.

Для изображений задавайте осмысленный alt-текст в соответствующем поле, если макет его поддерживает. Alt не должен повторять название секции. Он должен объяснять изображение: "Иконка консультации по дизайну сайта", "Фото команды поддержки", "Пример карточки услуги в Divi". Это полезно для доступности и для базовой SEO-гигиены.

Макет, фон и hover-состояния

Во вкладке Design выберите макет. Для Classic, Easebox, Borderbox и Image Card проверьте Content Background. Для Flipbox особенно важны настройки Flipbox Settings: front/back фон, цвет или изображение, высота flipbox. Высоту не стоит ставить "на глаз" для одной карточки. Сначала заполните все карточки ряда реальными текстами, найдите самую высокую, затем выровняйте остальные.

Hover-эффекты помогают показать интерактивность, но не должны ломать читаемость. Если фон меняется на тёмный, проверьте цвет заголовка, текста и кнопки на обратном состоянии. Если используется изображение как фон, добавьте достаточно контраста через цвет, градиент или затемнение внутри доступных настроек Divi.

Что включать только при необходимости

• Сложные flip-анимации. Используйте их для небольших интерактивных блоков, но не для длинных текстов и критичной информации.
• Parallax background. Проверяйте на мобильных устройствах и после оптимизации изображений, потому что эффект может быть избыточным для маленькой карточки.
• Shake on Flip. Эффект заметный, поэтому лучше применять его точечно, а не во всей сетке из шести карточек.
• Большие тени и сильные hover-переходы. Они быстро создают визуальный шум, если рядом много карточек.

Как откатить спорную настройку

Самый безопасный откат - работать с дубликатом модуля. Перед экспериментом продублируйте карточку или сохраните секцию в Divi Library. Если результат не подошёл, удалите тестовый вариант и верните сохранённый модуль. Для CSS-правок добавляйте комментарий с назначением и не вставляйте код в файлы плагина. Используйте Divi - Theme Options - Custom CSS, дочернюю тему или отдельный сниппет, чтобы изменение можно было быстро найти и отключить.

Настройка Advanced Flip Box без скрытых ловушек

Advanced Flip Box сильнее обычного blurb, но требует более строгого сценария. У flipbox всегда есть две стороны. Передняя сторона должна давать самостоятельный смысл, а обратная - расширять его. Ошибка многих секций в том, что передняя сторона превращается в пустую декоративную плитку, а весь полезный текст спрятан сзади. На настольном экране это может выглядеть эффектно, но на мобильном пользователь может не понять, что карточку нужно трогать.

После добавления модуля откройте Content - Flip Box Layout. Для Flip выберите направление: Top, Bottom, Right, Left или диагональные варианты, если они есть в вашей версии. Для Zoom выберите Fade, Zoom In или Zoom Out. Для Slide, 3D Cube, Grow и Cover настройте направление входа и скорость. Не гонитесь за максимальной сложностью: чем спокойнее анимация, тем меньше риск, что она будет отвлекать от содержания.

Передняя и обратная стороны

В Flip Box Content задайте Front Content и Back Content. На передней стороне оставьте короткий заголовок и один опорный смысл. На обратной стороне разместите пояснение, ссылку или кнопку. Если обратная сторона содержит кнопку, формулировка должна совпадать с ожиданием пользователя: "Смотреть направление", "Открыть кейс", "Записаться на консультацию".

Скорость и глубина

Flip Speed лучше подбирать на опубликованной странице, а не только в редакторе. Слишком быстрая анимация выглядит резкой, слишком медленная мешает навигации. Если включаете 3D Depth Effect, проверьте, не создаёт ли он конфликт с тенями, overflow-настройками секции или соседними модулями. Эффект должен подчеркивать интерактивность, а не заставлять карточку "вылетать" за пределы строки.

Доступность и мобильная проверка

Для сенсорных экранов старайтесь, чтобы важный текст был виден без обязательного наведения. Если back-сторона содержит критичную информацию, продублируйте её в обычном тексте ниже секции или выберите не flipbox, а Image Card с видимой кнопкой. После публикации проверьте карточку с клавиатуры, на телефоне и в режиме уменьшенной ширины браузера. Если действие неочевидно, добавьте короткий текст на передней стороне: "Наведите, чтобы увидеть детали" для desktop-сценария или выберите более явный макет.

Практический пример: секция услуг с кнопками и ровной сеткой

Разберём сценарий, который часто встречается на сайтах агентств и локального бизнеса: нужно собрать секцию из трёх услуг. Каждая карточка должна иметь иконку, заголовок, короткое объяснение и кнопку перехода на подробную страницу. Задача кажется простой, но в обычной сборке из отдельных модулей быстро появляются проблемы: кнопки стоят на разной высоте, текстовые блоки по-разному растягивают колонку, а при изменении одной карточки приходится вручную поправлять соседние.

Цель

Получить три карточки в одном ряду: "Аудит сайта", "Редизайн страницы", "Поддержка Divi". У каждой карточки есть иконка, описание и кнопка. На desktop кнопки должны стоять на одной линии, на мобильном карточки должны складываться друг под другом без обрезания текста.

Подготовка

• Страница открыта в Divi Builder.
• Плагин активирован, модуль Divi Blurb Extended виден в библиотеке модулей.
• Есть внутренние страницы, на которые будут вести кнопки.
• Подготовлены три иконки одного визуального стиля или выбран один набор Divi icons.

Шаги настройки

1. Создайте обычную секцию и строку из трёх колонок.
2. В первую колонку добавьте Divi Blurb Extended.
3. В Blurb Content задайте заголовок "Аудит сайта" и короткий текст в 2-3 строки.
4. В Blurb Link укажите URL страницы услуги.
5. В Button включите Read More Button, задайте текст "Подробнее об аудите" и включите пользовательские стили кнопки только если нужно попасть в дизайн-систему сайта.
6. В Image & Icon выберите иконку, задайте цвет и размер.
7. Во вкладке Design выберите Image Card или Classic, настройте фон, внутренние отступы и радиус.
8. Сохраните модуль, продублируйте его в две соседние колонки и замените текст, ссылку и иконку.
9. В настройках строки включите равную высоту колонок, если карточки отличаются по длине текста.
10. Опубликуйте страницу и проверьте результат вне Visual Builder.

Проверка результата

После публикации откройте страницу в обычном режиме и проверьте пять вещей. Во-первых, все три карточки должны иметь одинаковый визуальный ритм. Во-вторых, кнопки должны быть на одной линии или хотя бы выглядеть предсказуемо при разной длине текста. В-третьих, на мобильном экране кнопка каждой карточки должна оставаться под своим текстом, а не прилипать к соседнему блоку. В-четвёртых, hover-состояния должны быть читаемыми: текст не исчезает на фоне, иконка не сливается с цветом карточки. В-пятых, ссылки должны вести на нужные страницы.

Нюанс, который часто мешает

Если в редакторе кнопки выглядят ровно, а на публичной странице одна карточка выше другой, причина часто в разной длине текста, кешировании CSS или несовпадении настроек строки. Сначала включите равную высоту колонок в Row settings. Затем очистите кеш. Если проблема остаётся именно в макете Image Card, можно использовать CSS-подход из раздела ниже, но только после проверки стандартных настроек.

Безопасные CSS-улучшения для выравнивания и точной подгонки

Документация Divi Extended приводит два полезных направления CSS-правок: минимальную высоту для blurbs и выравнивание кнопок Read More в карточках с разной длиной текста. Это не обязательная настройка для каждого сайта. CSS нужен только тогда, когда стандартных настроек Divi и равной высоты колонок недостаточно.

Перед добавлением кода сохраните страницу, сделайте копию секции или добавьте код сначала на тестовой странице. Не правьте файлы плагина. Для CSS используйте Divi - Theme Options - Custom CSS, дочернюю тему или поле пользовательского CSS в нужном модуле, если изменение должно быть локальным.

Выравнивание кнопок в карточках Image Card

Этот snippet помогает, когда в одном ряду несколько карточек Image Card, тексты разной длины, а кнопки должны визуально опускаться к нижней части карточки. Он основан на CSS-селекторах, приведённых в документации Divi Extended для выравнивания кнопок.

.et_pb_blurb_extended .image_card .et_pb_blurb_container {
    height: 100%;
    display: flex;
    align-content: space-around;
    justify-content: space-between;
    flex-direction: column;
}

.et_pb_blurb_extended.et_pb_text_align_center .et_pb_blurb_content {
    height: 100%;
}

.et_pb_blurb_extended .image_card {
    height: 100%;
}

.et_pb_blurb_extended {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

После вставки очистите кеш и проверьте опубликованную страницу. Если изменились карточки в других секциях, сузьте область действия: добавьте строке или секции свой CSS-класс, например services-blurbs-row, и начинайте селекторы с него. Для отката удалите snippet или временно закомментируйте его.

Центрирование иконки в Borderbox

Если в Borderbox иконка должна стоять строго по центру, документация предлагает переопределить позицию области иконки. Размер в формуле должен соответствовать реальной ширине вашей иконки или иконной рамки.

.et_pb_main_blurb_image {
    left: calc(50% - (68px / 2));
}

Не вставляйте этот код глобально без проверки. Он обращается к общему классу изображения blurb, поэтому на сложном сайте может затронуть больше блоков, чем вы планировали. Безопаснее добавить CSS-класс конкретному модулю или секции и ограничить селектор. Если результат сдвигает иконку неправильно, измените значение 68px под фактическую ширину элемента или удалите правило.

Проверка результата после публикации

У Divi-модулей есть особенность: редактор может показывать почти финальный вид, но публичная страница зависит от кеша, оптимизации CSS/JS, ширины экрана, состояния пользователя и глобальных настроек темы. Поэтому проверка должна быть отдельным этапом, а не быстрым взглядом в Visual Builder.

Что проверять на desktop

• Карточки одинаково выровнены по высоте или намеренно отличаются по дизайну.
• Кнопки находятся в ожидаемом месте и не "прыгают" при наведении.
• Hover-состояние не снижает контраст текста.
• Flipbox-анимация не обрезается родительским контейнером.
• Ссылки и кнопки открывают правильные страницы.

Что проверять на мобильном экране

На телефоне hover-логика меняется. Пользователь чаще нажимает, а не наводит курсор. Поэтому карточка должна быть понятной до взаимодействия. Проверьте, что заголовок и основной смысл видны сразу, кнопка не перекрывается, а обратная сторона flipbox не содержит единственный критичный текст. Если блок выглядит перегруженным, лучше заменить часть flipbox-карточек на обычные Image Card или Classic.

Что проверять после кеша и оптимизации

Если сайт использует кеширующий или оптимизирующий плагин, очистите кеш страницы и минифицированные CSS/JS после публикации. Затем откройте страницу в приватном окне. Если в приватном окне всё хорошо, а у авторизованного администратора вид другой, сравните состояние Visual Builder и публичной страницы. Если проблема видна всем, временно отключите оптимизацию CSS/JS на тестовой копии и проверьте, исчезает ли конфликт.

Частые проблемы с карточками и как их диагностировать

Проблемы Divi Blurb Extended обычно связаны не с установкой как таковой, а с сочетанием модуля, макета страницы, кеша и разной длины контента. Ниже - практичная диагностика без опасных действий и без правки файлов плагина.

Модуль не появляется в библиотеке Divi

Симптом: плагин активен в WordPress, но при добавлении модуля в Divi Builder вы не видите Divi Blurb Extended или Advanced Flip Box.

Возможная причина: страница не открыта через Divi Builder, установлен не тот ZIP-файл, кеш админ-панели или конфликт с другим расширением. Также проверьте, что сайт использует Divi Theme, Extra Theme или Divi Builder Plugin, потому что модуль предназначен именно для Divi Builder.

Что сделать: откройте тестовую страницу, включите Divi Builder, попробуйте поиск по названию модуля. Если модуль не найден, проверьте список активных плагинов и корректность установленной папки. При подозрении на конфликт временно включите безопасный режим или отключите неключевые расширения на staging-сайте.

В редакторе всё ровно, а на сайте стили отличаются

Симптом: цвет, отступы, высота или hover-состояние в Visual Builder выглядят правильно, но после публикации публичная страница показывает другой результат.

Возможная причина: кеш, минификация CSS/JS, старый статический CSS Divi, глобальные стили темы или дополнительный CSS, который переопределяет карточки.

Что сделать: очистите кеш сайта, кеш Divi static CSS, кеш браузера и откройте страницу в приватном окне. Если проблема исчезла после отключения оптимизации CSS/JS на тесте, добавьте исключение или пересоберите CSS. Если причина в пользовательском CSS, сузьте селекторы, чтобы они не били по всем .et_pb_blurb и .et_pb_blurb_extended на сайте.

Карточки разной высоты и кнопки стоят неровно

Симптом: в ряду из трёх или четырёх карточек одна кнопка выше, другая ниже, нижний край сетки неровный.

Возможная причина: разные объёмы текста, разные размеры изображений, отключенная равная высота колонок или макет Image Card, которому нужна flex-подгонка.

Что сделать: сначала сократите или выровняйте тексты, затем включите equal height для колонок строки. Если этого недостаточно, используйте CSS из раздела выше и ограничьте его конкретной секцией. Откатывайте CSS, если он меняет другие карточки на сайте.

Flipbox плохо работает на мобильном

Симптом: обратная сторона карточки неочевидна, кнопка трудно нажимается, текст обрезается или пользователь не понимает, что карточка интерактивна.

Возможная причина: дизайн рассчитан на наведение мыши, слишком много текста на обратной стороне, недостаточная высота flipbox или конфликт overflow-настроек.

Что сделать: уменьшите текст на back-стороне, увеличьте высоту, проверьте Overflow у секции и строки, а для критичной информации выберите обычный видимый макет. Если эффект остаётся неудобным, лучше заменить мобильный вариант на обычную карточку через настройки видимости Divi.

Иконка в Borderbox стоит не там, где ожидается

Симптом: рамка иконки визуально сдвинута, особенно после изменения размера иконки.

Возможная причина: позиция иконной области зависит от ширины элемента, а пользовательский размер отличается от значения, заложенного в макет или CSS.

Что сделать: проверьте размер иконки и рамки, затем примените локальный CSS для конкретной секции. Не используйте глобальное правило без собственного класса, потому что оно может затронуть другие blurb-блоки.

SEO, скорость и доступность карточек

Divi Blurb Extended в первую очередь влияет на визуальную подачу контента, но карточки всё равно участвуют в пользовательском опыте, скорости и доступности. Не воспринимайте flipbox как место для скрытого SEO-текста. Поисковая и пользовательская ценность карточки в том, что она быстро объясняет раздел и ведёт дальше, а не в том, что на обратной стороне спрятан длинный абзац.

SEO без переспама

Заголовки внутри карточек должны быть короткими и полезными. Если секция услуг ведёт на отдельные страницы, используйте понятные названия услуг, а не набор ключей. Alt-текст изображений задавайте по смыслу изображения. Если карточка использует только декоративную иконку, не пытайтесь сделать из неё SEO-носитель. Лучше сосредоточиться на заголовке секции, структуре страницы и нормальных внутренних ссылках.

Скорость

Не перегружайте карточки большими изображениями, если достаточно иконки. Для Image Card подготавливайте изображения одного соотношения сторон и сжимайте их штатными средствами сайта. Если включены анимации, проверьте поведение на слабом устройстве. Один красивый ряд с лёгким hover-эффектом обычно воспринимается лучше, чем шесть карточек с разными движениями, тенями и 3D-поворотами.

Доступность

Сделайте так, чтобы основной смысл карточки был виден без наведения. Контраст текста на обычном и hover-состоянии должен оставаться достаточным. Не используйте только цвет для передачи смысла: если карточка меняет цвет при наведении, кнопка и заголовок всё равно должны говорить, что произойдёт после клика. Для интерактивных блоков проверьте клавиатурную навигацию и фокус-состояния, особенно если карточка ведёт на важную страницу.

Когда Divi Blurb Extended будет удачным выбором

Divi Blurb Extended стоит использовать, если вы уже работаете в Divi Builder и хотите быстро собирать более выразительные карточки без связки из нескольких отдельных модулей. Его сильная сторона - практичная середина между стандартным Blurb и большим набором сторонних модулей: пять макетов для blurb-секций, встроенная кнопка, расширенные формы иконок, правое положение иконки и отдельный Advanced Flip Box для интерактивных карточек.

Перед внедрением проверьте зависимость от Divi Builder, соберите тестовую секцию, настройте один эталонный модуль, продублируйте его, выровняйте высоту и обязательно сравните Visual Builder с опубликованной страницей. Если после этой проверки результат закрывает задачу, можно получить файл Divi Blurb Extended и использовать его как рабочий инструмент для карточек услуг, преимуществ, кейсов и интерактивных блоков.

Если же проекту нужны только простые информационные blocks без кнопок и hover-логики, не усложняйте стек. Стандартный Divi Blurb остаётся нормальным выбором. Хорошее решение здесь не самое эффектное, а то, которое редактор сможет поддерживать через месяц без хаоса в стилях и лишних зависимостей.