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 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 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 s 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 s al sitio. Cuando arrastra un entre filas o a un espacio donde desea que haya una fila, se creará una nueva fila al soltar el .
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.
Para obtener información detallada sobre cómo editar y organizar filas, consulte Editor de filas.
Columnas
Cada fila contiene por lo menos una columna. Las columnas incluyen todos los s 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.
- 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.
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 directamente en las columnas o estructurar la columna todavía más, agregando filas internas.
Para obtener información detallada sobre cómo editar y organizar columnas, consulte Editor de columnas.
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 , pero no se pueden agregar filas internas a dichas columnas.
Para agregar una fila interna a una columna, haga una de las siguientes acciones:
- 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.
- Haga clic con el botón derecho en la columna y presione Agregar fila interna.
- 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 s a su sitio:
- En el panel izquierdo, haga clic en Widgets.
- Busque el que desee y luego arrástrelo y suéltelo en su sitio.
Para eliminar un de su sitio, haga clic con el botón derecho en cualquier lugar del 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
Para ordenar los s en paralelo, arrastre un a su sitio, agregue una columna a la fila en la que se colocó el y luego arrastre otro a esa columna. Alternativamente, arrastre el de dos columnas a su sitio y luego arrastre y suelte los s en cada columna.
Ajustar para alinear
Mientras cambia el tamaño de los dentro de la misma columna, IONOS intentará Ajustar para alinear para que tengan exactamente el mismo tamaño. Mientras cambia el tamaño, IONOS saltará adelante o atrás para ajustarse a la ubicación. Esto debería hacer que sea más fácil que varios tengan exactamente el mismo tamaño.
Ajustar a la cuadrícula
La característica Ajustar a la cuadrícula ayuda a colocar s en las páginas de su sitio con precisión profesional. Este sistema le permite alinear s 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 . Los elementos alineados se marcan con un borde de color. Un puede estar alineado con más de un , dependiendo del uso/caso específico.
La alineación es admitida por las vistas de los tres tipos de dispositivo (escritorio, tableta, móvil).
Para obtener más información sobre cómo agregar y editar s, consulteAgregar widgets and Editar widgets.