Una página adaptable es una sola página que se reorganiza para ajustarse a cualquier pantalla. La construyes con secciones apiladas a lo largo de la página, y usas contenedores para colocar las cosas una al lado de otra en un ordenador y apilarlas en un teléfono. Para los pocos objetos que necesitan un lugar exacto, como una insignia sobre una foto, marca Permitir arrastrar libremente y fíjalos.
Antes de empezar
- Comprueba el tipo de página. Selecciona la página y ve a Inspector > Ajustes de la página > Diseño de página. Debe decir Adaptable. Si dice Diseño centrado, consulta Mi sitio web se ve mal en el teléfono: cómo funcionan los móviles en EverWeb.
- ¿Vas a convertir una página existente en adaptable? Cambiar el Diseño de página puede reorganizar todo tu diseño, y no se puede deshacer. Es más seguro añadir una página nueva y pasar tu contenido a ella: haz clic en Añadir página, elige Adaptable en el menú de filtro de la parte superior del selector de plantillas de tema, elige Blank Responsive (en blanco adaptable) y el estilo de página Home (inicio), y haz clic en Elegir.
Cómo se construye una página adaptable
Cada objeto con Anchura completa, y cada contenedor, es una sección. Las secciones se colocan una debajo de otra en el mismo orden en todas las pantallas, y se encogen para caber. Un contenedor organiza lo que tiene dentro, y puedes poner contenedores dentro de otros contenedores, como una fila que contiene dos columnas. Los objetos que no pueden tener Anchura completa, como algunos widgets, deben ir dentro de un contenedor. Mantenlos con un ancho de unos 280 a 320 píxeles para que quepan en un teléfono.
Añadir un contenedor
- Haz clic en Contenedores en la barra de herramientas.
- Elige Fila de contenedor, Columna de contenedor o Flujo libre de contenedor.
- Arrastra objetos a su interior, o haz clic en el botón + del centro del contenedor vacío.
¿Ya tienes los objetos en la página? Haz clic en cada uno con la tecla Mayúsculas pulsada, haz clic con el botón derecho (o Control-clic en un Mac), elige Contener como y luego Fila, Columna o Flujo libre.
| Disposición | En un ordenador | En un teléfono |
|---|---|---|
| Columna | Objetos apilados de arriba abajo | Siguen apilados, cada uno más estrecho |
| Fila | Objetos uno al lado de otro | Siguen uno al lado de otro y se estrechan, salvo que configures el Ajuste (ver abajo) |
| Flujo libre | Colocas los objetos donde quieras dentro de él | Los objetos mantienen sus posiciones fijadas, así que compruébalo en un teléfono |
Para cambiarlo más adelante, selecciona el contenedor haciendo clic en una parte vacía (o haz clic con el botón derecho y usa Elegir capa), ve a Inspector > Ajustes del widget (la rueda dentada, el último icono) y cambia Mostrar > Diseño.
Haz que el contenido se apile en un teléfono
- Filas: en Ajustes del widget > Mostrar, pon Ajuste en Ajuste (pasar a la línea siguiente). Así los objetos bajan uno debajo de otro cuando la pantalla se queda demasiado estrecha. La opción predeterminada, No Wrap (sin ajuste), los mantiene en una sola línea.
- ¿Quieres que en un teléfono el segundo objeto quede arriba, por ejemplo la foto encima de su texto? Pon Ajuste en Reverse Wrap (ajuste inverso).
- Objetos uno al lado de otro en una fila: desmarca Anchura completa en Inspector > Métricas y da a cada uno un ancho. Un objeto con Anchura completa en una fila con ajuste ocupa una línea para él solo.
- Objetos en una columna o directamente en la página: marca Anchura completa y escribe un Máx. ancho para que no se estiren demasiado en una pantalla grande. En Mi sitio web se ve bien en el ordenador, pero en el teléfono aparece cortado o descolocado encontrarás más información.
- Deja la altura en Auto (Ajustes del widget > Tamaño) para que el contenedor pueda crecer cuando su contenido se apile.
Coloca un objeto en un lugar exacto: Permitir arrastrar libremente y fijar
En EverWeb 4.5 y posteriores puedes colocar un objeto en cualquier lugar de una página adaptable, directamente en la página o dentro de un contenedor:
- Selecciona el objeto y ve a Inspector > Métricas.
- Marca Permitir arrastrar libremente y arrastra el objeto adonde quieras.
- Haz clic en Pin Settings (ajustes de anclaje) y elige dónde fijarlo, por ejemplo arriba y a la derecha. Marca Constrain to edge (limitar al borde) para mantenerlo pegado a ese borde.
Un objeto colocado libremente no empuja nada hacia abajo. Úsalo para unos pocos objetos, no para una página entera: si todos los objetos están colocados libremente, nada se apila en un teléfono. Para devolver un objeto al flujo, desmarca Permitir arrastrar libremente. Para sacar un objeto de un contenedor de flujo libre arrastrándolo, mantén pulsada la tecla Command (Mac) o Alt (Windows) mientras lo arrastras.
¿Por qué no usar filas dinámicas?
Las filas dinámicas (Responsive Rows) son la versión anterior de los contenedores, y ya no las recomendamos para páginas nuevas. Las que ya tienes seguirán funcionando.
| Contenedor | Fila dinámica | |
|---|---|---|
| Disposiciones | Fila, Columna o Flujo libre | Solo Fila |
| Ancho | Anchura completa o un ancho fijo | Solo anchura completa |
| Dentro de otros contenedores | Sí | No |
| Permitir arrastrar libremente y fijar en su interior | Sí | No, la casilla aparece atenuada |
Para sustituir una, añade una Fila de contenedor a su lado, arrastra los objetos a ella y luego elimina la fila dinámica vacía. Al eliminarla también se elimina todo lo que siga dentro, así que comprueba antes que esté vacía, y usa Editar > Deshacer si lo necesitas.
¿En qué contenedor está este objeto?
Haz clic con el botón derecho en el objeto y elige Incrustar. La lista muestra el contenedor en el que está y te permite moverlo a otro. Pon nombre a tus contenedores en Ajustes del widget, por ejemplo "Encabezado" o "Servicios", para que la lista se entienda. Para seleccionar objetos ocultos o superpuestos, consulta ¿Por qué no se queda donde lo arrastro?.
Comprueba que funciona
Estrecha la ventana de EverWeb arrastrando su borde y observa cómo se reorganiza la página. Luego haz clic en Vista previa, elige Preview QR Code (código QR de vista previa) y escanéalo con tu teléfono. Nada debería desplazarse hacia los lados ni quedar encima de otra cosa. Si ocurre, consulta Mi sitio web se ve bien en el ordenador, pero en el teléfono aparece cortado o descolocado.
¿Vas justo de tiempo? Podemos volver a crear tu sitio web como sitio adaptable por ti. Pide al soporte un presupuesto sin compromiso.