El panel Tema del sitio te permite realizar cambios que afectan a todo el sitio. Puedes personalizar el texto, los botones, las imágenes, el fondo y los widgets de navegación de tu sitio desde el panel de diseño. Esto te permite realizar cambios visuales radicales de manera rápida y eficiente, lo que reduce el tiempo de diseño y mantiene el estilo de tu sitio web uniforme en todas las páginas.
Para abrir el panel Tema del sitio, en el panel lateral, haz clic enTema. Cuando el panel de temas del sitio está abierto, el lienzo se minimiza automáticamente al 50% de visualización, de modo que todo el lienzo queda visible al ajustar la configuración del tema del sitio. Si quieres volver a la vista del lienzo al 100%, haz clic en el menú desplegable de la barra superior y selecciona el 100%. La posibilidad de acercar o alejar la imagen también está disponible en el modo de vista previa.
Nota
-
Los cambios que realices en widgets o páginas específicos anularán los temas establecidos en el panel de temas del sitio. Te recomendamos que primero te decidas por el tema del sitio y, a continuación, personalices las partes del sitio que quieras que destaquen o tengan un aspecto diferente al resto
Esta sección te permite controlar el texto de tu sitio, tanto para el texto como para los encabezados de todos los tamaños (H1 a H6). Cambia el estilo y el aspecto del texto en todo el sitio. Puedes cambiar el tipo y el tamaño de la fuente y también elegir la configuración del texto normal, los enlaces y los títulos.
Cambiar el tamaño de la fuente, el estilo, el color y otras modificaciones afectará a los párrafos futuros y a otros tipos de texto, así como a los widgets actuales conectados al texto del sitio que no se hayan modificado manualmente.
Para configurar el texto del tema:
-
Haga clic en la flecha situada junto a Texto.
-
Haga clic en el tipo de texto deseado. Las opciones son:
-
DFLT. Esto establecerá el tema para todo el texto de los widgets que no estén asignados a un encabezado o al estilo de párrafo, como el widget de navegación. El color y el subrayado del texto del enlace también se pueden configurar aquí. Además, tiene la opción de personalizar la apariencia de los enlaces para los diferentes estados, incluido el estado predeterminado del enlace, el enlace al pasar el ratón sobre el enlace y el enlace en el que se hace
-
PAR. Esto establecerá el tema del widget de texto.
-
Título y subtítulos H1-H6.
-
-
Puede cambiar lo siguiente por tipo de texto:
-
Tipo de letra
-
Tamaño de fuente. Está configurado para ordenadores de sobremesa/tableta y dispositivos móviles
-
Escala el texto. (Solo en Editor 2.0) Cuando está habilitado, el texto se escala en función del ancho del contenedor principal. Esto puede resultar útil si no desea que haya un salto de línea en un encabezado. Los widgets con texto que estén conectados al tema heredarán esta configuración; sin embargo, la configuración se puede anular
-
Color de fuente
-
Formato de fuente
-
Dirección del texto
-
Peso de fuente
-
Altura de línea
-
Espaciado entre letras
-
Todas en mayúsculas
-
Sombra de texto
-
Al realizar cambios en el área de texto del tema, se cambia todo el texto del sitio que no se anula con cambios de estilo individuales y personalizados. Cuando se realizan modificaciones manuales en elementos individuales, se anula el tema del sitio y cualquier cambio realizado en el tema del sitio ya no afectará al estilo de estos elementos. Se trata de la configuración de estilo individual de un determinado elemento del sitio, por ejemplo, si solo cambiaste el color del texto en un widget H1 determinado del lienzo
-
Y luego cambió eltamaño de fuentede H1 en el tema del sitio, el tamaño de fuente del H1 seguirá cambiando en el widget H1.
-
Y luego cambió elcolorde H1 en el tema del sitio, el H1 que se ha cambiado no se actualizará con el cambio de color.
Puede actualizar el texto del tema en la configuración de texto haciendo clicTemay, a continuación, seleccionarTexto. O bien, puedes hacer clic en un widget de texto para abrir el menú contextual, hacer clic en el menú desplegable de selección de encabezados y seleccionarActualizar tema. Esto abre la configuración del texto del tema, donde puede realizar actualizaciones.
El editor cuenta con una variedad de fuentes para su uso. Establece una fuente para el texto del tema o elige diferenciar tu texto usando varias fuentes diferentes en tu sitio.Para añadir fuentes personalizadas a tu sitio, consulta Fuentes personalizadas.
Para ver las fuentes disponibles y ver su aspecto:
-
Haga clic Texto.
-
Seleccione una fuente de laTipo de letramenú desplegable.
Puedes añadir fuentes personalizadas desde la biblioteca de fuentes de Google o subir archivos de fuentes personalizadas (TTF, OTF, EOT, WOFF2 o WOFF). Para obtener el mejor rendimiento, se recomienda utilizar archivos WOFF o WOFF2 al
Nota
-
Si solo tienes un archivo .otf o.ttf, te recomendamos usar una herramienta externa como FontSquirrel para convertirlo al formato requerido.
-
Para mantener el cumplimiento del RGPD, las fuentes personalizadas se cargan desde nuestra CDN sin necesidad de llamar a la API de Google Fonts.
-
Si guardas un sitio como plantilla, incluirá las fuentes personalizadas que se hayan agregado.
-
Si restableces un sitio, se eliminan las fuentes personalizadas.
Para añadir una fuente personalizada:
-
Puede agregar fuentes personalizadas desde cualquiera de las siguientes ubicaciones:
-
En el panel lateral, haga clicTemay, a continuación, haga clicTexto. Amplíe la sección de texto deseada. Junto a la lista de fuentes, haz clic enAgregar y administrar fuentes(
) icono.
-
En el editor de diseño de un widget, para cualquier elemento de texto, haga clic enAgregar y administrar fuentes(
-
-
Selecciona una de las siguientes opciones:
-
Fuentes de Google. Selecciona una fuente de la lista de fuentes de Google. La fuente aparece en la lista de fuentes de Google añadidas que aparece a continuación. Para eliminar una fuente, haz clic en X junto a la fuente de la lista. Tenga en cuenta que es posible que la lista ya muestre las fuentes agregadas a la plantilla. Se recomienda no eliminar las fuentes de la plantilla.
-
Fuentes personalizadas. Haz clic en Cargar fuentes para subir un archivo de fuentes personalizado. Se pueden seleccionar varias fuentes a la vez. Para eliminar una fuente, haga clic en la X situada junto a la fuente en la lista.
-
-
Haga clic Listo.
La fuente se añade a la lista de fuentes del sitio.
Nota
Las fuentes de Adobe no aparecen en la lista de fuentes. Debe añadir la familia de fuentes al código.
Si eliminas una fuente que se usa actualmente en el sitio, el texto volverá a usar la fuente predeterminada. No puede eliminar ninguna de las fuentes predeterminadas
Para eliminar las fuentes personalizadas de un sitio:
-
Haga clicTexto. Amplíe la sección de texto que usa la fuente personalizada. Junto a la lista de fuentes, haz clic enAgregar y administrar fuentes(
-
Haga clic enXjunto a la fuente de la lista para eliminar la fuente del sitio.
Si eliminas una fuente de Google, debes volver a publicar el sitio para que el cambio surta efecto. Sin embargo, si eliminas una fuente cargada, no es necesario volver a publicarla para que el cambio surta efecto
Los colores permiten definir una paleta de colores y vincular los colores individuales a cualquiera o todos los widgets con ajustes de color. El color de cualquier elemento que esté 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 te permite realizar cambios de color rápidamente, lo que ayuda a reducir el tiempo de diseño y garantiza que el estilo de tu sitio sea uniforme en todas las páginas.
Los propietarios de las cuentas tienen automáticamente permisos de editor y pueden editar, ver y usar los colores del tema. Los miembros del equipo y los clientes que no tengan permisos de edición pueden ver y usar los colores del tema, pero no pueden editarlos.
Puede configurar hasta 30 colores de tema.
Para configurar los colores del tema:
-
Seleccione la flecha situada junto aColores.
-
Haga clic enAdemásicono junto aPrimaria, o cualquier configuración que necesite definir.
-
Escriba el valor HEX o RGB del color deseado, o utilice la herramienta cuentagotas para seleccionar un color.
-
(Opcional) Puede generar colores a partir de su logotipo. Haga clic para abrir el color principal y, a continuación, abra el Marca tabular y hacer clic + Añadir logotipo (si has añadido un logotipo a la información de tu empresa en la biblioteca de contenido, aparecerá aquí). Tras añadir tu logotipo, se genera un conjunto de colores.
Si necesitas eliminar o reemplazar el logotipo, haz clic en el icono de tres puntos situado junto a tu logotipo y selecciona una de Eliminar o Reemplazar imagen. Ten en cuenta que necesitas el permiso de la biblioteca de contenido y de información empresarial para subir, eliminar o reemplazar el logotipo.
Repite estos pasos según sea necesario para cada color del tema. A continuación, es necesario conectar los colores a los widgets en tu sitio.
Si el sitio o la plantilla no tienen colores ya conectados, puedes hacerlo automáticamente. El generador automático de colores del tema escanea tu sitio y detecta los colores que se utilizan con más frecuencia. Genera una lista de colores entre los que seleccionar y, una vez seleccionados, esos colores se convierten en los colores del tema y se conectan a los widgets de tu sitio.
Para configurar automáticamente los colores del tema:
-
Seleccione la flecha situada junto a Colores.
-
Haga clicDefina los colores del tema.
-
Haga clicConéctalo por míoLo conectaré yo mismo.
-
(Opcional) Si has seleccionado Lo conectaré yo mismo, haz clic enAdemásicono junto a cada color en el panel de diseño y seleccione los colores individualmente.
-
Seleccione cuál de los colores generados desea usar.
-
Haga clicGuardar 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:
-
Haz clic en un widget para abrir su menú de ajustes.
-
Abre la configuración de color y selecciona uno de los colores del tema que aparecen en la parte superior.
-
Repita según sea necesario para otros elementos.
-
(Opcional) Si necesitas editar uno de los colores del tema, haz clic en el icono del lápiz y se abrirá la configuración de colores del tema, donde podrás 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.
Es importante tener en cuenta que solo los propietarios de cuentas y los miembros del personal con permisos de edición pueden cambiar el nombre de los colores del tema del sitio. Los clientes no pueden cambiar el nombre de los colores del tema del sitio, incluso si tienen permisos de editor
Para cambiar el nombre de los colores del tema:
-
Haga clic Colores.
-
Pase el ratón sobre el nombre del color deseado y haga clic en el icono del lápiz.
-
Escriba un nombre nuevo.
El nuevo nombre se guarda automáticamente y aparecerá al pasar el cursor sobre el color en el selector de colores.
Puedes desconectar cualquier widget conectado a colores de temas individuales.
Para desconectar un widget:
-
Haga clicColores.
-
Haga clic en el icono de tres puntos horizontales (
) junto al Colores texto y selecciónEliminar los colores del tema.
-
Seleccione los colores que desea eliminar y, a continuación, haga clicEliminar los colores seleccionados.
Esta sección te permite definir el estilo de los widgets de botones principales y secundarios de tu sitio. Selecciona uno de nuestros diseños de botones y establece los estilos del texto, el color de fondo, el borde, el estado del cursor, las esquinas y las sombras
Para ocultar elVolver al principioen el dispositivo móvil, habilite el botón en la sección Diseño del sitio.
Nota
Esta información es específica del Editor clásico y no es relevante para el Editor 2.0 (anteriormente conocido como Editor All-Flex). Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu 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 modificaciones que se realicen en filas o columnas individuales anularán la configuración de filas y columnas del tema
Esta sección te permite controlar el estilo de fondo de tu sitio. Elige entre usar un color o una imagen como fondo. Elige una imagen de fondo personalizada de la galería de fotos o sube tus propias imágenes para añadir un diseño único al sitio. Los cambios también afectan al escritorio y a la tableta.
Nota
Para obtener información sobre los fondos de los elementos del sitio, consulte Fondos de elementos.
Para personalizar el fondo de tu sitio:
-
Haga clic en la flecha situada junto aAntecedentes.
-
Haga clicFondo predeterminado.
-
Haga clic en cualquiera de losColoroImagenpestaña o selecciona un color para el fondo del sitio o sube una imagen.
-
(Opcional) Haga clic enNo optimice esta imagenactiva esta opción para impedir la optimización (este ajuste aparecerá después de seleccionar una imagen).
Para personalizar el fondo de cada página:
-
Haga clic en la flecha situada junto aAntecedentes.
-
Haga clicFondo por página.
-
Selecciona una página del menú desplegable y selecciona la imagen o el color para la página específica.
-
(Opcional) Haga clic enNo optimice esta imagenactiva esta opción para impedir la optimización (este ajuste aparecerá después de seleccionar una imagen).
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como All-Flex Editor. Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Desde el Tema panel, puedes ajustar el diseño de tu sitio, lo que incluye configurar el ancho de la 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 Ancho y espaciado.
-
Haga clic en la sección deseada para ampliarla.
Puede establecer el ancho de página predeterminado para las secciones que no estén configuradas como ancho completo (anteriormente denominadas «sangrado completo») en el escritorio. Ajustar el ancho predeterminado de la página puede ayudar a garantizar la mejor legibilidad y el mejor diseño del sitio en cuanto a la forma en que se mostrará. Por ejemplo, algunos sitios web se muestran en una pantalla de televisión o en pantallas más grandes que las de una computadora de escritorio promedio
Para establecer el ancho de página predeterminado:
-
Haga clic Ancho y espaciado.
-
Haga clic para ampliar el Ancho de página sección.
-
Seleccione una de las dos 1200 px, 140 px, o Personalizado. Si selecciona Personalizado, utilice el control deslizante para seleccionar el ancho de los píxeles o introduzca un valor en el campo. El valor personalizado puede oscilar entre 960 px y 1920 px, o entre 50 vw y 100 vw
Habilite el Ancho total activa esta opción si quieres que todas las secciones nuevas tengan el ancho completo de forma predeterminada.
Puedes establecer el relleno predeterminado para las secciones nuevas y en blanco que se agreguen a tu sitio. Si lo deseas, puedes anular el espaciado de las secciones del tema en el panel de diseño de la sección
Consideraciones importantes:
-
Las secciones agregadas al encabezado conservan el espaciado de encabezado predeterminado, independientemente de lo que esté establecido en el espaciado de sección del tema.
-
Tenga en cuenta que las secciones creadas antes del lanzamiento de esta función (5 de agosto de 2025) no heredan automáticamente el relleno de espaciado de secciones; sin embargo, se pueden volver a conectar abriendo el panel de diseño de la sección y haciendo clic Restablecer el espaciado entre temas en el cajón de espaciado de secciones.
Para establecer el espaciado de las secciones:
-
Haga clic Ancho y espaciado.
-
Haga clic para ampliar el Espaciado de sección sección.
-
Haga clic en las casillas correspondientes para editar los valores de relleno. Los valores de relleno horizontal están vinculados. Si cambias uno, el otro se actualizará automáticamente. Se pueden desvincular haciendo clic en el icono de enlace. Tenga en cuenta que el espaciado entre secciones se establece por punto de interrupción
Si es necesario, haga clic Restablecer el acolchado para restablecer todos los valores a cero.
Si modificas el relleno de una sección individual, anula la configuración del tema. Puedes restablecer la configuración del espaciado de secciones del tema abriendo el panel de diseño de la sección Restablecer el espaciado entre temas en el cajón de espaciado de secciones.
Puedes establecer el relleno predeterminado para las columnas nuevas y en blanco que se añadan a tu sitio. Si lo deseas, puedes anular el espaciado de las secciones del tema en el panel de diseño de la columna
Para establecer el espaciado predeterminado para las columnas:
-
Haga clic Ancho y espaciado.
-
Haga clic para ampliar el Espaciado entre columnas sección.
-
Haga clic en las casillas 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 de enlace
Puedes establecer el relleno predeterminado para las columnas internas nuevas que añadas a tu sitio. Si lo deseas, puedes anular el espaciado de las secciones del tema en el panel de diseño de la columna interior
Para establecer el espaciado predeterminado para las columnas interiores:
-
Haga clic Ancho y espaciado.
-
Haga clic para ampliar el Espaciado entre columnas interiores sección.
-
Haga clic en las casillas 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 de enlace
Nota
Esta información es específica del Editor clásico y no es relevante para el Editor 2.0 (anteriormente conocido como Editor All-Flex). Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Controle la navegación del diseño del sitio en computadoras de escritorio, tabletas y dispositivos móviles. Para la versión de escritorio, puedes elegir entre dos anchos: 960 px o 1200 px
Cambiar el diseño de la navegación suele afectar al comportamiento del encabezado y, a veces, al resto del sitio. Si de repente tu encabezado tiene un aspecto incorrecto después de cambiar el diseño, prueba con un diseño diferente.
Nota
Esta información es específica del Editor clásico y no es relevante para el Editor 2.0 (anteriormente conocido como Editor All-Flex). Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Puedes cambiar el diseño de tu sitio de escritorio a un diseño de barra lateral. El diseño de la barra lateral muestra el encabezado en el lateral del sitio (ya sea a la izquierda o a la derecha) y es una excelente herramienta de diseño para darle un aspecto único a tu sitio. El encabezado de la barra lateral también actúa como un encabezado fijo, por lo que siempre se mostrará en la pantalla. También puedes añadir widgets a la barra lateral como en cualquier otra fila
Nota
-
Cuando cambias de un diseño de sitio tradicional a un diseño de barra lateral, el encabezado conserva el logotipo y todos los widgets que tenías se eliminarán (similar a cambiar el diseño del encabezado en el diseño del encabezado superior). El color de fondo cambiará de acuerdo con el diseño que hayas seleccionado
-
El encabezado que se reduce no está disponible para la navegación de la barra lateral. La barra lateral siempre se muestra en el sitio, independientemente del desplazamiento del sitio
-
En pantallas de menos de 1090 píxeles de ancho, el contenido de la barra lateral, excepto la primera imagen, se ocultará y aparecerá un icono de menú de expansión. Puedes personalizar el color del botón de activación que aparece en el
Para cambiar el diseño de tu sitio a un diseño de barra lateral:
-
Haga clic en la flecha situada junto aDiseño del sitio.
-
Selecciona el diseño de la barra lateral. Puedes añadir filas, arrastrar y soltar widgets en el encabezado de la barra lateral y personalizarlo.
Para editar el diseño del encabezado de la barra lateral, coloca el cursor sobre la barra lateral y haz clicBarra lateralen la esquina superior derecha. Puedes elegir uno de los múltiples diseños de encabezado de la barra lateral para aplicarlo a tu sitio, mostrarlo en el lado izquierdo o derecho de la pantalla, definir su ancho y