CURSO de Bricks - Construye tu web en WordPress

Query Arrays para Bricks | Ejemplo con API + Función personalizada para SISTEMA DE NOTIFICACIONES

Todo sobre los API QUERY LOOPS

Os enseño a utilizar la NUEVA funcionalidad de Bricks que permite traer información externa mediante API.

Comparador de productos de WooCommerce | MiniProyecto

¡En este miniproyecto de una hora, creamos un comparador de productos usando JetFormBuilder junto a los Data Stores de JetEngine, Maquetamos tablas con Bricks y mucho más!

Detector de selectores: dale estilo a cosas que ves pero no controlas

Con esta nueva funcionalidad podemos dar estilo css a elementos dentro de shortcodes, código personalizado, etc. ¡Mola!

Muestras visuales de producto (variation swatches)

Creamos variaciones de producto que se eligen mediante muestras visuales de color, imagen o texto para WooCommerce. Y como extra, añadimos una galería para las variaciones.

Mapas dinámicos y sincronizados con loops

Exploramos la nueva funcionalidad de crear mapas dinámicos en Bricks de forma nativa y que además pueden sincronizarse con otros loops que tengas.

Componentes en Bricks

Analizamos la primera versión de esta utilidad para Bricks. Components (o componentes) nos permite crear "widgets" reutilizables personalizados.

INTENSIVO | Categorías preparadas para SEO

En este ejercicio intensivo repasamos un montón de trucos de Bricks e incluso algunas funciones de WordPress con el objetivo de preparar nuestro template de categorías para poder hacer SEO.

Formularios avanzados en Bricks con "Custom Action"

Tablas dinámicas + JetEngine Components con Bricks

Os enseño a crear tablas dinámicas con Bricks, pero lo mejor de todo es que además os explico como crear un COMPONENTE dinámico con JetEngine.

Scroll Parallax con CSS / JS / IA GENERATIVA / Bricks

Os enseño a crear efecto parallax usando CSS y JS y aprovechando las bondades de la IA generativa de Photoshop.

PERSPECTIVA y 3D con CSS + Ejemplo de LOOP 3D en Bricks

Fallbacks en Bricks o cómo mostrar contenido alternativo en campos vacíos

Con esta funcionalidad podemos cargar un texto o imagen alternativa a la hora de intentar sacar un campo que está vacío.

Ejecución de código y firmas de seguridad

Repasamos las opciones que permiten proteger la ejecución de código dentro de Bricks y sus diferentes usos.

Style Manager y generadores de variables y clases

La herramienta de gestor de clases y variables de CSS nos permitirá organizar estos elementos de una forma cómoda en los proyectos y además poder generar clases y variables fluidas.

Cómo usar el PHP QUERY EDITOR de los LOOPS de Bricks

Aprendemos a utilizar una opción alternativa que nos provee Bricks para realizar nuestras consultas de loops.

PRIMERAS IMPRESIONES | Filtros nativos para Bricks

Echamos un vistazo a los filtros nativos para Bricks. Algo que está aún en fase experimental pero nos deja entrever cómo será esta funcionalidad.

Elementos "STICKY" y sus variantes en Bricks | En header, en widgets y con JavaScript

Aprendemos a utilizar diferentes métodos para dejar "sticky" ciertos elementos de la web, tanto con herramientas de Bricks como con algo de código JS.

Enganchando PLANTILLAS en Hooks de WordPress

Con esta novedad en Bricks, podremos colocar plantillas creadas con el builder en cualquier sitio, aunque pertenezcan a una zona "no controlada" perteneciente a un plugin o core de WordPress.

Personalización de "Mi Cuenta" para WooCommerce en Bricks

Así es la personalización de todos los elementos del apartado "Mi Cuenta" de WooCommerce con Bricks.

Cómo trabajar condiciones de Bricks en base a RELACIONES de JetEngine

Trabajamos condiciones de visibilidad con posts relacionados de JetEngine.

Creación de POPUP con información dinámica proveniente de un item de un loop (quick view)

Aprendemos a crear un popup que muestre información de un item de un query loop, utilizando las herramientas nativas de Bricks.

JetSmartFilters - GUÍA DE INICIO | Filtros para Bricks, Elementor y Gutenberg

Guía de inicio de este gran plugin para filtrar listados en WordPress. Compatible con Bricks, Elementor y el propio editor de bloques de WordPress (Gutenberg).

Integración de JetEngine con Bricks

