El panel Tema del sitio le permite realizar cambios que afectan a todo su sitio. Puedes personalizar el texto, los botones, las imágenes, el fondo y el widget de navegación de tu sitio desde el panel de diseño. Esto le permite realizar cambios visuales radicales de forma rápida y eficiente, reduciendo el tiempo de diseño y manteniendo el estilo de su sitio consistente en todas las páginas.
Para abrir el panel Tema del sitio, en el panel lateral, haga clic en Tema. Cuando el panel Tema del sitio está abierto, el lienzo se minimiza automáticamente al 50% de la vista para que todo el lienzo sea visible mientras se ajusta la configuración del tema del sitio. Si desea volver a la vista de lienzo al 100%, haga clic en el menú desplegable en la barra superior y seleccione 100%. La capacidad de acercar o alejar también está disponible en el modo de vista previa.
Nota
-
Los cambios que realice en widget o páginas específicas anularán los temas establecido en el panel Tema del sitio. Le recomendamos que primero decida el tema del sitio y luego personalice las partes del sitio que desea que se destaquen o se vean diferentes al resto.
-
Para aprender sobre
Esta sección le permite controlar el texto de su sitio, tanto para el texto como para los encabezados de todos los tamaños (H1 a H6). Cambie el estilo y el aspecto del texto en todo su sitio. Puede cambiar el tipo y tamaño de la fuente, además de elegir la configuración para texto normal, enlaces y títulos.
Cambiar el tamaño de fuente, el estilo, el color y otras ediciones afectará a los párrafos futuros y a otros tipos de texto, así como a los widget actuales conectados al texto del sitio que no se modificaron manualmente.
Para configurar el texto del tema:
-
Haga clic en la flecha junto a Texto.
-
Haga clic en el tipo de texto que quiere. Las opciones son:
-
Licenciado en Derecho. Esto establecerá el tema para todo el texto en widget que no esté asignado a un encabezado o al estilo de párrafo, como el widgetde navegación . Aquí también se puede configurar el color y el subrayado del texto del enlace. Además, tiene la opción de personalizar la apariencia de los vínculos para diferentes estados, incluido el Estado de enlace predeterminado, elhoverde enlace en y el enlace en el que se hizo clic.
-
PAR. Esto establecerá el tema para el widget de texto.
-
Encabezados y subpartidas H1-H6.
-
-
Puede cambiar lo siguiente por tipo de texto:
-
Fuente
-
Tamaño de fuente. Esto está configurado para desktop/ tableta y celular, por separado.
-
Escala el texto. (Solo Editor 2.0) Cuando está habilitado, el texto se escala en función del ancho del contenedor principal. Esto puede ser útil si no desea un salto de línea en un encabezado. widget con texto que esté conectado al tema heredará esta configuración, sin embargo, la configuración se puede anular por widget.
-
Color de fuente
-
Formato de fuente
-
Dirección del texto
-
Peso de la fuente
-
Altura de la línea
-
Espaciado entre letras
-
Todas mayúsculas
-
Text shadow
-
Al hacer cambios en el área de texto Tema, se cambia todo el texto del sitio que no se reemplaza por cambios de estilo personalizados e individuales. Cuando se hacen cambios manuales en elementos individuales, se anula el tema del sitio, y cualquier cambio realizado en el tema del sitio ya no afectará el estilo de estos elementos. Esto es en la configuración de estilo individual de un determinado elemento del sitio, por ejemplo, si solo cambió el color del texto en un widget H1 particular en la superficie de trabajo:
-
Y luego cambió el tamaño de fuente de H1 en el tema del sitio, el tamaño de fuente de H1 aún cambiará en el widget H1.
-
Y luego cambió el color de H1 en el tema del sitio, el H1 que se cambió no se actualizará con el cambio de color.
Puede actualizar el texto del tema en la configuración de texto haciendo clic en Tema y luego seleccionando Texto. O bien, puede hacer clic en un widget de texto para abrir el menú contextual, hacer clic en el menú desplegable de selección de encabezado y seleccionar Actualizar tema. Esto abre la configuración de texto del tema donde puedes realizar actualizaciones.
El editor cuenta con una variedad de fuentes para su uso. Establezca una fuente de texto temática o elija diferenciar su texto empleando múltiples fuentes diferentes en su sitio.
Para ver las fuentes disponibles y ver cómo se ven:
-
Haga clic en Texto.
-
Seleccione una fuente del menú desplegable Fuente .
Los colores le permiten definir una paleta de colores y vincular los colores individuales a cualquiera o todos los widget con configuraciones de color. El color de cualquier elemento vinculado a los colores del tema se actualizará automáticamente cuando se cambie el color vinculado en la configuración de colores del tema. Esto le permite realizar cambios de color rápidamente, lo que ayuda a reducir el tiempo de diseño y garantiza que el estilo de su sitio sea consistente en todas las páginas.
Los propietarios de cuentas tienen automáticamente licencias de editor y pueden editar, ver y usar los colores del tema. Team miembros y clientes que no tienen licencias de editor pueden ver y usar los colores del tema, pero no pueden editarlos.
Puedes configurar hasta 30 colores de tema.
Para configurar los colores del tema:
-
Seleccione la flecha junto a Colores.
-
Haga clic en el ícono Más junto a Principal, o en cualquier configuración que necesite definir.
-
Escriba el valor HEX o RGB del color deseado, o use la herramienta de gotero para seleccionar un color.
-
(Opcional) Puedes generar colores a partir de tu logotipo. Haz clic para abrir el color primario, luego abre la pestaña Marca y haz clic en + agregar Logo (si agregaste un logo a tu Business Info en la Biblioteca de Contenido, aparecerá aquí). Luego de agregar su logotipo, se genera un conjunto de colores.
Si necesita eliminar o reemplazar el logotipo, haga clic en el ícono de tres puntos junto a su logotipo y seleccione Eliminar o Reemplazar imagen. Tenga en cuenta que necesita licencia de la Biblioteca de contenido y de la Información comercial para cargar, eliminar o reemplazar el logotipo.
Repita estos pasos según sea necesario para cada color del tema. A continuación, debe conectar los colores a widget en su sitio.
Si el sitio o la plantilla no tienen colores ya conectados, se puede hacer automáticamente. El generador automático de colores de tema escanea su sitio y detecta los colores empleados con más frecuencia. Genera una lista de colores para seleccionar y, una vez seleccionados, esos colores se convierten en los colores de su tema y están conectados a su sitio widget.
Para configurar automáticamente los colores del tema:
-
Seleccione la flecha junto a Colores.
-
Haga clic en Establecer colores del tema.
-
Haga clic en Conectarlo por mí o lo conectaré yo mismo.
-
(Opcional) Si seleccionó Lo conectaré yo mismo, haga clic en el ícono Más junto a cada color en el panel de diseño y seleccione los colores individualmente.
-
Seleccione cuál de los colores generados quiere usar.
-
Haga clic en Almacenar y conectar colores.
Los colores se rellenarán en la sección Colores del panel Tema del sitio.
Para conectar un widget a un color de tema:
-
Haga clic en un widget para abrir su menú de configuración.
-
Abra la configuración de color y seleccione uno de los colores del tema que aparecen en la parte superior.
-
Repita según sea necesario para otros elementos.
-
(Opcional) Si necesita editar uno de los colores del tema, haga clic en el ícono de lápiz y se abrirá la configuración de colores del tema donde puede editar el color deseado.
Una vez que un widget está conectado a los colores del tema, se actualizará automáticamente cuando se actualice el color del tema vinculado.
Para cambiar el nombre de los colores del tema:
-
Haga clic en Colores.
-
Posicione el cursor sobre el nombre de color correspondiente y haga clic en el ícono del lápiz.
-
Escriba un nombre nuevo.
El nuevo nombre se guarda automáticamente y aparecerá cuando pase el cursor sobre el color en el selector de colores.
Puede desconectar cualquier widget conectado a colores de tema individuales.
Para desconectar un widget:
-
Haga clic en Colores.
-
Haga clic en el icono de tres puntos horizontales (
) junto al texto Colores y seleccione Eliminar colores del tema.
-
Seleccione los colores que desea eliminar y luego haga clic en Eliminar colores seleccionados.
Esta sección te permite definir el estilo de los widget de los botones primarios y secundarios en tu sitio. Seleccione uno de nuestros diseños de botones y establezca el texto, el color de fondo, el borde, el estado hover , las esquinas y los estilos de sombra.
Para ocultar el botón Volver al inicio en dispositivos móviles, habilite el interruptor en la sección Diseño del sitio.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Esta sección le permite definir el tema para el diseño de filas y columnas en términos de color de fondo y espaciado predeterminado. Las ediciones que se realicen en filas o columnas individuales anularán la configuración de filas y columnas del tema.
Esta sección le permite controlar el estilo de fondo de su sitio. Elija entre usar un color o una imagen como fondo. Elija una imagen de fondo personalizada desde la galería de fotos o cargue sus propias imágenes para crear un diseño único del sitio. Los cambios también afectan las vistas para PC y para tableta.
Nota
Para obtener información sobre los fondos de los elementos del sitio, consulte Fondos de elementos.
Para personalizar el fondo de su sitio:
-
Haga clic en la flecha junto a Fondos.
-
Haga clic en Fondo predeterminado.
-
Haga clic en la pestaña Color o Imagen o seleccione un color para el fondo del sitio o cargue una imagen.
-
(Opcional) Haga clic en el botón No optimizar esta imagen para evitar la optimización (esta configuración aparecerá luego de seleccionar una imagen).
Para personalizar el fondo por página:
-
Haga clic en la flecha junto a Fondos.
-
Haga clic en Fondo por página.
-
Seleccione una página del menú desplegable y seleccione una imagen o un color para la página específica.
-
(Opcional) Haga clic en el botón No optimizar esta imagen para evitar la optimización (esta configuración aparecerá luego de seleccionar una imagen).
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como Editor All-Flex. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Desde el panel de Temas , puedes ajustar el diseño de tu sitio, lo que incluye configurar el ancho de página; y el espaciado predeterminado entre secciones, columnas y columnas interiores.
Para acceder a la configuración de diseño del sitio:
-
Haga clic en Ancho y espaciado.
-
Haga clic en la sección deseada para expandirla.
Puede establecer el ancho de página predeterminado para las secciones que no se establecieron en ancho completo (anteriormente llamado "sangrado completo") en desktop. Ajustar el ancho de página predeterminado puede ayudar a garantizar la mejor legibilidad y diseño para el sitio tal como se mostrará. Por ejemplo, algunos sitios web se muestran en una pantalla de televisión o pantallas más grandes que el promedio desktop computadora.
Para establecer el ancho de página predeterminado:
-
Haga clic en Ancho y espaciado.
-
Haga clic para expandir la sección Ancho de página .
-
Seleccione 1200 px, 1440 px o Personalizado. Si selecciona Personalizado, emplee el control deslizante para seleccionar el ancho de pixel o ingrese un valor en el campo. El valor personalizado puede estar entre 960px y 1920px, o entre 50 vw y 100 vw.
Activa el interruptor de ancho completo si quieres que todas las secciones nuevas tengan ancho completo por defecto.
Puedes establecer el relleno predeterminado para las nuevas secciones en blanco agregadas a tu sitio. Si lo desea, puede anular el espaciado de la sección del tema en el panel de diseño de la sección.
Consideraciones importantes:
-
Las secciones agregadas al encabezado conservan el espaciado del encabezado predeterminado, independientemente de lo que esté configurado en el espaciado de secciones del tema.
-
Tenga en cuenta que las secciones creadas antes de este lanzamiento de funciones (5 de agosto de 2025) no heredan automáticamente el relleno de espaciado de sección, sin embargo, se pueden volver a conectar abriendo el panel de diseño de la sección y haciendo clic en Restablecer al espaciado del tema en el cajón de espaciado de sección.
Para establecer el espaciado de las secciones:
-
Haga clic en Ancho y espaciado.
-
Haga clic para expandir la sección Espaciado entre secciones .
-
Haga clic en los cuadros respectivos para editar los valores de relleno. Los valores de relleno horizontal están vinculados. Si cambia uno, el otro se actualizará automáticamente. Se pueden desvincular haciendo clic en el icono de enlace. Tenga en cuenta que el espaciado de las secciones se establece por punto de interrupción.
Si es necesario, haga clic en Restablecer relleno para restablecer todos los valores a cero.
Si modifica el relleno de una sección individual, anulará la configuración del tema. Puede restablecer la configuración de espaciado de sección del tema abriendo el panel de diseño de la sección y haciendo clic en Restablecer espaciado de tema en el cajón Espaciado de sección.
Puedes configurar el relleno por defecto para las columnas nuevas y en blanco agregadas a tu sitio. Si lo deseas, puedes anular el espaciado entre secciones temáticas en el panel de diseño de la columna.
Para establecer el espaciado por defecto de las columnas:
-
Haga clic en Ancho y espaciado.
-
Haz clic para ampliar la sección de Espaciado de Columnas .
-
Haz clic en los cuadros correspondientes para editar los valores de relleno. Los valores de relleno vertical están vinculados. Si cambias uno, el otro se actualizará automáticamente. Se pueden desvincular haciendo clic en el icono del enlace.
Puedes configurar el relleno predeterminado para las columnas interiores nuevas agregadas a tu sitio. Si lo deseas, puedes anular el espaciado entre secciones temáticas en el panel de diseño de la columna interior.
Para establecer el espaciado por defecto de las columnas interiores:
-
Haga clic en Ancho y espaciado.
-
Haz clic para ampliar la sección de Espaciado de Columnas Interiores .
-
Haz clic en los cuadros correspondientes para editar los valores de relleno. Los valores de relleno vertical están vinculados. Si cambias uno, el otro se actualizará automáticamente. Se pueden desvincular haciendo clic en el icono del enlace.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Controle la navegación del diseño del sitio en una PC, una tableta y dispositivos móviles. Para la versión de escritorio, puede elegir entre dos anchos: 960 píxeles o 1200 píxeles.
Cambiar la disposición de navegación a menudo afecta el comportamiento del encabezado y a veces el resto del sitio. Si su encabezado repentinamente se ve mal después de cambiar la disposición, pruebe con otra disposición.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio.
Puedes cambiar el diseño de tu sitio desktop a un diseño de barra lateral. El diseño de la barra lateral muestra el encabezado en el costado del sitio (ya sea a la izquierda o a la derecha) y es una excelente tool de diseño para darle un aspecto único a su sitio. El encabezado de la barra lateral también actúa como un encabezado fijo, por lo que siempre se mostrará en la pantalla y también puede agregar widget en la barra lateral como cualquier otra fila.
Nota
-
Cuando cambias de un diseño de sitio tradicional a un diseño de barra lateral, el encabezado mantiene el logotipo y se eliminarán todos los widget que tenías (similar a cambiar el diseño del encabezado en el diseño del encabezado superior). El color de fondo cambiará según el diseño que seleccionó.
-
El encabezado reducido no está disponible para la navegación de barra lateral. La barra lateral siempre se muestra en el sitio, independientemente de los desplazamientos en el sitio.
-
En pantallas con menos de 1090 píxeles de ancho, se ocultará el contenido de la barra lateral, excepto la primera imagen, y se mostrará un icono de menú ampliable. Puede personalizar el color del botón activador que aparece en el editor de diseño.
Para cambiar el diseño de su sitio a un diseño de barra lateral:
-
Haga clic en la flecha que está junto a Diseño de la página web.
-
Seleccione el diseño de la barra lateral, puede agregar filas, arrastrar y soltar widget en el encabezado de la barra lateral y personalizarlo.
Para editar el diseño del encabezado de la barra lateral, hover sobre la barra lateral y haga clic en Barra lateral en la esquina superior derecha. Puede elegir uno de los múltiples diseños de encabezado de barra lateral para aplicar a su sitio, mostrarlo en el lado izquierdo o derecho de la pantalla, definir su ancho y más.