El Contenido Flexible es el tipo de campo más potente en Field Forge. Convierte tu editor de WordPress en un constructor de páginas simplificado al permitir que los gestores de contenido elijan entre un conjunto de tipos de sección predefinidos y los organicen en cualquier orden. Cada tipo de sección (llamado “diseño”) tiene su propio conjunto de campos, y los editores combinan y mezclan diseños para crear páginas únicas sin escribir código ni tocar herramientas de diseño.
Piénsalo de esta manera: tu desarrollador diseña las plantillas de sección (Banner Principal, Cuadrícula de Características, Testimonios, CTA, etc.) y define qué contenido necesita cada una. Tu equipo de contenido luego ensambla páginas eligiendo qué secciones incluir y completando el contenido. Cada página puede tener una combinación y un orden diferente de secciones.
Cómo el Contenido Flexible se Diferencia de Repetidores y Grupos
| Característica | Grupo | Repetidor | Contenido Flexible |
|---|---|---|---|
| Número de instancias | Siempre 1 | Múltiples filas, todas idénticas | Múltiples secciones, cada una puede ser diferente |
| Estructura de sub-campo | Un conjunto fijo | Un conjunto fijo por fila | Conjunto diferente para cada tipo de diseño |
| El editor añade más | No | Sí — añade filas idénticas | Sí — elige qué diseño añadir |
| Mejor analogía | Un solo formulario | Una hoja de cálculo (mismas columnas) | Un constructor de páginas (diferentes tipos de sección) |
Paso a Paso: Construyendo un Constructor de Página de Aterrizaje Completo
El escenario: Tú gestionas el marketing de una empresa SaaS. Tu equipo de marketing necesita crear páginas de aterrizaje para campañas, lanzamientos de productos y seminarios web. Cada página de aterrizaje tiene una estructura diferente: algunas comienzan con un héroe y terminan con un CTA, otras tienen testimonios seguidos de una cuadrícula de características seguida de una tabla de precios. Necesitas dar a los marketers la flexibilidad para construir lo que necesiten sin involucrar a un desarrollador cada vez.Aquí está cómo construir un campo de Contenido Flexible con cinco tipos de diseño:
#### Creando el Grupo de Campos
- Ve a Field Forge > Nuevo Grupo de Campos
- Introduce el título: Constructor de Página de Aterrizaje
- Haz clic en Añadir Campo, elige Contenido Flexible (bajo Campos Compuestos, PRO)
- Configura:
– Nombre: page_sections
– Instrucciones: Construye tu página añadiendo secciones a continuación. Arrastra para reordenar. Cada tipo de sección tiene su propio conjunto de campos.
– Etiqueta del Botón: “Añadir Sección” (personaliza el texto del botón predeterminado “Añadir Diseño”)
#### Diseño 1: Banner Principal
- Dentro de la configuración de Contenido Flexible, haz clic en Añadir Diseño
- Nómbralo: Banner Principal
- Establece la Visualización: Bloque
- Añade sub-campos:
– Subtítulo (textarea) — Filas: 2, Contenedor: 100%
– Imagen de Fondo (imagen) — Instrucciones: “Sube una imagen de alta resolución (mínimo 1920×1080),” Contenedor: 50%
– Superposición de Fondo (seleccionar: Ninguno, Claro, Oscuro) — Contenedor: 50%
– Texto del Botón (texto) — Marcador de posición: “Comenzar”, Contenedor: 50%
– URL del Botón (url) — Contenedor: 50%
#### Diseño 2: Cuadrícula de Características
- Haz clic en Añadir Diseño de nuevo
- Nómbralo: Cuadrícula de Características
- Añade sub-campos:
– Subtítulo de Sección (textarea) — Contenedor: 100%
– Columnas (seleccionar: 2 Columnas, 3 Columnas, 4 Columnas) — Predeterminado: 3 Columnas, Contenedor: 50%
– Características (repetidor) — con sub-campos:
– Icono (imagen) — Contenedor: 20%
– Título de Característica (texto) — Contenedor: 40%
– Descripción de Característica (textarea) — Filas: 2, Contenedor: 40%
#### Diseño 3: Carrusel de Testimonios
- Haz clic en Añadir Diseño de nuevo
- Nómbralo: Testimonios
- Añade sub-campos:
– Color de Fondo (selector de color) — Contenedor: 50%
– Citas (repetidor) — Filas Mínimas: 2, con sub-campos:
– Texto de Cita (textarea) — Requerido: Sí, Contenedor: 100%
– Nombre del Autor (texto) — Requerido: Sí, Contenedor: 33%
– Título del Autor (texto) — Marcador de posición: “CEO, Acme Corp”, Contenedor: 33%
– Foto del Autor (imagen) — Contenedor: 34%
#### Diseño 4: Sección de Video
- Haz clic en Añadir Diseño de nuevo
- Nómbralo: Sección de Video
- Añade sub-campos:
– URL del Video (oembed) — Instrucciones: “Pega una URL de YouTube o Vimeo”, Contenedor: 100%
– Subtítulo (texto) — Contenedor: 100%
– Mostrar Superposición de Botón de Reproducción (verdadero/falso) — Predeterminado: Sí, Contenedor: 50%
#### Diseño 5: Banner de Llamada a la Acción
- Haz clic en Añadir Diseño de nuevo
- Nómbralo: Llamada a la Acción
- Añade sub-campos:
– Descripción (textarea) — Filas: 2, Contenedor: 100%
– Texto del Botón (texto) — Requerido: Sí, Marcador de posición: “Comenzar Prueba Gratuita”, Contenedor: 33%
– URL del Botón (url) — Requerido: Sí, Contenedor: 34%
– Color de Fondo (selector de color) — Contenedor: 33%
#### Configurando Reglas de Ubicación y Guardando
- Desplázate hacia abajo hasta Reglas de Ubicación
- Establece: Plantilla de Página es igual a Página de Aterrizaje
- Haz clic en Guardar Grupo de Campos
[Captura de pantalla: el editor de campo de Contenido Flexible mostrando cinco diseños colapsados — Banner Principal, Cuadrícula de Características, Testimonios, Sección de Video y Llamada a la Acción — cada uno con un nombre de diseño y un conteo de campos]
Cómo los Editores Construyen una Página de Aterrizaje
Aquí está lo que hace un miembro del equipo de marketing al crear una nueva página de aterrizaje para una campaña:
- Crea una nueva Página y selecciona la plantilla “Página de Aterrizaje”
- Desplázate hacia abajo hasta el metabox “Constructor de Página de Aterrizaje”
- Haz clic en Añadir Sección — se muestra un desplegable con los cinco tipos de sección
- Selecciona Banner Principal — los campos del héroe aparecen en una tarjeta expandible
- Completa el título (“Transforma Tu Flujo de Trabajo”), subtítulo, sube una imagen de fondo, establece la superposición en Oscuro, introduce el texto y la URL del botón
- Haz clic en Añadir Sección de nuevo, selecciona Cuadrícula de Características
- Introduce el título de la sección (“Por Qué los Equipos Nos Eligen”), selecciona 3 Columnas, luego utiliza el repetidor de Características para añadir tarjetas de características con iconos, títulos y descripciones
- Haz clic en Añadir Sección, selecciona Testimonios
- Añade 3-4 citas de clientes con nombres, títulos y fotos
- Haz clic en Añadir Sección, selecciona Sección de Video
- Pega una URL de YouTube para un video de demostración del producto, añade un subtítulo
- Haz clic en Añadir Sección, selecciona Llamada a la Acción
- Introduce el título de la CTA (“Comienza Tu Prueba Gratuita Hoy”), descripción, texto del botón, URL y elige un color de marca para el fondo
- Revisa la estructura de la página — ahora hay 5 secciones listadas verticalmente
- Arrastra la Sección de Video por encima de los Testimonios si tiene más sentido de esa manera
- Haz clic en Actualizar para guardar
La página ahora tiene cinco secciones distintas, cada una completamente personalizada, en el orden que el editor eligió.
Gestionando Secciones en el Editor
| Acción | Cómo Hacerlo |
|---|---|
| Añadir una nueva sección | Haz clic en Añadir Sección y elige un tipo de sección del desplegable |
| Reordenar secciones | Arrastra una sección por su barra de encabezado para moverla hacia arriba o hacia abajo |
| Duplicar una sección | Haz clic en el icono de duplicar en el encabezado de la sección (útil para crear secciones similares rápidamente) |
| Eliminar una sección | Haz clic en el botón X en el encabezado de la sección — la sección y sus datos se eliminan |
| Colapsar una sección | Haz clic en el encabezado de la sección para alternar entre abierto o cerrado (mantiene la pantalla manejable) |
| Añadir el mismo tipo dos veces | Elige el mismo diseño de nuevo — no hay límite. Dos Banners Principales o tres CTAs son perfectamente válidos |
Límites de Diseño
Puedes establecer límites mínimos y máximos para cada tipo de diseño:
| Configuración | Ejemplo | Propósito |
|---|---|---|
| Mínimo para Banner Principal: 1 | Cada página de aterrizaje debe tener al menos un héroe | Asegura consistencia |
| Máximo para Banner Principal: 1 | No se puede añadir dos héroes (se vería extraño) | Previene errores |
| Máximo para Llamada a la Acción: 2 | Como máximo dos CTAs por página | Mantiene las páginas enfocadas |
| Sin límites en Cuadrícula de Características | Los editores pueden añadir tantas secciones de características como necesiten | Máxima flexibilidad |
Consejos para un Diseño Efectivo de Contenido Flexible
- Comienza con 4-6 diseños. Demasiadas opciones abruman a los editores. Siempre puedes añadir más después.
- Nombra los diseños claramente. Los editores ven estos nombres en el desplegable. “Banner Principal” es mejor que “Diseño 1.”
- Personaliza el texto del botón. Cambia “Añadir Diseño” a “Añadir Sección” o “Añadir Bloque” — suena más natural.
- Utiliza descripciones de diseño. Cada diseño puede tener una breve descripción que aparece en el desplegable para ayudar a los editores a elegir.
- Incluye una captura de pantalla o descripción de maquetación en las instrucciones del diseño para que los editores sepan cómo se verá la sección en el sitio web.
- Establece valores predeterminados sensatos. Si la mayoría de los CTAs utilizan el mismo color de fondo, configúralo como el valor predeterminado para que los editores solo lo cambien cuando quieran algo diferente.
> Qué pasa sin PRO: El Contenido Flexible es exclusivamente una característica PRO. Sin él, necesitarías grupos de campos separados para cada tipo de sección y depender de tu desarrollador para codificar la estructura de la página. Los editores no pueden mezclar y combinar secciones ni controlar su orden. El Contenido Flexible es la característica PRO más impactante para los equipos de contenido que construyen páginas de aterrizaje.
> Bueno saber: Los diseños de Contenido Flexible pueden contener cualquier tipo de campo, incluidos Repetidores y Grupos. Un diseño de “Testimonios” puede tener un Repetidor dentro para múltiples citas. Un diseño de “Banner Principal” puede tener un Grupo para “Configuraciones de Botón” con texto, URL y color. Las posibilidades de anidamiento te permiten modelar estructuras de página muy complejas mientras mantienes la experiencia de edición organizada.
> Error común: Crear demasiados diseños a la vez. Comienza con 4-5 que tu equipo realmente usará. Después de un mes, pregunta a tus editores qué tipos de sección desearían tener, y añade esos. Construir 15 diseños en el primer día significa que la mayoría no se utilizarán y desordenarán el desplegable.