Ordenar el contenido

Descripción general

La forma de ordenar el contenido de su sitio web es realmente importante. Ordenar adecuadamente el contenido facilita a los visitantes encontrar 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 web encontrar lo que están buscando.

Guía

Estructura del Website Builder

Su Website Builder está conformado por un encabezado, un pie de página, filas y columnas. Cada widget que agrega se inserta en una de estas secciones.  

Filas

Las filas son las secciones horizontales de su sitio web. Los widgets y columnas que se agregan a su sitio web se colocan dentro de estas filas. 

arrangingcontent1_en-us.png

Puede agregar filas a su sitio web al arrastrar widgets. 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.

arrangingcontent2_en-us.png

Hay dos formas de eliminar filas. Puede hacer clic con el botón derecho en cualquier lugar de la fila para abrir el menú contextual y luego seleccionar Eliminar. Alternativamente, puede hacer clic en el botón Fila en la esquina superior izquierda de la fila y hacer clic en Eliminar.

arrangingcontent3_en-us.png

Columnas

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

arrangingcontent4_en-us.png

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

arrangingcontent5_en-us.png

Hay dos formas de eliminar columnas. Puede hacer clic con el botón derecho en cualquier lugar de la columna para abrir el menú contextual y luego seleccionar Eliminar. Alternativamente, puede hacer clic en la X roja en la esquina superior derecha de la columna.

arrangingcontent6_en-us.png

arrangingcontent7_en-us.png

You can place widgets directly into columns, or structure the column further by adding inner rows. 

Inner rows

Inner rows allow extra design flexibility by enabling you to add rows inside columns. With the help of inner rows, you can vary the column layout and keep the general design of the row (background, spacing, bleed, etc.).

Just like regular rows, inner rows can have their own background and spacing, be split into up to four columns, and have their column order changed on mobile. Columns in inner rows can be populated by any widget but inner rows cannot be added to such columns.

To add an inner row to a column, do one of the following:

  1. Right-click the row and click Add Inner Row. If there are multiple columns in the row, you’ll have to choose to which column you want to add the inner rows.
  2. Right-click the column and click Add Inner Row.
  3. Right-click the inner row and click Add Row to place an inner row below the current one.

To give an example of how to use inner row, let’s look at two ways a layout that contains a title and 3 buttons can be designed:-

  • Add two rows. Place the Title in Row 1 with 1 Column. Split Row 2 into 3 columns. Place a button into each column.
    • Two separate rows cannot share the same background image and you need to set spacing and bleed style separately for each row.

inner-rows1-en-US.png

  • Add a row. By default, each row contains a column. Add 2 inner rows to the column. Place the Title into inner row 1. Split inner row 2 into 3 columns. Place a button in each column.
    • These two inner rows will share the main row background, spacing and bleed.

inner-rows2-en-US.png

Some important considerations when it comes to editing inner rows:

  • You can only use the order switching arrows to switch the order between inner rows. To switch the order of widgets and inner rows, you need to manually drag and drop the widgets above or below the inner row.
  • 2 columns, 3 columns, 4 columns widgets cannot be placed in inner rows. To add a column, right-click the row and click Add Column.
  • Unlike regular row, inner rows cannot be copy-pasted.  

Widgets

Los widgets contienen el texto, las imágenes, los botones y otros contenidos de su sitio web. Para agregar widgets a su sitio, haga clic en Widgets en el menú de la izquierda, busque el widget que desee y luego arrástrelo y suéltelo en su sitio. 

arrangingcontent8_en-us.png

Hay unas pocas formas de eliminar widgets de su sitio. Puede hacer clic con el botón derecho en cualquier lugar del widget para abrir el menú contextual y luego seleccionar Eliminar. Alternativamente, puede hacer clic en la X roja en la esquina superior derecha del widget .

arrangingcontent9_en-us.png

arrangingcontent10_en-us.png

Consideraciones

Mientras que las vistas de escritorio y tableta permiten que cada fila incluya hasta cuatro columnas, los sitios web para dispositivos móviles solo pueden mostrar dos columnas en una fila como máximo.

Las columnas que se agreguen en una vista de escritorio o tableta tendrán la máxima anchura de la página cuando se cambien a vista para dispositivos móviles; para crear una fila con dos columnas en la vista para dispositivos móviles, primero cambie a vista para móviles, luego agregue un widget de dos columnas.

Preguntas frecuentes

¿Cómo coloco widgets uno al lado del otro?

Hay varias formas de ordenar los widgets uno al lado del otro. Puede arrastrar un widget a su sitio web, agregar una columna a la fila donde se colocó ese widget y luego arrastrar otro widget a esa columna. También puede arrastrar el widget de dos columnas a su sitio web y luego arrastrar y soltar el widget en cada columna. 

arrangingcontent11_en-us.png

arrangingcontent12_en-us.png

¿Cómo selecciono una columna o fila?

Los widgets a menudo ocupan todo el espacio de una columna o fila, lo que dificulta 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.

arrangingcontent13_en-us.png

¿Cómo elimino la última columna de una fila?

¡No tiene que hacerlo! Una columna vacía no se muestra en el sitio activo. Está allí solo en caso de que desee colocar contenido en ella. Puede eliminar la columna al eliminar la fila en la cual está contenida.

¿Puedo cambiar la manera en que se muestra el contenido en la vista para dispositivos móviles?

Yes! You can toggle the reverse column order option in the row design to change how columns are displayed on the mobile view in each row.arrangingcontent14_en-US.png

Recursos