Гибкое содержимое — это самый мощный тип поля в Field Forge. Оно превращает ваш редактор WordPress в упрощенный конструктор страниц, позволяя менеджерам контента выбирать из набора предопределенных типов секций и располагать их в любом порядке. Каждый тип секции (называемый «макетом») имеет свой собственный набор полей, и редакторы комбинируют макеты, чтобы создавать уникальные страницы без написания кода или использования инструментов дизайна.
Думайте об этом так: ваш разработчик создает шаблоны секций (Герой Баннер, Сетка Функций, Отзывы, CTA и т. д.) и определяет, какой контент нужен для каждой из них. Ваша команда контента затем собирает страницы, выбирая, какие секции включить, и заполняя контент. Каждая страница может иметь разную комбинацию и порядок секций.
Как Гибкое содержимое отличается от Повторов и Групп
| Особенность | Группа | Повторитель | Гибкое содержимое |
|---|---|---|---|
| Количество экземпляров | Всегда 1 | Несколько строк, все идентичные | Несколько секций, каждая может быть разной |
| Структура подполей | Один фиксированный набор | Один фиксированный набор на строку | Разный набор для каждого типа макета |
| Редактор добавляет больше | Нет | Да — добавляет идентичные строки | Да — выбирает, какой макет добавить |
| Лучшая аналогия | Одна форма | Электронная таблица (одинаковые столбцы) | Конструктор страниц (разные типы секций) |
Пошагово: Создание полного конструктора целевой страницы
Сценарий: Вы управляете маркетингом для компании SaaS. Вашей команде маркетинга нужно создавать целевые страницы для кампаний, запусков продуктов и вебинаров. Каждая целевая страница имеет разную структуру — некоторые начинаются с героя и заканчиваются CTA, другие имеют отзывы, за которыми следует сетка функций, а затем таблица цен. Вам нужно дать маркетологам возможность создавать все, что им нужно, без привлечения разработчика каждый раз.Вот как создать поле Гибкого содержимого с пятью типами макетов:
#### Создание группы полей
- Перейдите в Field Forge > Новая группа полей
- Введите заголовок: Конструктор целевой страницы
- Нажмите Добавить поле, выберите Гибкое содержимое (в разделе Составные поля, PRO)
- Настройте:
— Имя: page_sections
— Инструкции: Создайте свою страницу, добавляя секции ниже. Перетаскивайте для изменения порядка. Каждый тип секции имеет свой собственный набор полей.
— Метка кнопки: «Добавить секцию» (настраивает текст кнопки по умолчанию «Добавить макет»)
#### Макет 1: Герой Баннер
- В настройках Гибкого содержимого нажмите Добавить макет
- Назовите его: Герой Баннер
- Установите отображение: Блок
- Добавьте под-поля:
— Подзаголовок (текстовая область) — Строки: 2, Обертка: 100%
— Фоновое изображение (изображение) — Инструкции: «Загрузите изображение высокого разрешения (минимум 1920×1080),» Обертка: 50%
— Наложение фона (выбор: Нет, Светлое, Темное) — Обертка: 50%
— Текст кнопки (текст) — Заполнитель: «Начать», Обертка: 50%
— URL кнопки (url) — Обертка: 50%
#### Макет 2: Сетка Функций
- Нажмите Добавить макет снова
- Назовите его: Сетка Функций
- Добавьте под-поля:
— Подзаголовок секции (текстовая область) — Обертка: 100%
— Столбцы (выбор: 2 столбца, 3 столбца, 4 столбца) — По умолчанию: 3 столбца, Обертка: 50%
— Функции (повторитель) — с под-полями:
— Иконка (изображение) — Обертка: 20%
— Заголовок функции (текст) — Обертка: 40%
— Описание функции (текстовая область) — Строки: 2, Обертка: 40%
#### Макет 3: Карусель Отзывов
- Нажмите Добавить макет снова
- Назовите его: Отзывы
- Добавьте под-поля:
— Цвет фона (выбор цвета) — Обертка: 50%
— Цитаты (повторитель) — Минимум строк: 2, с под-полями:
— Текст цитаты (текстовая область) — Обязательно: Да, Обертка: 100%
— Имя автора (текст) — Обязательно: Да, Обертка: 33%
— Должность автора (текст) — Заполнитель: «Генеральный директор, Acme Corp», Обертка: 33%
— Фото автора (изображение) — Обертка: 34%
#### Макет 4: Секция Видео
- Нажмите Добавить макет снова
- Назовите его: Секция Видео
- Добавьте под-поля:
— URL видео (oembed) — Инструкции: «Вставьте URL YouTube или Vimeo», Обертка: 100%
— Подпись (текст) — Обертка: 100%
— Показать наложение кнопки воспроизведения (истина/ложь) — По умолчанию: Да, Обертка: 50%
#### Макет 5: Баннер Призыв к Действию
- Нажмите Добавить макет снова
- Назовите его: Призыв к Действию
- Добавьте под-поля:
— Описание (текстовая область) — Строки: 2, Обертка: 100%
— Текст кнопки (текст) — Обязательно: Да, Заполнитель: «Начать бесплатный пробный период», Обертка: 33%
— URL кнопки (url) — Обязательно: Да, Обертка: 34%
— Цвет фона (выбор цвета) — Обертка: 33%
#### Установка правил местоположения и сохранение
- Прокрутите вниз до Правил местоположения
- Установите: Шаблон страницы равен Целевой странице
- Нажмите Сохранить группу полей
[Скриншот: редактор поля Гибкого содержимого, показывающий пять свернутых макетов — Герой Баннер, Сетка Функций, Отзывы, Секция Видео и Призыв к Действию — каждый с именем макета и количеством полей]
Как редакторы создают целевую страницу
Вот что делает член команды маркетинга при создании новой целевой страницы кампании:
- Создайте новую страницу и выберите шаблон «Целевая страница»
- Прокрутите вниз до метабокса «Конструктор целевой страницы»
- Нажмите Добавить секцию — выпадающий список показывает все пять типов секций
- Выберите Герой Баннер — поля героя появляются в расширяемой карточке
- Заполните заголовок («Преобразите свой рабочий процесс»), подзаголовок, загрузите фоновое изображение, установите наложение на Темное, введите текст кнопки и URL
- Нажмите Добавить секцию снова, выберите Сетка Функций
- Введите заголовок секции («Почему команды выбирают нас»), выберите 3 столбца, затем используйте повторитель Функций, чтобы добавить карточки функций с иконками, заголовками и описаниями
- Нажмите Добавить секцию, выберите Отзывы
- Добавьте 3-4 цитаты клиентов с именами, должностями и фотографиями
- Нажмите Добавить секцию, выберите Секция Видео
- Вставьте URL YouTube для видео демонстрации продукта, добавьте подпись
- Нажмите Добавить секцию, выберите Призыв к Действию
- Введите заголовок CTA («Начните свой бесплатный пробный период сегодня»), описание, текст кнопки, URL и выберите цвет бренда для фона
- Проверьте структуру страницы — теперь 5 секций перечислены вертикально
- Перетащите Секцию Видео выше Отзывов, если так будет логичнее
- Нажмите Обновить, чтобы сохранить
Теперь страница имеет пять различных секций, каждая полностью настроена, в том порядке, который выбрал редактор.
Управление секциями в редакторе
| Действие | Как это сделать |
|---|---|
| Добавить новую секцию | Нажмите Добавить секцию и выберите тип секции из выпадающего списка |
| Изменить порядок секций | Перетащите секцию за ее заголовок, чтобы переместить ее вверх или вниз |
| Дублировать секцию | Нажмите иконку дублирования на заголовке секции (полезно для быстрого создания похожих секций) |
| Удалить секцию | Нажмите кнопку X на заголовке секции — секция и ее данные будут удалены |
| Свернуть секцию | Нажмите заголовок секции, чтобы открыть или закрыть ее (сохраняет экран управляемым) |
| Добавить тот же тип дважды | Выберите тот же макет снова — ограничений нет. Два Героя Баннера или три CTA вполне допустимы |
Ограничения макетов
Вы можете установить минимальные и максимальные ограничения для каждого типа макета:
| Настройка | Пример | Цель |
|---|---|---|
| Минимум для Героя Баннера: 1 | Каждая целевая страница должна иметь хотя бы одного героя | Обеспечивает согласованность |
| Максимум для Героя Баннера: 1 | Нельзя добавить двух героев (это будет выглядеть странно) | Предотвращает ошибки |
| Максимум для Призыва к Действию: 2 | Не более двух CTA на странице | Сохраняет фокус страниц |
| Нет ограничений на Сетку Функций | Редакторы могут добавлять столько секций функций, сколько нужно | Максимальная гибкость |
Советы по эффективному дизайну Гибкого содержимого
- Начните с 4-6 макетов. Слишком много вариантов перегружает редакторов. Вы всегда можете добавить больше позже.
- Ясно называйте макеты. Редакторы видят эти названия в выпадающем списке. «Герой Баннер» лучше, чем «Макет 1.»
- Настройте текст кнопки. Измените «Добавить макет» на «Добавить секцию» или «Добавить блок» — это звучит более естественно.
- Используйте описания макетов. Каждый макет может иметь короткое описание, которое появляется в выпадающем списке, чтобы помочь редакторам выбрать.
- Включите скриншот или описание макета в инструкции макета, чтобы редакторы знали, как будет выглядеть секция на сайте.
- Установите разумные значения по умолчанию. Если большинство CTA используют один и тот же цвет фона, установите его как значение по умолчанию, чтобы редакторы меняли его только тогда, когда хотят что-то другое.
> Что происходит без PRO: Гибкое содержимое — это исключительно функция PRO. Без него вам понадобятся отдельные группы полей для каждого типа секции, и вам придется полагаться на вашего разработчика для жесткого кодирования структуры страницы. Редакторы не могут комбинировать секции или контролировать их порядок. Гибкое содержимое — это самая значимая функция PRO для команд контента, которые создают целевые страницы.
> Полезно знать: Макеты Гибкого содержимого могут содержать любой тип поля, включая Повторители и Группы. Макет «Отзывы» может иметь Повторитель внутри него для нескольких цитат. Макет «Герой Баннер» может иметь Группу для «Настроек кнопки» с текстом, URL и цветом. Возможности вложения позволяют вам моделировать очень сложные структуры страниц, сохраняя при этом организованный опыт редактирования.
> Распространенная ошибка: Создание слишком большого количества макетов сразу. Начните с 4-5, которые ваша команда действительно будет использовать. Через месяц спросите у ваших редакторов, какие типы секций они хотели бы иметь, и добавьте их. Создание 15 макетов в первый день означает, что большинство из них останутся неиспользованными и загромождают выпадающий список.