Cómo crear un diseño de pantalla dividida completa con alternancias únicas en Divi

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Alterna abierto

Alterna cerrado

Móvil

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo 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.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Crear el diseño de pantalla dividida con dos secciones

Para este diseño, vamos a presentar una nueva técnica que coloca dos secciones Divi adyacentes entre sí para crear el diseño de pantalla dividida. Para comenzar, agregue una fila de una columna a la sección predeterminada. Esto dará inicio al diseño de nuestra primera sección.

Configuración de la sección 1

Para esta primera de dos secciones, comencemos agregando las siguientes configuraciones de diseño:

Fondo

• Agregar imagen de fondo
• Fondo degradado Color izquierdo: #ffffff
• Fondo degradado Color izquierdo: rgba(255,255,255,0.45)

Tamaño y espaciado

Luego actualice el tamaño y el espaciado para que la sección ocupe el 50 % del ancho del navegador y el 100 % de la altura del navegador.

• Ancho: 50% (escritorio), 100% (tableta y teléfono)
• Altura mínima: 900 px (escritorio), ninguno (tableta y teléfono)
• Altura: 100vh (escritorio), automático (tableta y teléfono)
• Relleno: 0px arriba, 0px abajo

Divisor superior

•  Estilo de divisor superior: ver captura de pantalla
• Color del divisor superior: #333333
• Altura del divisor superior: 50vh (escritorio), 10vh (tableta y teléfono)
• Repetición horizontal del divisor superior: 0,5x (escritorio), 1x (tableta y teléfono)
• Disposición del divisor superior: debajo del contenido de la sección

Divisor inferior

• Estilo de divisor inferior: ver captura de pantalla
• Color del divisor inferior: #02c39a
• Altura del divisor inferior: 50vh (escritorio), 30vh (tableta y teléfono)
• Repetición horizontal del divisor inferior: 0,5x (escritorio), 1x (tableta y teléfono)
• Disposición del divisor inferior: Debajo del contenido de la sección

Sección 2

Duplicar Sección 1

Para crear la sección adyacente que ocupará el lado derecho del diseño de pantalla dividida, duplique la sección 1.

Luego actualice la configuración de la siguiente manera:

Posición

• Posición: Absoluta (escritorio), relativa (tableta y teléfono)
• Ubicación: arriba a la derecha
• Índice Z: 10

Fondo

• Color de fondo: ninguno/blanco

Principales actualizaciones de divisores

• Estilo de divisor superior: ver captura de pantalla
• Color del divisor superior: #02c39a
• Repetición horizontal del divisor superior: 1x
• Voltear el divisor superior: Vertical

El divisor debe alinearse perfectamente con el encabezado superior adyacente en la sección 1.

Divisor inferior

• Estilo de divisor inferior: ver captura de pantalla
• Color del divisor inferior: #f0f3bd
• Repetición horizontal del divisor inferior: 1x
• Voltear el divisor inferior: Vertical

Parte 2: Sección 1 Título y Menú

Ahora que los diseños de dos secciones están listos, podemos comenzar a agregar el contenido a cada una de las secciones.

Crear el título

Para comenzar, crearemos un título grande en la sección izquierda.

Configuración de fila

Antes de agregar un módulo de texto, debemos actualizar la configuración de fila para la fila en la sección 1 de la siguiente manera:

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo, 10% a la derecha
• Posición: Absoluta (escritorio), relativa (tableta y teléfono)
• Ubicación: centro izquierda

Módulo de texto

Una vez que la configuración de la fila esté en su lugar, la fila debe alinearse verticalmente dentro de la sección. A continuación, agregue un nuevo módulo de texto a la fila.

Contenido del texto

Abra la configuración del módulo de texto y actualice el siguiente contenido:

Diseño de texto

Luego actualice la configuración de diseño de texto de la siguiente manera:

• Fuente del título: Poppins
• Peso de la fuente del encabezado: Negrita
• Alineación del texto del encabezado: Derecha
• Tamaño del texto del encabezado: 10vw
• Altura de la línea de encabezado: 1,2 em
• Relleno: 5% Izquierda

Crear el menú

Para este diseño, dado que tenemos dos secciones adyacentes, tenemos la oportunidad de agregar un diseño de 6 columnas a una o ambas secciones. Esto es genial para crear un bonito menú de iconos en la parte inferior de la sección.

Así es como se hace eso…

Agregar nueva fila

Para crear el menú inferior, agregue una nueva fila de una columna debajo de la fila en la sección 1. Estamos agregando un diseño de una columna inicialmente porque duplicaremos la columna más adelante para crear las seis columnas.

Configuración de fila

Luego actualice la siguiente configuración de fila:

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo
• Posición: Absoluta (escritorio), Relativa (tableta y teléfono)
• Ubicación: abajo a la izquierda
• Índice Z: 3

Módulo de publicidad

A continuación, agregue un módulo de propaganda a la nueva fila.

Contenido de Blurb

Luego actualice el contenido de la propaganda de la siguiente manera:

• Título: Negocios
• Icono: Edificios

Estilo de publicidad

Luego actualice la configuración de diseño de la siguiente manera:

• Color del icono: #333333
• Tamaño de fuente del icono: 40px
• Alineación de texto: Centro
• Tamaño del texto del título: 12px

Luego agregue el siguiente CSS personalizado a la imagen de Blurb

Columna duplicada

Ahora que tenemos nuestro ícono diseñado en la columna uno, podemos acelerar la creación y el diseño de los otros 5 íconos duplicando la columna completa 5 veces.

Actualizar contenido para Blurbs

