Descripción general del editor

Este artículo repasa las zonas del editor y explica cómo añadir y configurar secciones, filas, columnas y filas interiores, además de cómo alinear los widgets.

Descripción general de la interfaz del editor

El editor se divide en varias zonas predefinidas: la barra de navegación superior, el panel lateral y el área central de contenido (que a menudo se llama editor canvas). Estas zonas son la base para construir sitios web según tu propia visión.

Barra de navegación superior

La barra de navegación superior del editor contiene accesos rápidos muy útiles para distintas acciones del sitio.

Esto es lo que encuentras en la barra de navegación superior:

• Menú de hamburguesa. Abre el menú de hamburguesa, en la parte izquierda de la barra de navegación superior, para acceder al Panel de control del proyecto, al idioma de la plataforma y a distintos recursos de creación de sitios y de soporte.
• Navegación entre páginas. Haz clic en el desplegable de páginas para ver la lista de páginas de tu sitio. Desde ese menú puedes ir a una página seleccionándola.
• Iconos de dispositivo. Con los iconos de dispositivo cambias entre distintos tamaños de pantalla (también llamados breakpoints). Así ves una vista previa de cómo se muestra tu página actual en distintos tamaños, desde escritorio hasta tablet y móvil. Para saber más, consulta «Screen Sizes and Devices».
• Deshacer y rehacer. Haz clic en los botones Deshacer o Rehacer cuando lo necesites mientras trabajas en el editor.
• Indicador de guardado. El icono de la marca de verificación muestra en qué punto está tu sitio y si los cambios se han guardado correctamente.
• Vista previa de los cambios. Haz clic para ver una vista previa de tu sitio, incluidos los cambios sin publicar, en todos los tamaños de pantalla o en uno concreto.
• 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 a tu Panel de control del proyecto.

Panel lateral

El panel lateral es tu caja de herramientas completa para gestionar distintos aspectos del diseño y el funcionamiento de tu sitio.

Estas son las opciones predeterminadas del panel lateral:

• Añadir. Desde aquí arrastras y sueltas widgets, medios y texto del sitio sobre el canvas.
• Páginas. Añade, consulta y gestiona páginas y pop-ups.
• Tema. Define los estilos y ajustes predeterminados de todos los textos, colores, botones, imágenes, fondos, filas, columnas, el diseño, el ancho y los espaciados de tu sitio.
• CMS. Gestiona las colecciones y el contenido recopilado.
• SEO/AEO. Gestiona los ajustes de SEO de páginas, imágenes, enlaces internos y externos, y más.
• Más. Da acceso a Personalización, Configuración y al Panel de control del proyecto.

Área de contenido / Canvas

En el área de contenido / canvas mueves o añades nuestras funciones, o haces clic en ellas para editarlas. Ahí cambias imágenes y textos, editas y eliminas botones, y mucho más.

Estructura del Creador de sitios web

El Creador de sitios web se compone de un header, un footer, filas, secciones y columnas. Cada widget que añades se inserta en una de estas zonas.

Filas

Las filas son las zonas horizontales de tu sitio. Cuando añades widgets y columnas, se colocan dentro de estas filas. Para cambiar cómo se muestra el contenido en la vista móvil, haz clic en la opción para invertir el orden de las columnas en el editor de filas.

Para añadir filas, arrastra widgets al sitio. Al arrastrar un widget entre dos filas o a un espacio donde quieras una fila nueva, se crea una fila al soltarlo.

Para eliminar una fila, haz clic con el botón derecho en cualquier punto de la fila para abrir el menú contextual y luego en Suprimir. También puedes hacer clic en el botón Fila, en la esquina superior izquierda de la fila, y después en Suprimir.

Encontrarás información detallada sobre cómo editar y organizar filas más abajo, en «Editor de filas».

Editor de filas

Con el editor de filas cambias el fondo de una fila (color o imagen), añades un borde o ajustas su espaciado interior y exterior. Las filas te sirven para organizar y ordenar el contenido de tu sitio.

Para configurar filas, pasa el ratón por la parte superior izquierda de una fila hasta que aparezca un botón de fila y haz clic en Fila. Aparece el menú del editor de filas.

Tienes estas opciones de configuración:

• Haz clic en las flechas Mover fila hacia arriba y Mover fila hacia abajo para subir o bajar la fila actual.
• Haz clic en Añadir y elige una de estas opciones:
  • Fila superior. Añade una fila nueva encima de la actual.
  • Fila inferior. Añade una fila nueva debajo de la actual.
  • Sección. Añade una sección a la fila existente.
  • Columna. Añade una columna a la fila existente.
  • Fila interior. Añade una fila dentro de la fila actual.
• Para eliminar el espaciado interior de la fila, haz clic en Relleno transparente.
• Para devolver el espaciado al valor que definiste en el espaciado del tema, haz clic en Restablecer espaciado predeterminado.
• Para añadir una animación de entrada a la fila (por ejemplo, aparecer desde la derecha, entrar con rebote o con zoom), haz clic en Entrance Animation y elige una opción.
• Para guardar la fila como sección, haz clic en Guardar como sección y elige si quieres guardar solo la fila actual, varias filas o la página entera.
• Para ocultar la fila actual en un dispositivo concreto (escritorio, tablet, móvil), haz clic en Ocultar de y elige el dispositivo.
• Para copiar la fila, haz clic en Copiar.
• Para fijar la fila como ancla en la página o eliminar un ancla existente, haz clic en Establecer como ancla o Edit Anchor.
• Para eliminar la fila, haz clic en Suprimir.

Editor de diseño de filas

Para editar el estilo del fondo o el espaciado de la fila:

1. Pasa el ratón por la parte superior izquierda de una fila hasta que aparezca un botón de fila, haz clic en Fila y luego en Editar diseño.
2. En la pestaña Configuración tienes estas opciones:
   • Full bleed row. Para convertir la fila en una fila a sangre completa, en la que el contenido ocupa todo el ancho de la pantalla, haz clic en la opción Full bleed row. Si prefieres no usar filas a sangre completa, el ancho del contenido se limita a 960px.
3. En la pestaña Estilo, elige un Color de fondo, una Imagen o un Vídeo. Tienes estas opciones:
   • Color
     • Elige un Color de fondo. Un color degradado anula la imagen, y al revés.
     • Haz clic en Borde para elegir un tipo de borde y mueve el control deslizante para ajustar su grosor.
     • Para añadir una sombra, haz clic en la opción Sombra y elige su color, tipo y posición.
   • Image

     • Para añadir una imagen al fondo, haz clic en + para abrir el selector de imágenes.

     • Para crear un slider de imágenes de fondo, selecciona varias imágenes en el selector; consulta «Slider de imágenes de fondo» más abajo.

     • Elige si la imagen se muestra como Cover, Imagen completa, Tile o Sin repetición.

     • Para activar el desplazamiento parallax en una imagen de fondo, haz clic en la opción Desplazamiento con paralaje. Cuando está activada, el contenido del fondo se desplaza más despacio que el del primer plano.

       Nota: el desplazamiento parallax no está disponible para el slider de imágenes de fondo ni en móvil. La opción de mantener una imagen de fondo estática no está disponible en tablet ni en móvil por una limitación de iOS.

     • Configura la Posición, el Superposición de fondo, el Borde y la Sombra de la imagen.

   • Video. Haz clic en Seleccionar vídeo para ver los vídeos que has subido, o pega la URL del vídeo de YouTube, Vimeo o Dailymotion en el campo correspondiente. Encontrarás más información sobre los fondos de vídeo en «Element Backgrounds».

Nota: encontrarás más información sobre los fondos en «Element Backgrounds».

Columnas

Cada fila contiene al menos una columna. Las columnas albergan todos los widgets de tu sitio y controlan cómo se disponen. Cada vez que añades una columna nueva, aparece junto a la que ya había en esa fila.

En las vistas de escritorio y tablet, cada fila admite hasta cuatro columnas; en móvil, en cambio, una fila muestra como máximo dos. Las columnas que añades en escritorio o tablet ocupan todo el ancho de la página al pasar a la vista móvil. Para crear una fila con dos columnas en móvil, cambia primero a la vista móvil y añade luego un widget de dos columnas.

Para eliminar una columna, haz clic con el botón derecho en cualquier punto de la columna para abrir el menú contextual y luego en Suprimir. También puedes hacer clic en la X roja de la esquina superior derecha de la columna.

Puedes colocar widgets directamente en las columnas o estructurarlas más añadiendo filas interiores.

Editor de columnas

Con el editor de columnas cambias el fondo de una columna (color o imagen), añades un borde o ajustas su espaciado interior y exterior. Las columnas te sirven para organizar y ordenar el contenido de una fila.

Para configurar una columna:

