Oxyprops - Configuracion

Prólogo

Ya hemos mencionado en la review inicial de este producto que definitivamente este es un producto que es de lo mejor que hay en el mercado y que si o si tiene que estar dentro de tu arsenal de plugins.
Por eso no podemos dejar de hacer una segunda entrada para mostrar mas a fondo las características de Oxyprops , así que vamos a meternos un poco mas en profundidad el panel de configuración inicial.

Post de

inicio Oxyprops

Primer vistazo al panel de configuración

En el scrolling Image de abajo vemos a groso modo el panel de configuración del que vamos a tratar de dar una visión mas o menos clara.

Ajustes

Todas las opciones seleccionables del panel tienen a su izquierda un icono que, situando el puntero del ratón sobre él desplegará un tooltip con información sobre la opción.

Configuración Principal

En la parte superior del panel tenemos una serie de opciones agrupadas en tres categorías:

Try your settings for various schemes

Builder Features

Utility Stylesheets

Try your settings for various schemes - Prueba tus ajustes para varios esquemas

Esta opción solo es para fines demostrativos y no afecta para nada ni en el plano operativo del constructor ni en el frontend, cambiando entre las seis opciones tendrás una orientación visual de los diferentes esquemas.

Builder Features - Características en el Constructor

Son las diferentes opciones que se cargarán en el constructor de Oxygen:

Activate OxyProps context menu - Activar el menú contextual de OxyProps

Con el menú contextual de OxyProps, puedes acceder directamente a los accesorios personalizados.
Click con el botón derecho del ratón en un campo de valor y se le mostrarán los props relevantes.
Click, el valor se rellenará y la unidad se configurará.
Para ejemplo la imagen de abajo que muestra el panel de selección que aparece cuando se hace click con el botón derecho del ratón en el campo de unidades de color de texto.

Add OxyProps Elements to Plus Menu - Añadir elementos OxyProps al menú de elementos

OxyProps viene con elementos pre-construidos, como el conmutador "Dark-Mode"
Esta opción creará una sección en el menú Oxygen Builder ⊕ donde podrá acceder a estos elementos De momento solo hay tres elementos pero se están desarrallonado mas.
Los actuales son los que abajo se muestran en la imagen

Replace Oxygen Global Settings - Sustituir la configuración global de Oxygen

Sobrescribir la configuración global actual de Oxygen con los valores predeterminados de OxyProps utilizando las propiedades personalizadas de OP.
De cualquier manera, siempre podrás modificar los ajustes globales individualmente a tu gusto.
Para volver a los valores predeterminados de OxyProps después de la modificación, desmarca esta opción, guarda, vuelve a marcar y vuelve a guradar de nuevo.

Make Colors available as global colors - Hacer que los colores estén disponibles como colores globales

Con esta opción, se crearán dos conjuntos de colores.El primero tendrá todos los colores lógicos, el segundo todas las muestras de color.¡Ahora, en cualquier lugar donde apliques su color global o-marca, estará vinculado al accesorio, y reactivo a los ajustes de los esquemas de color !

Apply OxyProps Normalize - Aplica Oxyprops Normalize

Carga la hoja de estilos OxyProps Normalize que define los preajuste

Custom Color Schemes Stylesheet - Hoja de estilos de combinaciones de colores personalizadas

Se creará una hoja de estilo en Oxygen Builder donde podrás definir todos los colores lógicos con tus propios valores, y anular los valores predeterminados y los temas de OxyProps.

Utility Stylesheets

Las hojas de estilo de las clases pueden representar una enorme cantidad de kilobytes, ya que contienen todas las combinaciones posibles.
Para evitar la sobrecarga, sólo tienes que seleccionar las que quieres cargar en el constructor y en el front-end.

All of them! - Todas
Caragará todas las opciones, estén o activadas en el checkbox.

Colors - Colores

Aplicará los colores de OxyProps a los elementos con clases de utilidad de color.

Colors Schemes - Esquemas de Colores

Esquemas de color para cada uno de los Colores OxyProps disponibles.
Esquemas de color para cada uno de los colores OxyProps disponibles.
Se pueden anidar.

Aspect Ratios

Este paquete hace que los accesorios personalizados de OxyProps estén disponibles como clases.
Puedes elegir entre incluir o no el object-fit:cover.

Easing

Este paquete hace que los accesorios personalizados de OxyProps estén disponibles como clases. Establece fácilmente las funciones de temporización para animaciones y transiciones.

