Cómo maximizar las ventanas gráficas móviles de Divi mediante copia rotada

Al diseñar un sitio web, debe tomar una decisión importante desde el principio: "¿Para qué dispositivo voy a diseñar primero?" A menudo, la respuesta es el escritorio. Pero el hecho de que primero diseñe para escritorio no significa que su diseño móvil no pueda ser tan completo. Al usar la copia rotada, por ejemplo, puede maximizar las ventanas gráficas móviles de Divi y colocar más contenido dentro de las ventanas gráficas móviles sin sobrecargar a sus visitantes o su diseño. En este tutorial, le mostraremos exactamente cómo hacerlo dentro de Divi. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Descargue el diseño Maximizing Mobile Viewports GRATIS

Para poner sus manos en el diseño gratuito de maximización de las vistas móviles, 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!

¡Empecemos a recrear!

Agregar nueva sección

Espaciado

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 50% (escritorio), 100% (tableta y teléfono)
• Alineación de filas: izquierda

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

CSS del elemento principal

Para asegurarnos de que todas las columnas permanezcan una al lado de la otra, también agregaremos una sola línea de código CSS al elemento principal de la fila.

display: flex;

Configuración de la columna 1

Animación

Luego, abriremos la configuración de la columna 1 y agregaremos la siguiente animación:

• Estilo de animación: Fade

CSS del elemento principal

Mantendremos el tamaño de la columna en tamaños de pantalla más pequeños agregando la siguiente línea de código CSS al elemento principal de la columna:

width: 40% !important;

Configuración de la columna 2

Animación

A continuación, abriremos la configuración de la columna 2 y aplicaremos la siguiente animación:

• Estilo de animación: Fade
• Retraso de animación: 200 ms

CSS del elemento principal

Mantenemos el tamaño de la columna en tamaños de pantalla más pequeños agregando la siguiente línea de código CSS:

width: 60% !important;

Agregar módulo de imagen a la columna 2

Cargar imagen

Es hora de agregar módulos. Agregue un módulo de imagen a la columna 2 y cargue una imagen de retrato de su elección.

Dimensionamiento

Pase a la pestaña de diseño del módulo y fuerce el ancho completo en el módulo.

• Forzar ancho completo: Sí

Agregar módulo de texto a la columna 1

Agregar contenido H2

En la columna 1, el primer módulo que necesitamos es un módulo de texto que contiene contenido H2.

Configuración de texto H2

Vaya a la pestaña de diseño del módulo y modifique la configuración del texto H2 de la siguiente manera:

• Fuente del encabezado 2: Montserrat
• Peso de fuente del encabezado 2: Ligero
• Alineación del texto del encabezado 2: Centro (solo tableta y teléfono)
• Color del texto del encabezado 2: # 000000
• Tamaño del texto del encabezado 2: 3vw (escritorio), 50px (tableta), 40px (teléfono)
• Encabezado 2 espaciado de letras: -3px

Dimensionamiento

A continuación, modificaremos el ancho en la configuración de tamaño.

• Ancho: 89% (escritorio), 150% (tableta y teléfono)

Transformar Girar

Para rotar nuestro módulo en tamaños de pantalla más pequeños, usaremos la configuración de rotación de transformación.

• Izquierda: 270 grados (solo tableta y teléfono)

Posición

También estamos reposicionando el módulo de manera diferente en diferentes tamaños de pantalla.

• Posición: Absoluto
• Ubicación: parte inferior central (escritorio), centro (tableta y teléfono)
• Desplazamiento vertical: 50px

Agregar módulo divisor a la columna 1

Visibilidad

El siguiente y último módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de diseño del módulo y cambie el color de la línea.

• Color de línea: # 000000

Dimensionamiento

Modifique también la configuración de tamaño.

• Ancho: 50% (escritorio), 30% (tableta y teléfono)

Posición

Y complete la configuración del módulo reposicionando el módulo en consecuencia:

• Posición: Absoluto
• Ubicación: Centro a la derecha

Agregar fila n. ° 2

Estructura de la columna

En la siguiente fila, use la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 50% (escritorio), 100% (tableta y teléfono)
• Alineación de filas: derecha

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

CSS del elemento principal

