Bloques y maquetación

Añadir un bloque

Haz clic en el tirador de más junto a un bloque existente, o escribe / en una línea vacía. Se abre el menú de inserción con grupos para bloques básicos, componentes, formularios, menús y bloques avanzados.

Lee Comandos de barra y atajos ocultos para ver la lista completa y las entradas que solo aparecen en ciertos lugares.

Opciones habituales:

• Encabezado y Párrafo para texto.

• Imagen para una foto.

• Fila para columnas.

• Sección para una banda a todo el ancho con su propio fondo o espaciado.

• Grupo para mantener varios bloques juntos.

• Botón para un enlace con aspecto de botón.

• Formulario para recoger información.

• Repetidor para una lista de una colección.

Seleccionar y mover bloques

Haz clic en un bloque para seleccionarlo. Arrastra el tirador para moverlo. Una línea muestra dónde va a quedar.

También puedes copiar y pegar bloques. Selecciona el bloque, cópialo y pégalo donde lo quieras. Si pegas dentro de otro bloque, se coloca como hijo.

Filas y columnas

Una fila contiene columnas. Las columnas se colocan una al lado de otra en escritorio y se apilan en teléfonos. Es la forma principal de construir maquetaciones.

• Añade una fila y luego añade columnas.

• Por defecto, las columnas comparten el ancho por igual.

• Selecciona una columna y usa Tamaño en la pestaña Caja para darle una parte mayor. Las opciones son multiplicadores, de 2× a 12×. Auto la devuelve a una parte igual.

• Usa Espacio en la pestaña Caja para cambiar el espacio entre columnas.

No necesitas calcular porcentajes. La fila se encarga del espacio por ti.

Sección, grupo y fila

Estos tres bloques pueden parecer similares, pero hacen trabajos distintos.

• Sección es una banda a nivel de página. Úsala para una imagen principal, un área de características o una llamada a la acción con un fondo diferente. Las secciones tienen un control de ancho de contenido para que el contenido de dentro pueda quedar estrecho mientras el fondo ocupa todo el ancho.

• Fila es para contenido lado a lado. Es el bloque que quieres para columnas.

• Grupo es un envoltorio para bloques que van juntos. Es útil cuando quieres mover, duplicar o dar estilo a varios bloques como uno solo. Usa Agrupar selección desde el menú de acciones del bloque, y Desagrupar para separarlo de nuevo.

Ancho de contenido

El cuerpo de la página y las secciones tienen un control de Ancho de contenido. Fija cuánto puede crecer el contenido de ancho en una pantalla grande.

• Ancho completo deja que el contenido llegue hasta los bordes.

• Anchos más pequeños van bien para texto, porque las líneas largas son difíciles de leer.

• Grande es un buen valor por defecto para la mayoría del contenido de una página.

Una sección puede tener a la vez un fondo a todo el ancho y un ancho de contenido más estrecho.

Anidamiento

Puedes poner una fila dentro de una columna, un grupo dentro de una sección y un formulario dentro de una columna. Así se construyen las maquetaciones complejas.

Mantén el anidamiento poco profundo cuando puedas. Las maquetaciones muy anidadas son más difíciles de editar en pantallas pequeñas y más difíciles de seguir para los visitantes.

Ocultar un bloque

Abre Resumen en la barra de herramientas, busca el bloque y haz clic en el icono del ojo. Los bloques ocultos siguen en la página pero no se muestran en el sitio publicado. Va bien para conservar una sección antigua mientras trabajas en un reemplazo.

Para volver a mostrarlo, haz clic otra vez en el icono del ojo.

Eliminar un bloque

Selecciónalo y pulsa Backspace o Delete, o usa el menú de acciones del bloque. Si eliminas una columna, la fila se ajusta. Si eliminas la última columna, la fila también se elimina.

Deshacer lo recupera si cambias de idea.

Qué leer después

• La pestaña Caja explica los controles de espaciado y tamaño.

• Diseño adaptable explica cómo cambian las maquetaciones en pantallas pequeñas.

• Componentes explica cómo reutilizar un bloque entre páginas.