Este artículo cubre las áreas del editor y cómo agregar y configurar secciones, filas, columnas, filas internas y alineación widget .
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 contiene atajos útiles para diferentes acciones del sitio.
La barra de navegación superior le permite:
-
Navegación de página: haga clic en el menú de páginas para acceder a un menú desplegable que muestra todas las páginas disponibles en su sitio. Puede navegar entre páginas seleccionándolas desde este menú.
-
Cambie entre diferentes vistas de tamaño de pantalla (también llamadas puntos de interrupción) haciendo clic en los íconos del dispositivo. Esto le permite obtener una vista previa de cómo se ve su página actual en varios tamaños de pantalla, desde desktop hasta tabletas y dispositivos móviles. Para obtener más información, consulte Tamaños de pantalla y dispositivos.
-
Funcionalidad de búsqueda: haga clic en el icono de la lupa para buscar cualquier cosa que necesite dentro del editor o acceder al centro de ayuda para obtener asistencia.
-
Información y tool: Haga clic en el icono de información para acceder a la siguiente información:
-
Información del sitio. Muestra el nombre del sitio, el estado de publicación, la versión del editor y un enlace al panel del sitio.
-
Enlace de vista previa. Muestra el enlace de vista previa del sitio. Para copiar el enlace, seleccione el tipo de dispositivo y haga clic en Copiar.
-
Estadísticas. Muestra estadísticas básicas del sitio. Para ver más información, haga clic en Abrir estadísticas. Esta información sólo está disponible para sitios publicados. Para obtener más información, consulte Estadísticas y análisis del sitio.
-
Idioma del editor. Cambiar el idioma del editor. Esto no afecta el idioma del sitio. Para cambiar el idioma del editor, seleccione un idioma en el menú desplegable.
-
-
Indicador de progreso almacenado: el icono de marca de verificación sirve como indicador del progreso actual de su sitio y de si los cambios se almacenaron correctamente.
-
Deshacer o rehacer: puede emplear las funcionalidades deshacer y rehacer representadas por las flechas circulares hacia atrás y hacia adelante para revertir o volver a aplicar acciones recientes realizadas en el editor.
-
modo desarrollador: Entra en modo desarrollador haciendo clic en el icono correspondiente. Este modo le permite acceder y modificar el código HTML y CSS de su sitio.
-
Vista previa de los cambios: haga clic en el ícono del ojo para obtener una vista previa de su sitio, incluidos los cambios no publicados, en todos los tamaños de pantalla de los dispositivos o en algunos de ellos.
-
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 integral para gestionar varios aspectos del diseño y la funcionalidad de su sitio. Puede realizar cambios amplios y radicales en el diseño y la funcionalidad de su 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 contenido, vender productos en línea, publicar publicaciones de blog, instalar aplicaciones y optimizar su sitio para los motores de búsqueda.
Las siguientes son las opciones disponibles en el panel lateral:
-
Tema
-
Páginas
-
Widgets
-
Contenido
-
Personalizar
-
Venda en línea
-
Membresía
-
Blog
-
SEO y configuración
-
Ocultar elementos (solo visible si tiene elementos ocultos; solo aplicable para el editor tradicional, en el editor 2.0 y el modo flexible, los elementos ocultos se pueden encontrar en la pantalla Capas)
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, editar y eliminar botones, y más.
Nota
Para obtener más información sobre las opciones de edición del lienzo, consulte Acciones y opciones del lienzo .
El Website Builder se construye a partir de un encabezado, un pie de página, filas y columnas. Cada widget que añadas 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:
-
hover sobre la parte superior izquierda de una fila hasta que aparezca un botón de fila y haga clic en Fila. Aparece el menú del editor de filas.
-
Haga clic en las flechas Mover fila hacia arriba y Mover fila hacia abajo para mover la fila actual hacia arriba o hacia abajo.
-
Para abrir el editor de diseño de filas, haga clic en Editar diseño. Para obtener más información, consulte Editor de diseño de filas.Aparece el editor de diseño de filas.
-
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. agregar una sección a la fila.
-
Columna. agregar una columna a la fila.
-
Fila interior. agregar 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.
-
No se pueden emplear secciones en el encabezado. Para cambiar la sección de encabezado completa, abra el editor de encabezado. Para obtener más información, consulte Encabezados.
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).
Para obtener más información sobre la configuración de encabezados y pies de página, consulte: