La biblioteca de Composite Elements les un complemento de pago que introduce una colección adicional de elementos que se pueden insertar desde el menú +Add.
Los Composite Elements se diferencian de los elementos normales en lo siguiente:
- Están marcados por un logotipo de Oxygen en la esquina superior izquierda de su botón.
- Cuando se insertan, se extraen de nuestro servidor, de forma similar a como funcionan los conjuntos de diseño.
- Como son compuestos, cada parte individual de uno de estos elementos, pueden editarse completamente dentro de Oxygen.
- Pueden incluir funcionalidades avanzadas a través de Bloques de Código (Code Blocks).
La biblioteca incluye los siguientes Composite Elements :
- Accordion
- Back To Top
- Dashboard Tabs
- Dynamic Slider
- Flip Box
- Horizontal Divider
- Icon Button
- Icon List
- Image Comparison
- Mega Menu
- Number Counter
- Circular Counter
- Review Box
- Hover Scroll Image
- Section Indicator
- Switcher
- Table of Contents
- Focus Section
- Floating Icon Menu
ACCORDION
El Accordion se comporta como un elemento acordeón tradicional, con etiquetas en las que se puede hacer clic para expandir un contenedor y revelar algún contenido.
Opciones de configuración
Por defecto, sólo se puede expandir un área de contenido de Accordion a la vez. Cuando se expande una nueva, el área de contenido de Accordion previamente abierta se oculta. Este comportamiento puede cambiarse en el bloque de código denominado "Accordion Code" dentro del contenedor del Accordion en el panel de estructura. Navega al editor de JavaScript y encuentra este código en la línea 4:
var closeOtherToggles = true;
Cambiar de "true" a "false" para permitir que se expandan simultáneamente varias áreas de contenido de Accordion.
BACK TO TOP BUTTON
El Back To Top Button composite es un botón que aparece en una ubicación fija después de desplazarse una cierta distancia hacia abajo en la página. Al hacer click en el botón se vuelve a la parte superior de la página.
Opciones de Configuración
Por defecto, el Back To Top Button aparece en la esquina inferior derecha de la página después de que la ventana gráfica se haya desplazado 300px hacia abajo. La distancia de desplazamiento puede cambiarse en el bloque de código denominado "Back To Top Code" dentro del contenedor del Back To Top Button en el panel de estructura. Navega al editor de JavaScript y buca este código en la línea 4:
var scrollDistance = 300;
Cambia 300 a la distancia de scroll que quieres.
DASHBOARD TABS
El Dashboard Tabs es un elemento de pestañas Oxygen con estilo y una animación personalizada para el contenido de las pestañas.
Opciones de configuración
No tiene opciones de configuración especiales.
DYNAMIC SLIDER
The Dynamic Slider es un elemento Oxygen Repeater que utiliza swiper.js para convertir el Repeater en un slider.
Opciones de configuración
Todos los elementos que estén dentro de un Dynamic Slider son elementos normales de Oxygen que utilizan Datos Dinámicos. La configuración por defecto es ideal para mostrar un número de entradas como un Slider, pero los elementos pueden ser eliminados o cambiados para adaptarse a su caso de uso.
Puedes editar la consulta del Repeater seleccionando en el Panel de Estructura bajo Dynamic Slider > Slider Container. Este es un elemento de repetición normal y puede ser configurado de la manera ordinaria.
Para cambiar el retardo y la transición del Slider, vete hasta el bloque de código etiquetado "Dynamic Slider Code" dentro del contenedor del Slider en el panel de estructura. Ve al editor de JavaScript y encuentra este código en las líneas 4 y 5:
var delay = 4000;
var transition = 'slide';
Cambia el valor del retardo para ajustar la rapidez con la que el slider se reproduce automáticamente. Para cambiar la transición utilizada, cambia 'slide' por otro valor soportado por swiper.js. Las transiciones disponibles son "slide", "flip", "cube" y "coverflow".
Puedes cambiar cualquier otra configuración de swiper.js editando las opciones dentro de la variable swiper en el editor de JavaScript del bloque de código "Dynamic Slider Code". Puedes aprender más sobre las opciones de configuración de swiper.js en la documentación de swiper.js..
FLIP BOX
El Flip Box tiene una parte delantera y otra trasera. Cuando se pasa el cursor por encima del Flip Box, este gira con un efecto 3D para mostrar la parte trasera del Flip Box.
Opciones de configuración
No tiene opciones de configuración.
HORIZONTAL DIVIDER
El Horizontal Divider es un icono flanqueado por dos líneas y puede utilizarse para dividir el espacio vertical.
Opciones de configuración
No tiene opciones de configuración.
ICON BUTTON
El Icon Button es una envoltura de enlace con estilo que contiene un icono y un elemento de texto
Opciones de configuración
No tiene opciones de configuración.
ICON LIST
El Icon List muestra una lista de elementos de texto y los iconos que los acompañan. Las filas de la lista alternan en color.
Opciones de configuración
No tiene opciones de configuración.
IMAGE COMPARISON
El Image Comparison muestra dos imágenes dentro de un único contenedor, y tiene un icono que se puede arrastrar en el centro y que permite revelar más o menos de cada imagen deslizando a la izquierda y a la derecha.
Opciones de configuración
El Image Comparison tiene un div izquierdo y otro derecho que contienen una imagen de fondo. Estas imágenes de fondo son las que se utilizan para la comparación. Para cambiar las imágenes, selecciona el div apropiado y vete a Advanced > Background para cambiar la imagen de fondo.
MEGA MENU
El Mega Menu está compuesto por un activador (Mega Menu Link en el Panel de Estructura) y una envoltura. Cuando se pasas el cursor sobre el activador, la envoltura se coloca debajo del activador y se revela.
Por defecto, el Mega Menu Wrapper incluye un elemento Columnas con 3 columnas y algún contenido de demostración. El elemento Columns y todo lo que contiene puede ser reemplazado por cualquier otro elemento de Oxygen que se ajuste a tus necesidades.
Opciones de configuración
En el panel de estructura encontrará los elementos Mega Menu Link y Mega Menu Wrapper dentro del contenedor Mega Menu. El Mega Menu Link y Mega Menu Wrapper no necesitan residir en el mismo contenedor. El Mega Menu Wrapper puede ser movido a la parte inferior del diseño, o a cualquier otro lugar .
Para utilizar más de un Mega Menu, empieza por insertar un segundo elemento Mega Menu. A continuación, selecciona el nuevo elemento Mega Menu Link y encuentra el atributo megamenu-link-id en la pestaña Primary del panel de propiedades o en Advanced > Attributes. Este atributo está establecido en 1 por defecto. Cámbialo a 2 (o a cualquier otro número único que no sea utilizado por otros elementos de Mega Menú en el diseño de la página o plantilla). Ahora, selecciona el nuevo elemento Mega Menu Wrappery encuentra su atributo megamenu-link-id en la pestaña Primary del Panel de Propiedades o en Advanced > Attributes. El valor de este atributo debe coincidir con el valor del atributo que acaba de establecer en el nuevo elemento Mega Menu Link.
NUMBER COUNTER
El Number Counter está formado por un número y una etiqueta. El número cuenta hasta el valor definido cuando el Number Counter se hace visible en la ventana gráfica.
Opciones de configuración
Para establecer el valor hasta el que debe contar el Number Counters encuentra el elemento Número dentro del contenedor del Number Counter en Oxygen, y cambia el texto del elemento Número por el valor final deseado. Este valor debe ser un número.
Para cambiar la velocidad a la que se incrementa el número, vete hasta el Code Block "Number Counter" dentro del contenedor Number Counter en el panel de estructura. Luego, y busca este código en la línea 13:
var counterSpeed = 50;
Para hacer que el Number Counter cuente más lentamente, cambie 50 por un número mayor. Para hacerlo más rápido, cambie 50 por un número menor.
CIRCULAR COUNTER
El Circular Counter está compuesto por un anillo circular, un número, una unidad, una etiqueta y una sub-etiqueta. El número cuenta hacia arriba y el anillo se llena de un color cuando el Circular Counter se hace visible en la ventana gráfica.
Opciones de configuración
La unidad es un elemento de texto simple. Para cambiar la unidad del símbolo % por defecto, haga doble clic en el símbolo y reemplácelo por la unidad deseada.
Para establecer el valor hasta el que debe contar el Circular Counter busca el elemento Número dentro del contenedor Circular Counter > Circular Counter Outer > Circular CounterInner container en Oxygen, a y cambia el texto del elemento Número por el valor final deseado. Este valor debe ser un número.
El relleno del anillo circular se rellenará con un porcentaje que corresponde al Número definido.
Para cambiar el color del relleno del anillo, selecciona el Circular Counter Outer dentro del contenedor Circular Counter en el panel de propiedades. A continuación, ir a Advanced > Typography en el Panel de Propiedades. El color de la tipografía definido aquí se utiliza para el color de relleno del anillo.
Para cambiar la velocidad a la que se incrementa el número, navegue hasta el Bloque de Código etiquetado "Circular Counter Code" en el Panel de Estructura. A continuación, y encuentre este código en la línea 13:
var counterSpeed = 50;
Para hacer que el Contador Numérico cuente más lentamente, cambia 50 por un número mayor. Para hacerlo más rápido, cambia 50 por un número menor.
REVIEW BOX
El Review Box muestra un diseño de revisión preestablecido que incluye una imagen, nombre, título, calificación de estrellas y texto de revisión.
Opciones de configuración
El Image Comparison no tiene opciones de configuración.
HOVER SCROLLING IMAGE
El Hover Scrolling Image muestra una parte de una imagen con una gran altura vertical. Cuando se pasa el ratón por el elemento, la imagen se desplaza hacia abajo. Este elemento es ideal para mostrar imágenes como capturas de pantalla de sitios web.
Opciones de configuración
To change the image, select the Hover Scrolling Image Div, ensure you have the Div's ID selected in the Properties Pane, then navigate to Advanced > Background and change the background image there. This element works best with tall images that allow for ample vertical scrolling.
Para cambiar la imagen, selecciona el elemento Div de Imagen Desplazable, asegúrate de tener el ID del Div seleccionado en el Panel de Propiedades, luego navega a Advanced > Effects > Transition. Ty cambia la imagen de fondo allí. Este elemento funciona mejor con imágenes altas que permiten un amplio desplazamiento vertical.
SECTION INDICATOR
El Section Indicator está formado por un div circular y una etiqueta. Estos elementos se clonarán para cada Sección presente en la página cuando se cargue el front-end.
Nota: El Section Indicator debe utilizarse con Secciones que tengan una altura de 100vh.
Opciones de configuración
Para cambiar el color "activo" de los puntos del Indicador de Sección, seleccione el elemento Punto del Indicador de Sección en el Panel de Estructura, luego navega a Advanced > Typography y cambia el color de la tipografía.
Para establecer la etiqueta de las Secciones, asigne a cada Sección un atributo data-label (en Advanced > Attributes en el Panel de Propiedades). Establece el valor a lo que quieras que sea la etiqueta.
Para omitir los indicadores de Secciones específicas, dé a esas secciones un atributo si-skip (en Advanced > Attributes en el Panel de Propiedades) con un valor de 1. El Indicador de Sección ignorará estas Secciones al generar la salida.
Si necesitas utilizar el indicador de sección para secciones que son mayores de 100vh, tendrás que ajustar el umbral en la línea 64 del editor de JavaScript del bloque de código del indicador de sección. Para que el indicador de sección funcione con secciones de 200vh, por ejemplo, el umbral de la línea 64 debe ajustarse a 0,5.
SWITCHER
El Switcher es un interruptor que alterna la visibilidad de dos contenedores cuando se hace clic. Esto se utiliza comúnmente para mostrar diferentes opciones de precios en las páginas de precios.
Opciones de configuración
Hay dos contenedores incluidos con el Switcher: Contenedor Conmutador 1 y Contenedor Conmutador 2. Coloque cualquier contenido que desee alternar en estos contenedores.
TABLE OF CONTENTS
Table of Contents genera una Tabla de Contenidos automática y clickable basada en los elementos h2-h6 presentes en la página.
Opciones de configuración
Para dar estilo a la tabla de contenidos, da estilo a los elementos del marcador de posición en el constructor. Estos estilos se utilizarán cuando se genere dinámicamente la tabla de contenidos en el front-end.
Para hacer que Table of Contents omita un encabezado o contenedor específico, añade el atributo toc-skip con un valor de 1 al encabezado o contenedor. Si se añade este atributo a un contenedor, Table of Contents omitirá todos los encabezados dentro de ese contenedor al generar su salida.
FOCUS SECTION
Focus Section es una sección que aumenta de tamaño y tiene un fondo que se activa cuando la sección se desplaza a la vista.
Opciones de configuración
Focus Section no tienes opciones de configuración.
FLOATING ICON MENU
Floating Icon Menu es un menú activado por iconos que se expande al hacer clic, mostrando opciones indicadas por iconos.
Opciones de configuración
Floating Icon Menu no tienes opciones de configuración.
Última modificación: 23 de junio de 2021
