Al diseñar un sitio web, tiene que tomar una decisión importante desde el principio: «¿Para qué dispositivo voy a diseñar primero?» A menudo, la respuesta es escritorio. Pero el hecho de que primero diseñes para escritorio no significa que tu diseño móvil no pueda ser tan completo. Al usar la copia rotada, por ejemplo, puede maximizar Divi y sus ventanas móviles y colocar más contenido dentro de las ventanas 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.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Descargue GRATIS el diseño Maximización de ventanas gráficas móviles
Para poner sus manos en el diseño de ventanas gráficas móviles de maximización gratuita, 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡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
- Relleno inferior: 0px
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 50 % (escritorio), 100 % (tableta y teléfono)
- Alineación de filas: Izquierda
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal CSS
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.
|
01
|
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: Fundido
Elemento principal CSS
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:
|
01
|
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: Fundido
- Retardo de animación: 200ms
Elemento principal CSS
Estamos manteniendo el tamaño de la columna en tamaños de pantalla más pequeños agregando la siguiente línea de código CSS:
|
01
|
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
Pase a la pestaña de diseño del módulo y modifique la configuración de texto H2 de la siguiente manera:
- Título 2 Fuente: Montserrat
- Encabezado 2 Peso de la fuente: Light
- Encabezado 2 Alineación de texto: centro (solo tableta y teléfono)
- Título 2 Color del texto: #000000
- Título 2 Tamaño del texto: 3vw (Escritorio), 50px (Tableta), 40px (Teléfono)
- Encabezado 2 Espaciado entre 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 Rotar
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: Absoluta
- Ubicación: centro inferior (escritorio), centro (tableta y teléfono)
- Desplazamiento vertical: 50 px
Agregue el 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
Pase 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: Absoluta
- Ubicación: Centro Derecha
Añadir Fila #2
Estructura de la columna
En la siguiente fila, use la siguiente estructura de columna:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 50 % (escritorio), 100 % (tableta y teléfono)
- Alineación de filas: Derecha
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal CSS
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.
|
01
|
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 gradiente: lineal
- Dirección del gradiente: 153 grados
Animación
También estamos usando una animación retrasada en esta columna.
- Estilo de animación: Fundido
- Retardo de animación: 400ms
Elemento principal CSS
Entonces, 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:
|
01
|
width: 25% !important; |
Visibilidad
Por último, pero no menos importante, ocultaremos los desbordamientos de la columna para asegurarnos de que nada sobrepase el contenedor.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Configuración de la columna 2
Color de fondo
En la configuración de la columna 2. Use el siguiente color de fondo para ello:
- Color de fondo: #f4f4f4
Animación
Aplicar una animación retrasada también.
- Estilo de animación: Fundido
- Retardo de animación: 600ms
Elemento principal CSS
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 pantallas más pequeñas.
|
01
|
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
Pase 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: 15 px (escritorio), 14 px (tableta), 13 px (teléfono)
- Altura de línea de texto: 2,4 em
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 copia
El siguiente y último módulo que necesitamos en la columna 2 es un módulo de botones. Agregue alguna copia de su elección.
Alineación
Pase 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 siguiente.
- 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
- Solo mostrar icono al pasar el mouse sobre 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%
- Relleno izquierdo: 10%
- Relleno 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
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Montserrat
- Peso de fuente de texto: Fino
- Color del texto: #ffffff
- Tamaño del texto: 50 px (escritorio), 40 px (tableta), 35 px (teléfono)
- Alineación de texto: Centro
Dimensionamiento
Aumente el ancho del módulo a continuación.
- Ancho: 150%
Transformar Traducir
Luego, vaya a la configuración de transformación y cambie la posición del módulo modificando la configuración de traducción de transformación:
- Inferior: -50 % (solo tableta y teléfono)
Transformar Rotar
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 reubicando el módulo en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Centro
Clonar sección para reutilizar
Una vez que hayas completado la primera sección, puedes clonarla tantas veces como quieras.
Cambiar todas las copias y enlaces
Asegúrese de cambiar toda la copia y los 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 móviles dentro de Divi. Más específicamente, hemos utilizado la copia rotada para incluir más contenido dentro de nuestras ventanas gráficas sin crear una experiencia de diseño abrumadora. ¡También pudo descargar el archivo JSON de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.