Curso de OXYGEN - Página web de inmobiliaria - OXYRENT

Vamos a crear una página web completa con Oxygen. En este caso el proyecto se trata de una inmobiliaria, lo que nos perimtirá jugar con información dinámica.
CrocoblockOxygenWordPress
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.
OxygenWordPress
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.
OxygenWordPress
Creamos el template reusable de la cabecera y aprovechamos la clase para repasar algunos conceptos de CSS que podemos controlar desde Oxygen.
OxygenWordPress
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.
OxygenWordPress
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.
CrocoblockOxygenWordPress
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.
CrocoblockOxygenWordPress
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.
Oxygen
Creamos listados de posts utilizando bloques nativos de Oxygen y diseñando layouts basados en columnas, CSS Grid e incluso con modo slider.
Oxygen
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.
CrocoblockOxygenWordPress
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.
OxygenWordPress
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.
OxygenWordPress
Mejoramos nuestro workflow y comenzamos a utilizar los diseños de layouts con la opción inherit design y catch all
CrocoblockOxygenWordPress
La manera más cómoda de trabajar campos en Oxygen es con ACF PRO. Sin embargo, no es para nada IMPOSIBLE hacerlo con JetEngine. Aquí os dejo una forma de hacerlo.
OxygenWooCommerceWordPress
Hablamos de las novedades de Oxygen 4.0 orientadas a interfaz y a WooCommerce
Oxygen
Maquetaremos una página y aprenderemos a maquetar layouts con grids, además de ser conscientes del comportamiento natural de los divs en Oxygen.
CrocoblockOxygenWordPress
Realizamos un formulario que incrementa el valor de campos personalizados y los guarda tanto en los meta del post como del usuario.