¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear un diseño de página dividida a pantalla completa con Divi

Jun 1, 2020 | Tutoriales para Divi

Los diseños de pantalla dividida son una excelente manera de agregar diseño a su sitio web Divi que es maravillosamente 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 construir diseños de pantalla dividida aún más únicos con 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.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

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

Palancas abiertas

diseño de pantalla dividida completa con conmutadores personalizados

Palancas cerradas

diseño de pantalla dividida completa con conmutadores personalizados

Móvil

diseño de pantalla dividida completa con conmutadores personalizados

diseño de pantalla dividida completa con conmutadores personalizados

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  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 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.

diseño de pantalla dividida completa con conmutadores personalizados

Configuración de la Sección 1

Para esta primera de dos secciones, comencemos agregando la siguiente configuración de diseño:

Antecedentes

  • Añadir imagen de fondo
  • Color de fondo izquierdo del degradado: #ffffff
  • Color de fondo izquierdo del degradado: rgba (255,255,255,0.45)

diseño de pantalla dividida completa con conmutadores personalizados

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)
  • Acolchado: 0px arriba, 0px abajo

diseño de pantalla dividida completa con conmutadores personalizados

Divisor superior

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

diseño de pantalla dividida completa con conmutadores personalizados

Divisor inferior

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

diseño de pantalla dividida completa con conmutadores personalizados

Sección 2

Duplicar la 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.

diseño de pantalla dividida completa con conmutadores personalizados

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

diseño de pantalla dividida completa con conmutadores personalizados

Antecedentes

  • Color de fondo: ninguno / blanco

diseño de pantalla dividida completa con conmutadores personalizados

Top Divider Updates

  • Estilo divisor superior: ver captura de pantalla
  • Color del divisor superior: # 02c39a
  • Repetidor horizontal del divisor superior: 1x
  • Tapa divisoria superior: vertical

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

diseño de pantalla dividida completa con conmutadores personalizados

Divisor inferior

  • Estilo del divisor inferior: ver captura de pantalla
  • Color del divisor inferior: # f0f3bd
  • Repetidor horizontal del divisor inferior: 1x
  • Divider Bottom Flip: Vertical

diseño de pantalla dividida completa con conmutadores personalizados

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 la fila en la sección 1 de la siguiente manera:

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%
  • Relleno: 0px arriba, 0px abajo, 10% a la derecha
  • Posición: absoluta (escritorio), relativa (tableta y teléfono)
  • Ubicación: centro izquierda

diseño de pantalla dividida completa con conmutadores personalizados

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.

diseño de pantalla dividida completa con conmutadores personalizados

Contenido del texto

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

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

diseño de pantalla dividida completa con conmutadores personalizados

Diseño de texto

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

  • Fuente del encabezado: Poppins
  • Peso de la fuente del encabezado: negrita
  • Encabezado Alineación de texto: derecha
  • Tamaño del texto del encabezado: 10vw
  • Altura de la línea de rumbo: 1.2em
  • Acolchado: 5% restante

diseño de pantalla dividida completa con conmutadores personalizados

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

diseño de pantalla dividida completa con conmutadores personalizados

Configuración de fila

Luego actualice la siguiente configuración de fila:

  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%
  • Relleno: 0px arriba, 0px abajo
  • Posición: absoluta (escritorio), relativa (tableta y teléfono)
  • Ubicación: abajo a la izquierda
  • Índice Z: 3

diseño de pantalla dividida completa con conmutadores personalizados

Módulo de publicidad

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

diseño de pantalla dividida completa con conmutadores personalizados

Contenido publicitario

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

  • Título: Negocios
  • Icono: Edificios

diseño de pantalla dividida completa con conmutadores personalizados

Blurb Styling

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

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

Luego agregue el siguiente CSS personalizado a la imagen de Blurb

01
margin-bottom: 10px;

diseño de pantalla dividida completa con conmutadores personalizados

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.

diseño de pantalla dividida completa con conmutadores personalizados

Actualizar contenido para Blurbs

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

diseño de pantalla dividida completa con conmutadores personalizados

Parte 3 Sección 2 Toggles

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. Cada uno de los conmutadores tendrá 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 alternar, necesitamos 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 canal: 1
  • Ancho: 100%
  • Ancho máximo: 100% (escritorio), ninguno (tableta y teléfono)
  • Altura: 100%

diseño de pantalla dividida completa con conmutadores personalizados

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:

01
height: 100%;

diseño de pantalla dividida completa con conmutadores personalizados

Módulo de alternancia superior

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

diseño de pantalla dividida completa con conmutadores personalizados

Alternar contenido

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

01
02
03
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>

diseño de pantalla dividida completa con conmutadores personalizados

Toggle Design

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

  • Color del icono: # 333333
  • Tamaño de fuente del icono: 40 px
  • Color de fondo de alternancia abierta: transparente
  • Color de fondo de alternar cerrado: 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: 40 px
  • Color del texto del cuerpo: # 333333
  • Peso de fuente del enlace: # 333333
  • Peso de fuente del enlace: negrita
  • Estilo de fuente del enlace: TT
  • Color del texto del enlace: # 333333
  • Espaciado de letras de enlace: 3px (escritorio), 5px (pasar el mouse)

diseño de pantalla dividida completa con conmutadores personalizados

Cambiar tamaño y posición

  • Ancho: 50% (escritorio), 80% (tableta y teléfono)
  • Ancho Máx .: 400px
  • Ancho del borde: 0px
  • Toggle Icon CSS personalizado:
    01
    left:-60px;
  •  Posición: absoluta (escritorio), relativa (tableta y teléfono)
  • Desplazamiento vertical: 22%
  • Desplazamiento horizontal: 50%
  • Índice Z: 2

diseño de pantalla dividida completa con conmutadores personalizados

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

Módulo de palanca inferior

Duplicar la palanca superior

Para crear la palanca inferior, duplique la palanca recién creada.

diseño de pantalla dividida completa con conmutadores personalizados

Actualizar posición

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

  • desplazamiento vertical: 70%

diseño de pantalla dividida completa con conmutadores personalizados

Módulo de palanca central

Alternar fondo inferior duplicado

Para crear la palanca central, duplique la palanca inferior.

diseño de pantalla dividida completa con conmutadores personalizados

Actualizar posición

Luego actualice lo siguiente:

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

diseño de pantalla dividida completa con conmutadores personalizados

Tamaño de actualización

  • Ancho: 95%
  • Ancho Máx .: 500px

diseño de pantalla dividida completa con conmutadores personalizados

CSS personalizado

Para una característica de diseño opcional, podemos agregar un fragmento 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:

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

diseño de pantalla dividida completa con conmutadores personalizados

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 pantalla dividida completa con conmutadores personalizados

Diseño divisor

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

  • Color de línea: # 333333
  • Posición de línea: Centrado verticalmente
  • Divisor de peso: 2px
  • Ancho: 50%
  • Transformar Traducir Y Eje: 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 de inicio de animación: 100%

diseño de pantalla dividida completa con conmutadores personalizados

Divisor Visibilidad y Posición

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.

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

diseño de pantalla dividida completa con conmutadores personalizados

Módulo divisor inferior

Módulo divisor superior duplicado

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

diseño de pantalla dividida completa con conmutadores personalizados

Actualizar posición

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

  • Desplazamiento vertical: 70%

diseño de pantalla dividida completa con conmutadores personalizados

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

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This