1. Haz clic con el botón derecho en la columna. Aparece el menú del editor de columnas.

   Nota: si la columna no tiene espaciado interior, el clic derecho no funciona directamente sobre ella. En ese caso, haz clic con el botón derecho en un widget que esté dentro de la columna (esto abre el menú contextual del widget y muestra su nombre en la parte superior), haz clic en Select Container y elige Columna. Para comprobar que has pasado al menú contextual de la columna, mira en la parte superior: ahí debería poner ahora Columna.

2. Haz clic en las flechas Mover columna hacia la izquierda y Mover columna hacia la derecha para mover la columna actual a la izquierda o a la derecha (las flechas están desactivadas si solo hay una columna).

3. Para abrir el editor de diseño de columnas, haz clic en Editar diseño. Encontrarás más información más abajo, en «Editor de diseño de columnas». Aparece el editor de diseño de columnas.

4. Haz clic en Añadir y elige una de estas opciones:

   • Columna. Añade una columna nueva a la fila actual (como máximo 4 columnas por fila en escritorio y 2 en móvil).
   • Fila interior. Añade una fila dentro de la columna actual.
   • Widget siguiente. Añade un widget.

5. Para eliminar el espaciado interior de la columna, haz clic en Relleno transparente.

6. Para devolver el espaciado al valor que definiste en el espaciado del tema, haz clic en Restablecer espaciado predeterminado.

7. Para añadir una animación de entrada a la columna (por ejemplo, aparecer desde la derecha, entrar con rebote o con zoom), haz clic en Entrance Animation y elige una opción.

8. Para ocultar la columna actual en un dispositivo concreto (escritorio, tablet, móvil), haz clic en Ocultar de y elige el dispositivo.

9. Para copiar la columna, haz clic en Copiar.

10. Para fijar la columna como ancla en la página o eliminar un ancla existente, haz clic en Establecer como ancla o Edit Anchor.

11. Para eliminar la columna, haz clic en Suprimir.

Editor de diseño de columnas

Para editar el estilo del fondo o el espaciado de una columna:

1. Haz clic con el botón derecho en la columna y luego en Editar diseño.

   Nota: si la columna no tiene espaciado interior, el clic derecho no funciona directamente sobre ella. En ese caso, haz clic con el botón derecho en un widget que esté dentro de la columna (esto abre el menú contextual del widget y muestra su nombre en la parte superior), haz clic en Select Container y elige Columna. Para comprobar que has pasado al menú contextual de la columna, mira en la parte superior: ahí debería poner ahora Columna.

2. En la pestaña Estilo, elige un Color de fondo, una Imagen o un Vídeo. Tienes estas opciones:

   • Color
     • Elige un Color de fondo. Un color degradado anula la imagen, y al revés.
     • Haz clic en Borde para elegir un tipo de borde y mueve el control deslizante para ajustar su grosor.
     • Para añadir una sombra, haz clic en la opción Sombra y elige su color, tipo y posición.
   • Image
     • Para añadir una imagen al fondo, haz clic en + para abrir el selector de imágenes.
     • Para crear un slider de imágenes de fondo, selecciona varias imágenes en el selector; consulta «Slider de imágenes de fondo» más abajo.
     • Elige si la imagen se muestra como Cover, Imagen completa, Tile o Sin repetición.
     • Configura la Posición, el Superposición de fondo, el Borde y la Sombra de la imagen.
   • Video. Haz clic en Seleccionar vídeo para ver los vídeos que has subido, o pega la URL del vídeo de YouTube, Vimeo o Dailymotion en el campo correspondiente. Encontrarás más información sobre los fondos de vídeo en «Element Backgrounds».

Nota: encontrarás más información sobre los fondos en «Element Backgrounds».

Slider de imágenes de fondo

Los sliders de imágenes de fondo sirven para poner imágenes de fondo en filas o columnas.

Cuando hayas seleccionado varias imágenes en el selector, haz clic en Hecho. Una vez creado el slider, elige una Transición de las diapositivas en el menú desplegable y mueve el control deslizante para elegir una Velocidad de la presentación de diapositivas (en segundos).

Al slider puedes aplicarle el resto de opciones de imagen de fondo, como Superposición de fondo, la posición y el estilo de visualización.

Filas interiores

Las filas interiores dan más libertad de diseño porque te permiten añadir filas dentro de columnas. Con ellas puedes variar el diseño de las columnas y conservar el diseño general de la fila (por ejemplo, el fondo, el espaciado o el sangrado).

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 sus columnas en móvil. Las columnas de una fila interior admiten cualquier widget, pero no puedes añadir filas interiores dentro de esas columnas.

