Cómo reorganizar los bloques con layoutengine en squarespace

LayoutEngine de squarespace le permite situar bloques de varias maneras. El proceso es casi mágico. La raíz de la magia de LayoutEngine es una red de columna que gobierna cómo los bloques se colocan en la página. Se utiliza la cuadrícula para alinear perfectamente los bloques para crear páginas perfectamente organizados que son visualmente agradable a la vista.

Para mover y reorganizar los bloques en una página, haga lo siguiente:

  1. Pasa el cursor del ratón sobre un bloque hasta que el cursor cambie a una flecha multidireccional.

  2. Haga clic y mantenga pulsado el botón del ratón sobre el bloque que desea mover.

    Todos los bloques se convierten en su página resumida en un resplandor tenue y azulada, para que pueda ver sus bordes y colocar con precisión el bloque al que se muda.

    Un icono de la flecha multidireccional aparece en la esquina superior derecha de ciertos bloques cuando se pasa el cursor del ratón sobre ellos. Si aparece este icono, debe hacer clic en ella para arrastrar ese bloque.

  3. Arrastrar el bloque a otro lugar de la página.

    A medida que arrastra el bloque más cercano al borde de otro bloque, el borde se destaca con una línea azul, y aparece una de las cuatro opciones de anclaje. Puede controlar qué opción aparece por la posición del cursor cerca del borde:

  4. Fila: Agrega el bloque a una nueva fila. Coloque el cursor más cerca del borde inferior o superior de otro bloque.

  5. Insertar: Se fija el bloque a la parte superior o inferior de otro bloque. Coloque el cursor más lejos hacia el interior desde el borde superior o inferior del bloque al que desea adjuntar el bloque se está moviendo.

  6. Columna: Agrega el siguiente bloque a otro bloque o conjunto de bloques. Coloque el cursor cerca del borde izquierdo o derecho del otro bloque.

  7. Flotador: Le permite colocar un bloque de imagen o un bloque de mapa dentro de un bloque de texto para que las palabras se envuelven alrededor de los lados del bloque flotante. Coloque el cursor a la izquierda oa la derecha del párrafo que desea que la imagen o mapa de flotar al lado.

  8. La caída de la manzana en su lugar al soltar el botón del ratón.

¿Cómo separar los bloques en filas

Cuando se agrega un bloque a una página, se añade el bloque a una nueva fila y se extiende desde el extremo izquierdo al extremo derecho de la página. La altura del bloque es fluida, ampliando para contener el contenido se agrega a la misma. Puede reorganizar los bloques de arriba a abajo la página.

Si va a añadir un bloque a una página que ya contiene bloques, se añadirá el nuevo bloque por debajo de los ya existentes.

Cuando se crea una nueva página o una nueva entrada de blog, se añade automáticamente un bloque de texto.

Cómo crear columnas de bloques

Al reorganizar los bloques, se puede colocar a la izquierda oa la derecha de la otra, la creación de columnas dentro de una fila. Estas columnas afectan sólo a la fila que contiene los bloques. Por ejemplo, es posible organizar tres bloques en una fila pero cinco bloques en otra fila.

LayoutEngine utiliza una estructura de rejilla 12-columna. Si va a ordenar bloques en una fila y queremos que sean del mismo ancho, debe utilizar 1, 2, 3, 4, o 6 manzanas. (Estos números son uniformemente divisible en 12.)

Para ajustar la anchura de dos bloques adyacentes, posicionar el cursor entre los dos bloques. Una línea delgada, vertical aparece y el cursor cambia a un cursor de cambio de tamaño. Haga clic y arrastre para ajustar la anchura de los bloques. Cambiar el tamaño de un bloque afecta el tamaño del bloque adyacente.

Cómo insertar bloques

Al insertar un bloque encima o debajo de otro bloque, que conecte los bloques dentro de la misma columna. Los bloques se mostrarán juntos, que puede ser útil cuando se crea intrincados diseños de página.

Además, cuando su sitio cambia de tamaño para ajustarse al ancho de un dispositivo móvil, los bloques se refluir a apilar una encima de la otra.

Por lo general, se insertan bloques encima o debajo de otro bloque. Sin embargo, también se puede dividir los bloques de texto con otro bloque mediante la inserción de un bloque entre los párrafos del bloque de texto.

Cómo flotar dentro de los bloques de contenido

Cuando usted tiene una flotante bloque, el texto de la página se envuelve alrededor de los lados del bloque. Los únicos bloques que pueden flotar en un bloque de texto son bloques de imágenes y bloques de mapa.

Puede flotar un bloque junto a cualquier párrafo de texto en el bloque de texto. Para la posición de su bloque, utiliza los iconos que aparecen en la parte superior del bloque de imagen o mapa. Sus opciones son flotantes

  • Izquierda: Flota el bloque a la izquierda del texto.

  • Sin envoltura: Flota el bloque dentro del texto, pero no muestra el texto en el lado izquierdo o derecho del bloque. El bloque de mapa de estirará para llenar todo el ancho del bloque de texto.

    El bloque de imagen hará lo mismo a menos que la imagen no es lo suficientemente grande, en cuyo caso la imagen se visualiza en su tamaño más grande, centrado en el ancho total del bloque de texto.

  • Derecha: Flota el bloque a la derecha del texto.

Ahora que ya has mirado cómo añadir, eliminar y reorganizar los bloques dentro de sus páginas, es el momento de pasar a la Parte IV, donde nos fijamos en todos los diferentes tipos de bloques se pueden agregar a su sitio.

Artículos Relacionados