Como editar un diseño responsive


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


 multimedia images imageneditada 122



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.


 multimedia images imageneditada 123


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.

 multimedia images imageneditada 136



Editar un diseño responsive

 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 editar el diseño responsive de la portada, debemos hacer clic en el icono de triángulo invertido:

 multimedia images imageneditada 147


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


 multimedia images imageneditada 150


  • Los iconos de los 4 dispositivos: Con esta barra, puede acceder a los diseños responsive de los dispositivos: escritorio, tablet, móvil horizontal y móvil vertical:

Captura de pantalla 2023 05 11 a las 11.35.47



  • 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

Captura de pantalla 2023 05 11 a las 11.38.49


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:


 multimedia images imageneditada 155


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).

 multimedia images imageneditada 157




Una vez que hacemos clic en el icono de editar estilo (Aa), se abre la siguiente venta:

 multimedia images  multimedia images Capturadepantalla20230511alas11.51.34



Seleccionamos el icono de tablet para ocultar nuestra columna en ese dispositivo y hacemos clic en Guardar.

 multimedia images imageneditada 162



Como podremos observar, ha desaparecido la columna que hemos ocultado.

Captura de pantalla 2023 05 11 a las 12.00.35



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.