 Bueno, muy buenas a todos. Bienvenidos a esta Meetup. Vamos a echar un vistazo a este constructor, a este Builder para WordPress. Y bueno, lo voy a hacer yendo directamente al grano. Yo creo que aquí todos somos, seguramente conoceréis algún otro Builder desde Elementor, a Divi, Oxygen, el que sea. Y sobre todo, bueno, pues voy a orientar esta charla en una serie de características que a mí son las que precisamente hacen que me guste este Builder pues más que otros, ¿no? Quizás. Vamos a ir echando un vistazo a una serie de cosas. Yo tengo apuntado aquí una especie de checkbox, de checklix, perdón, con un montón de cosas cuando yo analizo un Builder. Y vamos ahí viendo todo esto, así que no me voy a poner a diseñar una landing, no me voy a poner a diseñar una página, sino que simplemente voy a ir directamente al grano, cosita por cosita, para que veáis cómo funciona, ¿de acuerdo? Bueno, lo primero de todo, evidentemente, el Builder nos tiene que permitir gestionar las plantillas de un tema o del tema que estemos creando. En este caso, tengo que decir una cosa importante y es que Bricks es un tema, ¿vale? Al igual que tenemos, por ejemplo, con Oxygen, etcétera, pues no son plugins como en Elementor, que sería un plugin, sino que en este caso es un tema en sí mismo, ¿vale? Así que estamos en un tema y lo que vamos a hacer desde aquí, por supuesto, pues es crear nuestras plantillas, ¿vale? Desde aquí podríamos, evidentemente, crear nuestra plantilla de lo que queramos. Pues, por ejemplo, imagínate que queremos crear pues la single de cualquier cosa que tengamos. Por ejemplo, una single de un custom post type que tengo yo aquí, por ejemplo, de proyectos, ¿vale? Single de proyecto, imagínate. Y, por supuesto, desde la derecha podemos acceder a una serie de templates del tema, pues desde la cabecera, el pie de página, plantillas individuales, por supuesto, todas las debut commerce, hago hincapié en que todas las debut commerce, porque es bastante completo el número de plantillas específicas que nos deja hacer, por supuesto, pues enganchándose en los propios hooks y debut commerce y cosas como hasta la plantilla de contraseña perdida, para que me entendáis, ¿vale? Pedidos, o sea, todo ese tipo de plantillas está contemplado y, por supuesto, pues las típicas de pues un archive o una single como sería este caso, ¿no? En este caso, haríamos una plantilla de tipo individual, ¿vale? Por ejemplo, en este caso. Así que, bueno, esto sería, por supuesto, una de las cosas obligatorias del builder. Voy directamente con el segundo de los puntos. Otra de las cosas que ya que estamos aquí, que a mí me gusta que tenga un builder, es que nos permita gestionar algunas cosas básicas fundamentales en cuanto a los contenidos. Por ejemplo, en este caso, Bricks, una de las cosas interesantes que tiene es que nos permite gestionar metas básicos. Y yo ya sé que todo el mundo pues utilizaréis RangMath, etcétera, etcétera. Pero a mí me ha parecido muy interesante por parte del equipo de Bricks poner al menos los controles básicos que menos que poder gestionar los metas principales, ¿vale? Deseo. Con lo cual, pues me parece algo interesante que para un proyecto básico que al menos eso puedas editar pues ese tipo de cositas, ¿vale? Meta descripción, etcétera, keyword, meta robots, etcétera, desde el propio builder, me parece interesante. Y es que haré hincapié también sobre todo en cosas que me gustan de Bricks, porque nos hace no depender de un ecosistema de plugins. De hecho, en esta instalación de WordPress, si he hecho un poquito para atrás, vamos, el testeo que voy a hacer aquí con vosotros lo voy a hacer sin nada, ¿vale? O sea, tiene bucomers y tiene mi plugin de funciones que lo único que tengo dentro es el CPT de proyectos, ¿vale? Y un par de campos. No voy a meterle ni yetengin ni nada, ¿vale? Quiero demostraros qué tal es el builder de por sí, ¿vale? Porque evidentemente si nos ponemos a jugar con el Elementor, con el Crocoblog, con el No sé qué, con el Yetengin, Manso Secual, ¿vale? Muy bien, pero si cogemos los builders por separado, ¿qué es lo que yo quiero hacer hincapié? ¿en hasta dónde puedo llegar sin necesidad, sin la dependencia de plugins, ¿vale? Bueno, seguimos un poquito viendo la interfaz. Aquí tengo mi lista de cositas que comentaros. Y una de las cosas interesantes que nos permite hacer Bricks es a la hora de crear los elementos y es, digamos, la transparencia que tiene a la hora de diseñar cualquier cosa. Es decir, nosotros vamos a poder diseñar aquí lo que queramos. Por ejemplo, yo puedo meter una etiqueta div igual que si estuviera maquetando a mano, ¿vale? Yo meto aquí una etiqueta div, meto dentro, por ejemplo, un heading, ¿vale? Aquí tengo un heading, al heading puedo asignarle evidentemente la etiqueta que yo quiero, pues un h1, puedo coger el div y decirle, no, mira, quiero que tenga semánticamente, quiero que sea un article, o quiero que sea una lista, o quiero que sea un a, o puedo dejar, o incluso custom, y poder decirle incluso la etiqueta que yo quiera, ¿no? O no puedo no ponerle nada y que sea un div. Lo primero que os quería enseñar, bueno, ya que estoy, voy a ponerle aquí, o sea, dinámicamente el post title, ¿no? Ya que estamos. Lo primero que os quería enseñar es que cuando yo guardo esta plantilla, por supuesto, como en todos los builders voy a poder asignarle, vamos, unas condiciones, en este caso la condición sería, bueno, que esto vaya a parar a todos nuestros proyectos, ¿vale? Pues ahora lo que voy a hacer es ir a un proyecto para ver, no, veremos un título nada más, pero lo que voy a ver ahora con vosotros, no sé si puedo verlo ahora, es que si yo examino esto, pues lo que tengo es un div y un h1, ¿vale? ¿Qué diréis? Pues que leches voy a tener si no, bueno, pues no todos los builders hacen esto, ¿vale? Si tú pones un h1, pues igual te ponen dos contenedores, o tres, o igual este div, hay algunos builders, por ejemplo, que tú no puedes controlar si, es que, es que incluso mía, para que veáis, una cosa que no puedes hacer tampoco en muchos builders, yo puedo quitar este div, le por saco, a la afuera, a la, tengo ahí un heading, y punto, y tengo un h1, ya está, no me obliga a tener un contenedor y no sé qué, ¿vale? O sea, evidentemente si que hay una etiqueta main, ya está, pero bueno, pero ya está, y ahí está apelo el h1, ¿ok? Entonces, es muy limpio, es muy dependiente de lo que tú hagas, si falta algo, pues es que no has puesto, y sobrarte es porque lo has puesto tú, o sea, en ese sentido es muy limpio, ¿vale? Y es una de las cosas que a mí más me gusta de bricks. Más cositas, más cositas interesantes, venga, ya que estamos, ya que estamos aquí, voy a deshacer un poquito. Bueno, la interfaz, ¿vale? Bueno, hay algunas cosas que, bueno, evidentemente como, como interfaz, pues hay que aprender cómo usarla y demás, pero bueno, yo, como os digo, voy a ir un poquito al grano para que veáis cosas interesantes. Cualquier cosa que hagamos, ¿vale? Mísimamente este div que tenemos aquí puesto, bueno, por supuesto, podemos editarlo, aquí, eso es un nombre que podríamos tener nosotros para llamarlo como, como queramos, ¿vale? No tener nada, por ejemplo, nada igual. Cualquier elemento tiene sus controles y luego tenemos una pestaña de style con todos los estilos que podemos aplicarle. En este caso, ¿qué quiero destacar de bricks? Quiero destacar que las cosas se llaman y son lo que son, es decir, el border es border, el background color es background color, todas las elementos de tipografía, yo sé, por ejemplo, font size, incluso, sobre todo, los de layout, por ejemplo, tenemos margin, padding, más width, position, todo tipo de elementos overflow y se llaman como se llaman CSS, porque hay muchos builders que de repente tienen una opción de, yo qué sé, centrar y ponerlo en medio, ¿vale? O sea, y es como, eso igual te está metiendo al mismo tiempo tres, tres propiedades CSS, pero aquí no, esto es exactamente como se llaman las cosas en CSS. Yo de hecho lo tengo puesto en inglés, aunque para mí, estas palabras no están en inglés, para mí estas palabras son nombres propios, son como se llaman las propiedades, ¿vale? Yo recomiendo tenerlo en inglés, pero bueno, en castilla no, pues para que no tenga altura, pero es lo mismo. Pero como veis, son exactamente todas las propiedades que podemos manejar en CSS. Position, static, relative, absolute, todo lo que queramos hacer, incluso algunas cosas extra. Y como veis, está agrupado, pues bueno, pues en diferentes contextos, pues fondo, todos los relacionados con los fondos, colores, etcétera. Y luego la parte del contenido está, pues digamos la parte HTML, aquí tendríamos el CSS y aquí estaría la HTML, donde yo le digo, mira, pues quiero que sea un div, en este caso sí que podemos jugar al ser un div, hay algunas cosas que nos la pone, digamos, a los dos sitios, tenemos este display block, pero también lo tendríamos en layout. Y yo puedo jugar con cualquier propiedad, por ejemplo, puedo decirle que sea flex. En este momento yo puedo aplicar todas las propiedades flex que yo quiera, dirección, Alinsel, Fallingmain, para centrar, pues bueno, pues el contenido, por ejemplo, por ejemplo así, como está centrando el contenido, etcétera, etcétera. Podría decirle que quiero, no, pues quiero gris, por ejemplo. Y entonces me aparecen las propiedades de gris y aquí puedo meterle lo que yo quiera, puedo meterle un FR, un FR o puedo meterle un calc, un max min, o sea, digamos que Bricks está muy pensado para aquellos que ya tengan unos conocimientos de CSS y no ponga, y digamos que no pone límites a lo que tú quieras hacer y eso me gusta mucho. Evidentemente no es un builder que vaya a ser fácil de aprender para una persona que no tiene ni idea de CSS, obviamente, vale, porque tienes que saber cómo funciona gris, alguien que no sepa ve aquí gris y no entiende esto, gris template color, esto qué es, Justify, o sea, a ver, los iconos están ahí, no, tampoco hay que ser muy listo, pero bueno, es verdad que hay unas cosas, pues, el gris autoflow, qué demonios es eso, o sea, esto de otros builders te lo llamarían de una forma, te lo dirían pues autoajuste, no sé qué, vale, pero aquí no, aquí los nombres llevan los nombres que tienen CSS, ok, así que esto es un concepto importante, a mí me gusta, pero entiendo que quizá no es para todo el mundo para empezar, pero desde luego si tienes conocimientos de CSS y HTML me parece una opción magnífica que sea así, vale. Más cositas que quiero enseñaros, bueno, es que hay unas cuantas, a ver si pasamos por todas y yo creo que sí, no voy a poder me explicar demasiado, sino que a que sepáis un poquito cada cosita, ¿no? Tiene una cosa también muy interesante, Bricks, que es la compatibilidad con el editor de bloques, con Gutenberg. Una de las peores cosas que creo que muchas, a ver, no siempre, pero muchas veces ocurre cuando utilizamos builders es que utilizamos el builder para el contenido, ¿vale? Generando ahí pues quizá cosas demás, también me entiendo una problemática, a veces está con el propio cliente, etcétera, o incluso hay builders que no te dejan luego, o sea, que no te dejan editar con Gutenberg, tienes que editar todo con el builder, en este caso no, en este caso Bricks tiene una compatibilidad con el editor de bloques muy buena y muy interesante. ¿Por qué? Porque en sus ajustes, por un lado, podemos hacer que los datos de Gutenberg se carguen en Bricks, es decir, si yo aquí, bueno, en una entrada o donde sea diseño cosas en Bricks, luego podría ir a Gutenberg y tendría esos bloques, ¿vale? O sea, no nos hace dependiente, tendríamos un contenido que no depende de una lista de shortcuts que se generan, como por ejemplo podría ser en Divi o hay algún otro que podría hacer eso, ¿no? Luego tendríamos también la posibilidad de hacerlo contrario, ¿no? Incluso convertir y además, cuando estamos diseñando algo, por ejemplo, en este caso estamos diseñando la single de un proyecto, si yo quiero hacer alusión al post content que tengaste, que tengaste, bueno, pues está los posts de los proyectos, yo podría decirle si quiero que el contenido, vale, de los proyectos provenga del Gutenberg, de WordPress o provenga del propio Bricks. Esto no da mucha flexibilidad para, digamos, a veces no queremos que el cliente se meta tocar en Bricks o en el Builder, queremos que se meta solamente a editar los contenidos desde Gutenberg y que eso directamente pasa a Bricks y además nos da también muchas ventajas a la hora de pasar un proyecto que tengamos, pues en WordPress y más a Bricks, porque el contenido lo va a poder leer directamente, ¿vale? Así que, bueno, no me voy a meter mucho para que no se de tiempo a ver las cosas que quiero ver, pero que sepáis que está muy interesante que haya esa compatibilidad de bloques con whiches de Bricks, etcétera, y que podamos, por supuesto, leer todo el contenido de WordPress, si lo queremos. Yo lo utilizo así, ¿eh? A mí me gusta siempre en cualquier Builder, elemento incluido, me gusta utilizar el contenido de WordPress, ¿vale? Y luego yo el Builder lo utilizo para maquetar, ¿vale? O para una cosa dinámica y tal, pero leo dinámico del campo, ¿vale? Me lo traigo del, digamos, del backend de WordPress, ¿vale? Que sería lo correcto y eso Bricks lo permite hacer muy bien. Vale, más cositas que tenemos por aquí, bueno, tema de estilo, para mí una de las cosas, para mí una de las grandes ventajas de Bricks con respecto, por ejemplo, de Elementor, ¿no? Y es la posibilidad de gestionar las cosas con clases, ¿ok? Yo puedo, por ejemplo, fijaos cómo aquí arriba tenemos, ya lo has seleccionado, me he encabezado, ¿vale? Lo que es el heading, ¿vale? Aquí tengo este DIP que yo he llamado contenido, pero es un DIP, ya lo hemos visto. Y aquí tengo este heading, que es este H1 que tenemos aquí. Y fijaos cómo aquí tenemos esta parte que nos dice qué selector tiene asignado. Automáticamente Bricks, también se puede cambiar, pero bueno, automáticamente nos mete un IDE. Pero lo interesante es que yo aquí puedo añadirle mis clases. De manera que yo podría tener mis clases como, por ejemplo, imagínate, pues texto XL, ¿vale? Yo me creo esta clase y ahora yo lo que estoy editando no es este elemento, estoy editando esta clase. Con lo cual, yo puedo venir aquí a typógrafy y puedo decirle, mira, texto XL, por ejemplo, pues es, me da igual, 2, 2rem, lo que vosotros queráis, ¿no? O bueno, ya que es XL, vamos a ponerle 4, ¿vale? De esta manera, yo podría seguir diseñando, ¿vale? Seguir diseñando cosas, metiéndole, bueno, cualquier tipo de elemento, botones, lo que nos dé la gana. Y este botón, pues me apetece que tenga el tamaño grande, pues yo puedo elegir aquí mi clase texto XL. Si yo mañana, porque es evidentemente extrapoladlo a que tenéis, pues, MXL, etcétera, una coherencia en el diseño, igual que cuando utilizamos un framework CSS, si yo mañana me apetece, es decir, ¿no? Es que los textos grandes de mi página web son un poco más grandes de lo que quería. Solo tengo que editar esta clase y decirle, no, quiero que sean de 3. Y todos los textos XL de mi página web cambian, ¿vale? Igual que puedo tener eso, puedo tener un color primario. Por ejemplo, me hago mi color primario, por ejemplo, para el fondo, vamos a hacerlo para otra cosa. Para el fondo, mi color primario es este. Entonces, yo hará este de aquí, es este genio y le puedo decir que tenga color primario. Y si me apetece o no, podría seguir metiéndole mis clases de texto grande y todo va a tener una coherencia, ¿vale? Va a ser muchísimo más difícil, digamos, que nuestras páginas queden con tamaños de texto random, que estoy poniendo porque sí, y cosas así. Al final, esto se parece mucho a utilizar un framework CSS, de hecho, te puedes hacer tus clases. Tanto tus clases tipo de utilidad, como por componentes, como queráis. Y esto permite muchísima más flexibilidad. Tanto así que, pues, tú tienes tu web completa y si de repente has usado este color primario, pues en toda tu página web, pues puedes en cualquier momento cambiarlo. Y no estás limitado a tres o cuatro colores, sino que realmente lo puedes hacer para fuentes, para tamaños, para tipografía. Me puedo hacer una clase que sea, yo qué sé, border radius M, ¿vale? Que va a ser el border radius medium, imagínate. Me estoy inventando todo, pero es para que veáis, ¿no? Entonces, esta clase, yo le digo, por ejemplo, que esto simplemente significa que tiene un border radius, pues, de 20 píxeles, imagínate, ¿vale? Entonces, yo a cualquier elemento, podré elegir si quiero que tenga ese mismo border radius y puedo tener varios, etcétera, etcétera. Bueno, se entiende un poquito la idea, ¿no? De hecho, existen herramientas para poder importar directamente vuestras clases de un framework o para trabajar con Tailwind, para trabajar con Bootstrap, ¿vale? Con lo cual es muy interesante ese tipo de conceptos. Pero aunque no sea así, aunque simplemente lo hagáis directamente aquí con vuestras clases, pues está genial. Por supuesto, las clases se pueden bloquear para que no podamos cambiarlas sin querer. Se pueden copiar de un elemento a otro y podemos eliminarlas. Y no solo eso, podemos exportar e importar las clases. De manera que, por ejemplo, esto es muy interesante, podríamos tener nuestro propio framework, ese, entre comillas, con las clases que utilizamos, nuestros proyectos que más nos gusten, exportarlas. Y cada vez que tengamos un proyecto nuevo, importamos y ya tenemos nuestras clases con nuestros tamaños, etcétera, etcétera. Por lo cual, esto permite, pues, muchísima flexibilidad. Y esto es algo que, por ejemplo, en Elementor no se gestiona de esta manera, ¿no? Se pueden hacer muchísimas más cosas. Pero bueno, no voy a meterme aquí. Pero bueno, para que veáis, por ejemplo, este botón, pues no solo las clases, sino también tenemos la opción de trabajar con pseudo clases, ¿vale? Con hover o con la que yo le escriba. Y ahora estoy en border radius m hover, por ejemplo. Pues le puedo decir, pues, que al elemento que tenga esta clase, cuando esté hover, pues el border radius va a tener 5 pixels, o sea, nos da capacidad ilimitada, ¿vale? Ilimitada para ir trabajando, etcétera, ¿vale? Bueno, al final no se lo ha aplicado, pero bueno. Entonces, digamos que es bastante, bastante versátil en ese sentido. Bien. Otra de las cosas que tiene es la posibilidad de definir una serie de estilos globales por defecto. Esto sí que lo pueden tener otros builders, pero aquí me gusta especialmente cómo está establecido. Tenemos dentro de los ajustes de Bricks, tenemos estos theme styles. Y de hecho no es que tengamos uno, sino que podemos quedarnos varios. Podemos quedarnos, yo que sé, bueno, voy a hacer uno, ¿no? Estilo por defecto. Voy a hacer uno y luego voy a explicar algún otro ejemplo. Pero vamos a hacer el primero, creamos un estilo por defecto. Y aquí, ojo, tenemos el comportamiento por defecto de todos los elementos. Por ejemplo, ¿cómo se van a comportar por defecto? Pues, yo que sé, pues los h1s o los h2s, h3s, todos los elementos, html y todo eso, sino también los propios widgets del propio builder están aquí. Incluso los formularios, los botones, todo. De manera que podemos tener establecido un estilo por defecto para cómo tiene que trabajar las cosas. No solo por defecto, sino que podríamos incluso crearnos varios. Por ejemplo, un modo dark, ¿vale? Porque es que encima, encima, estos estilos globales se les puede aplicar condiciones para que, por ejemplo, se le apliquen determinadas condiciones, dependiendo de estemos, me aplicas un estilo, otra, o sea, ya no solo un estilo, sino una librería, por así decirlo, de estilos, ¿vale? Es muy, muy, muy interesante. Por supuesto, se puede gestionar la carga de estos testes de diferentes maneras, de los ajustes, también para que cargue solamente aquellos estilos que estamos utilizando de manera que está muy optimizado. De hecho, la propia web de bricks, si entrais lo que es la parte comercial, está súper enfocado a performance anseo. Y es que una de sus grandes ventajas es que van como un tiro. O sea, van súper rápido, no solo el front, sino el propio builder en sí, va super rápido. Es una de las grandes ventajas. Que al final es el resultado de que se gestionan las cosas como están hechas, ¿no? Y de lo que os he enseñado antes, ¿no? De que no va a querer contenedores extra, etcétera, etcétera. ¿Vale? Bien, este es el panel de estructura, por cierto, que nos permite, bueno, pues borrar, eliminar, etcétera. Incluso un remove all, por ejemplo, si quisiéramos borrar todo. Bien, otra cosa interesante que tienen, que me gusta mucho. Aquí tenemos los breakpoints, ¿verdad? Para el tema de, bueno, de hacer nuestra web responsive. Aunque realmente a mí me gusta decir que, perdón, si nuestra web está lo suficiente bien hecha, la mayoría de elementos no dependerán tanto de un breakpoint. Si utilizamos bien valores, bueno, ya no solo dinámicos, incluso porcentajes, etcétera, muchos elementos, pues simplemente se apilarán cuando no entren, etcétera, utilizando mid-max, cositas de estas, que esto sí podemos hacer aquí, no como en otros. Pero aún así, tenemos nuestros breakpoints. Pero ojo, porque son unos breakpoints muy interesantes y es que son editables y podemos decirle cuál de todos ellos es nuestro base breakpoint. ¿Esto qué significa? ¿Qué podemos diseñar Mobile First? Por ejemplo, si quisiéramos, ¿vale? Que igual no queremos, pero para que me entendáis, ¿vale? Entonces son editables, podemos añadir todos los que queramos, podemos decirle cuál es el base, etcétera, etcétera, con lo cual los que estéis acostumbrados a partir de esa base mobile para ir escalando a partir de ahí, pues es súper interesante la verdad que tengamos estas opciones, ¿vale? Más cositas que tengo por aquí apuntadas, interesante que os quiero contar. Bueno, Flexbox y Grid, ya os he mencionado un poquito antes que tenemos la opción, pero hoy voy a aprovecharlo para hacer, vamos a hacer una cosa, vamos a hacer un loop, ¿vale? Vamos a hacer un loop, va a ser un poco raro hacerlo en la single de proyecto, pero lo voy, pero vamos a hacerlo aquí. Bueno, voy a poner aunque sea el post title y vamos a hacernos, voy a decirle que previsualice, porque claro, por supuesto podemos decirle, aparte de que las condiciones de este template está aplicándose el post type, puedo decirle que se previsualice algo, ¿no? Vamos a decirle que se previsualice alguno de los proyectos, creo que son de, vamos, nombres así de random, a ver que tengo. Nambellit, ¿de qué? Justo, vale, pues bueno, vamos a buscar ese post single, single post page y por aquí tendremos este, ¿vale? Voy a decirle que se aplique para poder trabajar sobre, sobre este proyecto, de hecho voy a entrar en el backend y así vamos, vamos viendo, ¿vale? Vale, container, al final no he metido el post title, vamos a meter el post title, como veis ahí sale el título del post, ¿vale? Aquí podríamos meterle. Existe la posibilidad, por supuesto, de venir aquí y decirle, oye, quiero que meterle, por cierto, aquí no hay límite de unidades, de todo podéis usar cualquier tipo de unidad, la tenéis que escribir, es un poco lo malo entre comillas, pero al final si es libre de meter esto, de meter vh, de meter calc, de meter lo que os dé la gana, ¿vale? Vamos a hacer otra sección, mismamente, la sección es un elemento de bricks que yo, de hecho, no suelo usar mucho, a mí me gusta mucho el minimalismo, yo hago todo deeps y ya elijo, yo luego, que quiero que sea, ¿vale? Pero bueno, como estamos aquí, una mitad quiero que sea rapidito, pues meto esta sección que me mete dentro un container y demás, ¿vale? Bien, vamos a ver cómo es esto de crear, por ejemplo, un loop de cosas, ¿no? Por ejemplo, un loop de, de diferentes posts, por ejemplo, que aparezcan pues todos nuestros, lo diría, todos nuestros proyectos, ¿vale? No es el ejemplo mejor del mundo, porque estamos en la single, pero bueno, da igual, podemos meterlo también en la single, ¿por qué no? Bien, cualquier elemento, tipo container, que puede ser un deep, que de hecho es el que suelo usar yo, tiene una opción, vamos a verlo por aquí, aquí está mi deep, veis, aquí está este cuadradito, se marca aquí y tiene una opción llamada use query loop, es decir, yo puedo convertir cualquier elemento en un loop de algo, entonces simplemente marco este, este elemento como loop y ahora podría crear una consulta, ¿vale? Estas consultas pues pueden ser de posts, de términos, de usuarios, ¿vale? O incluso de contenido del carrito, no todos los builders tienen todas estas opciones, ¿vale? Por ejemplo, yo encontro builders con muchos problemas a la hora de hacer loops de usuarios, etcétera, en este caso, por ejemplo, vamos a elegir un loop de posts, elegiría que quiero que sean mis proyectos, puedo decirles cómo quiero que se ordenen, bueno, podría marcarle cosas más concretas, etcétera, aquí tendríamos la posibilidad de decirlo, no, mira, pues quiero solamente los proyectos cuyo precio sea mayor que lo que sea, mayor que 10, etcétera, o sea, tenemos también la posibilidad de meta query y lo mismo con taxonomy query, para existenarlo con taxonomías, ¿vale?, y con términos, tenemos infinite scroll, etcétera, pero bueno, no me quiero meter ahí, siempre lo que quiero que veáis, la gracia de esto es que esto es totalmente hecho a medida, esto ya tiene un loop de proyectos, ¿ok? ¿Qué significa eso? ¿Qué significa que esto sea un loop de proyectos? Bueno, pues que esto en realidad es mi item loop, ¿vale?, voy a llamarlo así, y entonces yo puedo meter aquí un post title y ya estoy haciendo, ¿veis?, un loop de proyectos, ¿vale?, todo lo que yo diseño yo aquí a mano, por ejemplo, voy a decirle que coja el H2, voy a ir cambiándole, bueno, lo voy a hacer sin clases y sin nada para hacerlo más rápido, aquí tengo mi loop de proyectos, pero igual me apetece joder, pues que esto sea un gris, bueno, pues nada, le digo a su contenedor que sea un gris, no tengo ningún problema, ya tenemos un gris de tres columnas, venga, un gris de tres columnas, no, pero quiero que mi item loop, o sea, cada item, pues tenga una altura, pues un minate, venga, un minate de 300 píxeles, no, quiero que tenga la imagen destacada de fondo, cada uno de los items, no hay problema, estoy en el item, me voy aquí al estilo, background, cojo dinámicamente la imagen destacada, ¿vale?, y ya tenemos los loop de post y lo importante de todo esto es que eres tú el que lo controla, es feo, sí, pero por mi culpa, ¿vale?, soy yo el que haré que sea bonito, no dependo de los presets que me ponga el builder, no dependo de nada, quiero poner esto más bonito, quiero el post title puesto en medio, bueno, pues coge twiten loop, ¿vale?, dile a twiten loop que sea flex, por hacer un ejemplo así rápido y dile que se centra de todo, por ejemplo, no, es que quiero que tenga que sea blanco el texto, bueno, pues dile al texto que sea blanco, ¿vale?, o sea, y lo controlas todo tú, ¿vale?, eso es lo interesante, o quiero que haya una, que este texto, por ejemplo, pues vamos a ponerle, y ya termino con esta parte, vamos a ponerle un M por aquí, en todos lados y vamos a ponerle, por ejemplo, un background, pues por ejemplo, pues negro, pero un poco transparente, por ejemplo, yo que sé, ¿vale?, y soy yo el que se lo está haciendo, quiero que tenga un link al post, ¿no?, sería lo suyo, pues al item loop, ¿no?, le puedo poner, le puedo poner el link, ¿vale?, por ejemplo, de hecho esto lo tendríamos, fijaos el html tag que tengo es un dip, pero yo podría decirle que sea una, a ver, ah, y entonces ya puedo meterle un link al post, un dynamic data, post link, ya está, y ya tendríamos aquí todos estos clicables, no, quiero que haga una animación, cuando pase por encima, quiero que sea anime, muy bueno, pues nada, venimos al item loop y yo puedo decirle que cuando estemos, por ejemplo, hover, yo que sé, transform, scale, venga, pues 1.2 y 1.2, por ejemplo, bueno, esto no sería lo mejor forma de hacerlo, pero bueno, de igual, y que sea animable también, por ejemplo, pues me puedo ir a las propiedades, eso tenemos aquí en css y podríamos decirle transitión, pues bueno, todas las propiedades, all, 0.6, ese, y por ejemplo, mismo, me da igual, veis, ya está, ya lo tengo animado, ¿vale?, entonces, con lo que quiero que os quedeis, evidentemente estoy pasando por todas las opciones a toda, hostia, ¿vale?, pero la idea es que quiero que os quedeis, es que controlo todo, controlo todo, todo, todo, todo, como yo quiero que quede, ¿vale?, más cositas interesantes que tiene este builder, por ejemplo, bueno, el tema de información dinámica, el del loop no se ha comentado, pero para que veáis así por encima, esta query que yo he hecho de post, que os he dicho aquí, que tiene pues para meter meta query, taxonomy query, a las malas tiene esta maravilla, bueno, es una maravilla, a ver, a mí es como que, bueno, pues ya lo hacía yo antes a código, pero bueno, tiene esto, para meter aquí tu código, que te gusta el código, palante, ¿vale?, y puedes aquí jugar con código, etcétera, tiene un editor aquí de código para el que lo quiera, que muchas veces no hace falta, porque con todas estas opciones que tenemos aquí, colega, pues ya vale, vale, pero bueno, yo que sé, podéis hacer cosas raras, ¿no?, y como os digo, los elementos con los que podemos jugar de manera dinámica, todos tienen un rayito, vamos a hacer una prueba, imagínate que en vez de este post title, vamos a meter un, sí más, un heading, por ejemplo, aquí dentro, un heading cualquiera, se me ha puesto a la derecha, bueno, pues voy a meter en loop, que si no recuerdo mal, estaba en flex, y le voy a decir que sea vertical, ya está debajo, ok, entonces aquí podemos meter información dinámica, ¿qué tenemos?, bueno, pues el post title, o sea, todo lo de los posts, vale, obviamente, post title, post link, tata, tata, luego tenemos todo lo de autor, vale, esto es muy interesante, porque nos permite, Bricks además, es muy, funciona muy bien también con los archive de autor, de manera que podáis crear un directorio de usuarios, porque al final en Wordpress ya sabéis que no tenemos single de usuario, tenemos el archive de autor, ¿vale?, pero nos deja jugar con esto, cosas del sitio, de los términos, de archive, es decir, cualquier etiqueta de dinámica, custom fills, ¿vale?, aquí fíjate, me está cogiendo hasta los de Wordpress, etcétera, puedes meter cualquier tipo de custom fill, es compatible con custom fills nativos, como llamo yo, es decir, mis custom fills en esta web, estos que están aquí abajo, si los veis, nombre del cliente o real del cliente, está del proyecto, son hechos con código, ¿vale?, bueno, tengo por ahí mi plugin, pero es compatible con ACF, es compatible con jet engine, es compatible con metabox, porque ya sabemos que esos plugins tienen campos raritos, a veces, de galerías, de repeaters, no sé qué, bueno, es totalmente compatible con todo eso, ¿vale?, con lo cual está genial, pero aún así, es compatible con nativo también, por supuesto, ¿no?, y una de las cosas más interesantes que tiene, bueno, son dos, es cualquier información dinámica que tú leas en la web tiene estas dos opciones, output PHP Function, que es para llamar a una función tuya personalizada y un do action, ¿vale?, que también nos permite jugar mucho con nuestras funciones personalizadas, eso lo podemos ver muy bien, por ejemplo, en la visibilidad condicional, que es otra, precisamente, de las características que a mí me gustan de este buildup, y con esto voy a irme a otra plantilla, ¿vale?, vamos a hacer rápidamente, vamos a meternos en una plantilla para, por ejemplo, para los productos, vamos a añadir una nueva, single product sample, y vamos a decirle que esta es la, bueno, la de producto individual, ok, publicar, y vamos a editar con bricks, bueno, por supuesto, para el que está empezando y tal, pues también tiene su plantillitas, ¿eh?, podéis tener aquí vuestras plantillas, no solo las vuestras, sino que podéis ir a las community templates, donde hay un montón, se pueden subir, es muy colaborativo, para que la peña haga sus paquetes, suba sus cosas, puedes incluso, pues que claro, podría tirar aquí horas hablando, pero tenemos la posibilidad de publicar con nuestros colegas o con quien queramos nuestra lista de plantillas remotas, incluso compartirlas entre nuestros proyectos, para que estas plantillas, por ejemplo, yo me hago mis plantillas de la máquina de branding, y todos mis proyectos accionan la lista de plantillas, por ejemplo, ¿vale?, pero bueno, voy a meter aquí una cosa a cualquiera, vamos a ver si tenemos alguna de bucomers single producta, para no tener que diseñarla, ya sí, vamos antes, metemos esto vamos a decirle aquí, en los template settings, conditions, decimos que se aplique a postive product, ahí está, y vamos a decirle también que se previsualice uno de nuestros productos, que como tengo los de por defecto, supongo que tendré el típico de WordPress pen and luego todos estos, vale, pues vamos a colquinar y WordPress a este piso, vamos a aplicar y os voy a enseñar una cosa muy interesante, ahí está, bueno, aquí tenemos esta plantilla, vamos a ver qué está funcionando, voy a abrir por ejemplo este producto, este y este, ahí estáis viendo cómo está perfectamente apareciendo la plantilla, ok, bien, una de las cosas que os quería enseñar es la posibilidad de tener visibilidad condicional, esto no todos los builders lo tienen por defecto, recordad que estamos analizando bricks solo, no lleva croco block, no lleva nada, vale, yo voy a meter aquí, dentro de, bueno, igual me hago otra sección para hacer mis probillas, vamos a hacer una sección, la voy a mover por aquí arriba, se hace muy rapidito y voy a hacer algo sencillo, como por ejemplo, algo con un color, esto también daría para otro vídeo, el tema de los colores es genial, tenemos la opción de coger los colores de forma dinámica, vale, de variables tres que nos metamos, o sea, incluso de campos, un puñetero campo, vale, tiene el rayito para cogerlo de donde queramos, de nuestro campo de color, de una página de opciones, o sea, bueno, las posibilidades son increíbles, pero bueno, no voy a eso, voy a lo siguiente, vamos a meter aquí por ejemplo un, igual es un ejemplo un poco chorra, pero bueno, ahora mismo es el que se me ocurre, vamos a poner destacado, yo qué sé, vale, esto por cierto, ahí dentro, vale, y el container, lo quiero por favor, ahí, vale, imaginemos que yo quiero que esta sección de aquí, este bloque, por ejemplo, aparezca solamente cuando el producto sea producto destacado, ok, y por lo que sea, vamos a ir a las condiciones, porque aquí tenemos un panel de condiciones para cualquier elemento, no solamente para un container, o sea, cualquier cosa puede llevar condiciones, y aquí tenemos nuestra lista de condiciones, oye, aparece solamente si el post idés no sé qué, aparece solamente si tu post padres no sé cuál, aparece solamente si el rol de usuarios no sé cuál, vale, o sea, se puede hacer un montón de cosas, y por lo que sea, no tenéis, porque aquí hay una que es dinámica y data, y podrías meter un montón de cosas, y vamos a imaginar, porque si igual lo tiene, pero bueno, vamos a imaginar que no tiene, para que aparezca solamente si el producto es destacado, ok, aquí ya encontraríamos un bloqueo, esto pasa mucho con JTNG, pero, aquí se nos da la posibilidad de usar esto, output PHP Function, esto nos permite tener por separado nuestra propia función y directamente aplicar aquí nuestra visibilidad condicional, vamos a hacer un ejemplo rápido a ver si me sale, bueno, debería ser sencillo, no tengo aquí, bueno, estoy compartiendo la ventana, entonces voy a hacerlo aquí, perdón, en el editor de plugins, esto no lo hagáis aquí, trabajad en un puto programa normal, pero lo voy a hacer aquí porque estoy compartiendo la ventana, vale, pero vamos, vamos a imaginar aquí que voy a hacerme una función para comprobar esto, vale, por ejemplo, pues Function, vamos a poner aquí Function y el nombre que queramos, pues IfProductIs, que es lo que queríamos comprobar, si era destacado, ¿no? IsFatulet, por ejemplo, ¿no? Se llama así, vale, entonces yo aquí me hago mi historia, pues, a ver, tendríamos por un lado el product ID, por ejemplo, aquí le digo que es ID, bueno, voy a hacer algo rápido, poder nos escribir, y luego tendríamos aquí un IsFatulet, imagínate, y utilizo, puedo utilizar, bueno, Hasthert, Hasthert, que sería Featured de la taxonomía Product Visibility, bueno, esto a ver, lo explico un poco, porque igual me estoy yendo yo un poco de la olla, en BuCommerce tenemos los productos si tienen como una estrellita, ya sabéis, ¿no? esta estrellita de aquí, entonces esta estrellita lo que realmente es, es una taxonomía llamada Product Visibility, ¿vale? con el term Featured o no, ¿vale? y esta función Hastherm o Hastherms, mira, ahora estoy dudando, Hastherm, ¿no? Hastherm, está bien, esta función Hastherm ya directamente nos va a devolver 1.1.1.0, ¿vale? en función de si tiene la taxonomía o no, ¿vale? entonces yo aquí le voy a decir Retour directamente en mi Ispiature, ¿vale? de manera que si el producto es destacado, pues me va a devolver 1.1.0, ¿vale? bien, voy a guardar esta movida, creo que lo he hecho bien, creo, y entonces yo ahora aquí puedo coger a esta cosa que quería ocultar, perdón, a este no, se lo voy a meter al container principal, a ver, vamos a quitárselo a este, esto no quiero, al sector, ya que lo tengo aquí arriba, a este, a la grande, y le voy a meter una condición y le voy a decir, oye, mira, solo te vas a mostrar si mi función que le hay llamado Ispiature es igual a 1, por ejemplo, ¿vale? porque es lo que hace el Retour, ¿vale? te podrías hacer hecho un Retour un sí, pero bueno, lo hace más así a lo rápido, y si lo he hecho bien, pues este es destacado, luego collection, pero este, por ejemplo, no lo será, eso es, ¿veis? no sale, ¿veis? entonces, ¿qué quiero deciros con esto? sí, a ver, para el nuevo, para el que está empezando, tenéis aquí todo tipo de mierdas, ¿vale? o sea, no os va a hacer falta, si es, si la fecha no sé qué, no aparezca, estas, tenéis cosas para jugar, sin saber de código así, pero lo que voy es que, si por lo que sea, llegáis al límite de que no podéis hacer algo, Bricks es compatible con lo que queráis, porque nos permite meter ahí nuestras funciones, ¿vale? con lo cual esto es increíble, incluso para el loop, para el loop que hemos visto antes de sacar post, joder, igual él no te permite sacar un loop, no sé qué hay mezclado con usuarios, da igual, si da igual, si luego vas a poder meterlo por ahí, ¿vale? así que es muy interesante, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, no se usa mucho eso de adaptabilidad que lo que hace es un display noni y eso a ver puede estar bien pero hay veces cuando yo quiero por ejemplo mostrar un botón de google play o lo que sea y que realmente lo que quiero comprobar no es el tamaño de la puñetera pantalla lo que quiero comprobar es si estoy en un móvil de verdad coño warprest tiene ya una función para eso que es la de web page mobile no esta esta función y además es de puta madre porque nos debo es booleano o sea nos devuelve un un truón un un cero con lo cual yo podría venir aquí digo no mira este bloque de aquí sólo quiero que aparezca en en yo que sea en móvil o al revés no entonces yo le vendría aquí dinámica data le diría lo mismo que he hecho antes output de la función y por supuesto también le funciones que existan de warprest aquí le pongo esto web page mobile que sea igual a uno y ya está ya me va a comprobar esto además lo comproba en blackberry de dios bueno yo tenéis la fuente no por ejemplo no son ejemplos para que entendáis lo que lo que quiero decir porque este caso en concreto también podéis iniciar los propios de bricks está preparado e tuvienes aquí donde era fíjate tiene bruser operating system le damos a por ejemplo a operating system y tienes aquí windows mac iphone ipad o sea podríais hacer la otra manera pero igual me parece utilizar web page mobile y lo bueno a mira no lo hemos visto pero es que aquí si lo dí a f12 bueno vamos a poder buscarlo pero no está en el dom vale eso no es un display no le lo que hemos hecho no sale en el dom eso que hemos ocultado ok si no estamos haciendo un display no estamos realmente que no sé no se está renderizando en el dom es la visibilidad condicional es una visibilidad condicional pinecha vale por supuesto podéis añadir más cosas and o hor etcétera etcétera vale ok vamos terminando loops consultas sistema de formularios bueno esto a ver no es una cosa que a mí me suele importar demasiado porque yo trabajo mucho con con el plugin gratuito jet form builder que está muy bien pero bueno para el que necesito un formulario y no se quiera comer la cabeza a mí siempre me parece bien que el propio builder lleve un sistema de formularios y en este caso pues tenemos un sistema de formularios que está bien está de centillo vale no más así del mundo pero bueno aquí tenemos nuestro nuestro formulario voy a ir a él pues bueno con sus campos con sus historias qué cosas podéis hacer aquí bueno no demasiadas vale o sea mandar un email redirigir esto es interesante tenéis login registración password y reset password esto es muy chulo muchos builders no lo tienen y es que de hecho desde los propios ajustes de bricks aquí en el ver si lo encuentro en general podemos establecer páginas para iniciar sesión registro contraseña y establecer es decir cuando tú hayas abarra uvp admin o cuando vayas a contraseña perdida te puedes hacer tus paginas metes este form y listo vale entonces bueno no tiene muchas cosas dinámicas pero bueno más de las de las básicas no para para poder jugar evidentemente es pan protection con su ambiente para que le metáis el captcha salre captcha etcétera este tipo de cosas pero bueno que tiene un sistema de formularios vale no me voy a liar aquí por supuesto puedes leer datos dinámicos y la de dios del post campos de diferentes tipos campos de picaer campos ocultos muy interesantes para para traerte yo que se dio información de la url con una url y variable ya está bastante guapo el campo de archivo para ser un formulario básico está guapo más cositas visita condición hemos visto pudiera personalizar a interacciones js esto no lo tiene cualquier builder una de las grandes barreras que yo creo que encuentra mucha gente que no conoce el código aparte de poder hacer la movilidad estas de php es cuando tienes que hacer cosas como interactivas con js no o lo típico de quiero pasar por encima de un elemento y que se oculte otro pero no que esté dentro de ese dip sino que está fuera en otro lado y con ccs ya sabéis que está como es la jerarquía que nos obliga a jugar ahí dentro bueno esto tiene un editor de cosas interactivas en javascript muy chulo que está aquí si estos son la visibilidad condicional estos son las interacciones y esto es una locura trigger puede ser cualquier cosa lo que queremos que se dispare pues al pasar por encima en interview por decir todas las cosas que tenemos en javascript para poder hacer de trigger interview por cuando sea para cualquier incluso para hacer una animación de entrada cuando cargue el contenido se puede hacer lo que es de la gana puede elegir una por por elegir una interview por ejemplo qué acción quiero hacer pues me apetece mostrar un elemento que elemento le puedes decir este mismo o un selector de ccs de nuevo control total vale ocultar lo que me dé la gana el elemento al que le haya puesto yo la clase aquí que me dé la gana entendéis es súper interesante para todo para scroll para para que nos dé la gana luego tenemos también condiciones incluso para dónde queremos que se ejecute todo esto si en la sesión local bueno se está súper bien pensado y por supuesto podemos ir encadenando cositas de estas estas una cosa que he visto en muy poquitos builders por no decir yo diría que ninguno y siempre hay como esa barrera no a mí siempre me hacían preguntas de y esto como lo hago yo ya javascript tío es que ya sé que es una tontería que es hacer clic en un sitio y que y que desaparezca un pero es que tiene que ser con javascript pues mira pues desde aquí a otra falta saber javascript ya lo tienes ahí vale así que súper interesante y bueno por supuesto compatibilidad con los grandes como bucomers udl pml a cf es jet engine bueno ya lo he comentado antes pero bueno está bien también para que se abra pues a más público no que que todo esto sea compatible con complejáis importantes que utiliza la gente por supuesto bucomers y además de una compatibilidad cualquiera por ejemplo en el caso de jet engine aunque ya os digo si podéis ahorraros lo con todo lo que os he enseñado así que al final pero bueno si utilizáis el engine no es solo que sea compatible no no es que vas a tener aquí tu wichet de listing gris que vas a tener aquí tu cuery builder lo que sea incluso puedes hacerte un loop como el que hemos hecho antes de bricks pero que la consulta la lea del cuery builder para que veáis el nivel de compatibilidad o sea cuando hacen cosas compatibles las hacen realmente compatibles vale no es cuestión de metes algo hay hace un surco no hace que realmente funcione en el sistema vale y tiene compatibilidad con un montón de cosas además bricks y ya terminó tiene un roadmap muy interesante bueno que ha ido haciéndole caso durante mucho tiempo sus actualizaciones son bastante constantes y bastante interesantes hace muchísimo caso a la comunidad tenemos una una zona de idea board vale a ver muchos otros también lo tienen pero bueno yo lo digo no porque lo que lo tiene y por ejemplo ya de ya de destacar cositas interesantes que se vienen y que a mí me gusta mucho que es este global class manager que nos va a permitir por ejemplo cuando queramos editar una serie de clases tener como una zona aparte no que no tenga que yo venir aquí a mi clase de color primario para evitarla y tener que seleccionar los elementos sino que tengamos un gestor de clases por un lado y por otro lado el builder no y van metiendo actualizaciones actualizaciones todas muy interesantes y la verdad que funciona muy bien el ecosistema que tiene además es muy curioso porque claro al estar tan enfocado en gente que sepa un poquito de html y tal qué cosas por ahí van saliendo qué cosas se van desarrollando pues van desarrollando cosas como bricks forks por ejemplo es decir los plugins que se desarrollan para bricks no son playing de o solamente de una cosa que da vueltas no no este por ejemplo es un plugin que te permite hacer un montón de cosas interesantes como por ejemplo animaciones que sap por ejemplo lo diría de trabajar con un con un con un framework por ejemplo crearte tus tus sets esas son cosas que se que digamos que potencian el builder no te meten una cosa nueva sino que la potencia enfijaos una esta para crear animaciones no dentro del propio bricks y utiliza las propias interactiones que tiene etcétera pues son como el ecosistema que tiene de plugins alrededor es de gente haciendo cosas muy frikis y eso mola vale así que nada eso es un poquito lo que os quería enseñar sé que quizás he ido un poquito perdón a toda leche pero tenía muchas cosas que decir y creo que muy interesantes pero quería enfocarme yo creo que ya los que estéis aquí ya habéis visto elementos ya visto visto tal entonces he ido al grano a lo que yo creo que os puede flipar un poco de donde llega esto rapito igual no es para alguien que empieza su primer builder pues igual mi recomendación no es no es bricks a no ser que sepas de ese html entonces sí porque te va a molar así que nada más eso eso es todo espero que os haya gustado y si no conocíais que os mole