Una vez que se hayan creado las 6 columnas/íconos, regrese y actualice el título, el ícono y la URL para cada propaganda.

Parte 3 Sección 2 Alterna

Ahora que la sección 1 está completa, podemos comenzar a agregar los conmutadores a la sección derecha de nuestro diseño de pantalla dividida. Habrá un total de tres alternancias que corresponden a las palabras grandes en cada título de la izquierda. A cada uno de los conmutadores se le asignará una posición absoluta personalizada en el escritorio que los mantendrá en su lugar.

Configuración de fila

Antes de comenzar a agregar los módulos de alternancia, debemos optimizar el tamaño y el espaciado de la fila. Abra la configuración de fila para la fila en la sección derecha y actualice lo siguiente:

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100 % (escritorio), ninguno (tableta y teléfono)
• Altura: 100%

Altura de la columna

Ahora que la fila tiene una altura igual a la altura de la sección, debemos hacer lo mismo para la columna. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal de la columna:

Módulo de alternancia superior

Con la altura de la columna en su lugar, agreguemos el primer módulo de alternancia a la fila.

Alternar contenido

Luego actualice el contenido de alternar con el título «Divi» y pegue el siguiente contenido del cuerpo:

Alternar diseño

Actualice el diseño de palanca de la siguiente manera:

• Color del icono: #333333
• Tamaño de fuente del icono: 40px
• Color de fondo de alternancia abierta: transparente
• Color de fondo de palanca cerrada: transparente
• Color del texto del título abierto: #333333
• Color del texto del título: #333333
• Fuente del título: Poppins
• Peso de la fuente del título: ultraligero
• Tamaño del texto del título: 40px
• Color del cuerpo del texto: #333333
• Peso de fuente del enlace: #333333
• Peso de la fuente del enlace: Negrita
• Enlace Estilo de fuente: TT
• Color del texto del enlace: #333333
• Espaciado entre letras de enlace: 3px (escritorio), 5px (desplazamiento)

Alternar tamaño y posición

• Ancho: 50% (escritorio), 80% (tableta y teléfono)
• Ancho máximo: 400px
• Ancho del borde: 0px
• Icono de alternar CSS personalizado:
  

  01	left:-60px;

•  Posición: Absoluta (escritorio), Relativa (tableta y teléfono)
• Desplazamiento vertical: 22 %
• Desplazamiento Horizontal: 50%
• Índice Z: 2

El CSS personalizado agregado al módulo de alternancia coloca el icono de alternancia en el tamaño izquierdo de la alternancia. Y la configuración de posición coloca el conmutador en una posición absoluta utilizando la unidad de longitud porcentual que se escalará con el ancho del navegador.

Módulo de palanca inferior

Alternar superior duplicado

Para crear la palanca inferior, duplique la palanca que acaba de crear.

Actualizar Posición

Luego abra la configuración de alternar duplicados usando el cuadro de capas y actualice el desplazamiento de posición de la siguiente manera:

• desplazamiento vertical: 70%

Módulo de palanca central

Alternar fondo duplicado

Para crear la palanca central, duplique la palanca inferior.

Actualizar Posición

Luego actualice lo siguiente:

• Ubicación: Centro Izquierdo
• Desplazamiento horizontal: 19px

Tamaño de actualización

• Ancho: 95%
• Ancho máximo: 500px

CSS personalizado

Como característica de diseño opcional, podemos agregar un fragmento de CSS personalizado al elemento principal para alinear el texto a la derecha del título.

Para hacer esto, pegue el siguiente CSS en el elemento principal:

Líneas divisorias

Ahora que nuestros conmutadores están en su lugar, podemos agregar algunas líneas divisorias para conectar los conmutadores superior e inferior con la palabra correspondiente en la sección izquierda.

Módulo divisor superior

Para crear la línea divisoria superior, agregue un nuevo módulo divisor debajo de la palanca superior.

Diseño de divisores

Luego actualice la configuración del diseño del divisor de la siguiente manera:

• Color de línea: #333333
• Posición de línea: centrado verticalmente
• Peso del divisor: 2px
• Ancho: 50%
• Transformar Traducir Eje Y: 29px
• Transformar Traducir Eje X: -12px
• Estilo de animación: Diapositiva
• Dirección de animación: Derecha
• Duración de la animación: 2000ms
• Intensidad de animación: 10%
• Opacidad inicial de animación: 100%

Visibilidad y posición del divisor

Ahora, todo lo que tenemos que hacer es ocultar el divisor en el dispositivo móvil y colocarlo de modo que se alinee con la palanca superior.

• Deshabilitar en: teléfono y escritorio
• Posición: Absoluta
• Desplazamiento vertical: 22 %
• Índice Z: 1

Módulo divisor inferior

Módulo divisor superior duplicado

Para crear el divisor inferior, duplique el módulo divisor superior.

Actualizar Posición

Luego actualice el desplazamiento de posición para alinearlo con la palanca inferior:

• Desplazamiento vertical: 70 %

Resultado final

Una vez hecho esto, consulte el resultado final en la página en vivo.

Alterna abierto

Alterna cerrado

Móvil

Pensamientos finales

Este diseño de pantalla dividida completa presenta algunas técnicas de diseño únicas que serán útiles para muchos diseños en el futuro. Las secciones duales ofrecen innumerables combinaciones de columnas y diseños de divisores de secciones. Y la capacidad de colocar conmutadores absolutamente será útil para la ubicación precisa de información importante. ¡Espero que ayude!

Espero escuchar de usted en los comentarios.

¡Salud!