Para obtener más información sobre el tema del sitio, visite Duda University
El panel Tema del sitio le permite realizar cambios que afectan a todo el 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 manera rápida y eficiente, lo que reduce el tiempo de diseño y mantiene 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 de 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. Te recomendamos que primero te decidas por un tema del sitio y, a continuación, personalices las partes de tu sitio que quieras que destaquen o que tengan un aspecto diferente al resto.
-
Antes de marzo de 2023, Site Theme fue previamente nombrado Global Design.
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:
-
En el panel izquierdo, haz clic en Tema.
-
Haz clic en la flecha situada junto a Texto.
-
Haga clic en el tipo de texto que quiere. Las opciones son:
-
DFLT. Esto establecerá el tema para todo el texto en widget que no estén asignados a un encabezado o al estilo de párrafo, como el widgetde navegación. El color y el subrayado del texto del enlace también se pueden establecer aquí. Además, tiene la opción de personalizar la apariencia de los vínculos para diferentes estados, incluidos 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.
-
Partidas y subpartidas H1-H6.
-
-
Puede cambiar la fuente, el peso, el tamaño (para desktop/tablet y celular, por separado), el color, el formato de fuente, la dirección, la altura de línea, el espaciado entre letras y establecerlo en mayúsculas.
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 seguirá cambiando 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.
Para actualizar el texto del tema en la configuración de texto, haz clic en Tema y, a continuación, selecciona 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 puede realizar actualizaciones.
El editor cuenta con una variedad de fuentes para su uso. Establezca una fuente de texto del tema o elija diferenciar su texto mediante el uso de varias fuentes diferentes en su sitio. Para agregar fuentes personalizadas a su sitio, consulte Fuentes personalizadas.
Para ver las fuentes disponibles y ver cómo se ven:
-
En el panel lateral, haz clic en Tema y, a continuación, en Texto.
-
Seleccione una fuente en el menú desplegable Fuente .
Puedes agregar fuentes personalizadas desde la biblioteca de fuentes de Google o subiendo archivos de fuentes personalizadas (TTF, OTF, EOT, WOFF2 o WOFF). Para obtener el mejor rendimiento, se recomienda emplear archivos WOFF o WOFF2 cuando se agreguen fuentes personalizadas.
Nota
-
Si solo tienes un .otf o .ttf archivo, recomendamos usar un tool externo como FontSquirrel para convertirlo al formato requerido.
-
Para mantener el cumplimiento del RGPD, las fuentes personalizadas se cargan desde nuestro CDN sin necesidad de llamar a la API de Google Fonts.
-
Si almacena un sitio como plantilla, incluirá las fuentes personalizadas que se agregaron.
-
Si restablece un sitio, se eliminan las fuentes personalizadas.
Para agregar una fuente personalizada:
-
Puede añadir fuentes personalizadas desde cualquiera de las siguientes ubicaciones:
-
En el panel lateral, haga clic en Tema y, a continuación, haga clic en Texto. Expanda la sección de texto deseada. Junto a la lista de fuentes, haga clic en el icono agregar y gestionar fuentes (
).
-
Desde el editor de diseño de un widget, para cualquier elemento de texto, haga clic en el icono agregar y gestionar fuentes (
-
-
Seleccione una de las siguientes opciones:
-
Fuentes de Google. Seleccione una fuente de la lista de fuentes de Google. La fuente aparece en la lista de fuentes de Google agregadas a continuación. Para eliminar una fuente, haga clic en la X situada junto a la fuente en 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. Haga clic en Cargar fuentes para cargar un archivo de fuente 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 en Listo.
La fuente se agrega a la lista de fuentes en todo el 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 está empleando actualmente en el sitio, el texto volverá a emplear la fuente predeterminada. No puede eliminar ninguna de las fuentes predeterminadas.
Para eliminar fuentes personalizadas de un sitio:
-
En el panel lateral, haga clic en Tema y, a continuación, haga clic en Texto. Expanda la sección de texto que emplea la fuente personalizada. Junto a la lista de fuentes, haga clic en el icono agregar y gestionar fuentes (
-
Haga clic en la X junto a la fuente en la lista para eliminar la fuente del sitio.
Si quitas una fuente de Google, debes volver a publicar el sitio para que el cambio surta efecto. Sin embargo, si quita una fuente cargada, no es necesario volver a publicar para que el cambio surta efecto.
Los colores le permiten definir una paleta de colores y vincular los colores individuales a cualquiera o a todos los widget con configuraciones 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 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 coherente en todas las páginas.
Los propietarios de las cuentas tienen automáticamente permisos del tema y pueden editar, ver y utilizar los colores del tema. Los miembros del equipo y los clientes que no tienen permisos del tema pueden ver y usar colores del tema, pero no pueden editarlos.
Para configurar los colores del tema:
-
En el panel lateral, haz clic en Tema y, a continuación, selecciona la flecha situada junto a Colores.
-
Haga clic en el icono Más junto a Principal, o en la configuración que necesite definir.
-
Escriba el valor HEX o RGB del color deseado, o use la herramienta de gotero para seleccionar un color.
Repita estos pasos según sea necesario para cada color de 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 temas escanea tu sitio y detecta los colores más empleados. Genera una lista de colores para seleccionar y, una vez seleccionados, esos colores se convierten en los colores de su tema y se conectan a su sitio widget.
Para configurar automáticamente los colores del tema:
-
En el panel lateral, haz clic en Tema y, a continuación, selecciona la flecha situada junto a Colores.
-
Haga clic en Establecer colores de tema.
-
Haz clic en Conectarlo por mí o lo conectaré yo mismo.
-
(Opcional) Si seleccionó Lo conectaré yo mismo, haga clic en el icono 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 icono del lápiz (
) y se abrirá la configuración de colores del tema donde podrá editar el color deseado.
Una vez que un widget se conecta 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:
-
En el panel lateral, haz clic en Tema y, a continuación, en Colores.
-
hover 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á cuando pase el cursor sobre el color en el selector de colores.
Puede desconectar cualquier widget conectado a colores de tema individuales.
Puede desconectar cualquier widget conectado a colores de tema individuales.
-
En el panel lateral, haga clic en Tema.
-
Haga clic en Colores.
-
Haga clic en el icono de tres puntos horizontales (
) junto al texto Colores y seleccione Eliminar colores del tema.
-
Selecciona los colores que quieres eliminar y, a continuación, haz 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 principio 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 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea 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 ediciones que se realicen en filas o columnas individuales anularán la configuración de la fila y la columna 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 los elementos.
Para personalizar el fondo de su sitio:
-
En el panel izquierdo, haga clic en Tema y luego 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 de alternancia No optimizar esta imagen para evitar la optimización (esta configuración aparecerá después de que se seleccionó una imagen).
Para personalizar el fondo por página:
-
En el panel izquierdo, haga clic en Tema y luego 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 de alternancia No optimizar esta imagen para evitar la optimización (esta configuración aparecerá después de que se seleccionó una imagen).
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu 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 luce incorrecto después de cambiar la disposición, pruebe con una disposición diferente.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (anteriormente conocido como el Editor All-Flex). Para identificar la versión actual del editor, consulta Cómo identificar la versión del editor que emplea tu 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 pegajoso, 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 todas las 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:
-
En el panel izquierdo, haga clic en Tema y, a continuación, haga clic en la flecha situada junto a Diseño del sitio.
-
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. Puedes elegir uno de los múltiples diseños de encabezado de barra lateral para aplicarlo a tu sitio, mostrarlo en el lado izquierdo o derecho de la pantalla, definir su ancho y más.