Maquetación con OXYGEN | FLEXBOC, MODALS, SIDEBARS | Clase INTENSIVA #1

En esta lección os enseñare a dibujar ilustraciones, logotipos o iconos con perspectiva isométrica y a crear acciones automatizadas para la proyección de elementos.

Lección básica... pero por algún sitio hay que empezar. Instalamos OXYGEN, los módulos de JetEngine y aprendemos un truco para importar imágenes de ejemplo.

En esta pedazo de lección pegamos un repaso a Oxygen que te permitirá conocer sus componentes, interfaz y ajustes principales. Lección indispensable para aprender Oxygen.

Creamos el template reusable de la cabecera y aprovechamos la clase para repasar algunos conceptos de CSS que podemos controlar desde Oxygen.

Comenzamos a diseñar la single de un custom post type, en este caso los inmuebles. Y empezamos a trabajar con campos personalizados en Oxygen.

Vas a flipar con esta lección donde utilizamos el elemento Repeater para sacar campos relacionados con JetEngine e incluso nos diseñamos una galería de imágenes del post.

Creamos el archive para el listado de inmuebles utilizando la herramienta nativa de Oxygen para ello, el repeater. Pero además aprendemos a crear condiciones de visibilidad a ciertos campos.

Comprobamos cómo integrar JetSmartFilters con Oxygen, los listing grids, y cualquier plugin que nos dé la gana dentro de Oxygen. Estilizaremos con JetStyleManager y con Oxygen Style Output.

Después de haber visto la mecánica y forma de integración de JetSmartFilters con Oxygen, realizamos algunos ejemplos más de filtros. Uno jerárquico, y otros dos referenciando a meta fields, uno con select y el otro de tipo range.

Creamos listados de posts utilizando bloques nativos de Oxygen y diseñando layouts basados en columnas, CSS Grid e incluso con modo slider.

Si, ok, hacemos el blog. Pero lo IMPORTANTE es un truco que os enseño para poder poner cualquier función de WordPress como condición de visibilidad en Oxygen.

Comenzamos a crear una zona para los propietarios donde puedan subir sus propios inmuebles e incluso editarlos. Diseño a parte, aquí va el episodio sobre la parte de funcionalidad.

Aprende a utilizar las clases en Oxygen para poder reutilizar estilos de elementos. Todos mientras creamos la single para las páginas del sitio web.

Aplicamos los facets o filtros de Gridbuilder WP con nuestro proyecto de Oxygen y además os enseño cómo funciona en Elementor, JetEngine o Gutenberg.

Mejoramos nuestro workflow y comenzamos a utilizar los diseños de layouts con la opción inherit design y catch all

Hablamos de las novedades de Oxygen 4.0 orientadas a interfaz y a WooCommerce