Este artículo cubre las áreas del editor y cómo agregar y configurar la alineación de secciones, filas, columnas, filas interiores y widgets.
El editor se puede dividir en varias áreas.
En el editor hay varias secciones predefinidas: la barra de navegación superior, el panel lateral, el área de contenido central (a menudo denominada lienzo del editor). Estas secciones son la base para construir sitios web de acuerdo con la visión del usuario.
La barra de navegación superior del editor contiene atajos útiles para diferentes acciones del sitio.
La barra de navegación superior le permite:
-
Menú de hamburguesas. Abre el menú tipo hamburguesa en el lado izquierdo de la barra de navegación superior para acceder al modo de desarrollo, al panel de control del sitio, al idioma de la plataforma y a varios recursos de soporte y creación de sitios
-
Navegación de páginas. Haz clic en el menú desplegable de páginas para ver una lista de las páginas de tu sitio. Puedes navegar hasta una página seleccionándola en este menú
-
Iconos de dispositivos. Cambia entre vistas de diferentes tamaños de pantalla (también denominadas puntos de interrupción) haciendo clic en los iconos del dispositivo. Esto le permite obtener una vista previa del aspecto de su página actual en distintos tamaños de pantalla, desde ordenadores de sobremesa hasta tabletas y dispositivos móviles Para obtener más información, consulta Tamaños de pantalla y dispositivos.
-
Deshacer y rehacer. Haga clic en los botones Deshacer o Rehacer según sea necesario cuando trabaje en el editor.
-
Guardar indicador de progreso: El icono de la marca de verificación sirve como indicador del progreso actual del sitio y de si los cambios se han guardado correctamente.
-
Comentarios del sitio. Haga clic para abrir el panel de comentarios del sitio. Si hay un comentario nuevo, aparece un punto rojo en el botón de comentarios del sitio en la barra superior.
-
Compartir. Haz clic en Compartir para acceder al enlace de vista previa de tu sitio según el tamaño de la pantalla, el dominio del sitio, el nombre del sitio y la administración de clientes
-
Cambios en la vista previa: Haz clic para obtener una vista previa del sitio, incluidos los cambios no publicados, en todos los tamaños de pantalla de los dispositivos o en algunos de ellos.
-
Publicar o volver a publicar: Usa el botón de publicar o volver a publicar para publicar tu sitio con los últimos cambios.
-
Botón de inicio: Haz clic en el icono de inicio para volver al panel de control de tu sitio.
El panel lateral sirve como un conjunto de herramientas completo para administrar varios aspectos del diseño y la funcionalidad de su sitio.
Las siguientes son las opciones predeterminadas disponibles en el panel lateral:
-
Añadir. Desde este elemento, puede arrastrar y soltar fácilmente widgets, medios y texto del sitio en el lienzo.
-
Páginas. Agregue, vea y administre páginas y ventanas emergentes.
-
Tema. Defina los estilos y ajustes predeterminados para todo el texto, los colores, los botones, las imágenes, los fondos, las filas, las columnas, el diseño, el ancho y el espaciado de su sitio.
-
CMS. Gestione las colecciones y el contenido recopilados de los clientes.
-
SEO/AEO. Administre la configuración de SEO para páginas, imágenes, enlaces internos y externos, y más.
-
Más. Proporciona acceso al blog, Personalización, Configuración y panel de control del sitio.
Tenga en cuenta que después de instalar Blog lo es agregado a su panel lateral para un acceso fácil y rápido.
El creador de sitios web se construye a partir de un encabezado, pie de página, filas, secciones, y columnas. Cada widget que añadas se inserta en una de estas secciones.
Las filas son las secciones horizontales de tu sitio. Cuando agregas widgets 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, haz clic en la opción de cambiar el orden de las columnas en el editor de filas
Puedes añadir filas a tu sitio arrastrando los widgets al sitio. Cuando arrastras un widget de una fila a otra o a un espacio en el que quieras añadir una fila, se creará una fila nueva al soltar 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 clicEliminar. Como alternativa, haga clic enFilabotón en la esquina superior izquierda de la fila y haga clicEliminar.
Para obtener información detallada sobre la edición y organización de filas, consulteEditor de filas.
Usa el editor de filas para cambiar el fondo de la fila (color o imagen), añadir un borde o ajustar el espaciado interior y exterior de la fila. Usa filas para organizar y organizar el contenido de tu sitio.
Para configurar filas, pase el ratón por encima de la esquina superior izquierda de una fila hasta que aparezca un botón de fila y haga clicFila. Aparece el menú del editor de filas.
Dispone de las siguientes opciones de configuración:
-
Haga clic enMover la fila hacia arribayMueve la fila hacia abajoflechas para mover la fila actual hacia arriba o hacia abajo.
-
Haga clic+Agregary seleccione una de las siguientes opciones:
-
Fila de arriba. Agregue una nueva fila por encima de la fila actual.
-
Fila de abajo. Agregue una nueva fila debajo de la fila actual.
-
Sección. Añade una sección a la fila existente.
-
Columna. Agregue una columna a la fila existente.
-
Fila interior. Agregue una fila dentro de la fila actual.
-
-
Para borrar el espaciado interior dentro de la fila, haga clicBorrar relleno.
-
Para revertir el espaciado al que definió en el espaciado del tema, haga clic enRestablecer el espaciado predeterminado.
-
Para añadir una animación de entrada a la fila (por ejemplo, difuminar desde la derecha, rebotar o ampliar), haga clic enAnimación de entraday seleccione una opción.
-
Para guardar la fila como una sección, haga clicGuardar como seccióny seleccione guardar solo la fila actual, varias filas o la página completa.
-
Para ocultar la fila actual en un dispositivo específico (escritorio, tableta, móvil), haga clic enOcultar en el dispositivoy selecciona el dispositivo.
-
Para bloquear la fila para que el cliente la edite, haga clicBloquear para la edición por parte del cliente.
-
Para copiar la fila, haga clic enCopiar.
-
Para anclar la fila a la página o eliminar un ancla existente, haga clicEstablecer como ancla o editar ancla.
-
Para eliminar la fila, haga clicEliminar.
Para editar el estilo de fondo o el espaciado de la fila:
-
Pase el ratón por encima de la esquina superior izquierda de una fila hasta que aparezca un botón de fila y haga clicFilay, a continuación, haga clicEditar diseño.
-
En elAjustespestaña, tiene las siguientes opciones:
-
Fila de sangre completa. Para convertir la fila en una fila completa, que permita que el contenido ocupe todo el ancho de la pantalla, haga clic enFila de sangrado completoalternar. Si eliges no tener filas de sangrado completo, el ancho del contenido está limitado a
-
-
En elEstilopestaña, selecciona usar un color de fondo, una imagen o un vídeo. Dispone de las siguientes opciones:
-
Color
-
Selecciona unColor de fondo. El color degradado anula la imagen y viceversa.
-
Haga clicFronterapara seleccionar un tipo de borde y mueva el control deslizante para establecer el ancho del borde.
-
Para añadir una sombra, haga clic enSombraalterna y selecciona un color, un tipo y una posición para la sombra.
-
-
Imagen
-
Para añadir una imagen al fondo, haga clic+para abrir el selector de imágenes.
-
Para crear un control deslizante de imágenes de fondo, seleccione varias imágenes en el selector de imágenes y consulteDeslizador de imágenes de fondo.
-
Seleccione esta opción para que la imagen se muestre comoPortada,Imagen completa,Azulejo, oNo se repite.
-
Para habilitar el desplazamiento en paralaje en una imagen de fondo, haga clic enDesplazamiento de paralajealternar. Cuando está habilitada, el contenido en segundo plano se desplaza más lentamente que el contenido en primer plano
Nota
-
El desplazamiento en paralaje no es una opción para el control deslizante de imágenes de fondo ni para dispositivos móviles.
-
La opción de mantener una imagen de fondo estática no está disponible para tabletas y dispositivos móviles debido a una limitación de iOS.
-
-
Configure el Posición, Superposición de fondo, Frontera, y Sombra para la imagen.
-
-
Vídeo. Haga clicSeleccione Vídeopara ver los vídeos subidos o pega la URL del vídeo de YouTube, Vimeo o Dailymotion en el campo correspondiente. Para obtener más información sobre los fondos de vídeoFondos de elementos.
Nota
Para obtener más información sobre los antecedentes, consulte Fondos de elementos.
-
Cada fila contiene al menos una columna. Las columnas contienen todos los widgets de tu sitio y controlan su disposición. Siempre que añadas una nueva columna, aparece junto a la columna existente en esa fila.
Si bien las vistas de escritorio y tableta permiten que cada fila contenga hasta cuatro columnas, los sitios web móviles solo pueden mostrar como máximo dos columnas seguidas. Las columnas añadidas en las vistas de escritorio o tableta ocuparán todo el ancho de la página cuando cambies a la vista móvil; para crear una fila con dos columnas en la vista móvil, primero cambia a la vista móvil y, a continuación, añade 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 clicEliminar. También puede hacer clic en el rojoXen la esquina superior derecha de la columna.
Puedes colocar el widget directamente en las columnas o estructurar aún más la columna añadiendo filas interiores.
Usa el editor de columnas para cambiar el fondo de una columna (color o imagen), añadir un borde o ajustar el espaciado interior y exterior de la columna. Usa las columnas para organizar y organizar el contenido en una fila.
Para configurar una columna:
-
Haga clic con el botón derecho en la columna. Aparece el menú del editor de columnas.
Nota
Si no hay relleno en la columna, no se podrá acceder directamente al hacer clic con el botón derecho. Para acceder a la columna en este caso, haga clic con el botón derecho en un widget que se encuentre en la columna (esto debería abrir el menú contextual del widget y anotará su nombre en la parte superior),Seleccione Contenedor, seleccionaColumna. Para comprobar que ha cambiado al menú contextual de la columna, consulta la parte superior; ahora debería decirColumna.
-
Haga clic enMover la columna a la izquierdayMover la columna a la derechaflechas para mover la columna actual hacia la izquierda o hacia la derecha (las flechas se desactivarán si solo hay una columna).
-
Para abrir el editor de diseño de columnas, haga clic enEditar diseño. Para obtener más información, consulteEditor de diseño de columnas. Aparece el editor de diseño de columnas.
-
Haga clic+Agregary seleccione una de las siguientes opciones:
-
Columna. Agregue una nueva columna a la fila actual (se pueden agregar un máximo de 4 columnas por fila en computadoras de escritorio y 2 en dispositivos móviles).
-
Fila interior. Añade una fila dentro de la columna actual.
-
Widget a continuación. Añade un widget.
-
-
Para borrar el espaciado interior de la columna, haga clicBorrar relleno.
-
Para revertir el espaciado al que definió en el espaciado del tema, haga clic enRestablecer el espaciado predeterminado.
-
Para añadir una animación de entrada a la columna (por ejemplo, difuminar desde la derecha, rebotar o ampliar), haga clic enAnimación de entraday seleccione una opción.
-
Para ocultar la columna actual en un dispositivo específico (escritorio, tableta, móvil), haga clic enOcultar en el dispositivoy selecciona el dispositivo.
-
Para bloquear la columna para que el cliente la edite, haga clicBloquear para la edición por parte del cliente.
-
Para copiar la columna, haga clicCopiar.
-
Para anclar la columna a la página o eliminar un ancla existente, haga clicEstablecer como anclaoEditar Anchor.
-
Para eliminar la columna, haga clicEliminar.
Para editar el estilo de fondo o el espaciado de una columna:
-
Haga clic con el botón derecho en la columna y, a continuación, haga clicEditar diseño.
-
Nota
Si no hay relleno en la columna, no se podrá acceder directamente al hacer clic con el botón derecho. Para acceder a la columna en este caso, haga clic con el botón derecho en un widget que se encuentre en la columna (esto debería abrir el menú contextual del widget y anotará su nombre en la parte superior),Seleccione Contenedor, seleccionaColumna. Para comprobar que ha cambiado al menú contextual de la columna, consulta la parte superior; ahora debería decirColumna.
-
-
En elEstilopestaña, selecciona una usa Color de fondo,Imagen, oVídeo. Tienes las siguientes opciones:
-
Color
-
Selecciona unColor de fondo. El color degradado anula la imagen y viceversa.
-
Haga clicFronterapara seleccionar un tipo de borde y mueva el control deslizante para establecer el ancho del borde.
-
Para añadir una sombra, haga clic enSombraalterna y selecciona un color, un tipo y una posición para la sombra.
-
-
Imagen
-
Para añadir una imagen al fondo, haga clic+para abrir el selector de imágenes.
-
Para crear un control deslizante de imágenes de fondo, seleccione varias imágenes en el selector de imágenes y consulteDeslizador de imágenes de fondo.
-
Seleccione esta opción para que la imagen se muestre comoPortada,Imagen completa,Azulejo, oNo se repite.
-
Configure el Posición, Superposición de fondo, Frontera, y Sombra para la imagen.
-
-
Vídeo. Haga clicSeleccione Vídeopara ver los vídeos subidos o pega la URL del vídeo de YouTube, Vimeo o Dailymotion en el campo correspondiente. Para obtener más información sobre los fondos de vídeoFondos de elementos.
Nota
Para obtener más información sobre los antecedentes, consulte Fondos de elementos.
-
Los deslizadores de imagen de fondo se pueden usar para configurar imágenes de fondo para filas o columnas.
Tras seleccionar varias imágenes en el selector de imágenes, haga clicListo. Una vez creado el control deslizante, selecciona una transición de diapositiva en el menú desplegable y mueve el control deslizante para seleccionar una velocidad de deslizamiento (segundos).
Cualquier otra opción de imagen de fondo, como la superposición de fondo, el posicionamiento y el estilo de visualización, se puede aplicar al control deslizante.
Las filas interiores permiten una flexibilidad de diseño adicional al permitir añadir filas dentro de las columnas. Con la ayuda de las filas interiores, puede variar el diseño de las columnas y mantener el diseño general de la fila (por ejemplo, el fondo, el espaciado, el sangrado)
Al igual que las filas normales, las filas interiores pueden tener su propio fondo y espaciado, dividirse en hasta cuatro columnas y cambiar el orden de las columnas en dispositivos móviles. Las columnas de las filas interiores se pueden rellenar con cualquier widget, pero las filas interiores no se pueden añadir a dichas columnas.
Para agregar una fila interior a una columna, realice una de las siguientes acciones:
-
Haga clic con el botón derecho en la fila y seleccioneAgregar fila interior. Si hay varias columnas en la fila, elige a qué columna quieres añadir las filas interiores.
-
Haga clic con el botón derecho en la columna y seleccioneAgregar fila interior.
-
Haga clic con el botón derecho en la fila interior y seleccioneAgregar filapara colocar una fila interior debajo de la actual.
Para dar un ejemplo de cómo usar la fila interior, veamos dos formas en las que se puede diseñar un diseño que contenga un título y 3 botones:
Ejemplo 1: Añadir dos filas. Coloque el título en la fila 1 con 1 columna. Divida la fila 2 en 3 columnas. Coloca un botón en cada columna. Tenga en cuenta que dos filas independientes no pueden compartir la misma imagen de fondo y que debe establecer el espaciado y el estilo de sangrado por separado para cada fila
Ejemplo 2: Añadir una fila. De forma predeterminada, cada fila contiene una columna. Agregue 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 interiores compartirán el fondo, el espaciado y el sangrado de la fila principal.
Algunas consideraciones importantes a la hora de editar las filas interiores:
-
Solo puede usar las flechas de cambio de orden para cambiar el orden entre las filas interiores. Para cambiar el orden de los widgets y las filas interiores, debes arrastrar y soltar manualmente los widgets por encima o por debajo de la fila interior.
-
widgets de 2 columnas, 3 columnas y 4 columnas no se pueden colocar en las filas interiores. Para añadir una columna, haga clic con el botón derecho del ratón en la fila y seleccione Agregar columna.
-
A diferencia de las filas normales, las filas interiores no se pueden copiar y pegar.
Las secciones son filas prediseñadas de elementos que los usuarios pueden añadir a sus sitios adaptables. Las secciones permiten a los usuarios crear sitios atractivos rápidamente al ahorrar tiempo durante el proceso de diseño. La infraestructura se creó para proporcionar una mejor experiencia de usuario con una variedad de secciones prediseñadas
Nota
-
Las secciones no utilizan ningún CSS personalizado y los diseñadores las crean todas dentro del editor.
-
Las secciones no utilizan la configuración de color o fuente del texto de la configuración del tema del sitio. Sin embargo, siempre puedes borrar el formato y aplicar tu diseño.
Agregar secciones
Para añadir secciones de widgets:
-
Pase el ratón entre las filas y haga clic Agregar sección.
-
Seleccione Diseñado. Las secciones se muestran en el panel lateral.
-
En el modo Sección, hay disponible una galería de secciones prediseñadas en el panel izquierdo, agrupadas en categorías (Introducción, Características, Acerca de nosotros, Equipo, Testimonios, etc.).
-
En el panel lateral, haga clic en una sección para mostrarla como una fila nueva. A continuación, puede navegar por las secciones del mismo grupo utilizando las teclas de flecha o seleccionando una sección de un grupo diferente.
-
Para incrustar la sección en el sitio, haga clicGuardar. Como alternativa, haga clicGuardar y añadir otropara seguir añadiendo secciones a tu sitio. La sección se convierte en una fila y todos los elementos de la sección se pueden editar
Crea una sección flexible con IA
Para agilizar el proceso de creación y mejorar la flexibilidad del diseño, puedes utilizar el Asistente de IA para generar contenido y diseñar secciones flexibles.
Para obtener instrucciones detalladas sobre la creación de secciones flexibles con IA, consulteCrea una sección flexible con IA.
Al alinear los widgets dentro de la misma columna, el creador de sitios web intentaSnap para alineardeben tener exactamente el mismo tamaño. A medida que cambias el tamaño, el creador salta hacia adelante o hacia atrás para ajustarse a la ubicación. Esto debería facilitar la creación de widgets que tengan exactamente el mismo tamaño
También hay una función Snap to Grid. Snap to Grid La función ayuda a colocar los widgets en las páginas de su sitio con precisión profesional. Este sistema le permite alinear los widgets horizontal y verticalmente dentro de columnas y filas. Las reglas se muestran al mover un elemento de 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 otro widget, según el caso de uso específico.
La alineación es compatible con las vistas de los tres dispositivos diferentes (escritorio, tableta, móvil).