Estilos Globales

Los Estilos Globales le permiten establecer estilos para todo el sitio para los elementos de sus páginas. Esto le da una manera fácil de cambiar la apariencia de su diseño para todo el sitio web a la vez.

Si un elemento no tiene estilos creados específicamente para él, se utilizarán los Estilos Globales.

Los Estilos Globales pueden ser editados desde Manage > Settings > Global Styles.

COLORS

Define las paletas de colores de todo el sitio. La edición de un color aquí lo actualizará en todos los lugares donde se utilice.

FONTS

Elige las fuentes utilizadas en tu sitio web.

HEADINGS

Puedes especificar estilos globales para los encabezados (h1, h2, h3, h4, h5, and h6). 

Para cada etiqueta de encabezado, se puede personalizar lo siguiente:

• Font Size - Tamaño de la fuente
  
• Font Weight -  Peso de la fuente
  
• Line Height - Altura de la línea
  
• Color

BODY TEXT

El Body Text es todo el texto de su sitio. Los ajustes establecidos para los encabezados anulan los estilos del cuerpo del texto.

Para el cuerpo de texto, puede configurar lo siguiente:

• Font Size - Tamaño de la fuente
  
• Font Weight -  Peso de la fuente
  
• Line Height - Altura de la línea
  
• Color

LINKS

En Oxygen, hay tres elementos de enlace: Text Link, Link Wrapper, y Button.

La configuración dentro de All se aplica a todos los tipos de elementos de enlace, y también a los enlaces creados fuera de Oxygen - por ejemplo, los enlaces en el contenido de las entradas del blog.

Ajustes Text Link & Link Wrapper

• Color
• Font Weight - Peso de la fuente
  
• Text Decoration (underline) - Decoración del texto (subrayado)
  
• Hover Color - Color del Hover (Ratón encima)
  
• Hover Text Decoration - Decoración del texto (al pasar el ratón encima)
  

Configuración del botón

• Font Weight - Peso de la fuente
  
• Border Radius - Radio del Borde
  

WIDTHS  y BREAKPOINTS

Ancho de la página: Establece el ancho de la página para el sitio.

Tablet: Establece el breakpoint para tablets.

Landscape: Establece  breakpoint para Landscape

Portrait: Establece el punto de interrupción vertical (móvil)

Debes regenerar la caché CSS de Oxygen a través de Oxygen > Settings > CSS Cache después de cambiar estos puntos de ruptura.

SECTIONS

Controla los paddings para los contenedores de los elementos de Sección. Los valores predeterminados son 75 píxeles para los bordes superior e inferior, y 20 píxeles para los bordes izquierdo y derecho.

El elemento Header Builder utilizará los paddings izquierdo y derecho, pero ignorará los superiores e inferiores.

ANIMATE ON SCROLL

Permite configurar las animaciones que se activan al desplazarse utilizando la biblioteca Animate on Scroll. La configuración elegida aquí se convertirá en la configuración de animación por defecto para cualquier elemento que tenga activadas las animaciones. Estos ajustes globales de animación pueden ser anulados en cada elemento.

• Animation Type - Determina el tipo de animación que se utilizará, como voltear, deslizar o desvanecer.
• Animation Duration - Determina el número de milisegundos que dura la animación.
• Animation Anchor - Define la posición del elemento, en relación con la ventana gráfica, que debe activar la animación.
• Animation Easing - Define la curva de velocidad de la animación. Por ejemplo, la animación será más lenta al principio y al final y más rápida en el medio.
• Animation Trigger Offset - Define el desplazamiento del punto de activación de la animación (en relación con la posición de desplazamiento de la ventana gráfica) en px. Un valor positivo puede usarse para asegurar que todo el elemento esté en la ventana gráfica antes de que se active la animación, mientras que un valor negativo puede usarse para activar la animación antes de que el elemento entre en la ventana gráfica
• Animation Delay - Determina el tiempo que transcurre entre la activación de la animación y el comienzo de la misma.
• Animate Only Once - Por defecto, un elemento que sale de la ventana gráfica reinicia la animación y hace que se vuelva a activar cuando el elemento vuelve a entrar en la ventana gráfica. Se puede desactivar este comportamiento eligiendo "Yes."
• Disable On - Esto permite elegir una anchura de la ventana gráfica por debajo de la cual se desactivarán las animaciones. Es una buena idea deshabilitar las animaciones para los dispositivos móviles para mejorar el rendimiento.

SCRIPTS

Habilitar la funcionalidad extra a través de scripts.

Smooth Scroll to Hash Links

El script Smooth Scroll to Hash Links hace que los enlaces hash, es decir, los enlaces en los que la URL hace referencia al ID de un elemento de la página, se desplacen suavemente por la ventana gráfica hasta el elemento en cuestión. Para activarlo, marque la casilla "Desplazamiento suave a los enlaces hash".

• Scroll Time - El número de milisegundos que tarda la ventana gráfica en desplazarse hasta el elemento seleccionado.

Última modificación: 19 de junio de 2020