Elementor es un constructor visual para WordPress que permite diseñar sitios web de manera intuitiva sin necesidad de programar. Con su interfaz de arrastrar y soltar, ofrece una gran flexibilidad para personalizar cada página.
En esta guía, te explicaré cómo configurar Elementor correctamente, qué plugins pueden mejorar su funcionalidad y cómo aprovechar sus herramientas para crear sitios web profesionales.
Contenidos
1. Configuración Inicial
¿Qué tema usar con Elementor?
Para obtener el mejor rendimiento y evitar conflictos, te recomiendo usar el tema Hello. Es ligero y está diseñado para integrarse perfectamente con Elementor, asegurando que todos los cambios se realicen sin problemas.
Si decides usar otro tema, algunos elementos deberán personalizarse desde el tema y otros desde Elementor, lo que puede generar inconsistencias y dificultar el mantenimiento.
Taxonomías y términos en WordPress
En WordPress, las taxonomías organizan y clasifican contenido. Hay dos conceptos clave:
- Taxonomía: Categorías generales que agrupan contenido similar, como «Género de Película» o «Tipo de Proyecto».
- Términos (Terms): Opciones dentro de cada taxonomía. Por ejemplo, en «Tipo de Proyecto» pueden ser «Diseño Web», «Marketing Digital» o «SEO».
Ejemplo práctico: Si tienes un blog sobre cine, puedes crear una taxonomía llamada «Género de Película» y asignar términos como «Acción», «Comedia» o «Drama». Luego, cada artículo puede pertenecer a uno o varios términos.
Uso de fallback en Elementor
Un fallback es un valor por defecto que se mostrará cuando un dato no esté disponible. Es útil, por ejemplo, en imágenes destacadas.
Ejemplo: Si tienes un blog donde cada artículo debe mostrar una imagen destacada, pero algunas publicaciones no la tienen configurada, puedes definir una imagen por defecto en Elementor para evitar espacios vacíos.
Diseñando la portada de la web
Existen dos formas principales de diseñar la página de inicio en Elementor:
- Usar una plantilla con una sección vacía e insertar el widget Post Content. Luego, el contenido se diseña con Gutenberg o Elementor.
- Crear una plantilla en Elementor que incluya todo el contenido, dejando vacía la página asignada como portada en WordPress.
La opción más flexible es la primera, ya que permite realizar cambios sin modificar la estructura del diseño.
2. Plugins recomendados para Elementor
Existen varios plugins que amplían las funcionalidades de Elementor. Aquí algunos de los más útiles:
| Plugin | Funcionalidad |
|---|---|
| Post Types Order | Permite ordenar los posts y páginas con solo arrastrar y soltar. |
| Advanced Custom Fields | Facilita la creación de campos personalizados para agregar información adicional a los posts. |
| Code Snippets | Permite insertar fragmentos de código sin modificar archivos del tema. |
| FakerPress | Genera contenido ficticio para pruebas y desarrollo. |
| Advanced Post Queries | Permite realizar consultas avanzadas para mostrar posts personalizados. |
| Elementor Custom Skin | Ayuda a personalizar la apariencia del listado de posts. |
| Dynamic Conditions | Permite mostrar u ocultar contenido en función de ciertas condiciones. |
3. Creación de contenido personalizado en Elementor
Custom Post Types (CPT)
Un Custom Post Type (CPT) es un tipo de contenido personalizado en WordPress. Por defecto, WordPress incluye «Entradas» y «Páginas», pero con un CPT puedes crear otros tipos de contenido, como «Proyectos», «Portafolio» o «Testimonios».
Cómo crear un CPT
Para generar un Custom Post Type, sigue estos pasos:
- Usa GenerateWP para crear el código del CPT.
- Define los siguientes valores:
- Function Name: Nombre de la función que registrará el CPT (ejemplo:
cpt_proyectos). - Post Type Key: Identificador del CPT (ejemplo:
proyectos).
- Function Name: Nombre de la función que registrará el CPT (ejemplo:
- Copia el código generado y añádelo en WordPress utilizando el plugin Code Snippets.
Relación entre Custom Post Types
Si necesitas vincular un Custom Post Type con otro (por ejemplo, «Proyectos» con «Clientes»), puedes hacerlo con Advanced Custom Fields (ACF).
Pasos para mostrar posts relacionados:
- Crea un campo en ACF que relacione los posts.
- Usa el widget «Posts» en Elementor.
- Instala el plugin Advanced Post Queries para habilitar opciones avanzadas.
Ejemplo: Si tienes un CPT de «Proyectos» y otro de «Clientes», puedes crear un campo en ACF llamado «Cliente Relacionado» dentro de «Proyectos». Luego, al diseñar la página de un proyecto, puedes usar Elementor para mostrar los clientes relacionados automáticamente.
4. Configuración global del sitio
Ajustes generales
- Desactivar colores y fuentes por defecto: Permite definir una identidad visual propia sin que Elementor sobrescriba los estilos.
- Guía de estilos: Se recomienda crear una página interna llamada «Estilos Elementos» para visualizar encabezados, botones y otros elementos antes de aplicarlos al sitio.
5. Diseñar con Elementor
Secciones y Columnas
- Ancho del contenido: Debe coincidir con el definido globalmente en Ajustes del sitio → Disposición.
- Posición de la columna: Si se selecciona «estirar», las columnas ocuparán todo el alto de la caja (sección).
- Adaptabilidad: Se puede invertir el orden de las columnas en dispositivos móviles y tabletas para mejorar la experiencia de usuario.
Diseño del Header
En Theme Builder se puede crear una plantilla personalizada para el encabezado.
Header Sticky (Fijo)
Para hacer un encabezado fijo al hacer scroll:
- Selecciona la sección entera del header.
- Ve a Avanzado → Efectos de Movimiento y configura la opción Sticky.
- Importante: Asegúrate de usar la etiqueta HTML
<header>para optimización SEO.
Layout de Páginas
- El tamaño del
<h1>para diferentes dispositivos debe configurarse en los ajustes globales. - Si el contenido necesita variar entre versiones (PC, móvil, tablet), es mejor hacerlo con ajustes globales en lugar de modificar cada widget individualmente.
- Página de inicio: Para excluir esta página en «conditions», añadir
exclude → front-page.
Diseño del Single Post
Para mantener la coherencia visual, se recomienda copiar el diseño de una single page y reutilizarlo en la single de entrada.
Tabla de Contenidos
Se puede incluir un índice de contenidos con un widget. Para evitar que tome encabezados externos al contenido, se debe asignar un identificador a la sección principal del post.
Consejo: En dispositivos móviles, invierte el orden de las columnas para mostrar la tabla de contenidos antes del texto.
Diseñar un Archive (Listados)
- Se utiliza el widget Archive Posts.
- Se puede configurar un archive global y sobrescribirlo con archivos específicos para distintos Custom Post Types (CPT).
- Para que un CPT no tenga archivo, se debe desactivar la opción
has_archiveen su código y regenerar los enlaces permanentes.
Crear un Loop para Custom Post Type
Por defecto, Elementor no permite personalizar el diseño de cada post dentro de un listado.
Para lograrlo:
- Instalar Elementor Custom Skin.
- Crear una nueva plantilla de tipo loop.
Tutorial sobre Elementor Custom Skin
6. Formularios en Elementor
Creación de Formularios
Se pueden crear formularios de múltiples pasos con el elemento Step.
Seguridad:
- Integrar reCAPTCHA desde el panel de administración.
- Se puede añadir un campo honeypot, pero es menos seguro que reCAPTCHA.
Campos Dinámicos
Se pueden pre-rellenar datos como el nombre o email del usuario logueado.
Acciones tras el Envío
Las acciones que se pueden configurar incluyen:
- Collect Submissions: Guarda los envíos en el panel admin (Elementor → Submissions).
- Email: Enviar notificaciones configuradas para el administrador y el usuario.
- Webhook: Conectar con servicios como Zapier o Make para automatización.
- Integraciones con Email Marketing: Elementor permite conectar formularios con Mailchimp, ActiveCampaign y otras plataformas similares.
7. Popups en Elementor
Configuración de Popups
- Conditions: Define en qué páginas aparecerá el popup.
- Triggers: Establece qué acción activará el popup (por ejemplo, al hacer scroll o tras un tiempo determinado).
- Advanced Rules: Condiciones avanzadas, como mostrarlo solo después de que el usuario haya visitado X páginas o impedir que aparezca a usuarios logueados.
8. Imágenes, Iconos y Animaciones
Imágenes
- Se puede crear un slider dentro de una sección.
- También se pueden usar vídeos para fondos dinámicos.
Composición de imágenes:
- Usando Fondo y Capa de Fondo, se pueden superponer imágenes y aplicar modos de fusión.
- El widget Gallery permite crear galerías de imágenes personalizadas.
Iconos Personalizados
Se pueden subir iconos en formato SVG desde Elementor.
Fuentes recomendadas de iconos:
Animaciones
Elementor permite animar cualquier elemento (secciones, columnas, widgets) con efectos de entrada y movimiento.
9. Widgets Globales y Personalización Avanzada
Widgets Globales
Cualquier widget puede guardarse como Global para reutilizarlo en distintas páginas.
Si se necesita reutilizar una sección completa:
- Guardarla como Plantilla.
- Insertarla mediante el widget Template para que los cambios se reflejen en todas sus instancias.
Código Personalizado
Elementor permite insertar scripts en el header o footer y definir en qué páginas deben ejecutarse.
Esto es útil para añadir códigos de analítica, píxeles de conversión o integraciones con herramientas externas.
Recursos adicionales: