Los aspectos de pantalla divididos son una excelente manera de agregar el diseño de su sitio de la Divic, que es bellamente equilibrada y poco convencional. Con las nuevas opciones de posición de división, podemos crear un diseño de apariencia de pantalla dividida utilizando dos secciones de la Divica adyacentes. Esto abre la puerta para construir modelos aún más únicos en la pantalla divididos con Divi Builder. En este tutorial, exploraremos algunas características de diseño únicas mientras creamos un aspecto completo en la pantalla dividido con conmutación única en la división. Vamos a empezar. Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial.
Interruptor abierto

Conmutado cerrado

Móvil


Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Parte 1: Creación de la apariencia de la pantalla dividida por dos secciones para este diseño, introduciremos una nueva técnica que coloca dos secciones adyacentes entre sí para crear el diseño de la pantalla dividida. Para comenzar, agregue una fila con una columna a la sección predeterminada. Esto comenzará el diseño de nuestra primera sección.
Configuración de la Sección 1 Para esta primera de las dos secciones, comencemos agregando la siguiente configuración de diseño: Antecedentes

Agregar una imagen de fondo
Fondo degradado izquierdo: #fffff
Color de fondo degradado izquierdo: RGBA (255.255.255.0.45)
El tamaño y el espacio actualizan el tamaño y el espacio, de modo que la sección ocupa 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)
Forro: 0 px arriba, 0 px abajo
Divisor superior

El estilo del divisor superior: ver la captura de pantalla
Color separador más alto: # 333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
Reparación horizontal del separador superior: 0.5x (escritorio), 1x (tableta y teléfono)
Disposición del divisor superior: bajo el contenido de la sección
Separador inferior
Estilo del divisor inferior: ver captura de pantalla

Color del divisor inferior: # 02C39A
Altura del divisor inferior: 50VH (escritorio), 30 VH (tableta y teléfono)
Repetición horizontal del divisor inferior: 0.5x (escritorio), 1x (tableta y teléfono)
Disposición del divisor inferior: Contenido en la sección
Sección 2 Duplicada Sección 1 Para crear la sección adyacente que ocupará el lado derecho del aspecto de pantalla dividido, Copie la Sección 1.
Luego actualice la configuración de la siguiente manera: Posición

Posición: Absoluto (escritorio), relativo (tableta y teléfono)

Ubicación: a la derecha a la derecha
IND ÍNDICE: 10
antecedentes
Color de fondo: ninguno / blanco

Las principales actualizaciones del divisor
El estilo del divisor superior: ver la captura de pantalla

Mayor color del separador: # 02C39A
Reparación horizontal del separador superior: 1x
Flip Divisor superior: vertical
El divisor debe estar perfectamente alineado con el encabezado superior adyacente en la Sección 1.
Separador inferior
Estilo del divisor inferior: ver captura de pantalla

Color del divisor inferior: # f0f3bd
Repetición horizontal del compartimento inferior: 1x
Flip divisor inferior: vertical
Parte 2: Título y menú de la Sección 1 Ahora que los aspectos de dos secciones están listos, podemos comenzar a agregar el contenido a cada una de las secciones.
Creando el título para comenzar, crearemos un gran título en la sección izquierda. Configuración de fila Antes de agregar un módulo de texto, debemos actualizar la configuración de la fila para la fila en la Sección 1 de la siguiente manera: El ancho de la canaleta: 1

Ancho: 100%
Ancho máximo: 100%
Revestimiento: 0 px arriba, 0 px abajo, 10% correcto
Posición: Absoluto (escritorio), relativo (tableta y teléfono)
Ubicación: centro izquierdo
Modo de texto Una vez que la configuración de la fila está en su lugar, el giro debe alinearse verticalmente dentro de la sección. Luego agregue un nuevo módulo de texto en una fila.
Contenido de texto Abra la configuración del módulo de texto y actualice el siguiente contenido:

div
Web
Diseño

Diseño de texto y luego actualice la configuración de diseño de texto de la siguiente manera:

Fuente del título: Poppins
Título Fuente de peso: Bold

Alineación del texto del encabezado: derecho
Encabezado de texto de tamaño: 10 VW
Altura de la línea de dirección: 1.2em
Revestimiento: 5% a la izquierda
Creando el menú para este aspecto, porque tenemos dos secciones adyacentes, tenemos la oportunidad de agregar 6 columnas a una o ambas secciones. Esto es genial para crear un hermoso menú de iconos en la parte inferior de la sección. Aquí está cómo hacer esto …
Agregue una nueva línea para crear el menú inferior, agregue una nueva línea con una columna debajo de la fila en la Sección 1. Inicialmente agregamos una columna, porque duplicaremos la columna para crear las seis columnas.
Configuración de fila y luego actualice la siguiente configuración ordinaria:

El ancho de la canaleta: 1
Ancho: 100%


Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Posición: Absoluto (escritorio), relativo (tableta y teléfono)
Ubicación: en el lado inferior izquierdo
IND ÍNDICE: 3 PROBAJO ENTONCES, agregue un módulo de propaganda a la nueva fila.
El contenido de la propaganda luego actualice el contenido de la propaganda de la siguiente manera:
Título: Negocio
Icono: edificios

Estilo de blurb y luego actualice la configuración de diseño de la siguiente manera:

Icono de color: # 333333
Icono de tamaño de fuente: 40 PX
Alineación de texto: Centro

Título Tamaño del texto: 12 PX
Luego agregue el siguiente CSS personalizado en la imagen del fondo del margen de la propaganda: 10px;
Columna duplicada Ahora que tenemos el icono diseñado en la primera columna, podemos acelerar la creación y el diseño para los otros 5 íconos, duplicando toda la columna 5 veces.
Actualice el contenido de las borrachas una vez que se creen las 6 columnas / iconos, regrese y actualice el título, el icono y la URL para cada propaganda.
Parte 3 La Sección 2 ahora cambia, después de que se complete la Sección 1, podemos comenzar a agregar los interruptores a la sección derecha de nuestra pantalla dividida. En total habrá tres interruptores que corresponden a las grandes palabras en cada título de la izquierda. Cada uno de los interruptores recibirá una posición absoluta personalizada en el escritorio, que los mantendrá en posición. Configuración de fila Antes de comenzar a agregar los módulos de conmutación, debemos optimizar el tamaño y el espacio. Abra la configuración de la fila para la fila en la sección correcta y actualice lo siguiente:
El ancho de la canaleta: 1

Ancho: 100%

Ancho máximo: 100% (escritorio), ninguno (tableta y teléfono)

Altura: 100%
La 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 los siguientes CSS personalizados al elemento principal para la columna: Altura: 100%; el módulo de conmutación hacia arriba con la altura de la columna en la posición, agregue el primer módulo de conmutación en una fila.
Cambie el contenido y luego actualice el contenido de conmutación con el título “Div” y pegue en el siguiente contenido del cuerpo: su contenido va aquí. Editar o eliminar este texto en línea o en la configuración del contenido del módulo. Tu contenido va aquí.
| Aprenda más>
Actualización de diseño de diseño del diseño de conmutación de la siguiente manera:

Icono de color: # 333333

Icono de tamaño de fuente: 40 PX

Abra para cambiar el color de fondo: transparente
Color del sótano de cambio oscuro: transparente

Texto en color ABIERTO Título: # 333333
Color de texto del título: # 333333
Título de la fuente: Poppins
Fuente de peso del título: Ultra Light
Título Tamaño del texto: 40 PX
El color del texto del cuerpo: # 333333
Enlace de fuente de peso: # 333333
El peso de la fuente: en negrita
Estilo de fuente de fuente: TT
Color de texto de enlace: # 333333
Espaciado de letras de enlace: 3 PX (escritorio), 5 px (pase)
Cambiar el tamaño y la posición
Ancho: 50% (escritorio), 80% (tableta y teléfono)
Ancho máximo: 400 PX
Ancho fronterizo: 0 PX
Cambie el icono CSS personalizado: Izquierda: -60px;

Posición: Absoluto (escritorio), relativo (tableta y teléfono)
Brecha vertical: 22%
Brecha horizontal: 50%
IND ÍNDICE: 2
El CSS personalizado agregado al módulo de conmutación coloca el icono de conmutación al tamaño izquierdo del interruptor. Y la configuración de posición coloca el interruptor en una posición absoluta utilizando la unidad de porcentaje de longitud que se escalará con el ancho del navegador. El módulo de conmutación inferior el interruptor doble superior para crear el interruptor inferior, duplicar el interruptor recién creado. Acture la posición y luego abra la configuración de conmutación duplicada usando el cuadro de capa y actualice el espacio de posición de la siguiente manera:
Compensación vertical: 70%
El módulo de conmutación central se duplica desde abajo para crear el interruptor central, duplique el interruptor inferior.
Actualice el puesto y luego actualice lo siguiente:
Ubicación: centro izquierdo

Brecha horizontal: 19 PX

Actualizar el tamaño
Ancho: 95%

Ancho máximo: 500 PX

CSS personalizado Para una función de diseño opcional, podemos agregar un fragmento CSS personalizado al elemento principal para alinear el texto a la derecha del título. Para esto, pegue los siguientes CSS en el elemento principal: Display: Flex;
Alinine-Ritams: Centro;
Las líneas divisor ahora, cuando nuestros interruptores están en su lugar, podemos agregar algunas líneas divisoras para conectar los interruptores superiores e inferiores con la palabra apropiada en la sección izquierda. El módulo divisor superior Para crear la línea de separación superior, agregue un nuevo módulo de división debajo del interruptor superior.

Divide el diseño y luego actualice la configuración de diseño del divisor de la siguiente manera:
Color de línea: # 333333
Posición de línea: enfocado verticalmente

Peso del divisor: 2 PX
Ancho: 50%

Transformar el eje y: 29 px

Transformar el eje x: -12px
Estilo de animación: diapositiva
Dirección de Animación: Animación correcta: 2000 MS
Intensidad de animación: 10%
Opacidad de animación para comenzar: 100%
La visibilidad y la posición del divisor ahora, todo lo que tenemos que hacer es ocultar el divisor en el móvil y colocarlo para alinearse con el interruptor superior.
Desactivar: Teléfono y escritorio
Posición: Absoluto
Brecha vertical: 22%
IND ÍNDICE: 1
Modo divisor inferior El módulo duplicado duplicado para crear el divisor inferior, copie el módulo divisor superior.
Actualice la posición y luego actualice la brecha de posición para alinearse con el interruptor inferior:

Brecha vertical: 70%
Resultado final después de haber terminado verificar el resultado final en la página en vivo. Interruptor abierto
Conmutado cerrado
Móvil
Pensamientos finales Este aspecto completo de la pantalla dividida presenta algunas técnicas de diseño únicas, que serán útiles para muchos proyectos en el futuro. Las secciones duales ofrecen innumerables combinaciones de columnas y modelos de secciones. Y la capacidad de colocar el cambio será útil para la colocación precisa de información importante. ¡Espero que ayude! Espero tener noticias suyas en los comentarios. ¡Suerte!