Analizamos y probamos la integración de JetEngine con Bricks tras su última actualización.

Maquetación con CSS GRID | Curso de Bricks

Utilizamos la propiedad display grid y todos sus ajustes para maquetar nuestros listados a modo de grid.

Creación de POPUPS en Bricks con interacciones y condiciones

Usamos la nueva función nativa de Bricks para crear plantillas de tipo popup y mostrarlos según condiciones e interacciones.

Interacciones (y animaciones) en Bricks

Abordamos la nueva funcionalidad de Bricks que nos permite realizar eventos e interacciones JS sin necesidad de saber código.

GRID responsive en el Query Loop (con flex) | Curso de Bricks

Utilizamos CSS Flexbox para construir un grid responsive en un query loop de posts de Bricks.

COLORES dinámicos utilizando ATRIBUTOS | Curso de Bricks

Maquetamos una lista de servicios cuyo color de fondo proviende de un campo dinámico y jugamos con animaciones y su maquetación.

Visibilidad Condicional Nativa + Ejemplo de FUNCIÓN PERSONALIZADA | Curso de Bricks

Os enseño a utilizar la función nativa de Bricks para visibilidad condicional y además hacemos un ejemplo de uso de una función propia.

Loop de TERMS con campo de IMAGEN dentro de la SINGLE | Curso de Bricks

Creamos un loop de términos de una taxonomía que además lleva un campo de imagen o icono.

JetEngine Query Builder en Bricks | Curso de Bricks

Utilizamos el plugin de Itchycode para poder utilizar las consultas del Query Builder de JetEngine dentro de Bricks,

Novedades de Bricks 1.5.1 RC - ¡Static por defecto, breakpoints, interfaz, copy across sites y más!

Repasamos las novedades de la última actualización. ¡Todas muy interesantes!

Query loop inception: Loop de relación dentro de otro loop | Curso de Bricks

Creamos un loop dentro de otro loop. ¿Para qué?. Pues en este caso (puede usarse para otras cosas) lo que hacemos es sacar posts relacionados dentro del listado principal.

Semántica HTML, display y position | Curso de Bricks

Abordamos algunos temas pertenecientes a HTML y CSS. Cuestiones que debemos conocer para entender algunas opciones de Bricks.

Gestión de plantillas | Curso de Bricks

Hacemos uso de las plantillas de Bricks de la comunidad, y también lo configuramos para poder compartir plantillas con otras instalaciones.

Animaciones, efectos y transformaciones CSS | Curso de Bricks

Aprende a trabajar con efectos de transformación, filtros y animaciones tanto en elementos como en pseudo elementos.

Páginas de opciones dinámicas | Curso de Bricks

Gracias a las páginas de opciones podremos reutilizar información dinámica en cualquier parte del sitio y ahorrarnos mucho tiempo a la hora de realizar cambios.

Ajustes de SEO y Social Media | Curso de Bricks

Repasamos la configuración para SEO y social media tanto para contenidos concretos como para las plantillas de Bricks.

Pseudoelementos y diseño por capas | Curso de Bricks

Hacemos uso de pseudoelementos para poder dar estilo a componentes dentro de un elemento HTML.

One Page Scrolling | Curso de Bricks

Utilizamos al función de one page scrolling para crear una interfaz de botones laterales que nos permiten navegar entre secciones y contenedores de la página.

Sidebars o Widget Areas con contenido de Gutenberg | Curso de Bricks

Usamos la función de Bricks para registrar y llamar a áreas de widgets o sidebars y poder incluir bloques de Gutenberg en ellos.

Plantillas de WooCommerce: Carrito, Finalizar compra, Carrito, Gracias y Orden recibida | Curso de Bricks

Creamos las diferentes plantillas para las páginas del sistema de WooCommerce. Carrito, Finalizar compra, Carrito, Gracias y Orden recibida.

Minicart o menú de carrito | Curso de Bricks

Añadimos un botón de minicart que previsualiza el contenido del carrito de WooCommerce.

Plantilla individual de producto | Curso de Bricks

Diseñamos la plantilla para los productos de WooCommerce y utilizamos los elementos y widgets que Bricks nos ofrece para ello.

Visibilidad condicional (2 métodos alternativos) | Curso de Bricks

Aún no han implementado oficialmente esta función. Pero os traigo 2 formas de realizar condiciones de visibilidad dentro de Bricks.

Consulta de productos personalizada | Curso de Bricks

