Edición Diseño Responsive

El objetivo es conseguir que el diseño de la web se ajuste automáticamente en función de el tamaño de el dispositivo a través del cual se navega:

Desde Bigpress, aconsejamos que en primer lugar se realice el diseño de escritorio que el usuario desee, y una vez conseguido este, nos centraremos en adaptarlo a los distintos dispositivos: Tablet, móvil horizontal y móvil vertical.

Para ello nos tenemos que familiarizar con varios elementos que nos van a permitir conseguir nuestro cometido, y son los siguientes:

  • Los iconos de los 4 dispositivos:los cuales al hacer clic sobre ellos vamos a poder observar como queda el resultado final.
  • La barrita azul: que nos permitirá adaptar el diseño de escritorio a tablet, móvil horizontal y móvil vertical y por otro lado

image (2).jpeg



  • Editar estilo (Aa): Personalizar el responsive de la columna o widget en si

image (7).jpeg


  • Preferencias del tamaño de las páginas : El tamaño de la portada y las secciones tiene que ser el máximo, 1180 px. Por lo que todas las páginas tienen que tener ese tamaño:

image (8).jpeg


Ejemplo práctico

Para hacernos mejor a la idea vamos a ver un ejemplo práctico: Convertiremos en responsive adaptativo una parte del diseño de portada de escritorio de una publicación:

1º Paso: