Cómo Trabajar con Páginas en WordPress y Divi: Una Guía Completa Paso a Paso

WordPress impulsa más del 43% de todos los sitios web en Internet, y por una buena razón. Su interfaz intuitiva, su vasto ecosistema de plugins y sus flexibles capacidades de gestión de contenido lo convierten en el CMS preferido por todos, desde bloggers independientes hasta empresas de nivel empresarial. Cuando combinas WordPress con el tema Divi de Elegant Themes, desbloqueas un constructor visual de arrastrar y soltar que te permite diseñar páginas impresionantes y profesionales sin escribir una sola línea de código.

En esta guía completa, aprenderás exactamente cómo crear, personalizar, organizar y publicar páginas en WordPress usando Divi Builder. Ya sea que estés construyendo tu primer sitio web o refinando uno existente, este tutorial cubre todo lo que necesitas saber.

¿Qué son las páginas en WordPress? (Y cómo difieren de los posts)

Antes de profundizar en los pasos técnicos, es importante entender qué es realmente una página de WordPress y cómo difiere de una publicación de blog.

Las páginas son la columna vertebral estructural de tu sitio web. Contienen contenido que no cambia frecuentemente y no necesita ser categorizado o etiquetado. Piensa en tu Acerca de nosotros, Contacto, Servicios o Página de inicio — estos son todos ejemplos clásicos de páginas de WordPress.

Entender esta distinción te ayuda a tomar decisiones más inteligentes sobre cómo organizar y presentar tu contenido.

Requisitos previos: Lo que necesitas antes de comenzar

Para seguir esta guía, asegúrate de tener lo siguiente en su lugar:

• Una instalación de WordPress en vivo en un entorno de alojamiento confiable
• El tema Divi instalado y activado (disponible en Elegant Themes)
• Acceso de administrador a tu panel de control de WordPress
• Una comprensión básica de la estructura y los objetivos de tu sitio web

Si aún estás configurando tu entorno de alojamiento, considera Alojamiento VPS de AlexHost — una solución de alto rendimiento y escalable que te proporciona acceso root completo, recursos dedicados y la flexibilidad para ejecutar WordPress a velocidad óptima. Para proyectos más pequeños o sitios personales, Alojamiento web compartido es una alternativa asequible y amigable para principiantes que es totalmente compatible con WordPress.

Paso 1: Inicia sesión en tu panel de control de WordPress

Comienza abriendo tu navegador web preferido y navegando a tu panel de administración de WordPress. La URL predeterminada es:

http://yourdomain.com/wp-admin

Ingresa tu nombre de usuario y contraseña, luego haz clic en Iniciar sesión. Llegarás al Panel de control de WordPress — el panel de control central para todo tu sitio web.

> Consejo profesional: Si estás administrando múltiples sitios de WordPress o necesitas una experiencia de administración más simplificada, considera usar un VPS con cPanel para la gestión centralizada del servidor y del sitio desde una única interfaz intuitiva.

Paso 2: Crea una nueva página de WordPress

Una vez que estés dentro del panel de control, sigue estos pasos para crear una nueva página:

1. En el menú de navegación de la izquierda, localiza y haz clic en Páginas
2. Haz clic en Añadir nueva en la parte superior de la lista de páginas (o usa el atajo + Nuevo > Página en la barra de administración superior)
3. Serás llevado al editor de bloques de WordPress (Gutenberg)

Añadiendo un título y contenido básico

• Haz clic en el campo “Añadir título” en la parte superior e ingresa el nombre de tu página (por ejemplo, *Acerca de nosotros*, *Contacto*, *Servicios*)
• En el área de contenido debajo, puedes añadir bloques de texto, imágenes, encabezados, botones y otros elementos usando el editor de bloques Gutenberg
• Usa el atajo “/” en el editor para buscar rápidamente e insertar cualquier tipo de bloque

En esta etapa, estás trabajando con el editor estándar de WordPress. Sin embargo, si deseas personalización visual avanzada — y estás usando Divi — querrás activar Divi Builder en el siguiente paso.

Paso 3: Activa y usa Divi Builder

Divi Builder transforma el editor estándar de WordPress en un poderoso entorno de diseño visual de arrastrar y soltar. Aquí te mostramos cómo habilitarlo y usarlo:

Habilitando Divi Builder

Después de abrir tu página en el editor, verás un botón prominente cerca de la parte superior del área de contenido:

“Habilitar Divi Builder” — haz clic en él.

WordPress te mostrará tres opciones de inicio:

