Bloquear el diseño responsive en la vista de tablet con un poco de CSS en Divi

¿Por qué bloquear el diseño responsive en Divi?

Bloquear el diseño responsive algunas veces puedes ser útil. En la mayoría de los casos, en nuestros desarrollos webs, el hecho de que Divi adapte nuestros contenidos a distintos dispositivos es fabuloso. Evidentemente, la función de diseño responsive de Divi nos ayuda enormemente en nuestros proyectos. Además, con apenas unos retoques nos permite que nuestros diseños se vean fantásticos en cualquier dispositivo.

Sin embargo, hay ocasiones en las que sería interesante poder “bloquear” el diseño responsive. A menudo inventamos composiciones con varios módulos en distintas columnas que están pensadas para verse de una pieza. Y es para estas ocasiones para lo que puede ser útil este tutorial.

Así que vamos a crear una sencilla composición formada por dos columnas. Estas columnas contendrán un módulo anuncio y una galería en modo deslizador. Y queremos que no «separe» los módulos cuando se muestre en una tableta con orientación horizontal.

Ya hemos hecho algún tutorial parecido como este: https://aulamedia.net/propuesta-diseno-divi/

A continuación fíjate en las dos imágenes bajo estas líneas. La tablet de la izquierda muestra nuestra composición por defecto, sin ningún css. Como ves, el módulo anuncio (morado) ocupa todo el ancho y la segunda columna (la galería, imagen de la sandía) se ha desplazado hacia abajo.

Por el contrario, a la derecha puedes ver cómo se verá con los retoques de nuestro tutorial. Esto es, se verá igual que en el ordenador o la tablet en orientación horizontal.

La Estructura de Nuestra Práctica

Empezamos. Antes de nada creamos una nueva página o entrada y activamos el constructor Divi. Como consecuencia, tendremos una sección con una fila preparada para insertar una columna.

Necesitamos una fila de dos columnas. Para esta práctica usaremos una estructura de dos columnas 2/3 + 1/3. Así que la primera columna ocupará dos tercios del espacio disponible e insertaremos un módulo anuncio. La segunda columna ocupará un tercio, y es donde pondremos nuestro módulo galería en modo deslizador.

Una vez tenemos nuestra estructura creada, vamos a ajustar la fila.

Pulsamos en el botón de configuración de fila. Mira la imagen de la izquierda para orientarte si lo necesitas.

Y en la primera pestaña, contenido, damos un color de fondo. Yo he usado este morado: #7d3bcf.

En la segunda pestaña, diseño, ajustamos en tamaño el canalón de ancho a un valor de 1.

Y en la tercera pestaña, avanzado, añadiremos más tarde la clase bloquear-responsive en el campo clase CSS, pero de momento lo dejamos así.

Primera Columna. Módulo Anuncio

Como ya hemos dicho antes, en la primera columna vamos a poner un módulo tipo anuncio.

Así que lo creamos y, en la pestaña contenido, rellenamos los campos Título y contenido. Dependiendo del texto que introduzcas en Contenido, tendrás que ajustar los valores de separación que veremos más adelante. Nosotros pondremos poco texto para no complicarlo.

Sin salir de la pestaña contenido, un poco más abajo, marcamos Usar icono y elegimos uno.

Cambiamos ahora a la pestaña Diseño. Elige un color para el icono y cambia la ubicación a la izquierda. Cambia el color de tu texto y estilos a tu gusto.

En separación, relleno personalizado, cambia los valores como ves en la imagen inferior. Dependiendo de tus necesidades, a lo mejor debes variar un poco los valores. Nosotros hemos usado estos:

• Superior: 9%
• Derecha: 10%
• Izquierda 25% (en tablet, reduce este valor a un 15%)

Ya tenemos nuestro modulo anuncio. Vamos ahora a por la galería.

Segunda Columna. Módulo Galería

En la columna que nos queda (1/3) a la derecha, insertamos un módulo galería. Pulsamos el botón actualizar galería (en la primera pestaña, contenido) y subimos o elegimos de la biblioteca nuestras imágenes. Las mías tienen unas dimensiones de 600 px de anchura por 360 px de altura.

En la pestaña diseño de los ajustes del módulo, cambia el diseño en deslizador.

Activa, en esta misma pestaña si quieres, la animación automática, y ya tenemos nuestra galería.

El código CSS

Ahora pega el siguiente código en la zona CSS del tema divi, en tu hoja de estilo hijo o en tu página, que es donde yo lo he puesto.

@media all and (max-width: 980px) {
.bloquear-responsive .et_pb_column_1_4 {
max-width: 25%;
}
.bloquear-responsive .et_pb_column_1_3 {
max-width: 33.333%;
}
.bloquear-responsive .et_pb_column_1_2 {
max-width: 50%;
}
.bloquear-responsive .et_pb_column_2_3 {
max-width: 66.666%;
}
}

Como ves, la clase bloquear-responsive preveé la configuración para los distintos formatos de columnas.

Queremos que se vea por defecto en ordenadores y móviles así que, en los ajustes de nuestra fila, vamos a la pestaña avanzado y desactivamos las vista en tablet. De esta forma, esta versión sólo se verá en ordenadores, tabletas en modo horizontal y móviles

Sólo nos falta clonar nuestra fila y en la copia, añadir la clase bloquear-responsive en los ajustes de la fila > avanzado > clases CSS. 

Esta es la fila que se verá sólo en tabletas, así que desactivamos visibilidad como hemos hecho antes. Pero ahora desactivamos teléfono y escritorio marcándolos.

¡Ah! Se me olvidaba. No podréis ver los cambios en el constructor visual, tienes que probar en una tablet para verlos.

Y pulsando aquí tienes el ejemplo del tutorial, si tienes una tableta, podrás comprobar el tutorial.