Organizar el contenido

Descripción general

La organización del contenido del sitio web es muy importante. Una correcta organización del contenido permite a los visitantes encontrar fácilmente lo que buscan y te permite resaltar secciones del sitio que, de lo contrario, pasarían desapercibidas. Una página correctamente organizada le da a tu sitio web un aspecto profesional y ayuda a aumentar las ventas facilitando a los visitantes del sitio web la búsqueda de aquello que les interesa.

Guía

Estructura del creador de sitios web

El creador de sitios web está compuesto por un encabezado, un pie de página, filas y columna. Todos los complementos que añadas se insertarán en una de estas secciones.  

Filas

Las filas son las secciones horizontales del sitio web. Al añadir complementos y columnas al sitio web, estos se colocan en las filas. 

arrangingcontent1_en-US.png

Puedes añadir filas al sitio web. Para ello, arrastra complementos. Al añadir un complemento entre filas o en un espacio en el que desees incluir una fila, se creará una nueva fila al soltar el complemento.

arrangingcontent2_en-US.png

Hay dos formas de eliminar filas. Puedes hacer clic con el botón derecho en cualquier parte de la fila para abrir el menú contextual y, a continuación, seleccionar Eliminar. También puedes hacer clic en el botón Fila, ubicado en la esquina superior izquierda de la fila, y hacer clic en Eliminar.

arrangingcontent3_en-US.png

Columnas

Todas las filas contienen al menos una columna. Las columnas contienen todos los complementos del sitio y controlan su disposición.

arrangingcontent4_en-US.png

Cada fila puede contener hasta cuatro columnas. Cada vez que se añade una nueva columna, esta aparece junto a la columna en esa fila. 

arrangingcontent5_en-US.png

Hay dos formas de eliminar columnas. Puedes hacer clic con el botón derecho en cualquier parte de la columna para abrir el menú contextual y, a continuación, seleccionar Eliminar. Y también puedes hacer clic en la equis de color rojo que se encuentra en la esquina superior derecha de la columna.

arrangingcontent6_en-US.png

arrangingcontent7_en-US.png

Puede situar los complementos directamente en las columnas o estructurar más estas añadiendo filas internas. 

Filas internas

Las filas internas aportan una mayor flexibilidad de diseño, pues le permiten añadir filas dentro de las columnas. Gracias a estas filas internas puede variar el diseño de las columnas y mantener el diseño general de la fila (fondo, espaciado, sangrado, etc.).

De igual forma que las filas normales, las filas internas pueden tener su propio fondo y espaciado, dividirse hasta en cuatro columnas y tener modificado el orden de las columnas en los dispositivos móviles. Las columnas de las filas internas se pueden completar con cualquier complemento, si bien las filas internas no se pueden añadir a dichas columnas.

Para añadir una fila interna a una columna, realice una de las acciones siguientes:

  1. Haga clic con el botón derecho sobre la fila y, a continuación, haga clic en Añadir fila interna. Si en la fila hay varias columnas, deberá elegir en qué columna desea añadir las filas internas.
  2. Haga clic con el botón derecho sobre la columna y, a continuación, haga clic en Añadir fila interna.
  3. Haga clic con el botón derecho sobre la fila interna y, a continuación, haga clic en Añadir fila para añadir una fila interna debajo de la actual.

Para ver un ejemplo del uso de las filas internas, vamos a fijarnos en las dos formas en que puede configurarse un diseño que contenga un título y tres botones:

  • Añada dos filas. Sitúe el título en la fila 1 con 1 columna. Divida la fila 2 en 3 columnas. Agregue un botón en cada columna.
    • Dos filas separadas no pueden compartir la misma imagen de fondo, y debe establecer el espaciado y el estilo de sangrado por separado para cada una de las filas.

inner-rows1-en-US.png

  • Añada una fila. De forma predeterminada, cada fila contiene una columna. Añada dos filas internas a la columna. Sitúe el título en la fila interna 1. Divida la fila interna 2 en tres columnas. Agregue un botón en cada columna.
    • Estas dos filas internas compartirán el fondo, el espaciado y el sangrado de la fila principal.

inner-rows2-en-US.png

Consideraciones importantes en la edición de las filas internas:

  • Solo puede usar las flechas de cambio de orden para cambiar el orden entre las filas internas. Para cambiar el orden de los complementos y las filas internas, debe arrastrar y soltar manualmente los complementos encima o debajo de la fila interna.
  • Los complementos 2 columnas, 3 columnas y 4 columnas no se pueden colocar en filas internas. Para añadir una columna, haga clic con el botón derecho sobre la fila y, a continuación, haga clic en Añadir columna.
  • A diferencia de las filas normales, las filas internas no se pueden copiar y pegar.  

Complementos

Los complementos contienen el texto, las imágenes, los botones y otro contenido del sitio web. Para añadir complementos al sitio, haz clic en Complementos en el menú de la izquierda, busca el complemento que desees y, a continuación, arrástralo y suéltalo en el sitio. 

arrangingcontent8_en-US.png

Hay varias formas de eliminar complementos del sitio. Puedes hacer clic con el botón derecho en cualquier parte del complemento para abrir el menú contextual y, a continuación, seleccionar Eliminar. Y también puedes hacer clic en la equis de color rojo que se encuentra en la esquina superior derecha del complemento. 

arrangingcontent9_en-US.png

arrangingcontent10_en-US.png

Consideraciones

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

Las columnas añadidas en las vistas de escritorio o tablet ocuparán todo el ancho de la página cuando se cambie a la vista de dispositivo móvil; para crear una fila con dos columnas en la vista de dispositivo móvil, primero cambia a esta vista y, a continuación, añade un complemento de dos columnas.

Preguntas frecuentes

¿Cómo se colocan complementos uno al lado del otro?

Hay varias formas de organizar complementos en paralelo. Puedes arrastrar un complemento al sitio web, añadir una columna a la fila en la que se ha colocado ese complemento y, a continuación, arrastrar otro complemento a esa columna. También puedes arrastrar el complemento de dos columnas al sitio web y, a continuación, arrastrar y soltar el complemento en cada columna. 

arrangingcontent11_en-US.png

arrangingcontent12_en-US.png

¿Cómo se selecciona una columna o una fila?

Los complementos a menudo ocupan todo el tamaño de una columna o una fila, por lo que es difícil seleccionarlos. Para solucionar esto, haz clic con el botón derecho en el complemento de la columna o la fila que desees seleccionar, coloca el cursor sobre la opción Seleccionar contenedor y, a continuación, selecciona Columna o Fila.

arrangingcontent13_en-US.png

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

De ninguna manera. Una columna vacía no se muestra en el sitio activo. Simplemente está disponible por si deseas incluir contenido en ella. Puedes eliminar la columna eliminando la fila que la contiene.

¿Puedo cambiar la forma en la que se muestra el contenido en la vista móvil?

¡Sí! Puede activar la opción de invertir el orden de las columnas en el diseño de la fila para cambiar cómo se muestran las columnas en la vista de móvil en cada fila.arrangingcontent14_en-US.png

Recursos

  • Para obtener más información sobre cómo añadir complementos al sitio web, consulta Añadir complementos.
  • Para obtener más información acerca de cómo modificar complementos, consulte Modificar complementos.