Selecciona la opción que mejor se adapte a tu proyecto y haz clic en Comenzar a construir.

Entendiendo la estructura de Divi Builder

Antes de añadir contenido, es útil entender cómo Divi organiza su jerarquía de diseño:

Section
  └── Row
        └── Column
              └── Module

• Secciones son los contenedores más grandes — abarcan el ancho completo de la página
• Filas se encuentran dentro de secciones y definen la estructura de columnas (1, 2, 3 columnas, etc.)
• Columnas son las divisiones verticales individuales dentro de una fila
• Módulos son los elementos de contenido real (texto, imágenes, botones, formularios, etc.)

Paso 3a: Añadiendo secciones y filas

1. Haz clic en el icono azul “+” en la parte inferior del lienzo para añadir una nueva Sección
2. Elige un tipo de sección: Regular, Ancho completo o Especialidad
3. Dentro de la sección, haz clic en el icono “+” para añadir una Fila
4. Selecciona tu diseño de columnas preferido (por ejemplo, 1/2 + 1/2 para un diseño de dos columnas)

Paso 3b: Añadiendo módulos

Los módulos son los bloques de construcción de contenido de cada página de Divi. Para añadir uno:

1. Haz clic en el icono gris “+” dentro de una columna
2. Aparecerá una biblioteca de módulos — explora o busca el módulo que necesitas
3. Haz clic en el módulo para insertarlo en tu diseño

Los módulos de Divi más comúnmente utilizados incluyen:

• Módulo de texto — para párrafos, encabezados y copias formateadas
• Módulo de imagen — para fotos, gráficos e ilustraciones
• Módulo de botón — para CTAs y enlaces de navegación
• Módulo de deslizador — para carruseles de imágenes hero
• Módulo de formulario de contacto — para captura de leads e inquietudes
• Módulo de información — para cajas de características con icono + texto
• Módulo de video — para contenido de video incrustado
• Módulo de testimonios — para prueba social y reseñas
• Módulo de código — para fragmentos personalizados de HTML, CSS o JavaScript

Paso 3c: Personalizando módulos

Haz clic en el icono de lápiz (editar) en cualquier módulo para abrir su panel de configuración. La configuración se organiza en tres pestañas:

Pestaña de contenido

Configura el contenido real del módulo — texto, imágenes, enlaces, etiquetas de botones, campos de formulario, etc.

Pestaña de diseño

Controla la apariencia visual del módulo:

• Tipografía — familia de fuente, tamaño, peso, altura de línea, espaciado de letras
• Colores — colores de fondo, texto, borde e icono
• Espaciado — controles de relleno y margen (con puntos de ruptura responsivos)
• Bordes y sombras — esquinas redondeadas, sombras de caja, estilos de borde
• Dimensionamiento — restricciones de ancho, alto y ancho máximo

Pestaña avanzada

Accede a configuraciones de nivel de desarrollador:

• Clases CSS e IDs — para ganchos de estilo personalizados
• CSS personalizado — escribe CSS específico del módulo directamente
• Visibilidad — muestra/oculta el módulo en vistas de escritorio, tablet o móvil
• Animaciones — efectos de animación de entrada y temporización

> Consejo de diseño: Los controles responsivos de Divi te permiten establecer diferentes valores para vistas de escritorio, tablet y móvil. Siempre vista previa de tu página en los tres puntos de ruptura antes de publicar.

Paso 4: Organiza tus páginas con jerarquías

A medida que tu sitio web crece, mantener las páginas organizadas se vuelve crítico tanto para la experiencia del usuario como para el SEO. WordPress admite jerarquías de páginas padre-hijo, que te permiten anidar páginas relacionadas bajo un padre común.

Creando una relación de página padre-hijo

1. Mientras editas una página, mira la barra lateral derecha en el editor de bloques
2. Haz clic en Página para expandir el panel de configuración de la página
3. Encuentra la sección Atributos de página
4. Bajo Página padre, haz clic en el menú desplegable y selecciona la página que deseas asignar como padre

Ejemplo de jerarquía:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Esta estructura crea URLs más limpias (por ejemplo, yoursite.com/services/web-design/) y ayuda a los motores de búsqueda a entender mejor la arquitectura de contenido de tu sitio.

Paso 5: Añade páginas a tu menú de navegación

Crear una página no la añade automáticamente a la navegación de tu sitio web. Necesitas añadirla manualmente a un menú.