Os enseño a realizar un listado de productos con diseño y consulta personalizada. Ordenados por ventas, solo destacados, etc...

Categorías de productos: loop y plantilla | Curso de Bricks

Creamos un query loop con la lista de categorías de productos y su imagen destacada. Además generamos una plantilla para los términos de la taxonomía Categoría de Productos.

Plantilla de Tienda y Archive de Productos | Curso de Bricks

Diseñamos el archive de productos que servirá de portada para la tienda online de WooCommerce.

Preparativos de WooCommerce | Curso de Bricks

Este pequeño vídeo es solo para dejar constancia de que he realizado ciertos ajustes básicos en WooCommerce. Pero te recomiendo ver mi curso de WooCommerce en YouTube para saber configurar absolutamente todo.

Sliders, tabs y acordeones | Curso de Bricks

Estos elementos, sliders, tabs y acordeones, nos permiten generar listas de contenido en diferentes formatos y además permiten obtener sus items de consultas personalizadas.

Control de permisos y elementos

Personalizamos quien puede acceder a cada elemento de Bricks y además qué elementos estarán disponibles en el sistema.

Consultas personalizadas | Curso de Bricks

Repasamos las opciones del query loop para realizar consultas personalizadas por taxonomía o por meta field.

Formularios básicos dinámicos | Curso de Bricks

Repasamos las opciones que nos brinda Bricks para los formularios que nos permitirán usar campos de forma dinámica entre otras cosas.

Buscador y plantilla para los resultados de búsqueda | Curso de Bricks

Utilizamos el elemento de búsqueda de Bricks y creamos una plantilla para mostrar los resultados.

Plantilla para el Archive (CPT y taxonomía) | Curso de Bricks

Creamos la plantilla para mostrar los listados relativos a nuestros CPT (servicio y equipo) y también para la taxonomía departamento. Además hacemos uso de los filtros.

Plantilla para el Archive (general y blog) | Curso de Bricks

Diseñamos una plantilla para mostrar listados de posts y que se aplique de forma general y en el blog.

Listados de posts relacionados | Curso de Bricks

Aprendemos a mostrar una lista de posts relacionados con el post actual mediante las relaciones de JetEngine.

Plantilla individual de CPT (Servicio y Equipo) | Curso de Bricks

Maquetamos la plantilla individual para servicio y equipo utilizando campos personalizados.

Plantillas de página y entrada | Curso de Bricks

Creamos el diseño y layout para nuestros "contenidos estándar". Las páginas y las entradas (blog).

Cabecera y pie de página | Curso de Bricks

Realizamos la cabecera y el pie de página, vemos las opciones del menú y utilizamos los query loops.

Plantilla de portada | Curso de Bricks

Diseñamos la portada de la página web mientras repasamos conceptos de maquetación con Bricks.

Estructura de contenidos | Curso de Bricks

Creamos la estructura de contenidos, custom post types, taxonomía, campos personalizados y relaciones. Lo realizamos con JetEngine (aunque podéis utilizar otros plugins).

Gestión de paletas y colores | Curso de Bricks

Gestiona colores y organízalos en diferentes paletas para tu proyecto con Bricks.

Clases y pseudoclases | CURSO de Bricks

Descubre como trabajar con clases CSS dentro de Bricks y WordPress. De esta manera serás mucho más productivo y eficaz a la hora de diseñar.

Estilos globales y presets | CURSO de Bricks

Creamos estilos por defecto para los elementos de Bricks y repasamos los tipos de preset o ajustes predefinidos incluidos en el builder.

Conceptos básicos de maquetación: Flexbox | CURSO de Bricks

Aprendemos los conceptos básicos de la maquetación con flexbox. Y a la espera de la implementación de CSS Grid, descubrimos los entresijos de esta forma de alinear y organizar los elementos.

Los 3 workflows de estilo | CURSO de Bricks

Esta lección te servirá para entender las 3 formas de trabajo a la hora de usar estilos en Bricks.

Fuentes personalizadas | CURSO de Bricks

Aprendemos a cargar fuentes personalizadas y a optimizar la configuración para no cargar ninguna innecesaria.

La interfaz y los elementos | CURSO de Bricks

Primer contacto con el editor de Bricks. Echamos un vistazo a su interfaz, el panel de control, el canvas y el panel de estructura. Y repasamos todos sus elementos.

Introducción y ajustes | CURSO de Bricks

Instalamos Bricks, plugins y preparamos repasamos todos los ajustes del constructor.