Layers

Las clases de Oxyprops Layers permiten asignar z-index.

Cards

Dos juegos de cards predefinidos.

12 Columns Grid

Un conjunto de clases para crear un diseño en una cuadrícula de hasta 12 columnas a través del ancho de la página de Oxygen Builder.

Gradients

Un conjunto de degradados de fondo y de texto elaborados por expertos. Una selección de combinaciones y filtros para hacer el diseño aún más interesante.

Shadows

Un conjunto de utilidades de sombras para contenedores, tanto interiores como exteriores, para combinar con esquemas de color y aportar profundidad a los diseños.

Tipography

Todo lo que se necesita para estilizar textos.
Familias de fuentes. Pesos de las fuentes. Tamaños fluidos y estáticos. Guión y seguimiento. Alineaciones, orientaciones, direcciones...

Animations

Este paquete hace que los props personalizados de animación OxyProps estén disponibles como clases.
Asigna fácilmente animaciones en los estados base, hover y activo.

Bordes

5 variaciones de formas "Shapes".
Radio condicional exclusivo.

Buttons

Botones Oxyprops disponibles en todos los colores, lisos o con contorno. Combínalos con animaciones y de relajación para obtener impresionantes efectos hover.

Layouts

Las clases de OxyProps incluyen potentes clases que le ayudarán a crear diseños fluidos, receptivos y consistentes en poco tiempo.

Paleta de Colores

En esta sección ajustamos los colores que conformarán la base de la paleta de colores.

Canvas Color

El lienzo es la muestra de color para fondos y textos principales.
Actualmente ofrece 6 variaciones de grises.
Define los colores de superficie{1-4} y de texto{1-2}.

Brand Color

Como puedes imaginar, Brand define la muestra de color de la marca.
Utilizar --o-brand y --o-brand-hover como colores lógicos que se adaptarán al esquema de color. Todos los tonos estarán disponibles --o-user-brand-{0-9}
Interpretar {0-9} como: del 0 al 9.

Accent Color

Usar color de acento(Acent Color), que es color un complementario al color de Marca es a menudo una buena elección.
Utiliza --o-acento y --o-acento-hover como colores lógicos que se adaptarán al esquema de color. Al igual que Brand Color tonos estarán disponiblescomo --o-user-accent-{0-9}

Links Color

Esto define el color para los enlaces activos. OxyProps Normalize lo aplica automáticamente a los enlaces y botones. Pero no hay por qué preocuparse, OxyProps está construido con selectores de especificidad cero para que siempre puedas redfinir fácilmente los valores donde quieras.

Visited Color

Todas las variantes están disponibles para el uso. E incluso si la intención original es para los enlaces visitados. Utilízalos de la manera que quieras.

Puedes utilzar cualquiera de los colores que se muestran con calaquier combianción entre ellos o bien usar la opción Custom que hay al final de cada columna y establacer el color deseado.

Fluid Typography

Aqui es donde se trabaja en las fuentes fluidas (fluid fonts)

Escalas y Ratios

Se pueden ajustar los parámetros de los tamaños de las fuentes bien por deslizadores bien con los botones que tienen unos valores predeterminados.

Siempre podemos ver de manera gráfica como quedarían nuestras fuentes con los cambios realizados y actuar en consecuencia.

Ya por última configuración queda la relación de tramaño entre Headings y Subheadings, el cual se va estableciendo con un deslizador y en todo momento tenemos referencia visual de los cambios que vamos realizando.

Y ya para rematar la faena nos muestra el resultado final de todos y cada uno del resultado de los ajustes en los diferentes elementos afectados; así como la paleta de colores con todas las variantes del 0 al 10.

Post de

inicio Oxyprops

0 0 votos

Puntuación

0 Comentarios

Viejos

Nuevos Más votados

Comentarios en línea

Ver todos los comentarios

Otros Plugins

Code Snippets

Es el que mas tiempo lleva en funcionamiento y también es el mas barato al ser totalmente gratuito.

OxyPowerPack - Power Form y WebHooks

En este video se utilizan una de las características de Power Forms que aún no hemos cubierto, la capacidad de enviar los envíos de formularios a cualquier servicio de terceros o script personalizado alojado en otro lugar a través de WebHooks.

Oxygenados Notas Plugin

Un pequeño plugin que servirá para llevar tus notas de diseño, producción o cualquier otra a mano desde el dashboard de Wordpress.