Ordenar el contenido

  • Base de conocimiento
  • Responsive Website Builder
  • Ordenar el contenido
  • Ayuda de Duda > Responsive Website Builder > Introducción

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. 

content_1_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.

content_2_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.

content_3_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.

content_4_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. 

content_6_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.

content_7_en-US.png

content_8_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. 

content_9_en-US.png

Existen varias maneras 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. 

content_10_en-US.png

content_11_en-US.png

Ajustar para alinear

Mientras cambia el tamaño de los widgets dentro de la misma columna, Duda intentará "Ajustar para alinear" para que tengan exactamente el mismo tamaño. Observará que mientras cambia el tamaño, Duda 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.

content_12_en-US.png

Ejemplo de ajuste para lograr que tenga el mismo tamaño del widget anterior.

Ajustar a la cuadrícula

El sistema Ajustar a la cuadrícula puede ayudarle 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. Observe que la alineación es admitida por las vistas de los tres tipos de dispositivo (escritorio, tableta, móvil).

content_13_en-US.jpg

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.  

content_14_en-US.png

content_15_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.

content_16_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.content_17_en-US.png

Recursos

 

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!