INTRODUCCIÓN A RESPONSIVE

A estas alturas de la película creo que quedan pocos que no lo sepan, pero vamos allá para los rezagados a modo ultraresumen: las webs deben ser responsivas, es decir, que responden y se adaptan al dispositivo desde el que las navega. Deben poder abrirse y navegarse y usarse desde ordenador de escritorio, tablet, o movil con pantalla estrechita. De lo contrario, Google nos penaliza SEO.

Cuando hacemos una web, debemos asegurarnos y repasar los efectos de los diseños y modificaciones para los diferentes tamaños típicos de los dispositivos y ajustar lo necesario.

CASO PRÁCTICO: TABLAS EN DIVI

Pues bien, tengo como cliente a una constructora de Badajoz, que está lanzando al mercado ahora mismo una nueva promoción de viviendas, utilizan la web como una herramienta de venta integrada, poniendo a disposición de los potenciales clientes qué viviendas de la promoción siguen disponibles o no.

Como en cada vivienda hay un link con su plano, tuvimos que hacerlo con tablas…que quedan preciosas en escritorio, pero se pierden en responsive, pues no vienen a priori preparadas para ser responsive ni por wordpress ni por divi.

Os dejo el ejemplo:

TABLAS RESPONSIVE EN DIVI: OPCIONES

Opción 1. Añadir plugin, gratis o de pago, y ensuciar la web.

Opción 2. Script a medida.

Opción 3. Mini CSS espectacular que me acaba de enseñar uno de mis programadores y que me ha encantado!

Y lo mejor de todo: sirve para cualquier elemento en Divi!

Y es que a veces el aprendiz supera el maestro….y porque en esta profesión, como en tantas otras, a veces es 1 euro por apretar un botón y 999 po r saber qué botón tocar.

CÓMO HACER CUALQUIER ELEMENTO RESPONSIVE EN DIVI GRATIS SIN CÓDIGO NI PLUGINS

Lo que te voy a mostrar convierte un elemento en DESLIZABLE.

Nos va a añadir barras de desplazamiento vertical y horizontal a un elemento para que pueda ser consultado desde la pantalla estrecha de un móvil!

Nos iremos a la FILA – CONFIGURACIÓN – AVANZADO – DESBORDAMIENTO.

Ahí encontraremos que se encuentran POR DEFECTO:

Y lo que haremos será cambiar a AUTO lo que necesitemos, en este caso, yo necesito desplazarme en la tabla horizontalmente:

Et voilá: