Este artículo abarca las áreas del editor y cómo añadir y configurar secciones, filas, columnas, filas internas y la alineación de 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 según la visión del usuario.
La barra de navegación superior dentro de la editor contiene atajos útiles para diferentes acciones sitio web de página.
La barra de navegación superior le permite:
-
Menú de hamburguesas. Abre el menú de hamburguesas en el lado izquierdo de la barra superior de navegación para acceder al modo de desarrollo, al panel de sitio web, al lenguaje de la plataforma y a varios recursos de creación y soporte de páginas.
-
Navegación de páginas. Haz clic en el desplegable de páginas para ver una lista de páginas en tu sitio web. Puedes acceder a una página seleccionándola en este menú.
-
Iconos de dispositivos. Cambia entre diferentes tamaños de pantalla (también llamados puntos de interrupción) haciendo clic en los iconos del dispositivo. Esto te permite previsualizar cómo aparece tu página actual en varios tamaños de pantalla, desde escritorio hasta tablet y móvil.
-
Deshacer y volver a hacer. Haz clic en los botones de Deshacer o Rehacer según sea necesario al trabajar en el editor.
-
Indicador de progreso de almacenado: El icono de verificación sirve como indicador del progreso actual de tu sitio web y de si los cambios se almacenaron correctamente.
-
Sitio web comments. Haz clic para abrir el panel de comentarios sitio web de la página. Si hay un comentario nuevo, aparece un punto rojo en el botón de comentarios sitio web de la página en la barra superior.
-
Compartir. Haz clic en Compartir para acceder al enlace de vista previa de tu sitio web por tamaño de pantalla, dominio de sitio web, nombre sitio web y gestión de clientes.
-
Cambios en la vista previa: Haz clic para previsualizar tu sitio web, incluyendo los cambios no publicados, en todos o individualmente los tamaños de pantalla de tu dispositivo.
-
Publicar o republicar: emplee el botón publicar o republicar para publicar su sitio con los últimos cambios.
-
Botón de inicio: haga clic en el ícono de inicio para regresar al panel de control de su sitio.
El panel lateral sirve como un conjunto de herramientas completo para gestionar diversos aspectos del diseño y funcionalidad de tu sitio web.
A continuación se muestran las opciones predeterminadas disponibles en el panel lateral:
-
Agregar. Desde este elemento puedes arrastrar y soltar fácilmente el texto de widgets, Medios y sitio web en el lienzo.
-
Páginas. Agrega, ve 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/estructura/disposición, ancho y espaciado en tu sitio web.
-
CMS. Gestionar colecciones y contenidos recogidos de los clientes.
-
SEO/AEO. Gestiona la configuración SEO para páginas, imágenes, enlaces internos y externos, y más.
-
Más. Proporciona acceso a Sitio, Tienda, Personalización, Configuración y Panel de Sitio web.
Ten en cuenta que luego de instalar Sitio o Store, seagregan al panel lateral para un acceso fácil y rápido.
El Creador de sitios web está conformado por un encabezado, un pie de página, filas, secciones y columnas. Cada widget que añade se inserta en una de estas secciones.
Las filas son las secciones horizontales de su sitio. Cuando agregas widget y columnas a tu sitio, se colocan dentro de estas filas. Para cambiar cómo se muestra el contenido en la vista móvil, haga clic en el botón invertir orden de columnas en el editor de filas.
Puede agregar filas a su sitio arrastrando widget al sitio. Cuando arrastre una 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 derecho en cualquier parte de la fila para abrir el menú contextual y luego haga clic en Eliminar. Alternativamente, haga 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 cómo editar y organizar filas, consulte Editor de filas.
Emplee el editor de filas para cambiar el fondo de la fila (color o imagen), agregar un borde, o ajustar el interior y el espaciado exterior de la fila. Emplee filas para organizar y ordenar el contenido de su sitio.
Para configurar filas, pase el cursor sobre la parte superior izquierda de una fila hasta que aparezca un botón de fila y haga clic en Fila. Aparecerá el menú Editor de filas.
Tiene las siguientes opciones de configuración:
-
Haga clic en las flechas Mover fila hacia arriba y Mover fila hacia abajo para mover la fila actual hacia arriba o hacia abajo.
-
Haga clic en agregar y seleccione una de las siguientes opciones:
-
Fila de arriba. agregar una nueva fila encima de la fila actual.
-
Fila de abajo. Agregar una nueva fila debajo de la fila actual.
-
Sección. Añada una sección a la fila existente.
-
Columna. Añada una columna a la fila existente.
-
Fila interna. Añada una fila dentro de la fila actual.
-
-
Para borrar el espaciado interno dentro de la fila, haga clic en Borrar relleno.
-
Para revertir el espaciado al que definió en el espaciado del tema, haga clic en Restablecer al espaciado predeterminado.
-
Para agregar una animación de entrada a la fila (por ejemplo, fundido desde la derecha, rebotar, acercar), haga clic en Animación de entrada y seleccione una opción.
-
Para almacenar la fila como una sección, haga clic en Almacenar como sección y seleccione almacenar solo la fila actual, varias filas o la página completa.
-
Para ocultar la fila actual en un dispositivo específico (desktop, tableta, móvil), haga clic en Ocultar en dispositivo y seleccione el dispositivo.
-
Para bloquear la fila para la edición del cliente, haga clic en Bloquear para edición del cliente.
-
Para copiar la fila, haga clic en Copiar.
-
Para anclar la fila a la página o eliminar un ancla existente, haga clic en Establecer como ancla o Editar ancla.
-
Para eliminar la fila, haga clic en Eliminar.
Para editar el estilo de fondo o el espaciado de la fila:
-
hover sobre la parte superior izquierda de una fila hasta que aparezca un botón de fila, haga clic en Fila y, a continuación, haga clic en Editar diseño.
-
En la pestaña Configuración , tienes las siguientes opciones:
-
Fila de sangrado completo. Para cambiar la fila a una fila con sangrado completo, que permite que el contenido abarque todo el ancho de la pantalla, haga clic en el botón Cambiar fila con sangrado completo . Si elige no tener filas con sangrado completo, el ancho del contenido estará limitado a 960 px.
-
-
En la pestaña Estilo , seleccione emplear un Color de fondo, una Imagen o un Video. Tienes las siguientes opciones:
-
Color
-
Seleccione un color de fondo. El color degradado anula la imagen y viceversa.
-
Haga clic en Borde para seleccionar un tipo de borde y mueva el control deslizante para establecer el ancho del borde.
-
Para agregar una sombra, haga clic en el botón de alternancia Sombra y seleccione un color, tipo y posición para la sombra.
-
-
Imagen
-
Para agregar una imagen al fondo, haga clic en + para abrir el selector de imágenes.
-
Para crear un control deslizante de imágenes de fondo, seleccione varias imágenes del selector de imágenes y consulte Control deslizante de imágenes de fondo.
-
Seleccione si desea que la imagen se muestre como Portada, Imagen completa, Mosaico o Sin repetición.
-
Para habilitar el desplazamiento de paralaje en una imagen de fondo, haga clic en el botón Desplazamiento de paralaje . Cuando esta opción está habilitada, el contenido de fondo se desplaza más lentamente que el contenido de primer plano.
Nota
-
El desplazamiento de paralaje no es una opción para el control deslizante de imagen de fondo ni en 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 la Posición, la Superposición de fondo, el Borde y la Sombra de la imagen.
-
-
Video. Haga clic en Seleccionar video para ver los videos cargados o pegue la URL del video de YouTube, Vimeo o Dailymotion en el campo provisto. Para obtener más información sobre los fondos de video, consulte Fondos de elementos.
Nota
Para obtener más información sobre los fondos, consulte Fondos de elementos.
-
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 derecho en cualquier parte de la columna para abrir el menú contextual y luego haga clic en Eliminar. Alternativamente, haga 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.
Use el Editor de columnas para cambiar el fondo de la columna (color o imagen), añadir un borde o ajustar el espaciado interno y externo de la columna. Utilice columnas para organizar y disponer el contenido en una fila.
Para configurar una columna:
-
Haga clic derecho en la columna. Aparecerá el menú Editor de columnas.
Nota
Si no hay relleno en la columna, el clic derecho no será accesible directamente. Para acceder a la columna en este caso, haga clic con el botón derecho en un widget que esté en la columna (esto debería abrir el menú contextual del widget y anotará su nombre en la parte superior), haga clic en Seleccionar contenedor, seleccione Columna. Para verificar que cambió el menú contextual de la columna, consulte la parte superior; ahora debería decir Columna.
-
Haga clic en las flechas Mover columna a la izquierda y Mover columna a la derecha para mover la columna actual a la izquierda o a la derecha (las flechas estarán deshabilitadas si solo hay una columna).
-
Para abrir el editor de diseño de columnas, haga clic en Editar diseño. Para obtener más información, consulte Editor de diseño de columnas. Aparece el editor de diseño de columnas.
-
Haga clic en agregar y seleccione una de las siguientes opciones:
-
Columna. Agregar una nueva columna a la fila actual (se puede agregar un máximo de 4 columnas por fila en desktop y 2 en celular).
-
Fila interior. Agregar una fila dentro de la columna actual.
-
widget a continuación. agregar a widget.
-
-
Para borrar el espaciado interno dentro de la columna, haga clic en Borrar relleno.
-
Para revertir el espaciado al que definió en el espaciado del tema, haga clic en Restablecer al espaciado predeterminado.
-
Para agregar una animación de entrada a la columna (por ejemplo, fundido desde la derecha, rebotar adentro, acercar), haga clic en Animación de entrada y seleccione una opción.
-
Para ocultar la columna actual en un dispositivo específico (desktop, tableta, móvil), haga clic en Ocultar en dispositivo y seleccione el dispositivo.
-
Para bloquear la columna para la edición del cliente, haga clic en Bloquear para edición del cliente.
-
Para copiar la columna, haga clic en Copiar.
-
Para anclar la columna a la página o eliminar un ancla existente, haga clic en Establecer como ancla o Editar ancla.
-
Para eliminar la columna, haga clic en Eliminar.
Para editar el estilo de fondo o el espaciado de una columna:
-
Haga clic derecho en la columna y luego haga clic en Editar diseño.
-
Nota
Si no hay relleno en la columna, el clic derecho no será accesible directamente. Para acceder a la columna en este caso, haga clic con el botón derecho en un widget que esté en la columna (esto debería abrir el menú contextual del widget y anotará su nombre en la parte superior), haga clic en Seleccionar contenedor, seleccione Columna. Para verificar que cambió el menú contextual de la columna, consulte la parte superior; ahora debería decir Columna.
-
-
En la pestaña Estilo , seleccione emplear un Color de fondo, Imagen o Video. Tienes las siguientes opciones:
-
Color
-
Seleccione un color de fondo. El color degradado anula la imagen y viceversa.
-
Haga clic en Borde para seleccionar un tipo de borde y mueva el control deslizante para establecer el ancho del borde.
-
Para agregar una sombra, haga clic en el botón de alternancia Sombra y seleccione un color, tipo y posición para la sombra.
-
-
Imagen
-
Para agregar una imagen al fondo, haga clic en + para abrir el selector de imágenes.
-
Para crear un control deslizante de imágenes de fondo, seleccione varias imágenes del selector de imágenes y consulte Control deslizante de imágenes de fondo.
-
Seleccione si desea que la imagen se muestre como Portada, Imagen completa, Mosaico o Sin repetición.
-
Configure la Posición, la Superposición de fondo, el Borde y la Sombra de la imagen.
-
-
Video. Haga clic en Seleccionar video para ver los videos cargados o pegue la URL del video de YouTube, Vimeo o Dailymotion en el campo provisto. Para obtener más información sobre los fondos de video, consulte Fondos de elementos.
Nota
Para obtener más información sobre los fondos, consulte Fondos de elementos.
-
Los controles deslizantes de imágenes de fondo se pueden emplear 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 diapositiva (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 sus columnas en el dispositivo móvil. 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:
-
Haga clic con el botón secundario en la fila y, a continuación, haga clic en Agregar fila interior. Si hay varias columnas en la fila, elija a qué columna desea agregar las filas internas.
-
Haga clic con el botón secundario en la columna y, a continuación, haga clic en Agregar fila interior.
-
Haga clic con el botón derecho en la fila interior y haga clic en agregar Fila para colocar una fila interior debajo de la actual.
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. Dividir 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 configurar 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 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.
-
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 atractivos rápidamente ahorrando tiempo durante el proceso de diseño. La infraestructura fue construida con el fin de brindar una mejor experiencia de usuario con una variedad de secciones predefinidas.
Nota
-
Las secciones no utilizan ningún CSS personalizado y son todas creadas por diseñadores en el editor.
-
Las secciones no utilizan la configuración de color o fuente de texto de la configuración del tema del sitio. Sin embargo, puede borrar el formato y aplicar su diseño.
Agregar secciones
Para agregar secciones de widget:
-
hover entre filas y haga clic en agregar Sección.
-
Seleccione Diseñado. Las secciones se muestran en el panel lateral.
-
En el modo de sección, hay disponible una galería de secciones prefabricadas en el panel izquierdo, agrupadas en categorías (Introducción, Características, Acerca de Team, Testimonios, etc.).
-
En el panel lateral, haga clic en una sección para mostrarla como una nueva fila. Luego puede explorar secciones dentro del mismo grupo empleando las teclas de flechas o seleccionando una sección de un grupo diferente.
-
Para incrustar la sección en el sitio, haga clic en Almacenar. Alternativamente, haga clic en Almacenar y agregar Otro para continuar agregando secciones a su sitio. La sección se convierte en una fila y todos los elementos de la sección son editables.
Al alinear widget dentro de la misma columna, el Website Builder intenta alinearlos 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).