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.
-
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, haga clic en 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 la fuente, el peso, el tamaño (para desktop/tableta y celular, por separado), el color, el formato de fuente, la dirección, la altura de línea, el espaciado entre letras y establecer en todo 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 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:
-
En el panel lateral, haga clic en Tema y luego 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 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, haga clic en Tema y luego 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.
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:
-
En el panel lateral, haga clic en Tema y luego 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 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.
Para cambiar el nombre de los colores del tema:
-
En el panel lateral, haga clic en Tema y luego 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.
Para desconectar un widget:
-
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.
-
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:
-
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 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:
-
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 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 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:
-
En el panel izquierdo, haga clic en Tema y luego haga clic en la flecha 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. 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.