Este artículo cubre las áreas del editor y cómo añadir y configurar secciones, filas, columnas, filas internas y la alineación de widgets.
Descripción general de la interfaz del editor
El editor puede dividirse en varias áreas.
En el editor, hay varias secciones predefinidas: la barra de navegación superior, el panel lateral, el área central de contenido (a menudo denominada lienzo del editor) y el panel de diseño lateral. Estas secciones son la base para construir sitios web según la visión del usuario.
Barra de navegación superior
La barra de navegación superior dentro del editor contiene accesos directos útiles para distintas acciones del sitio.
La barra de navegación superior te permite:
- Menú hamburguesa. Abre el menú hamburguesa en el lado izquierdo de la barra de navegación superior para acceder al modo desarrollador, al panel del sitio, al idioma de la plataforma y a varios recursos de creación y soporte del sitio.
- Navegación entre páginas. Haz clic en el menú desplegable de páginas para ver una lista de las páginas de tu sitio. Puedes ir a una página seleccionándola desde este menú.
- Iconos de dispositivos. Cambia entre distintas vistas de tamaños de pantalla (también llamadas puntos de quiebre o breakpoints) haciendo clic en los iconos de dispositivos. Esto te permite previsualizar cómo se ve tu página actual en varios tamaños de pantalla, desde escritorio hasta tableta y móvil.
- Deshacer y rehacer. Haz clic en los botones Deshacer o Rehacer según sea necesario mientras trabajas en el editor.
- Indicador de guardado de progreso. El icono de marca de verificación sirve como indicador de tu progreso actual en el sitio y de si los cambios se han guardado correctamente.
- Comentarios del sitio. Haz 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 por tamaño de pantalla, dominio del sitio, nombre del sitio y gestión del cliente.
- Vista previa de cambios. Haz clic para previsualizar tu sitio, incluidos los cambios no publicados, en todos o en tamaños de pantalla individuales de los dispositivos.
- Publicar o volver a publicar. Usa el botón de publicar o volver a publicar para publicar tu sitio con los cambios más recientes.
- Botón de inicio. Haz clic en el icono de inicio para volver al panel de tu sitio.
Panel lateral
El panel lateral sirve como un conjunto completo de herramientas para gestionar varios aspectos del diseño y la funcionalidad de tu sitio.
Las siguientes son las opciones predeterminadas disponibles en el panel lateral:
- Añadir. Desde este elemento, puedes arrastrar y soltar Widgets, Medios y Texto del sitio en el lienzo.
- Páginas. Añade, visualiza y gestiona páginas y ventanas emergentes.
- Tema. Define estilos y ajustes predeterminados para todo el texto, colores, botones, imágenes, fondos, filas, columnas, diseño, ancho y espaciado de tu sitio.
- CMS. Gestiona colecciones y contenido recopilado de los clientes.
- SEO/AEO. Gestiona la configuración de SEO para páginas, imágenes, enlaces internos y externos, y más.
- Más. Proporciona acceso a Blog, Tienda, Reservas, Personalización, Ajustes y Panel del sitio.
Ten en cuenta que, después de instalar Blog, Reservas o Tienda, se añaden al panel lateral para un acceso fácil y rápido.
Área de contenido / Lienzo
El Área de contenido / Lienzo es donde puedes mover o añadir cualquiera de nuestras funciones, o hacer clic y editarlas para cambiarlas. El área de contenido te permite cambiar imágenes, texto, editar y eliminar botones, y mucho más.
Para aprender a añadir y configurar elementos en el lienzo, consulta Diseñar con Flex.
Para más información sobre las opciones de edición del lienzo, consulta Acciones y opciones del lienzo.
Panel de diseño
El panel de diseño ofrece una variedad de configuraciones de diseño para los elementos seleccionados, permitiendo una personalización precisa. Ya sea que estés ajustando la alineación del contenido del diseño, el espaciado entre elementos, la animación o el fondo, el panel de diseño proporciona un conjunto completo de herramientas para mejorar el atractivo visual de tu sitio web. Las opciones de diseño incluyen ajustes de disposición, configuraciones de tamaño, opciones de alineación y más, adaptadas al elemento seleccionado.
Para obtener más información sobre el Panel de diseño y sus secciones, consulta Panel de diseño.
Estructura del creador de sitios web
El creador de sitios web está construido a partir de un encabezado, pie de página, filas, secciones y columnas. Cada widget que añades se inserta en una de estas secciones.
Filas
Las filas son las secciones horizontales de tu sitio. Cuando añades widgets y columnas a tu sitio, se colocan dentro de estas filas. Para cambiar cómo se muestra el contenido en la vista móvil, haz clic en el interruptor de invertir orden de columnas en el editor de filas.
Puedes añadir filas a tu sitio arrastrando widgets al sitio. Cuando arrastras un widget entre filas o a un espacio donde quieres añadir una fila, se creará una nueva fila al soltar el widget.
Para eliminar una fila, haz clic derecho en cualquier parte de la fila para abrir el menú contextual y, a continuación, haz clic en Eliminar. Como alternativa, haz clic en el botón Fila en la esquina superior izquierda de la fila y luego en Eliminar.
Para obtener información detallada sobre la edición y organización de filas, consulta Editor de filas.
Control deslizante de imagen de fondo
Los controles deslizantes de imagen de fondo pueden utilizarse para establecer imágenes de fondo en filas o columnas.
Después de seleccionar varias imágenes en el selector de imágenes, haz clic en Listo. Una vez creado el control deslizante, selecciona una transición de diapositiva en el menú desplegable y mueve el control para seleccionar una velocidad de diapositiva (segundos).
Cualquiera de las demás opciones de imagen de fondo, como Superposición de fondo, Posicionamiento y estilo de visualización, puede aplicarse al control deslizante.
Secciones diseñadas (plantillas de secciones prediseñadas)
Las secciones son filas de elementos preconstruidas que los usuarios pueden añadir a sus sitios adaptables. Las secciones permiten a los usuarios crear sitios con gran apariencia rápidamente, ahorrando tiempo durante el proceso de diseño. La infraestructura fue creada para proporcionar una mejor experiencia de usuario con una variedad de secciones ya preparadas.
Nota
- Las secciones no utilizan ningún CSS personalizado y están completamente construidas dentro del editor por diseñadores.
- Las secciones no utilizan la configuración del color ni de la fuente del texto del tema del sitio. Sin embargo, siempre puedes borrar el formato y aplicar tu propio diseño.
Añadir secciones
Para añadir secciones de widgets:
- Pasa el cursor entre filas y haz clic en Añadir sección.
- Selecciona Diseñado. Las secciones se muestran en el panel lateral.
- En el Modo Sección, hay disponible en el panel izquierdo una galería de secciones prediseñadas, agrupadas en categorías (Introducción, Funciones, Acerca de, Equipo, Testimonios, etc.).
- En el panel lateral, haz clic en una sección para mostrarla como una nueva fila. Luego puedes explorar secciones dentro del mismo grupo usando las teclas de flecha o seleccionando una sección de otro grupo.
- Para insertar la sección en el sitio, haz clic en Guardar. Alternativamente, haz clic en Guardar y añadir otra para seguir añadiendo secciones a tu sitio. La sección se convierte en una fila y todos los elementos dentro de ella son editables.
Alineación de widgets
Al alinear widgets dentro de la misma columna, el creador de sitios web intenta ajustarlos automáticamente para que tengan 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 que los widgets tengan el mismo tamaño.
También existe una función de Ajustar a la cuadrícula. La función Ajustar a la cuadrícula ayuda a colocar widgets en las páginas de tu sitio con precisión profesional. Este sistema te permite alinear widgets horizontal y verticalmente dentro de columnas y filas. Se muestran reglas al mover un elemento dentro de su fila o columna, o al redimensionar el widget. Los elementos alineados se marcan con un borde de color. Un widget puede alinearse 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 y móvil).
Encabezado y pie de página
Para obtener más información sobre cómo configurar encabezados y pies de página, consulta:
- Encabezados
- Pies de página