Cómo cambiar el logo en páginas internas de Divi: Guía paso a paso

Si necesitas mostrar un logotipo diferente en ciertas páginas internas de tu sitio web —por ejemplo, un logo con fondo transparente en la portada y uno con color o isotipo reducido en las páginas de servicios o contacto—, el tema Divi de Elegant Themes ofrece soluciones nativas muy sencillas sin necesidad de instalar plugins adicionales.

A continuación, aprenderás a personalizar el logo de tus páginas internas utilizando el Divi Theme Builder y mediante selecciones específicas de plantilla.

Métodos para cambiar el logotipo en páginas internas

Existen principalmente dos formas eficientes de lograr esto en Divi:

1. Uso del Divi Theme Builder (Recomendado): Permite asignar encabezados (headers) personalizados a páginas específicas o a grupos de páginas.
2. Personalización mediante CSS condicional: Ideal si solo quieres alternar la imagen del logo en una página puntual manteniendo la misma estructura de menú.

Método 1: Usar el Divi Theme Builder (Paso a paso)

El Generador de temas (Theme Builder) de Divi es la herramienta más limpia y profesional para controlar la apariencia del encabezado de forma global o condicional.

Paso 1: Acceder al Generador de temas

1. Ve al panel de administración de WordPress.
2. En el menú lateral, dirígete a Divi > Generador de temas (Theme Builder).

Paso 2: Crear una plantilla para páginas específicas

1. Haz clic en el recuadro Agregar nueva plantilla.
2. En la ventana emergente de asignación, marca las casillas de las páginas donde deseas cambiar el logo (por ejemplo: Todas las páginas, Páginas específicas, o una categoría de entradas).
3. Haz clic en Crear plantilla.

Paso 3: Diseñar el encabezado personalizado

1. Dentro de la plantilla recién creada, selecciona Agregar encabezado personalizado y haz clic en Construir encabezado personalizado.
2. Inserta una sección y añade el módulo Menú o Imagen para tu logotipo.
3. Si usas el módulo Menú:
   • Ve a la pestaña Contenido > Logo.
   • Sube la nueva imagen que deseas mostrar únicamente en estas páginas internas.
4. Guarda los cambios en el editor visual y luego haz clic en Guardar cambios en la esquina superior izquierda del Theme Builder.

Método 2: Ocultar o cambiar el logo mediante CSS en páginas específicas

Si utilizas el encabezado predeterminado del tema Divi (configurado en Divi > Opciones del tema) y quieres cambiar el logo solo en una página con ID específico, puedes usar un snippet de CSS.

Código CSS para reemplazar el logo en una página específica

Añade el siguiente código en Divi > Opciones del tema > General > CSS personalizado:

CSS

/* Reemplazar logo en una página específica por su ID */
.page-id-123 #logo {
    content: url("HTTPS://TU-SITIO.COM/WP-CONTENT/UPLOADS/NUEVO-LOGO.PNG");
    max-height: 60px; /* Ajusta la altura según tu diseño */
}

Explicación del código línea por línea:

• .page-id-123: Corresponde a la clase CSS única que WordPress asigna a cada página (reemplaza 123 por el ID real de tu página interna).
• #logo: Selector que apunta directamente a la etiqueta de imagen del logotipo predeterminado de Divi.
• content: url(...): Propiedad CSS que sustituye la fuente de la imagen original por la URL de la nueva imagen cargada en tu biblioteca de medios.
• max-height: Define el tamaño máximo para asegurar que el nuevo logotipo mantenga las proporciones adecuadas dentro del encabezado.