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.
20 lecciones
Volver a las series
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.
Ver lecciónMaquetaremos un template con sidebar, utilizaremos divs y estructuras persnalizadas, enlaces, distribución con flexbox e incluso un modal disparado desde un botón.
Ver lecciónRealizamos un formulario con JetFormBuilder que incrementa el valor de campos personalizados y los guarda tanto en los meta del post como del usuario.
Ver lecciónMaquetaremos una página y aprenderemos a maquetar layouts con grids, además de ser conscientes del comportamiento natural de los divs en Oxygen.
Ver lecciónLecció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.
Ver lecciónEn 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.
Ver lecciónCreamos el template reusable de la cabecera y aprovechamos la clase para repasar algunos conceptos de CSS que podemos controlar desde Oxygen.
Ver lecciónComenzamos a diseñar la single de un custom post type, en este caso los inmuebles. Y empezamos a trabajar con campos personalizados en Oxygen.
Ver lecciónVas 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.
Ver lecciónCreamos 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.
Ver lecciónComprobamos 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.
Ver lecciónDespué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.
Ver lecciónCreamos listados de posts utilizando bloques nativos de Oxygen y diseñando layouts basados en columnas, CSS Grid e incluso con modo slider.
Ver lecciónSi, 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.
Ver lecciónComenzamos 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.
Ver lecciónAprende a utilizar las clases en Oxygen para poder reutilizar estilos de elementos. Todos mientras creamos la single para las páginas del sitio web.
Ver lecciónLa 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.
Ver lecciónMejoramos nuestro workflow y comenzamos a utilizar los diseños de layouts con la opción inherit design y catch all
Ver lecciónHablamos de las novedades de Oxygen 4.0 orientadas a interfaz y a WooCommerce
Ver lecciónAplicamos 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.
Ver lecciónPara ver los vídeos y los recursos necesitas una membresía activa.
Ver los planesYa soy miembro: iniciar sesiónVer la biblioteca
