Un diseño responsive es aquel que se ajusta automáticamente al ancho de pantalla modificando su aspecto. Los diseños responsive son más complejos que un diseño de ancho fijo, contacte con el equipo de Bigpress si necesita ayuda.

Hacer un diseño responsive

En Bigpress puede elegir si desea que su diseño sea responsive o de ancho fijo. En el la opción Diseños del gestor los diseños responsive aparecerán con un icono distintivo: Captura de pantalla 2017-09-08 a las 0.49.07.png

Si desea convertir un diseño de ancho fijo en responsive puede hacerlo desde las preferencias de cada diseño, haciendo clic en el apartado "Diseños" del menú de la izquierda y luego en el botón del lápiz correspondiente al diseño de su elección. Si queremos que nuestro diseño sea responsive, tan solo tenemos que activar la opción "responsive", e indicarle un ancho que será el máximo que puede alcanzar el diseño.

Ancho responsive.jpeg




Editar un diseño responsive

Los diseños responsive aparecerán en el listado de diseños con un icono con dos flechas laterales. Si edita un diseño responsive en Bigpress una de las primeras cosas que notará es que aparecerán una serie de controles adicionales, como los iconos de varios dispositivos en la parte superior de la pantalla. En este artículo intentaremos ayudarle a usarlos.

Para seguir un orden puede comenzar haciendo el diseño de escritorio, y una vez conseguido este, 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:


Captura de pantalla 2017-08-11 a las 12.59.51.png

  • Los iconos de los 4 dispositivos: los cuales al hacer clic sobre ellos vamos a poder observar como queda el resultado final.

  • La barra azul: que nos permitirá añadir las filas y las columnas que deseemos, así como elegir la posición de la fila si hacemos clic en el icono Aa





Elegir un diseño de fila

Podemos elegir el diseño de la fila para que el diseño de escritorio se adapte a tablet, móvil horizontal y móvil vertical. Por ejemplo se mostrarán 3 columnas en escritorio, 2 en tablet y una en mñóvil. Al hacer clic en el icono de estilo (Aa) de una fila, nos aparecerá el siguiente cuadro que vemos en la imagen siguiente que hemos seleccionado a modo de ejemplo:


Captura de pantalla 2017-08-11 a las 11.14.59.png



Estos modelos están basados en una rejilla imaginaria de 12 columnas, la más popular en diseño web. A continuación, vamos a explicar en cada uno de los tamaños, las estructuras que se pueden seleccionar:


Formato
Equivalente rejilla 12 columnas
Descripción
cols-6-6-grey.png
6-6
2 columna en 1 fila
cols-4-4-4-grey.png
4-4-4
3 columnas en 3 filas
cols-3-3-3-3-grey.png
3-3-3-3
4 columnas en 4 filas
cols-2-2-2-2-2-2-grey.png
2-2-2-2-2-2
6 columnas en 1 fila
cols-3-9-grey.png
3-9
2 columnas en 1 fila con ancho 3-9
cols-9-3-grey.png
9-3
2 columnas en 1 fila con ancho 9-3
cols-3-6-3-grey.png
3-6-3
3 columnas en 1 fila con ancho 3-6-3
cols-2-2-2-4-2-grey.png
2-2-2-4-2
5 columnas en 1 fila con ancho 2-2-2-4-2
cols-2-3-5-2-grey.png
2-3-5-2
4 columnas en 1 fila con ancho 2-3-5-2
columndrop-grey.png
6-6-12
Patrón responsive columndrop. 2 columnas en una fila y otra en la siguiente
cols-custom-grey.png
Personalizado
N columnas en 1 fila con ancho variable expresado en tanto por cierto
stack-grey.png
12-12-12-12-12
Varias filas con 1 columnas cada una. Columnas ocupan todo el ancho disponible. Se adaptan la ancho
cols-6-6-6-6-6-6-grey.png
6-6-6-6-6-6
Varias filas con 2 columnas cada una
cols-4-4-4-4-4-4-grey.png
4-4-4-4-4-4
Varias filas con 3 columnas cada una

IMPORTANTE:

Captura de pantalla 2017-08-14 a las 12.05.14.png
En la mayoría de diseños el ancho de columna es fijo. Si deseamos especificar nosotros el ancho debemos elegir la opción de formato "personalizado".




Ocultar elementos para un dispositivo

Por otro lado, podemos ocultar filas, columnas o widget para un dispositivo haciendo clic en el correspondiente icono de esitar estilo (Aa).

image (1).jpeg

Hacemos clic en el icono de esitar estilo (Aa)
Captura de pantalla 2017-08-11 a las 12.03.42.png


Seleccionamos el icono de tablet para ocultar nuestra columna en ese dispositivo y hacemos clic en Guardar. Como podremos observar, , ha desaparecido la columna que hemos ocultado.
SUGERENCIA: Es bastante común usar este recurso para crear diseños específicos para un dispositivo. Por ejemplo podemos ocultar la fila de la cabecera para dispositivos moviles para insertar una nueva fila de cabecera específica para móviles que configuraremos para que se vea en estas pantallas. El lector pensará que la cabecera se transforma, en lugar de mostrarse una y ocultarse otra.