Por ahora, todos nos hemos acostumbrado al divisor de sección incorporado de Divi. Ayudan a agregar ese toque extra a los sitios web que creamos. También sirven como una transición suave entre dos secciones diferentes, pero con Divi’s Theme Builder, el enfoque para crear esa transición es ligeramente diferente. En esta publicación, lo guiaremos a través de los pasos que debe seguir para llegar allí. 

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

cuerpo del encabezado de mezcla

Móvil

cuerpo del encabezado de mezcla

1. Vaya a Divi Theme Builder y agregue una nueva plantilla

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder.

cuerpo del encabezado de mezcla

Agregar nueva plantilla para páginas

Allí, cree una nueva plantilla haciendo clic en el ícono más.

cuerpo del encabezado de mezcla

Seleccione ‘Todas las páginas’ si desea que el efecto de fusión se aplique en todas sus páginas. También puede hacer que el mismo efecto funcione en otros tipos de plantillas, pero tendrá que incluir por separado el divisor de la sección superior en cada una de sus plantillas. Una vez que haya creado una nueva plantilla, comience a construir el encabezado personalizado.

cuerpo del encabezado de mezcla

2. Crear encabezado personalizado

Configuraciones de sección

Fondo degradado

Dentro del editor de plantillas, verás una sección. Abra esa sección y agregue un fondo degradado.

  • Color 1: # d13232
  • Color 2: # fc6a3c

cuerpo del encabezado de mezcla

Espaciado

Agregue también un relleno superior e inferior personalizado a la sección.

  • Relleno superior: 1vw (escritorio), 2vw (tableta y teléfono)
  • Relleno inferior: 1vw (escritorio), 2vw (tableta y teléfono)

cuerpo del encabezado de mezcla

Índice Z

Y para asegurarnos de que su encabezado se mantenga por encima de todo el contenido, aumentaremos el índice z en la configuración de visibilidad.

  • Índice Z: 99999

cuerpo del encabezado de mezcla

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a su sección utilizando la siguiente estructura de columnas:

cuerpo del encabezado de mezcla

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

cuerpo del encabezado de mezcla

Espaciado

Retire también todo el relleno superior e inferior.

  • Relleno superior: 0px
  • Relleno inferior: 0px

cuerpo del encabezado de mezcla

Elemento principal

Por último, pero no menos importante, centre el contenido de su columna y permita que las columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños agregando dos líneas simples de código CSS al elemento principal de su fila.

01
02
display: flex;
align-items: center;

cuerpo del encabezado de mezcla

Agregar módulo de imagen a la columna 1

Subir logo

Una vez que haya completado todas las configuraciones de sección y fila, es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue un logotipo con un fondo transparente.

cuerpo del encabezado de mezcla

Alineación

Luego, vaya a la pestaña de diseño del módulo y cambie la alineación de la imagen.

  • Alineación de imagen: centro

cuerpo del encabezado de mezcla

Dimensionamiento

Modifique también el ancho del módulo en diferentes tamaños de pantalla.

  • Ancho: 6vw (escritorio), 13vw (tableta), 17vw (teléfono)

cuerpo del encabezado de mezcla

Agregar módulo de menú a la columna 2

Seleccione el menú

En la segunda columna, necesitaremos un módulo de menú. Seleccione un menú de su elección.

cuerpo del encabezado de mezcla

Eliminar color de fondo

Continúe eliminando el color de fondo del módulo.

cuerpo del encabezado de mezcla

Diseño

Pase a la pestaña de diseño y cambie el diseño.

  • Estilo: alineado a la izquierda
  • Dirección del menú desplegable: hacia abajo

cuerpo del encabezado de mezcla

Texto del menú

Luego, diseñe el texto del menú en consecuencia:

  • Fuente del menú: Oswald
  • Peso de fuente del menú: ligero
  • Estilo de fuente del menú: mayúscula
  • Color del texto del menú: #ffffff (escritorio), # 202332 (tableta y teléfono)
  • Tamaño del texto del menú: 0.8vw (escritorio), 2vw (tableta), 2.5vw (teléfono)
  • Espaciado de letras del menú: 0.1vw