1. En el panel de control de WordPress, ve a Apariencia > Menús
2. Selecciona un menú existente o haz clic en Crear un menú nuevo
3. En el panel Páginas a la izquierda, marca la casilla junto a las páginas que deseas añadir
4. Haz clic en Añadir al menú
5. Arrastra y suelta elementos del menú para reordenarlos o crear submenús desplegables
6. Haz clic en Guardar menú cuando hayas terminado

> Mejor práctica: Mantén tu menú de navegación principal enfocado en tus páginas más importantes. Apunta a un máximo de 5–7 elementos de nivel superior para evitar abrumar a los visitantes.

Paso 6: Configura los ajustes de la página para SEO y rendimiento

Antes de publicar, tómate un momento para configurar los ajustes clave de la página que afectan tanto la visibilidad en los motores de búsqueda como la experiencia del usuario.

Enlace permanente (URL slug)

• En la barra lateral del editor de bloques, encuentra la sección Enlace permanente
• Edita el slug de URL para que sea corto, descriptivo y rico en palabras clave
• Evita slugs generados automáticamente con números (por ejemplo, /?p=123)
• Buen ejemplo: yoursite.com/about-us/
• Mal ejemplo: yoursite.com/?page_id=47

Imagen destacada

• Asigna una imagen destacada relevante para mejorar la apariencia del intercambio social y la consistencia visual

Plantilla de página

• Algunos temas (incluyendo Divi) ofrecen múltiples plantillas de página (por ejemplo, ancho completo, sin barra lateral)
• Selecciona la plantilla apropiada bajo Atributos de página > Plantilla

Datos meta de SEO

• Si estás usando un plugin de SEO como Yoast SEO o Rank Math, completa:
• Título meta — incluye tu palabra clave principal
• Descripción meta — escribe un resumen convincente de 150–160 caracteres
• Palabra clave enfocada — establece tu término de búsqueda objetivo

Paso 7: Guarda, vista previa y publica tu página

Una vez que estés satisfecho con el diseño y la configuración de tu página, es hora de ponerla en vivo.

Opciones de guardado en Divi Builder

En la esquina superior derecha de la interfaz de Divi Builder, encontrarás:

• Guardar borrador — guarda tu trabajo sin hacerlo públicamente visible
• Vista previa — abre una vista previa en vivo de tu página en una nueva pestaña
• Publicar/Actualizar — pone la página en vivo en tu sitio web

Publicando desde el editor de bloques

Si sales de Divi Builder y regresas al editor de bloques estándar:

1. Haz clic en Guardar borrador para guardar sin publicar
2. Haz clic en Vista previa para revisar cómo se ve la página en el front end
3. Haz clic en Publicar cuando estés listo para ponerla en vivo
4. Confirma haciendo clic en Publicar nuevamente en el panel de confirmación

> Importante: Siempre vista previa de tu página en escritorio y móvil antes de publicar. Las herramientas de diseño responsivo de Divi son poderosas, pero la revisión manual detecta problemas que las herramientas automatizadas pierden.

Consejos avanzados: Obtén más de WordPress y Divi

Usa Divi Theme Builder para plantillas globales

El Divi Theme Builder (disponible en Divi 4.0+) te permite crear plantillas globales para encabezados, pies de página y tipos específicos de posts/páginas. Esto asegura consistencia de diseño en todo tu sitio sin editar manualmente cada página.

Guarda diseños en la biblioteca de Divi

Si has diseñado una sección o diseño que te encanta, guárdalo en la biblioteca de Divi para reutilizarlo en otras páginas. Esto acelera dramáticamente tu flujo de trabajo.

Habilita las pruebas A/B de Divi (pruebas divididas)

Divi incluye una herramienta de prueba dividida incorporada que te permite probar diferentes versiones de un módulo, sección o página entre sí para ver cuál funciona mejor — invaluable para la optimización de la tasa de conversión.

Asegura tu sitio con SSL

Si aún no lo has hecho, asegúrate de que tu sitio de WordPress se ejecute en HTTPS. Un certificado SSL es esencial para la confianza del usuario, la seguridad de datos y las clasificaciones de Google. AlexHost ofrece Certificados SSL que son fáciles de instalar y compatibles con todos los entornos de alojamiento de WordPress.

Usa un dominio personalizado

Un nombre de dominio profesional refuerza tu marca y mejora las tasas de clics en los resultados de búsqueda. Puedes registrar y administrar tu dominio directamente a través del servicio de Registro de dominios de AlexHost, con soporte para cientos de extensiones de TLD.

Solución de problemas comunes