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 de un sitio web adaptable

Your Responsive Website is built from a header, a footer, rows and column. Every widget that you add is inserted into one of these sections.  

Filas

Rows are the horizontal sections of your Website. When you add widgets and columns to your Website, they are placed in these rows. 

arrangingcontent1_en-US.png

You can add rows to your Website by dragging in widgets. When you drag a widget between rows or into space where you'd like there to be a row, a new row will be created when you drop the widget.

arrangingcontent2_en-US.png

There are two ways of deleting rows. You can right-click anywhere on the row to open the context menu and then select Delete. Alternately, you can click the Row button at the top left corner of the row and select Delete.

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

There are two ways of deleting columns. You can right-click anywhere on the column to open the context menu and then select Delete. Alternately, you can press the red X at the top right corner of the column.

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

There are a few ways of deleting widgets from your Site. You can right-click anywhere on the widget to open the context menu and then select Delete. Alternately, you can press the red X at the top right corner of the 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?

¡Sí! Puede activar o desactivar la opción de invertir el orden de las columnas en el diseño de fila para cambiar la manera en que se muestran las columnas en la vista para dispositivos móviles en cada fila.organizarcontenido14_es-EEUU.png

Recursos