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

Los diseños de pantalla dividida son una excelente manera de agregar un diseño a su sitio web Divi que sea bellamente equilibrado y poco convencional. Con las nuevas opciones de posición de Divi, podemos crear un diseño de diseño de pantalla dividida utilizando dos secciones Divi adyacentes. Esto abre la puerta para crear diseños de pantalla dividida aún más exclusivos utilizando Divi Builder. En este tutorial, exploraremos algunas características de diseño únicas mientras creamos un diseño de pantalla dividida completa con conmutadores únicos en Divi.

Empecemos.

Vistazo

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

Alterna abierta

Alterna cerrado

Móvil

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá 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 introducir 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.

Sección 1 Configuración

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

Fondo

• Agregar imagen de fondo
• Color de fondo degradado a la izquierda: #ffffff
• Color de fondo degradado a la izquierda: 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: 900px (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: contenido de la sección inferior

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: contenido de la sección inferior

Sección 2

Sección duplicada 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
• Volteo del 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
• Volteo del divisor inferior: vertical

Parte 2: Título y menú de la sección 1

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

Creando el Título

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

Configuración de filas

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

• Ancho de la canaleta: 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:

<h1>Divi <br />Web <br />Design</h1>

Diseño de texto

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

• Fuente de encabezado: 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 rumbo: 1.2em
• Acolchado: 5% a la izquierda

Creando 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.

He aquí cómo hacerlo ...

Agregar nueva fila

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

Configuración de filas

Luego actualice la siguiente configuración de fila:

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px superior, 0px inferior
• Posición: Absoluto (escritorio), Relativo (tableta y teléfono)
• Ubicación: Abajo a la izquierda
• Índice Z: 3

Módulo de propaganda

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

Contenido publicitario

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

• Título: Negocios
• Icono: Edificios

Estilo Blurb

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

margin-bottom: 10px;

Columna duplicada

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

Actualizar contenido para desenfoques

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 Conmutadores

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 conmutadores 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 filas

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 de la canaleta: 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 con la columna. Para hacer esto, agregue el siguiente CSS personalizado al elemento principal de la columna:

height: 100%;

Módulo de palanca 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 alternancia con el título "Divi" y pegue el siguiente contenido del cuerpo:

Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here.

<a href="#">| Learn More ></a>

Alternar diseño

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

• Color del icono: # 333333
• Tamaño de fuente del icono: 40px
• Abrir alternar color de fondo: transparente
• Color de fondo de alternancia 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 texto del cuerpo: # 333333
• Peso de la fuente del enlace: # 333333
• Peso de la fuente del enlace: negrita
• Estilo de fuente de enlace: TT
• Color del texto del enlace: # 333333
• Espaciado de 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
• Alternar icono CSS personalizado:

  left:-60px;

• Posición: Absoluto (escritorio), Relativo (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 interruptor en una posición absoluta usando 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 alternancia duplicada usando el cuadro de capas y actualice el desplazamiento de posición de la siguiente manera:

• desplazamiento vertical: 70%

Módulo de palanca medio

Alternar parte inferior duplicada

Para crear la palanca del medio, duplique la palanca de abajo.

Actualizar posición

Luego actualice lo siguiente:

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

Actualizar tamaño

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

CSS personalizado

Para una 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:

display:flex;
align-items:center;

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 divisor

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

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

Visibilidad y posición del divisor

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

• Desactivar en: teléfono y escritorio
• Posición: Absoluto
• 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, mira el resultado final en la página en vivo.

Alterna abierta

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 dobles ofrecen innumerables combinaciones de columnas y diseños de divisores de sección. Y la capacidad de colocar conmutadores será muy útil para la ubicación precisa de información importante. ¡Espero que ayude!

Espero tener noticias tuyas en los comentarios.

¡Salud!