cuerpo del encabezado de mezcla

Menú desplegable

Cambie el color de línea del menú desplegable en la configuración del menú desplegable también.

  • Color de línea del menú desplegable: #ffffff

cuerpo del encabezado de mezcla

Íconos

Y complete la configuración del módulo utilizando un color de icono de menú de hamburguesa blanco.

  • Color del icono del menú de hamburguesas: #ffffff

cuerpo del encabezado de mezcla

Agregar módulo de botón a la columna 3

Agregar copia

¡A la última columna! Allí, el único módulo que necesitaremos es un Módulo de botones. Agregue una copia de su elección.

cuerpo del encabezado de mezcla

Alineación

Pase a la pestaña de diseño del módulo y cambie la alineación del botón.

  • Alineación de botones: centro

cuerpo del encabezado de mezcla

Configuraciones de botones

Continúe peinando el botón en la configuración del botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.6vw (escritorio), 1vw (tableta), 1.5vw (teléfono)
  • Color del texto del botón: # 000000
  • Color de fondo del botón: #FFFFFF
  • Ancho del borde del botón: 0px

cuerpo del encabezado de mezcla

  • Radio del borde del botón: 100 px
  • Espacio entre letras de botones: 2px
  • Fuente del botón: Abrir sin
  • Peso de fuente del botón: negrita
  • Estilo de fuente del botón: mayúscula

cuerpo del encabezado de mezcla

Espaciado

Y complete la configuración del módulo agregando un relleno personalizado en diferentes tamaños de pantalla.

  • Relleno superior: 0.8vw (escritorio), 1.6vw (tableta), 2.2vw (teléfono)
  • Acolchado inferior: 0.8vw (escritorio), 1.6vw (tableta), 2.2vw (teléfono)
  • Acolchado izquierdo: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
  • Relleno derecho: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)

cuerpo del encabezado de mezcla

3. Crea un cuerpo personalizado y agrega un divisor superior

Una vez que haya completado el encabezado personalizado de su plantilla, continúe y comience a construir el cuerpo personalizado.

cuerpo del encabezado de mezcla

Configuraciones de sección

Divisor superior

Notarás, nuevamente, una sección en la página. Abra esa sección y agregue un divisor superior.

  • Estilo divisor: Buscar en la lista
  • Color del divisor: # fc6a3c
  • Altura del divisor: 6vw
  • Divisor Repetición Horizontal: 15x
  • Divisor Flip: Vertical
  • Disposición del divisor: encima del contenido de la sección

cuerpo del encabezado de mezcla

Espaciado

Pase a la pestaña de diseño de la sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

cuerpo del encabezado de mezcla

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a su sección utilizando la siguiente estructura de columnas:

cuerpo del encabezado de mezcla

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

cuerpo del encabezado de mezcla

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

cuerpo del encabezado de mezcla

Agregar módulo de contenido de publicación a columna

Ahora, para que aparezca todo el contenido de su página, deberá agregar un Módulo de contenido de publicación a su fila. Este módulo representa el diseño que ha creado dentro de la página usando Divi. Si está agregando esta transición a una página de producto, por ejemplo, una plantilla donde está involucrado contenido dinámico, se produce un enfoque diferente. Lo único importante que debe recordar es que deberá agregar un divisor superior a la primera sección del cuerpo de su plantilla. Asegúrese de que el color de su divisor sea el mismo que el color utilizado para el fondo del encabezado global.

cuerpo del encabezado de mezcla

3. Guardar los cambios del generador y ver el resultado

Una vez que haya completado el cuerpo de su plantilla, puede guardar los cambios y ver el resultado en su sitio web.

cuerpo del encabezado de mezcla

cuerpo del encabezado de mezcla

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!