Para asegurarnos de que ambas columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una sola línea de código CSS al elemento principal de la fila.

display: flex;

Configuración de la columna 1

Fondo degradado

A continuación, abriremos la configuración de la columna 1 y aplicaremos un fondo degradado.

• Color 1: # 1a9970
• Color 2: # 000000
• Tipo de degradado: lineal
• Dirección del gradiente: 153 grados

Animación

También estamos usando una animación retrasada en esta columna.

• Estilo de animación: Fade
• Retraso de animación: 400 ms

CSS del elemento principal

Luego, nos aseguraremos de mantener el tamaño de la columna en tamaños de pantalla más pequeños agregando la siguiente línea de código CSS al elemento principal de la columna:

width: 25% !important;

Visibilidad

Por último, pero no menos importante, ocultaremos los desbordamientos de la columna para asegurarnos de que nada supere el contenedor.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Configuración de la columna 2

Color de fondo

A la configuración de la columna 2. Utilice el siguiente color de fondo para ello:

• Color de fondo: # f4f4f4

Animación

Aplique también una animación retrasada.

• Estilo de animación: Fade
• Retraso de animación: 600 ms

CSS del elemento principal

Y complete la configuración de la columna agregando una sola línea de código CSS al elemento principal de la columna. Esto asegurará que la columna mantenga su tamaño en tamaños de pantalla más pequeños.

width: 75% !important;

Agregar módulo de texto a la columna 2

Agregar contenido

Es hora de agregar módulos. Agregue un módulo de texto a la columna 2 con algún contenido descriptivo de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de texto: Open Sans
• Tamaño del texto: 15px (escritorio), 14px (tableta), 13px (teléfono)
• Altura de la línea de texto: 2.4em

Dimensionamiento

Luego, cambiaremos la configuración de tamaño.

• Ancho: 80%
• Alineación del módulo: centro

Espaciado

Completaremos la configuración del módulo agregando algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 15%
• Acolchado inferior: 15%

Agregar módulo de botones a la columna 2

Agregar copia

El siguiente y último módulo que necesitamos en la columna 2 es un módulo de botones. Agregue una copia de su elección.

Alineación

Vaya 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

Dale estilo al botón a continuación.

• Usar estilos personalizados para el botón: Sí
• 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: 0px

• Fuente del botón: Montserrat
• Mostrar icono de botón: Sí
• Ubicación del icono del botón: Izquierda
• Mostrar solo el icono al pasar el mouse por el botón: No

Espaciado

Y complete la configuración del módulo agregando algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 2%
• Acolchado inferior: 2%
• Acolchado izquierdo: 10%
• Acolchado derecho: 10%

Agregar módulo de texto a la columna 1

Agregar contenido

En la columna 1, el único módulo que necesitamos es un módulo de texto. Agregue el siguiente contenido al cuadro de contenido: '- 01'.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Delgado
• Color del texto: #ffffff
• Tamaño del texto: 50 px (escritorio), 40 px (tableta), 35 px (teléfono)
• Alineación de texto: centro

Dimensionamiento

A continuación, aumente el ancho del módulo.

• Ancho: 150%

Transformar Traducir

Luego, vaya a la configuración de transformación y reposicione el módulo modificando la configuración de traducción de transformación:

• Inferior: -50% (solo tableta y teléfono)

Transformar Girar

También estamos rotando el módulo en tamaños de pantalla más pequeños.

• Izquierda: 270 grados (solo tableta y teléfono)

Posición

Y completaremos la configuración del módulo reposicionando el módulo en la pestaña avanzada.

• Posición: Absoluto
• Ubicación: Centro

Clonar sección para reutilizar

Una vez que haya completado la primera sección, puede clonarla tantas veces como desee.

Cambiar todas las copias y enlaces

Asegúrese de cambiar todas las copias y enlaces.

Cambiar imagen

¡Junto con la imagen del retrato y listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo maximizar sus ventanas gráficas móviles dentro de Divi. Más específicamente, hemos utilizado la copia rotada para ajustar más contenido dentro de nuestras ventanas gráficas sin crear una experiencia de diseño abrumadora. ¡También pudo descargar el archivo JSON gratis! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.