Descripción general del editor

La barra de navegación superior contiene atajos útiles para diferentes acciones del sitio.

La barra de navegación superior le permite:

El panel lateral sirve como un conjunto de herramientas completo para gestionar varios aspectos del diseño y la funcionalidad de su sitio. Puedes realizar cambios amplios y radicales en el diseño y la funcionalidad de tu sitio. Estas pestañas le permiten personalizar la apariencia de su sitio, agregar nuevas funciones y widget, configurar los ajustes de la página, gestionar el contenido, vender productos en línea, publicar publicaciones de blog, instalar aplicaciones y optimizar su sitio para los motores de búsqueda.

Si está en el Editor tradicional usando el modo flexible o en el Editor 2.0, tendrá acceso al panel Capas. El panel Capas proporciona una vista jerárquica de los elementos de la página de tu sitio, lo que te permite navegar y gestionar fácilmente estructuras complejas. Aquí, puede identificar rápidamente la disposición de widget, columnas y secciones, lo que simplifica el proceso de ubicación y ajuste de elementos específicos. Desde el panel Capas, puede realizar varias acciones, como agregar nuevos elementos, seleccionar elementos, reorganizar elementos, cambiar el nombre de los elementos y alternar la visibilidad de los elementos en puntos de interrupción específicos.

A continuación se muestran las opciones disponibles en el panel lateral:

El Área de Contenido / Lienzo es donde puede mover o agregar cualquiera de nuestras características, o hacer clic y editar para cambiarlas. El área de contenido le permite cambiar imágenes, texto, botones de edición y eliminación, y más.

El panel de diseño ofrece una gama de configuraciones de diseño para los elementos seleccionados, lo que permite una personalización precisa. Ya sea que esté ajustando el diseño, la alineación del contenido, el espaciado entre elementos, la animación y el fondo, el panel de diseño proporciona un conjunto completo de tool para mejorar el atractivo visual de su sitio web. Las opciones de diseño incluyen ajustes de diseño, configuraciones de tamaño, ajustes de alineación y más, adaptados al elemento seleccionado.

Cuando ajusta configuraciones como relleno y margen después de seleccionar un elemento, el relleno se refiere al espacio interior que está entre el contenido y el borde de un recuadro, y el margen define el espacio exterior que rodea el recuadro. Eso significa que los ajustes de relleno pueden afectar el tamaño del elemento y determinar qué cantidad de color de fondo o imagen es visible dentro del recuadro. En cambio, el ajuste de los márgenes determina cómo el elemento interactúa con los elementos adyacentes o los bordes de la pantalla y define su posición en relación con los otros elementos de la página, como si fueran barreras invisibles.

Para obtener más información sobre el Panel de diseño y sus secciones, consulte Panel de diseño.

Las filas son las secciones horizontales de tu sitio. Cuando agregas widget y columnas a tu sitio, se colocan dentro de estas filas. Para cambiar la forma en que se muestra el contenido en la vista móvil, haga clic en el botón de alternancia Orden inverso de las columnas en el editor de filas.

Puede agregar filas a su sitio arrastrando widget al sitio. Cuando arrastre un widget entre filas o en un espacio donde desee agregar una fila, se creará una nueva fila cuando suelte el widget.

Para eliminar una fila, haga clic con el botón secundario en cualquier parte de la fila para abrir el menú contextual y, a continuación, haga clic en Eliminar. También puede hacer clic en el botón Fila en la esquina superior izquierda de la fila y haga clic en Eliminar.

Para obtener información detallada sobre la edición y organización de filas, consulte Editor de filas.

Cada fila contiene al menos una columna. Las columnas contienen todos los widget de su sitio y controlan su disposición. Cada vez que se agrega 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 secundario en cualquier parte de la columna para abrir el menú contextual y, a continuación, haga clic en Eliminar. También puede hacer clic en la X roja en la esquina superior derecha de la columna.

Puede colocar widget directamente en columnas, o estructurar aún más la columna agregando filas interiores.

Los controles deslizantes de imagen de fondo se pueden usar para establecer imágenes de fondo para filas o columnas.

Luego de seleccionar varias imágenes en el selector de imágenes, haga clic en Listo. Una vez creado el control deslizante, seleccione una transición de diapositiva en el menú desplegable y mueva el control deslizante para seleccionar una velocidad de deslizamiento (segundos).

Cualquiera de las otras opciones disponibles para las imágenes de fondo, como Superposición del fondo, Posicionamiento y Estilo de presentación, se puede aplicar al deslizador.

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

Al igual que las filas normales, las filas internas pueden tener su propio fondo y espaciado, dividir en hasta cuatro columnas y cambiar el orden de las columnas en dispositivos móviles. Las columnas de las filas internas se pueden rellenar con cualquier widget, pero las filas internas no se pueden agregar a dichas columnas.

Para agregar una fila interna a una columna, haga una de las siguientes acciones:

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:

Ejemplo 1: agregar 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. Tenga en cuenta que 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 fila.

Ejemplo 2: agregar una fila. De forma predeterminada, cada fila contiene una columna. Agregar 2 filas interiores a la columna. Coloque el título en la fila interior 1. Divida la fila interior 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.

• 2 columnas, 3 columnas, 4 columnas widget no se pueden colocar en filas interiores. Para agregar una columna, haga clic con el botón secundario en la fila y haga clic en agregar columna.

• A diferencia de las filas normales, las filas internas no se pueden copiar y pegar.

Las secciones son filas preconstruidas de elementos que los usuarios pueden agregar a sus sitios responsivos. Las secciones permiten a los usuarios crear sitios de gran apariencia rápidamente al ahorrar tiempo durante el proceso de diseño. La infraestructura se construyó con el fin de proporcionar una mejor experiencia de usuario con una variedad de secciones prefabricadas.

Al alinear widget dentro de la misma columna, el Website Builder intenta ajustar para alinearlas para que tengan exactamente el mismo tamaño. A medida que cambia el tamaño, el constructor salta hacia adelante o hacia atrás para ajustar a la ubicación. Esto debería hacer que sea más fácil hacer widget exactamente del mismo tamaño.

También hay una función Ajustar a la cuadrícula. La función Ajustar a la cuadrícula ayuda a colocar widget en las páginas de su sitio con precisión profesional. Este sistema le permite alinear widget horizontal y verticalmente dentro de columnas y filas. Las reglas se presentan al mover un elemento en su fila o columna, o al cambiar el tamaño del widget. Los elementos alineados están marcados con un borde de color. Un widget puede estar alineado con más de un widget, dependiendo del caso de uso 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 la configuración de encabezados y pies de página, consulte: