A estas alturas, todos nos hemos acostumbrado a Divi y su divisor de secciones incorporado. Ayudan a agregar ese toque extra a los sitios web que construimos. También sirven como una transición suave entre dos secciones diferentes, pero con Theme Builder de Divi , 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í. ¡También podrá descargar el archivo JSON de la plantilla de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue la plantilla de página divisoria de sección GRATIS
Para poner sus manos en la plantilla de página de división de sección gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
1. Vaya a Divi Theme Builder y agregue una nueva plantilla
Ir al Creador de temas Divi
Comience yendo al Divi Theme Builder .
Agregar nueva plantilla para páginas
Allí, cree una nueva plantilla haciendo clic en el ícono más.
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 crear el encabezado personalizado.
2. Crear encabezado personalizado
Ajustes de sección
Fondo degradado
Dentro del editor de plantillas, verás una sección. Abra esa sección y agréguele un fondo degradado.
- Color 1: #d13232
- Color 2: #fc6a3c
Espaciado
Agregue también un relleno superior e inferior personalizado a la sección.
- Acolchado superior: 1vw (escritorio), 2vw (tableta y teléfono)
- Acolchado inferior: 1vw (escritorio), 2vw (tableta y teléfono)
Índice Z
Y para asegurarnos de que su encabezado se mantenga al tanto de todo el contenido, aumentaremos el índice z en la configuración de visibilidad.
- Índice Z: 99999
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Retire todo el relleno superior e inferior también.
- Relleno superior: 0px
- Relleno inferior: 0px
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 individuales de código CSS al elemento principal de su fila.
|
01
02
|
display: flex;align-items: center; |
Agregar módulo de imagen a la columna 1
Cargar logotipo
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.
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
Dimensionamiento
Modifique también el ancho del módulo en diferentes tamaños de pantalla.
- Ancho: 6vw (Escritorio), 13vw (Tableta), 17vw (Teléfono)
Seleccione el menú
En la segunda columna, necesitaremos un módulo de menú. Seleccione un menú de su elección.
Eliminar color de fondo
Continúe eliminando el color de fondo del módulo.
Disposición
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
Texto del menú
A continuación, diseñe el texto del menú según corresponda:
- Fuente del menú: Oswald
- Peso de la fuente del menú: ligero
- Estilo de fuente del menú: Mayúsculas
- 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 entre letras del menú: 0.1vw
Menú desplegable
Cambie el color de la línea del menú desplegable en la configuración del menú desplegable también.
- Color de la línea del menú desplegable: #ffffff
Iconos
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
Agregar copia
¡Hasta la última columna! Allí, el único módulo que necesitaremos es un módulo de botones. Agregue alguna copia de su elección.
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación de los botones.
- Alineación de botones: Centro
Configuración de botones
Continúe diseñando 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
- Radio del borde del botón: 100px
- Espaciado entre letras de botones: 2px
- Fuente del botón: Open Sans
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
Espaciado
Y complete la configuración del módulo agregando un relleno personalizado en diferentes tamaños de pantalla.
- Acolchado superior: 0.8vw (escritorio), 1.6vw (tableta), 2.2vw (teléfono)
- Acolchado inferior: 0.8vw (escritorio), 1.6vw (tableta), 2.2vw (teléfono)
- Relleno izquierdo: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
- Relleno derecho: 1.5vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
3. Cree un cuerpo personalizado y agregue un divisor superior
Una vez que haya completado el encabezado personalizado de su plantilla, continúe y comience a crear el cuerpo personalizado.
Ajustes de sección
Divisor superior
De nuevo, notará una sección en la página. Abra esa sección y agréguele un divisor superior.
- Estilo de divisor: Buscar en la lista
- Color del divisor: #fc6a3c
- Altura del divisor: 6vw
- Repetición horizontal del divisor: 15x
- Voltear el divisor: Vertical
- Disposición de los divisores: en la parte superior del contenido de la sección
Espaciado
Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a su sección usando la siguiente estructura de columnas:
Dimensionamiento
Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de contenido de publicación a la columna
Ahora, para que se muestre 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 misma usando Divi. Si está agregando esta transición a una página de producto, por ejemplo, una plantilla donde se involucra contenido dinámico, se lleva a cabo 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 de su encabezado global.
3. Guardar los cambios del constructor 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.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo combinar el encabezado y el cuerpo de su plantilla usando los divisores de sección de Divi y el Módulo de contenido de publicación. La transición del divisor se aplica inmediatamente a todas sus páginas. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.