OJSoluciones – Freelance en Alicante

Menú
Integrar Elementor con CPT y Campos Personalizados (ACF)

Integrar Elementor con CPT y Campos Personalizados (ACF)

Elementor es uno de los constructores visuales más potentes para WordPress, pero donde realmente brilla es cuando lo combinamos con Custom Post Types (CPT) y Advanced Custom Fields (ACF).
Esta integración permite crear sitios avanzados, dinámicos y 100% personalizados, sin depender de plantillas rígidas o limitaciones de contenido.

En esta guía aprenderás paso a paso cómo integrar Elementor con CPT y ACF para crear páginas dinámicas, escalables y profesionales.
Este artículo forma parte de nuestro silo de conocimiento sobre Diseño Web con Elementor y Desarrollo Web con Elementor, reforzando la experiencia profesional que ofrecemos en Alicante.

¿Por qué integrar Elementor con CPT y ACF?

Cuando trabajas con sitios profesionales (agencias, directorios, servicios, productos personalizados…), usar solo páginas y entradas se queda corto.

Con CPT y ACF puedes:

  • Crear tipos de contenido personalizados (Proyectos, Servicios, Propiedades, Cursos, Productos, Testimonios…)
  • Añadir campos personalizados como:
  • Texto
  • Imágenes
  • Repetidores
  • Selectores
  • Precios
  • Mapas
  • Fechas
  • Mostrar este contenido dinámico en Elementor usando plantillas.

Esta integración convierte Elementor en un constructor dinámico real, ideal para webs avanzadas.

Crear un Custom Post Type (CPT)

Puedes crear CPT de dos formas:

Opción 1: mediante código (lo más profesional)

Añade esto al functions.php o plugin personalizado:

🐘
oj_cpt.php 
function oj_register_cpt_proyectos() {
  $args = array(
    'label' => 'Proyectos',
    'public' => true,
    'menu_icon' => 'dashicons-portfolio',
    'supports' => array('title', 'editor', 'thumbnail'),
    'has_archive' => true
  );
  register_post_type('proyectos', $args);
}
add_action('init', 'oj_register_cpt_proyectos');

Opción 2: usando un plugin

  • Custom Post Type UI
  • JetEngine
  • Toolset (menos usado hoy)

Recomiendo CPT UI si no quieres tocar código.

Crear campos personalizados con ACF

Una vez creado tu CPT, toca añadirle información dinámica.

Ejemplo: un CPT de “Propiedades” podría tener:

  • Precio
  • Ubicación
  • Número de habitaciones
  • Imagen destacada
  • Galería
  • Descripción corta

Pasos:

  1. En ACF → Añadir nuevo grupo
  2. Crea los campos que necesites (texto, número, imagen…)
  3. En Location Rules, selecciona: Post Type → es igual a → proyectos (o tu CPT)
  4. Guarda

¡Listo! Ya tienes campos personalizados listos para integrar.

Crear una plantilla dinámica en Elementor

Aquí ocurre la magia.

Pasos:

  1. Ve a Elementor → Plantillas → Theme Builder
  2. Selecciona Single Post
  3. Crea una plantilla para tu CPT
  4. Cambia la condición: Proyectos → Todos los proyectos
  5. Inserta widgets dinámicos

Elementor Pro permite que cada widget se conecte con ACF mediante la función Dynamic Tags.

Conectar Elementor con ACF (Dynamic Tags)

Cada widget tiene un icono en forma de chip ⚙️ que permite usar datos dinámicos.

Ejemplo:

  • Widget Heading → Dynamic Tags → ACF Field
  • Selecciona “Precio”
  • Widget Image → Dynamic Tags → ACF Image
  • Widget Text Editor → Dynamic Tags → ACF Text Area

Esto es ideal para:

  • Fichas de servicios
  • Fichas de productos
  • Portfolio dinámico
  • Directorios
  • Webs inmobiliarias
  • Cursos
  • Listados personalizados

Cualquier diseño en Elementor se vuelve dinámico al 100%.

Crear listados dinámicos con “Posts” o “Loop Grid”

Método 1: Widget “Posts”

Muestra un grid de entradas de tu CPT.

  • Selecciona “Query”
  • Cambia a “Custom Post Type”
  • Filtra por “proyectos” (o el CPT que creaste)

Método 2 (más profesional): Loop Builder

Elementor Pro permite crear tu propio diseño de listado.

  1. Elementor → Templates → Loop
  2. Diseñas la ficha de listado
  3. En la página usas el widget Loop Grid

Esto permite:

  • Diseño 100% personalizado
  • Campos dinámicos de ACF
  • Control total de la apariencia

Buenas prácticas al integrar Elementor + ACF + CPT

Mantén nombres limpios y organizados

Ej.: precio_proyecto, fecha_evento, ubicacion_propiedad

Usa estilos globales

Evitarás inconsistencias visuales.

No abuses de widgets pesados

Mantén rendimiento y velocidad.

Usa plantillas para facilitar escalabilidad

Si cambias algo en la plantilla, se actualiza en todo el CPT.

ACF Repeater para estructuras avanzadas

Ideal para:

  • Módulos
  • Listas
  • Características
  • FAQs
  • Puntos destacados

Cuándo necesitas Elementor + CPT + ACF en proyectos reales

Esta integración es indispensable en:

  • Páginas de servicios dinámicos
  • Webs inmobiliarias
  • Catálogos personalizados
  • Cursos y academias
  • Fichas de proyectos
  • Webs con funcionalidades a medida
  • Directorios
  • Agencias o portfolios

Si quieres desarrollo personalizado con Elementor, esta es la solución profesional.

En definitiva

Integrar Elementor con CPT y ACF desbloquea todo el potencial del diseño dinámico en WordPress.
Permite crear webs profesionales, escalables y personalizadas, sin límites de contenido ni diseño.

Una vez dominas esta integración, Elementor deja de ser solo un constructor visual y se convierte en una herramienta de desarrollo avanzado.

Desarrollo Web WordPress en Alicante - Plugins, temas, seguridad, optimizacion y más
Diseño Web con WordPress

Puedo ayudarte a desarrollar un sitio web complejo en WordPress.

Ver Servicio