El panel Tema del sitio te permite hacer cambios que afectan a todo tu sitio. Desde el panel de diseño personalizas el texto, los botones, las imágenes, el fondo y los widgets de navegación de tu sitio. Así aplicas cambios visuales de gran alcance de forma rápida y eficiente, reduces el tiempo de diseño y mantienes el estilo de tu sitio coherente en todas las páginas.
Para abrir el panel Tema del sitio, en el panel lateral haz clic en Tema. Al abrir el panel Tema del sitio, el lienzo se reduce automáticamente a la vista del 50 % para que veas todo el lienzo mientras ajustas 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 100 %. También puedes acercar y alejar en el modo de vista previa.
Nota: los cambios que hagas en widgets o páginas concretos anulan los temas definidos en el panel Tema del sitio. Te recomendamos que primero decidas un tema del sitio y luego personalices las partes de tu sitio que quieras destacar o que se vean diferentes al resto.
Texto del tema
Esta sección te permite controlar el texto de tu sitio, tanto el texto normal como los encabezados de todos los tamaños (de H1 a H6). Cambia el estilo y el aspecto del texto de todo tu sitio. Puedes cambiar el tipo y el tamaño de fuente y elegir ajustes distintos para el texto normal, los enlaces y los títulos.
Cambiar el tamaño, el estilo o el color de la fuente, entre otros ajustes, afecta a los futuros párrafos y otros tipos de texto, así como a los widgets actuales conectados al Texto del sitio que no hayas cambiado a mano.
Configurar el texto del tema
Para configurar el texto del tema:
- En el panel lateral, haz clic en Tema.
- Haz clic en la flecha junto a Texto.
- Haz clic en el tipo de texto que quieras. Las opciones son:
- DFLT. Define el tema para todo el texto de los widgets que no están asignados a un encabezado ni al estilo de párrafo, como el widget de navegación. Aquí también se pueden definir el color y el subrayado del texto de los enlaces. Además, puedes personalizar el aspecto de los enlaces en distintos estados, como Default Link State, Link On-hover y Enlace pulsado.
- PAR. Define el tema para el widget de texto.
- Encabezados y subencabezados de H1 a H6.
- Por cada tipo de texto puedes cambiar lo siguiente:
- Fuente
- Tamaño de fuente. Se define por separado para escritorio/tablet y para móvil.
- Color de fuente
- Formato de fuente
- Orientación del texto
- Grosor de fuente
- Altura de la línea
- Espaciado de letras
- All caps
- Text shadow
Los cambios en el área de texto del tema afectan a todo el texto del sitio que no hayas anulado con cambios de estilo individuales. En cuanto editas un elemento a mano, esa edición tiene prioridad: los cambios posteriores en el tema ya no afectan al estilo de ese elemento. Esto vale solo para el ajuste de estilo concreto que hayas cambiado en el elemento. Por ejemplo, si solo cambiaste el color del texto de un widget H1 concreto en el lienzo:
- y luego cambias el tamaño de fuente de H1 en el tema del sitio, el tamaño de fuente sí cambia en ese widget H1.
- y luego cambias el color de H1 en el tema del sitio, el H1 que ya habías cambiado no se actualiza con el nuevo color.
Actualizar el texto del tema
Puedes actualizar el texto del tema en los ajustes de texto haciendo clic en Tema y seleccionando Texto. O bien haz clic en un widget de texto para abrir el menú contextual, haz clic en el menú desplegable de selección de encabezado y selecciona Actualizar tema. Así se abren los ajustes de texto del tema, donde puedes hacer los cambios.
Biblioteca de fuentes
El editor ofrece una gran variedad de fuentes. Define una fuente de texto del tema o diferencia tu texto usando varias fuentes distintas en tu sitio.
Para ver las fuentes disponibles y su aspecto:
- En el panel lateral, haz clic en Tema.
- Haz clic en Texto.
- Selecciona una fuente en el menú desplegable Fuente.
Colores del tema
Los colores te permiten definir una paleta de colores y vincular cada color a cualquiera de los widgets que tengan ajustes de color, o a todos. El color de cualquier elemento vinculado a los colores del tema se actualiza automáticamente cuando cambias el color vinculado en los ajustes de colores del tema. Así aplicas cambios de color rápidamente, reduces el tiempo de diseño y te aseguras de que el estilo de tu sitio sea coherente en todas las páginas.
Configurar los colores del tema
Puedes configurar hasta 30 colores del tema.
Para configurar los colores del tema:
- En el panel lateral, haz clic en Tema.
- Selecciona la flecha junto a Colores.
- Haz clic en el icono más junto a Primario, o al ajuste que necesites definir.
- Escribe el valor HEX o RGB del color que quieras, o usa la herramienta cuentagotas para seleccionar un color.
- (Opcional) Puedes generar colores a partir de tu logo. Haz clic para abrir el color primario, abre luego la pestaña Marca y haz clic en Añadir logotipo (si has añadido un logo en tu Información empresarial dentro de la Biblioteca de contenidos, aparecerá aquí). Cuando añadas tu logo, se genera un conjunto de colores. Si necesitas quitar o reemplazar el logo, haz clic en el icono de tres puntos junto a tu logo y selecciona Eliminar o Cambiar imagen.
Repite estos pasos según haga falta para cada color del tema. A continuación, tienes que conectar los colores a los widgets de tu sitio (consulta más abajo "Conectar los colores del tema a los widgets").
Configurar automáticamente los colores del tema
Si el sitio o la plantilla aún no tiene colores conectados, esto también se puede hacer automáticamente. El generador automático de colores del tema analiza tu sitio y detecta los colores más usados. Genera una lista de colores para elegir y, una vez seleccionados, esos colores se convierten en tus colores del tema y se conectan a los widgets de tu sitio.
Para configurar automáticamente los colores del tema:
- En el panel lateral, haz clic en Tema.
- Selecciona la flecha junto a Colores.
- Haz clic en Establecer colores de tema.
- Haz clic en Connect it for me o en I'll connect it myself.
- (Opcional) Si has elegido I'll connect it myself, haz clic en el icono más junto a cada color del panel de diseño y selecciona los colores uno a uno.
- Selecciona cuáles de los colores generados quieres usar.
- Haz clic en Guardar y conectar colores.
Los colores aparecerán en la sección Colores del panel Tema del sitio.
Conectar los colores del tema a los widgets
Para conectar un widget a un color del tema:
- Haz clic en un widget para abrir su menú de ajustes.
- Abre los ajustes de color y selecciona uno de los colores del tema que aparecen arriba.
- Repítelo según haga falta con otros elementos.
- (Opcional) Si necesitas editar uno de los colores del tema, haz clic en el icono del lápiz y se abrirán los ajustes de los colores del tema, donde puedes editar el color que quieras.
Una vez que un widget está conectado a los colores del tema, se actualiza automáticamente cuando se actualiza el color del tema vinculado.
Cambiar el nombre de los colores del tema
Para cambiar el nombre de los colores del tema:
- En el panel lateral, haz clic en Tema.
- Haz clic en Colores.
- Pasa el cursor por encima del nombre del color que quieras y haz clic en el icono del lápiz.
- Escribe un nombre nuevo.
El nombre nuevo se guarda automáticamente y aparece al pasar el cursor por encima del color en el selector de color.
Eliminar colores del tema
Puedes desvincular cualquier widget conectado a colores del tema concretos.
Para desvincular un widget:
- En el panel lateral, haz clic en Tema.
- Haz clic en Colores.
- Haz clic en el icono de los tres puntos horizontales junto al texto Colores y selecciona Remove theme colors.
- Selecciona qué colores quieres quitar y luego haz clic en Eliminar los colores seleccionados.
Botones del sitio
Esta sección te permite definir el estilo de los widgets de botón primario y secundario de tu sitio. Elige uno de los diseños de botón y define 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 principio en móvil, activa la opción de la sección Diseño del sitio.
Imágenes del tema
Esta sección te permite controlar el estilo de los widgets de imagen de tu sitio. Puedes cambiar el diseño de la imagen y añadir o editar el estilo del borde, las esquinas redondeadas o los efectos de sombra.
Filas y columnas del tema
Esta sección te permite definir el tema del diseño de filas y columnas en cuanto a color de fondo y espaciado predeterminado. Los cambios que hagas en filas o columnas concretas anulan los ajustes de filas y columnas del tema.
Fondo del tema
Esta sección te permite controlar el estilo del 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 darle a tu sitio un diseño único. Los cambios afectan también al escritorio y a la tablet.
Nota: para información sobre los fondos de elementos concretos del sitio, consulta "Fondos de elementos".
Personalizar el fondo del sitio
Para personalizar el fondo de tu sitio:
- En el panel lateral, haz clic en Tema.
- Haz clic en la flecha junto a Fondos.
- Haz clic en Fondo predeterminado.
- Haz clic en la pestaña Color o Imagen, o selecciona un color para el fondo del sitio o sube una imagen.
- (Opcional) Haz clic en la opción No optimices la imagen para evitar la optimización (este ajuste aparece cuando se ha seleccionado una imagen).
Personalizar el fondo por página
Para personalizar el fondo por página:
- En el panel lateral, haz clic en Tema.
- Haz clic en la flecha junto a Fondos.
- Haz clic en Fondo por página.
- Selecciona una página en el menú desplegable y elige imagen o color para esa página concreta.
- (Opcional) Haz clic en la opción No optimices la imagen para evitar la optimización (este ajuste aparece cuando se ha seleccionado una imagen).
Ancho y espaciado (Editor 2.0)
Nota: esta información es específica de Editor 2.0, antes conocido como All-Flex Editor.
Desde el panel Tema puedes ajustar el diseño de tu sitio, lo que incluye definir el ancho de página y el espaciado predeterminado de las secciones, las columnas y las columnas interiores.
Para acceder a los ajustes de diseño del sitio:
- En el panel lateral, haz clic en Tema.
- Haz clic en ANCHURA Y ESPACIADO.
- Haz clic en la sección que quieras para desplegarla.
Ancho de página
Puedes definir el ancho de página predeterminado, en escritorio, para las secciones que no están en ancho completo (antes llamado "full bleed"). Ajustar el ancho de página predeterminado ayuda a lograr la mejor legibilidad y el mejor diseño según cómo se muestre el sitio. Por ejemplo, algunos sitios se muestran en la pantalla de un televisor o en pantallas más grandes que las de un ordenador de escritorio medio.
Para definir el ancho de página predeterminado:
- En el panel lateral, haz clic en Tema.
- Haz clic en ANCHURA Y ESPACIADO.
- Haz clic para desplegar la sección Ancho de página.
- Selecciona 1200 px, 1440 px o Personalizar. Si seleccionas Personalizar, usa el control deslizante para elegir el ancho en píxeles o introduce un valor en el campo. El valor personalizado puede estar entre 960px y 1920px, o entre 50 vw y 100 vw.
Activa la opción Ancho completo si quieres que todas las secciones nuevas tengan ancho completo de forma predeterminada.
Espaciado de sección
Puedes definir el relleno predeterminado de las secciones nuevas y vacías que añadas a tu sitio. Si quieres, puedes anular el espaciado de sección del tema en el panel de diseño de cada sección.
Aspectos importantes:
- Las secciones que se añaden al header conservan el espaciado predeterminado del header, sin importar lo que se haya definido en el espaciado de sección del tema.
- Ten 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, pero puedes volver a conectarlas abriendo el panel de diseño de la sección y haciendo clic en Reset to theme spacing en el cajón Espaciado de secciones.
Para definir el espaciado de sección:
- En el panel lateral, haz clic en Tema.
- Haz clic en ANCHURA Y ESPACIADO.
- Haz clic para desplegar la sección Espaciado de secciones.
- Haz clic en los cuadros correspondientes para editar los valores de relleno. Los valores de relleno horizontales están vinculados: si cambias uno, el otro se actualiza automáticamente. Puedes desvincularlos haciendo clic en el icono de enlace. Ten en cuenta que el espaciado de sección se define por breakpoint.
Si hace falta, haz clic en Reset padding para poner todos los valores a cero.
Si modificas el relleno de una sección concreta, se anulan los ajustes del tema. Puedes restablecerlo a los ajustes de Espaciado de secciones del tema abriendo el panel de diseño de la sección y haciendo clic en Reset to theme spacing en el cajón Espaciado de secciones.
Espaciado de columna
Puedes definir el relleno predeterminado de las columnas nuevas y vacías que añadas a tu sitio. Si quieres, puedes anular el espaciado de sección del tema en el panel de diseño de cada columna.
Para definir el espaciado predeterminado de las columnas:
- En el panel lateral, haz clic en Tema.
- Haz clic en ANCHURA Y ESPACIADO.
- Haz clic para desplegar la sección Espaciado de columnas.
- Haz clic en los cuadros correspondientes para editar los valores de relleno. Los valores de relleno verticales están vinculados: si cambias uno, el otro se actualiza automáticamente. Puedes desvincularlos haciendo clic en el icono de enlace.
Espaciado de columna interior
Puedes definir el relleno predeterminado de las columnas interiores nuevas que añadas a tu sitio. Si quieres, puedes anular el espaciado de sección del tema en el panel de diseño de cada columna interior.
Para definir el espaciado predeterminado de las columnas interiores:
- En el panel lateral, haz clic en Tema.
- Haz clic en ANCHURA Y ESPACIADO.
- Haz clic para desplegar la sección Espaciado interior de columnas.
- Haz clic en los cuadros correspondientes para editar los valores de relleno. Los valores de relleno verticales están vinculados: si cambias uno, el otro se actualiza automáticamente. Puedes desvincularlos haciendo clic en el icono de enlace.
Diseño del sitio
Controla la navegación del diseño del sitio en escritorio, tablet y móvil. Para la versión de escritorio puedes elegir entre dos anchos: 960px o 1200px.
Cambiar el diseño de tu navegación suele afectar al comportamiento de tu header y, a veces, al resto de tu sitio. Si tu header se ve de repente mal después de cambiar el diseño, prueba con otro diseño.
Diseño de barra lateral para escritorio
Puedes cambiar el diseño de escritorio de tu sitio a un diseño de barra lateral. El diseño de barra lateral muestra el header a un lado del sitio (a la izquierda o a la derecha) y es un gran recurso de diseño para darle a tu sitio un aspecto único. El header de la barra lateral también funciona como un header fijo, así que siempre se ve en la pantalla, y 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 header conserva el logo y se quitan todos los widgets que tenías (parecido a cuando cambias el diseño del header en el diseño de header superior). El color de fondo cambia según el diseño que hayas elegido.
- El header que se encoge no está disponible para la navegación de barra lateral. La barra lateral siempre se muestra en el sitio, hagas scroll o no.
- En pantallas de menos de 1090 píxeles de ancho, el contenido de la barra lateral, salvo la primera imagen, se oculta y aparece un icono para desplegar el menú. Puedes personalizar el color del botón que lo activa, que aparece en el editor de diseño.
Para cambiar el diseño de tu sitio a un diseño de barra lateral:
- En el panel lateral, haz clic en Tema.
- Haz clic en la flecha junto a Diseño del sitio.
- Selecciona el diseño de barra lateral. Puedes añadir filas, arrastrar y soltar widgets en el header de la barra lateral y personalizarlo.
Para editar el diseño del header de la barra lateral, pasa el cursor por encima de la barra lateral y haz clic en Barra lateral en la esquina superior derecha. Puedes elegir uno de los varios diseños de header de barra lateral para aplicarlo a tu sitio, mostrarlo a la izquierda o a la derecha de la pantalla, definir su ancho y más.
Comentarios
0 comentarios
El artículo está cerrado para comentarios.