Para añadir una fila interior a una columna, haz una de estas cosas:

• Haz clic con el botón derecho en la fila y luego en Añadir fila interior. Si la fila tiene varias columnas, elige a cuál quieres añadir la fila interior.
• Haz clic con el botón derecho en la columna y luego en Añadir fila interior.
• Haz clic con el botón derecho en la fila interior y luego en Agregar fila para colocar una fila interior debajo de la actual.

Ejemplo de filas interiores

Para ilustrar cómo se usan las filas interiores, veamos dos formas de diseñar un layout con un título y 3 botones:

Ejemplo 1: añade dos filas. Coloca el título en la fila 1 con 1 columna. Divide la fila 2 en 3 columnas. Pon un botón en cada columna. Ten en cuenta que dos filas separadas no pueden compartir la misma imagen de fondo, y que tienes que ajustar el espaciado y el estilo de sangrado por separado en cada fila.

Ejemplo 2: añade una fila. Por defecto, cada fila contiene una columna. Añade 2 filas interiores a la columna. Coloca el título en la fila interior 1. Divide la fila interior 2 en 3 columnas. Pon un botón en cada columna. Estas dos filas interiores comparten el fondo, el espaciado y el sangrado de la fila principal.

Algunas cosas importantes al editar filas interiores:

• Las flechas para reordenar solo cambian el orden entre filas interiores. Para cambiar el orden entre widgets y filas interiores, tienes que arrastrar los widgets manualmente por encima o por debajo de la fila interior.
• Los widgets de 2, 3 y 4 columnas no se pueden colocar en filas interiores. Para añadir una columna, haz clic con el botón derecho en la fila y luego en Añadir columna.
• A diferencia de las filas normales, las filas interiores no se pueden copiar y pegar.

Secciones diseñadas (plantillas de sección prediseñadas)

Las secciones son filas de elementos ya montadas que puedes añadir a tus sitios responsivos. Con ellas creas sitios atractivos rápidamente y ahorras tiempo durante el diseño. La infraestructura se creó para ofrecer una mejor experiencia con una gran variedad de secciones prediseñadas.

Nota:

• Las secciones no usan CSS personalizado; las crean íntegramente diseñadores dentro del editor.
• Las secciones no toman el color ni la fuente del texto de los ajustes del tema del sitio. Aun así, siempre puedes quitar el formato y aplicar tu propio diseño.

Añadir secciones

Para añadir secciones de widgets:

1. Pasa el ratón entre dos filas y haz clic en Añadir sección.
2. Elige Diseñado. Las secciones aparecen en el panel lateral.
3. En el modo de secciones, el panel izquierdo muestra una galería de secciones prediseñadas, agrupadas por categorías (Intro, Features, About, Team, Testimonials, etc.).
4. En el panel lateral, haz clic en una sección para mostrarla como una fila nueva. Después puedes desplazarte por las secciones del mismo grupo con las teclas de flecha o elegir una sección de otro grupo.
5. Para incorporar la sección al sitio, haz clic en Guardar. También puedes hacer clic en Guardar y añadir otro para seguir añadiendo secciones. La sección se convierte en una fila y todos sus elementos se pueden editar.

Crear una sección flex con IA

Para simplificar el proceso de creación y ganar libertad de diseño, puedes usar el Asistente de IA para generar el contenido y el diseño de las secciones flex.

Encontrarás instrucciones detalladas para crear secciones flex con IA en «Crear una sección flex con IA».

Alineación de widgets

Cuando alineas widgets dentro de la misma columna, el creador de sitios intenta ajustarlos con Snap to Align para que tengan exactamente el mismo tamaño. Al cambiar el tamaño, salta hacia delante o hacia atrás para encajar en la posición. Así es más fácil que dos widgets queden idénticos de tamaño.

También existe la función Snap to Grid, que te ayuda a colocar los widgets en las páginas de tu sitio con precisión profesional. Con este sistema alineas los widgets en horizontal y en vertical dentro de columnas y filas. Al mover un elemento por su fila o columna, o al cambiar el tamaño de un widget, aparecen unas guías. Los elementos alineados se marcan con un borde de color. Según el caso, un widget puede alinearse con más de un widget a la vez.

La alineación funciona en las vistas de los tres dispositivos (escritorio, tablet, móvil).