WPBakery Blob (addon) — Картинка + Бегущий текст
30
WPBakery Blob Image with Text — это профессиональный плагин для WPBakery Page Builder (Visual Composer), который добавляет красивый анимированный элемент с изображением и текстом, обрезанным по форме blob. Плагин создает эффектный визуальный элемент с плавной анимацией текста, движущегося по органичной blob-форме.
Описание
Ключевые возможности:
- 🎨 Blob-эффект для изображений — изображение обрезается по уникальной органичной форме
- ✨ Анимированный текст — текст плавно движется по контуру blob-формы
- ⚙️ Полная кастомизация — более 20 настроек через интерфейс WPBakery
- 📱 Адаптивный дизайн — автоматическая адаптация под все устройства
- 🎭 Hover-эффекты — изменение масштаба и цвета текста при наведении
- 🎯 Интеграция с WPBakery — полная совместимость с Visual Composer
- 🖼️ Поддержка медиафайлов — загрузка изображений из медиатеки WordPress
Использование в WPBakery Page Builder
Добавление элемента:
- Откройте редактор WPBakery:
- Редактируйте страницу или пост через WPBakery
- Найдите элемент:
- Нажмите кнопку «Add Element» (+)
- Введите «Blob Image with Text» в поиске
- Или найдите в категории «Content»
- Настройте параметры:
Основные настройки:
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| Изображение | Загрузите или выберите изображение из медиатеки | — |
| Текст анимации | Текст, который будет двигаться по blob-форме | ❤ MADE WITH LOVE ❤ |
| Ширина/Высота | Размеры контейнера элемента | 400px |
Настройки текста:
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| Цвет текста | Основной цвет текста | #000000 (черный) |
| Цвет текста (hover) | Цвет при наведении | #ffffff (белый) |
| Размер текста | Размер в пикселях | 12px |
| Насыщенность шрифта | Жирность текста | Bold (700) |
| Текст заглавными | Преобразование в верхний регистр | Включено |
Настройки анимации:
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| Скорость анимации | Скорость движения текста | Средне (15s) |
| Направление анимации | Направление движения | Вперед |
| Увеличение при наведении | Масштаб blob при hover | 1.15 (115%) |
Настройки фона:
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| Цвет фона 1-3 | Цвета для градиентного фона | От #F4C6A5 до #FFF3E9 |
| Тип градиента | Радиальный или линейный | Радиальный |
Примеры использования:
1. Логотип компании с девизом:
- Изображение: Логотип компании
- Текст: «INNOVATION • QUALITY • SERVICE •»
- Цвет текста: Белый (#FFFFFF)
- Скорость: Медленно (20s)
2. Портрет с именем:
- Изображение: Фотография сотрудника
- Текст: «JOHN DOE • WEB DEVELOPER •»
- Цвет текста: Золотой (#FFD700)
- Размер текста: 14px
3. Продукт с названием:
- Изображение: Фото продукта
- Текст: «PREMIUM QUALITY • NATURAL • ORGANIC •»
- Цвет текста: Зеленый (#4CAF50)
- Фон: Светло-зеленый градиент
Часто задаваемые вопросы (FAQ)
Советы по использованию
Совместимость
