tuemail@tusitio.com
tuemail@tusitio.com
tuemail@tusitio.com
- Ve a Páginas > Añadir nueva.
- Ponle de título: "Taller de Header".
- Haz clic en "Usar Divi Builder" y luego en "Construir desde cero".
- 2. Construcción del Prototipo (Sección y Fila) Aquí aplicamos lo que ya sabemos de nuestra zapata: Sección (Azul): En Diseño/Separación, pon el Relleno (Padding) superior e inferior en 0, al igual que el Margen;
- Ve a Contenido/Color de Fondo, busca el Icono de Insertar Contenido Dinámico, ábrelo y escoge: Color Primario -Negro
- Ve al botón Verde en el centro de la Sección, oprímelo: Inserta una fila de una sola columna. Ve a Diseño/Separación, pon el Relleno (Padding) superior e inferior en 0, al igual que el Margen.
- En la Columna vamos insertar un Grupo y en la ventana que se abre escogemos el Módulo de Menú. Con El Menú seleccionado vamos a la esquinna derecha al símbolo de + Añadir nuevo módulo o Fila y añadimos el Módulo de Imagen. Ahora tenemos una Imagen y un Menu dentro del Grupo.
- Selecciona la Imagen/Contenidoy busca la Imagen de nuestro Logo. Ve a Diseño/Alineación: escogemos Izquierda; Tamaño/en Altura De: escogemos nuestra EscalaL.
- En Capas o Layers seleccionamos el Grupo, vamos a Diseño/Diseño/Dirección de Diseño y escogemos Fila Invertida; en Justificar Contenido, escogemos Espacio Entre; y en Alinear Elementos seleccionamos Centro.
- Con el Menú seleccionado. Ve a Texto del Menú/Tipo de Fuente y oprime Mayúsculas, en Color del Texto del Menú y selecciona Color Secundario y en Tamaño del Texto del Menú escogemos nuestra Variable EscalaXXS.
- Ve a Contenido/Color de Fondo y verás que tiene fondo Blanco, escribe 0% en el encasillado a la derecha. Ahora el Fondo es Transparente.
- Selecciona la Sección y en Diseño/Espaciado/Relleno de/Superior e Inferior escogemos la VariableXXS
- En Capas escoge los: 3 Puntos al lado derecho/Guardar en la Biblioteca ponle nombre a la Sección, algo así como Header.
- Vamos a llevar este Header un poco más adelante y vamos a añadirle una Barra debajo en la que pondremo tres Grupos; cada uno con un Módulo de Icono y un Módulo de Texto. Los Grupos Anidados dan problema para seleccionar las partes, aún dentro de las Capas por lo que engañaremos el constructor.
- Selecciona la Sección y agrega una Fila de una COlumna en la que añadiremos un Grupo al que llamaremos Contenedor Principal o Grupo Padre. Al Abrir el Grupo le añadimos otro Grupo con un Módulo de Icono.En la barra tuve qhe insertar la fila con una columna y añadir un grupo. Dentro de ese Grupo -al que llamé padre- inserte otro Grupo -llamado Grupo 1- con un Modulo de Icono y uno de Texto. selecciona el Módulo de Icono y en los 3 puntos a la derecha -Más Opciones- Selecciona Añadir Elemento Debajo y escoge el Módulo de Texto. Aplica al Grupo 1 el Predestinado Grupo Espaciado 0.
- Selecciona el Icono y en Contenido/Icono buscamos el Icono de Sobre que escogeremos. Vamos a Diseño y en Color del Icono escogemos dinámicamente Secundario Claro. En Tamaño escogemos la Variable escalaXXS.
- Escoge el Módulo de Texto y escribe el Email a usar.
- Escoge el Grupo 1, ve a Diseño/Diseño y en Espaciado Horizontal escoge la Variable escalaXXS, en Dirección del Diseño escoge Fila y en Justificar Contenido escoge Centro. En los 3 Puntos a la derecha -Más Opciones- escoge Duplicar Grupo 2 veces.
- Escoge el Grupo Padre y en Diseño/Diseño escoge en Dirección del Diseño Fila y en Justificar Contenido Espacio Entre.
- Guarda la Sección en la Biblioteca. Ahora ya tienes un Header y Una Barra para usar en tu Sitios Web y lo mejjor de todo es que son completamente adaptables y personalizables. Si quieres añadir un Botón simplemente duplicas uno de los Grupo y sustituyes su contenido por un Botón y ya está, automáticamente ocupa su lugar.
- luego duplicar dos veces este grupo. Al final seleccionar el Grupo padre y aplicar el Flex.
3. Montaje de Módulos
Dentro de esa fila, añade en este orden:
- Imagen: Tu Logo (ajusta el tamaño a tu gusto).
- Menú: Selecciona tu "Menú Principal". En Diseño > Texto, usa
var(--escalaM)para el tamaño.
- Botón: Tu CTA. Usa tus variables de color (
var(--colorPrincipal)).
4. El "Empaquetado" (Guardar en Biblioteca)
Una vez que el Header se ve exactamente como quieres:
- Busca el icono de la Sección Azul (el de los tres puntos o el icono de flecha hacia abajo "Descargar/Guardar").
- Dale un nombre claro: "Header Maestro V1".
- Haz clic en "Guardar en la biblioteca". ¡Ya tenemos nuestra pieza de repuesto lista!
Fase 4: Instalación Final (Theme Builder e Importación)
Ahora vamos a decirle a WordPress que use esa pieza que acabamos de fabricar como el encabezado de toda la web.
1. Acceso al Generador de Temas
- Sal de la página y ve a Divi > Generador de temas (Theme Builder).
- En el recuadro "Plantilla predeterminada", haz clic en "Agregar encabezado global".
2. Importación desde la Biblioteca
- Selecciona "Añadir desde biblioteca".
- Busca la pestaña "Tus diseños guardados".
- Selecciona tu "Header Maestro V1".
3. Ajuste de Estructura (¡Ojo aquí!)
Al importar, Divi puede meter tu sección dentro de otra. Entra a editarlo y asegúrate de que solo quede una sección azul (la tuya). Si hay una vacía arriba, bórrala.
4. El Sello de Obra (Guardar Cambios)
- Guarda dentro del editor.
- CRÍTICO: Al salir al Theme Builder, haz clic en el botón verde "Guardar cambios" de la parte superior izquierda. Si no lo haces, el Header no aparecerá en el sitio real.
Glosario de la Fase
Socio, este método es infalible para los alumnos. Les quita el miedo a "romper" el sitio global porque trabajan en una página de prueba primero. ¿Cómo ves el lenguaje de las instrucciones? Si estás de acuerdo, ya tienes la secuencia completa para tu tutorial.
Introducción y Glosario (La Zapata).
Preparación del Terreno (Backend de WP): Crear las páginas y configurar el Menú (lo que acabamos de corregir).
Configuración del ADN (Este bloque de Escalas): Definir las variables en Divi.
Manos a la Obra (El Header): Ahora sí, entramos a diseñar con la segu