La forma de ordenar el contenido de su sitio es realmente importante. Ordenar adecuadamente el contenido hace más fácil que los visitantes encuentran lo que están buscando y le permite destacar secciones de su sitio que, de lo contrario, podrían no recibir atención. Una página bien organizada hace que su sitio web luzca profesional y ayuda a aumentar las ventas al facilitar a los visitantes del sitio encontrar lo que están buscando.

Estructura del Website Builder

El Creador de sitios web está conformado por un encabezado, un pie de página, filas y columnas. Cada widget que agrega se inserta en una de estas secciones.

Los widgets a menudo ocupan todo el espacio de una columna o fila, lo que hace más difícil seleccionarlos. Para evitar esto, haga clic con el botón derecho en el widget en la columna o fila que desea seleccionar, mantenga el cursor sobre la opción Seleccionar contenedor y luego seleccione Columna o Fila.

Filas

Las filas son las secciones horizontales de su sitio. Los widgets y columnas que se agregan a su sitio se colocan dentro de estas filas. Para cambiar la manera en que se muestra el contenido en la vista para dispositivos móviles, haga clic en el botón Invertir orden de columna en el editor de fila.

Puede agregar filas a su sitio web al arrastrar widgets al sitio. Cuando arrastra un widget entre filas o a un espacio donde desea que haya una fila, se creará una nueva fila al soltar el widget.

Para eliminar una fila, haga clic con el botón derecho en la fila para abrir el menú contextual y luego haga clic en Eliminar. Alternativamente, puede hacer clic en el botón Fila en la esquina superior izquierda de la fila y hacer clic en Eliminar.

Columnas

Cada fila contiene por lo menos una columna. Las columnas incluyen todos los widgets de su sitio y controlan su orden.

Cada fila puede contener hasta cuatro columnas. Siempre que agregue una nueva columna, ésta aparece junto a la columna existente en esa fila.

Para eliminar una columna, haga clic con el botón derecho en la columna para abrir el menú contextual y luego haga clic en Eliminar. Alternativamente, puede hacer clic en la X roja en la esquina superior derecha de la columna.

Puede colocar los widgets directamente en las columnas o estructurar la columna todavía más, agregando filas internas.

Filas internas

Las filas internas aportan una flexibilidad de diseño adicional porque le permiten agregar filas dentro de las columnas. Con las filas internas puede variar la disposición de la columna y mantener el diseño general de la fila (por ejemplo, fondo, espaciado, sangrado, etc.).

Tal como ocurre con las filas comunes, las filas internas pueden tener su propio fondo y espaciado, se pueden dividir en hasta cuatro columnas y se puede cambiar el orden de las columnas en los dispositivos móviles. Las columnas en las filas internas se pueden completar con cualquier widget, pero no se pueden agregar filas internas a dichas columnas.

Para agregar una fila interna a una columna, haga una de las siguientes acciones:

1. Haga clic con el botón derecho en la fila y presione Agregar fila interna. Si hay varias columnas en la fila, tendrá que elegir en qué columna desea agregar las filas internas.
2. Haga clic con el botón derecho en la columna y presione Agregar fila interna.
3. Haga clic con el botón derecho en la fila interna y presione Agregar fila para colocar una fila interna debajo de la actual.

Ejemplo de fila interna

Para dar un ejemplo de cómo usar la fila interna, echemos un vistazo a las dos maneras en que se puede diseñar un diseño que contenga un título y 3 botones:

• Agregue dos filas. Coloque el título en la fila 1 con 1 columna. Divida la fila 2 en 3 columnas. Coloque un botón en cada columna.
  • Dos filas separadas no pueden compartir la misma imagen de fondo y debe establecer un espaciado y el estilo de sangrado de forma separada para cada fila.

  
  

• Agregue una fila. Por defecto, cada fila contiene una columna. Agregue 2 filas internas a la columna. Coloque el título en la fila interna 1. Divida la fila interna 2 en 3 columnas. Coloque un botón en cada columna.
  • Estas dos filas internas compartirán el fondo, el espaciado y el sangrado de la fila principal.

  

Algunas consideraciones importantes al momento de editar las filas internas:

• Solo puede usar las flechas para cambiar el orden para modificar el orden de las filas internas. Para cambiar el orden de los widgets y las filas internas, debe arrastrar y soltar manualmente los widgets sobre o debajo de la fila interna.
• No se pueden colocar widgets de 2 columnas, 3 columnas, 4 columnas en las filas internas. Para agregar una columna, haga clic derecho en la fila y haga clic en Agregar columna.
• A diferencia de las filas normales, las filas internas no se pueden copiar y pegar.

Widgets

Los widgets contienen el texto, las imágenes, los botones y otros contenidos de su sitio.

Para agregar widgets a su sitio:

1. En el panel izquierdo, haga clic en Widgets.
2. Busque el widget que desee y luego arrástrelo y suéltelo en su sitio.

Para eliminar un widget de su sitio, haga clic con el botón derecho en cualquier lugar del widget para abrir el menú contextual y luego haga clic en Eliminar. Alternativamente, puede hacer clic en la X roja en la esquina superior derecha del widget.

Para ordenar los widgets en paralelo, arrastre un widget a su sitio, agregue una columna a la fila en la que se colocó el widget y luego arrastre otro widget a esa columna. Alternativamente, arrastre el widget de dos columnas a su sitio y luego arrastre y suelte los widgets en cada columna.

Ajustar para alinear

Mientras cambia el tamaño de los widgets dentro de la misma columna, Website Builder intenta Ajustar para alinear para que tengan exactamente el mismo tamaño. Mientras cambia el tamaño, Website Builder saltará adelante o atrás para ajustarse a la ubicación. Esto debería hacer que sea más fácil que varios widgets tengan exactamente el mismo tamaño.

Ajustar a la cuadrícula

La característica Ajustar a la cuadrícula ayuda a colocar widgets en las páginas de su sitio con precisión profesional. Este sistema le permite alinear widgets horizontal y verticalmente dentro de columnas y filas. Aparecen reglas al mover un elemento en su fila o columna o al cambiar el tamaño del widget. Los elementos alineados se marcan con un borde de color. Un widget puede estar alineado con más de un widget, dependiendo del uso/caso específico.

Para obtener más información sobre cómo agregar y editar widgets, consulteAgregar widgets and Editar widgets.