 Bueno, siendo ya las 7 y 10, vamos a empezar con el desarrollo de la página web para la comunidad de WordPress Keto. Muchas gracias a los que están presentes. Les enviamos un saludo de parte de todos los que hacemos la comunidad de WordPress Keto. Bueno, la idea de este workshop era justamente construir la página de WordPress Keto desde cero, utilizando solamente la herramienta de el full site editing o conocido como también Gutenberg o los bloques de Gutenberg dentro de un WordPress completamente desde cero, diseñada para que sea lo más simple, lo más ligero, lo más liviano y lo más ágil. Entonces, hoy día vamos a empezar con esto y voy a, primero que nada, compartirles mi pantalla para que ya puedan ir viendo, me confirmas Juan que ya esté funcionando. Perfecto. Bueno, lo primerito que hay que hacer siempre que vayamos a hacer una página WordPress, obviamente, es instalar WordPress. Nosotros ahorita vamos a trabajar en un entorno local, siempre es recomendable trabajar en un entorno local en el desarrollo de una página, porque así no tienen al aire algo a medias. Entonces, lo desarrollamos en un entorno local una vez que esté todo funcionando procedemos a migrarlo ya a nuestro sitio. Entonces, tenemos aquí instalado un entorno local donde vamos a estar desarrollando nuestra página web. Ya tenemos instalado nuestro WordPress y lo primero que vamos a hacer es instalar los plugins necesarios para que corra nuestro sitio. Así que nos vamos a ir aquí a la sección de plugins a la izquierda. Vemos que ahorita no tenemos ninguna y realmente lo que nosotros estamos buscando es que la página sea lo más ligera posible, lo más liviana. Entonces, tener la menor cantidad de plugins posibles y por ahora yo solo voy a instalar dos plugins. Por un lado, voy a instalar el propio plugin de Gutenberg. Les explico, desde hace algunas versiones ya de WordPress, Gutenberg los bloques ya son parte del núcleo, ya pueden trabajar y tener todos los bloques dentro de su página, pero al instalar este plugin de Gutenberg adicional a lo que ya viene dentro del core, lo que logramos es tener ciertas modificaciones o ciertas versiones que todavía no están al aire de Gutenberg, por decirles, digamos que crearon un nuevo bloque de galería que todavía no está integrado en WordPress, ya aparece dentro del plugin de Gutenberg, lo cual nos permite ver más opciones. Entonces, instalamos nuestro plugin de Gutenberg rápidamente y el otro plugin que yo instalo se llama Instant Images. Este plugin básicamente lo único que haces con interconectarse con páginas, como UnSplash, Pixabay y Pexels, que son páginas de imágenes libres y gratuitas que ustedes pueden usar en cualquier de su página web para que no tengan que estar visitando una página web para descargar las imágenes. Normalmente como lo haríamos iríamos a una página como puede ser UnSplash y aquí buscaríamos, nos tocaría descargar la imagen a nuestra computadora y volverla a subir dentro de WordPress. Con este plugin que acabamos de instalar, básicamente ya no es necesario eso. Entonces ya tenemos nuestros dos plugins, los vamos a activar y tenemos los plugins que por ahora vamos a solucionar estos dos. Si es que vemos que es necesario colocar otro plugin dentro de la página, por alguna funcionalidad lo colocaremos luego, pero de ser posible vamos a intentar instalar la menor cantidad de plugins para que la página cargue lo más rápido posible. Lo siguiente que tenemos que hacer es venimos a la apariencia y ver los temas que tenemos. Por defecto vamos a tener los temas propios de WordPress. Si se fijan los nombres son justamente el año en el que salieron. Cada año WordPress lanza un tema y el tema tiene como nombre su año, por lo tanto el 2022 o sea 2022 es el último, pero vamos a probar utilizar algún otro tema. ¿Cómo podemos escoger el tema adecuado para lo que estamos haciendo nosotros? Si nos vamos, vamos aquí a Feature Filter, tenemos la opción aquí Full Site Editing, que nos va a permitir escoger un sitio, un tema para nuestro sitio que sea compatible completamente con Full Site Editing para poder trabajar como a nosotros queramos y hacer de nuestra página básicamente lo que nosotros queramos. Es muy importante que tener la opción de hacer en Full Site Editing las cosas sin tener que complicarnos mucho. Podemos escoger uno al azar si ya conocemos uno al que le tengamos confianza, con el que ya habíamos trabajado, está bien. En este caso, por sugerencia aquí de nuestro amigo JC, vamos a utilizar un tema, voy a quitar mis filters por aquí, voy a remover todos mis filters y vamos a utilizar uno de los temas que él más usa, que se llama Sivir. Aquí está Sivir, vamos a instalarnos este tema y vamos a trabajar encima de este tema, realmente se van a dar cuenta que esta idea de comprar temas súper caros, súper complejos por funcionalidades no es realmente necesario muchas veces, sino conseguir un buen tema que sea estable, que sea fácil de utilizar es básicamente todo lo que necesitamos. Entonces, aquí abrimos y vemos que este tema, el rato que ponemos como editar, nos manda ya directamente al editor de bloques. No sale en algunos temas, aparece como una barra aquí a la izquierda donde seleccionamos opciones del tema. Aquí nos aparece directamente ya todo en editor de bloques, podemos ir viendo cada uno de los bloques que están ya y aquí podemos venir a los templates y los template parts. Entonces, aquí tenemos nuestro header, nuestro footer, todas las páginas que puedes tener dentro esta página y el sitio como tal, como se ve. Entonces, por ahora voy a regresarme a mi dashboard. Perdón, voy a cerrar esto que ahorita no nos interesa, ya y vamos a venir aquí al Sivir template. Podemos ver qué es lo que tenemos instalado y venir al menú, perdón, vamos a venir a nuestro menú. En este caso, por el tipo de página que nosotros estamos manejando, hemos decidido que el menú va a ser lo último que vamos a colocar si es que es necesario. Así que por ahora no voy a manejar ningún tipo de menú. Voy a venir directamente a mi editor que está en beta, que lo pueden ver aquí. Este es el famoso Full Site Editing. Y lo primero que yo voy a hacer aquí es venirme a mis estilos y voy a venir a colores. Aquí yo puedo escoger todos los colores que yo voy a utilizar dentro de la página. Entonces, vamos a empezar colocando un color de fondo, ya y vamos a venir a custom. Y nosotros tenemos ya una paleta de colores que es la que estamos empezando a utilizar. Entonces grabo mi color de fondo. Luego en el texto selecciono el color que quiero manejar en el texto de nuestra paleta de colores. Los links, vamos a hacerlos con el color oficial de nuestros, perdón, de nuestros links. Podemos manejar como pueden ver aquí dos colores, o sea podemos hacer que el link sea de este color y cuando pasamos el mouse por encima seleccionar un segundo color puede ser interesante, así que coloquemos otro color. Entonces el link es de este celeste clarito y cuando pasamos del mouse se va a ser oscuro. Los botones de la misma manera podemos decidir de qué color queremos que sea el texto del botón y el fondo del botón. Para el texto vamos a colocarle, vamos a dejarle blanco y el color del botón le vamos a utilizar con el color que estamos utilizando para todo. Entonces, hemos creado un estilo personalizado aquí de colores. Ya, entonces aquí tenemos y aquí también podemos ver paletas de colores, pero con esto nosotros ya tenemos para nuestros elementos creados todos los colores. Podemos decidir cómo va a ser la base de nuestra página web, el contenido que tan ancho queremos que sea en relación al ancho entero de toda la página. Podemos colocar espacios entre los bloques y es que queremos que por defecto tengan un cierto nivel despaciado. Ahorita yo le voy a dejar esto en 10 píxeles que me gusta a mí. Esto ya es un tema de cuestión de gustos. Aquí podemos escoger, como les decía, cualquier otro color que queramos para nuestra página y sin más vamos a venir ahorita aquí al template parts y vamos a empezar a trabajar con el header. Entonces el header como pueden ver se compone normalmente aquí de un logo, el nombre de la página y su menú. En este caso ahorita nosotros vamos a venir acá y vamos a eliminar completamente este menú y vamos a colocar en la primera columna, que es la en esta área que está aquí, donde tenemos el site title. Yo creo que lo lógico sería colocar el un imagen. Entonces puede ser el site logo que le vamos a colocar aquí adentro y obviamente como no hemos seteado no tenemos un site logo. Nos está diciendo como que por favor suba un imagen. Entonces voy a venir aquí y aquí yo puedo escoger qué tipo de imagen. Entonces no sé, tengo dos opciones. La una opción es dejar la barra de arriba en color blanco normal, dejarle plano y colocar el logo en azulito o lo opuesto y es hacer que la barra de arriba sea todo azul y colocar el logo en blanco. A mí personalmente me gusta que la parte de arriba sea azul y tener el logo en blanco es lo que yo normalmente prefiero. Entonces aquí yo puedo coger y puedo gustar cuál de las versiones de luego es la que más se acomoda a lo que yo quiero hacer. Personalmente creo que el tener el isotipo junto con el texto de logotipo es una opción que se va a ver muy bien. Entonces ahí tenemos nuestro logo de la comunidad WordPress. Podemos aquí irnos al grupo para seleccionar toda la caja donde están agredadas nuestras columnas y buscar aquí colocar el background del color que nosotros queramos. Yo creo que tiene que ser el color propio de WordPress. Yo también coincido en que en que la cabecela sea azul me parece que va a hacer un buen contraste con el con el negro que estamos usando del fondo. No sé si lo dejemos al final, pero pero sí me parece una buena combinación el logo en blanco con el con el fondo azul. Yo creo que aquí el site title también le removemos. No creo que sea necesario. Yo creo que con el logo estamos. Una vez que he grabado vengo acá. Está bien. Ahora yo estoy notando algo extraño a ver si es que alguien me puede igual ayudar a encontrar el por qué del asunto. Pero yo aquí setee ciertos colores para background y acá no me está detectando los colores. No sé. Juan. Si te das cuenta el fondo sigue negro mientras que yo aquí en colors ya les setee que el background sea el gris clarito y acá la paleta no me está detectando como otro. Lo que creo es que no estamos con el ancho completo en el grupo pues verificar. Aquí. El grupo aquí. Non full with save. No. Si te das cuenta. Lanzando solamente unas columnas en vez de un grupo al inicio y le puse background a la columna y funcionó perfecto. Pero no. Si. No. Esto sí me está funcionando. Lo que me refiero es que nos vamos al tema como tal. Se supone que el el background está seteado para que todos los elementos del background sea gris. Pero el background global de la página no me está cogiendo y estoy con fondo negro. Ya te caché. Entonces puede ver cómo está la página, el front page en ahí en el en el editor. Templates. Front page. Front page. Está creado el front page. No, yo creo que para empezar podemos ir eliminando todo. No, no, no, no necesitamos. No necesitamos nada. Es más te das cuenta que el gêder aquí está dentro de. Sí, ahí está dentro de un cover. Remove group. Ahí vamos, vamos desapareciendo. Remove group. Remove group. Vamos a remover todito, todito, todito. Ahorita grabamos. Ahorita y vemos es que. Sí, parece que sí. Porque si te das cuenta aquí ya está el color gris. O sea, parece que sólo era un tema de la página. Ahora que no estoy yo. Perdón. En el seteo de los grupos. Sí, estaba un grupo con fondo negro. Ahora algo que yo noto que me choca un poco es que creo que logo es demasiado enorme aquí. Entonces voy a regresar aquí a mi template parts a mi gêder. Le voy a dar clic a logo y fácilmente puedo arrastrar y al ojo hacerle más o menos del tamaño que yo quiero. También pares con dimensiones, pero bueno, está bien al ojo. Ay, yo creo que está bastante bien. Procedamos ahora en cambio al footer. Ya. De la misma manera que antes no le veo sentido a lo que está ahorita, así que voy a remover absolutamente todo. Y agreguemosle. Yo creo que le voy a colocar sólo dos columnas en esta posición. En la columna de la izquierda aquí voy a agregar un texto. Porque no me está ahí estamos. Un párrafo. Ya aquí vamos a colocar. No sé, un texto que diga algo como que es parte de la comunidad W. Pequito, pero no no necesariamente un un copyright, sino algo así como WP. Comunidad W. Pequito. O sea, como el título del sitio no abajo. Wordpress. Quito. Y podríamos ponerle algo así como Creative Commons. Sí, podría ser. Y también. Habría que poner alguna referencia Wordpress de allí, pero bueno, eso lo podemos decidir luego. Claro, y aquí vamos a centrarle aquí para que se vea un poquito mejor. Este voy a seleccionar todo la columna, todo, todo, todo. Le voy a dar el texto a blanco y el background. Igual le voy a colocar ahorita el el color de. Teníamos. Voy a grabar. Save. Voy a rec recargar. Tenemos esto aquí y vamos a buscar el de iconos sociales. Y aquí yo creo que necesitamos tener el de Facebook. Vamos a poner el de Instagram. Vamos a poner el de Twitter. Y vamos a ver si hay. Sí hay el de Meetup. Igual voy a venir a la columna entera de aquí. Vamos a ponerlo que se alinea en la mitad. Este. Vamos a venir a la columna de acá. Le vamos a poner que se alinea en la mitad de tal manera que en el responsivo esto siempre esté como bien alineado. En social icons. Centraditos. Y aquí. Porque no le pones los, los, los logos de un solo color. Justamente son iba a ir. Aquí tenemos Facebook label. Social icons. Y aquí podemos escoger el color del icono. Yo creo que lo ideal es colocarlo en nuestro gris clarito. Ah, no, perdón. El icono es la parte de adentro. Por lo que claro, el icono es la parte de adentro. Entonces el icono hagamosle de nuestro celeste. Y el background hagamosle de nuestro gris clarito. Y aquí tenemos que colocar las direcciones, pero eso podemos hacerlo luego. Porque eso es. Prueba solo los, los logos. Andate a social icons y prueba solo los logos. O sea que no tenga necesidad en el gradidor. Ahí arriba dice logos only. Más de arriba. Más de arriba. Ahí. Logos only. Logos only. Ahora sí es que el color blanco o sea gris claro a los logos. Bueno, no sé. Ya sería cuestión de gustos iguales a. Vamos por acá. Ya no hay que ver cómo queda. Ah, una cosa importante me he estado olvidando. Si se rica los logos están. Ajá, está como grises. Es porque no, no tenemos el. No está colocado nada adentro del. Del icono. Entonces como no hay una dirección real, no va a hacer nada, pero rápidamente voy a. A colocarles. Entonces aquí estamos la de Facebook. Vámonos a la de el Meetup. Meetup. Ahí ya se hace blanco, o sea, ya se pintan porque ya los está detectando. Vamos a irnos a una Twitter. Y por ahí, si alguien me comparte en el chat, el de Instagram, por favor. Me agradecería. Al menos por qué lo tiene por ahí. Por qué si lo tienes por ahí, compárteme por favor el de Instagram o si no, igual voy a buscarlo por aquí rápidamente. Instagram. Pequito. Pequito. Necesitamos la dirección de el Instagram de la comunidad. Por fresquito. Aquí ya la encontré. Ya vamos a venir acá. Pegamos aquí. Save. Esperamos a que nos diga que no va. Ahí están nuestros logos. A mí, personalmente, me voy a contar sin el círculo. Sí, está mejor así. Podemos probar que funcionen. Perfectamente funcionan. Algo que a veces hago yo es que aquí este les doy la opción de que me abren una página nueva para no salir o cosas por el estilo. Pero yo creo que por ahora hay una sola configuración para listo. Así, el rato que venimos y damos click nos abre una y no salimos. Vamos listo. Entonces, ahora sí, yo creo que podemos empezar a armar la homepage, correcto. En nuestro caso le estamos pensando en hacerle una sola, una sola página todo, no tener secciones. Esto podría ser que luego lo cambiemos, pero por ahora, por la cantidad de contenido y el tipo de contenido que tenemos, estamos considerando que probablemente es la mejor opción. Front page only. Perdón. Así es una página que sea solo única, única. Entonces, lo primerito que vamos a hacer de lo que habíamos hablado era colocar, dame dos segunditos, voy a abrir esto por acá. Vamos a tener un quiénes somos, ya. Entonces, voy a crear de nuevo dos columnas. Ya obviamente ahorita todo se vea raro porque las columnas están debajo del footer, pero eso nos vamos acá y lo arrastramos y está listo, aunque creo que me le moví mal. A ver, control Z. ¿Dónde están mis dos columnas? Se metieron en header, creo. En header, group. Columns. Sí, son estas, estas son. Entonces, démosle control Z, aquí están. ¿Por qué me quiere meter en todo el header? Mejor, mejor, lánzale totalmente arriba y luego le bajas con la fritita o subele ahí. Ahí estamos. Entonces, en la primera columna le vamos a agregar un título. Entonces, vamos a buscar aquí un header. Un heading. Listo. Le vamos a escribir aquí. Aquí en es. Aquí en es. Somos. Vamos a centrar. Perfecto. Y debajo de esto vamos a poner un párrafo. Ya que venimos igual acá. Párrafo y. Y veleado. Muy, de un segundo, voy a venir. Yo tengo aquí ya mis textos preparados. Siempre es importante tener todos los textos ya. Ya listos para, para no estar. Inventándose nada. Inventándose nada. Exactamente. Ya. Vamos a bajarle acá y vamos a editarle un poco porque dice es un grupo. Entonces, más bien, vamos a poner. Somos un grupo de personas de la ciudad de Quito con la filosofía de WordPress. Correcto. Le vamos dando forma, bonito nuestro texto. Listo. Siento que es como que todo está muy aplastado. Entonces, por acá puedo. Un padding. Creo que ahí, igual máximo, a máximo se fue. Ya. Y acá vamos a poner una linda, una linda. Entonces, justo aquí nos vamos a media library. Tenemos Instant Image y podemos buscar Community. Y vemos que no sale. A ver qué foto escogemos. Así que se vea. Que se vea bonita. Puede ser algo como esta. Que se vea gente en comunidad o puede ser una. Yo creo que esta puede ser una opción interesante. Listo. Ya está dentro de nuestro media library. La seleccionamos y estamos. Ahora, ¿qué haría yo? ¿Le cambiaría este color a este título? Entonces, vamos a venirnos acá. ¿Y qué color le colocamos de la paleta? Probemos primero con el color original que estábamos viendo. ¿Le dejamos con ese o lo hacemos de la azul más fuerte? Yo creo que con ese. No sé. Pruebalé. Pruebalé la página afuera para ver cómo se ve sin el. Sin los locos. Sin tantas cosas. No me gusta tanto. Como el texto de abajo ya es gris. No podemos usar el gris acá, aunque hace buen contraste de gris. Entonces, bueno, hay que irse fijando ahí en el contraste de los colores. Por el momento creo que está bien el color. Y si queda muy monótono ya podemos pensar en algún color alternativo, pero de momento dejemos de decir. De ahí otra cosa que yo haría aquí es que el tamaño aquí del texto es como muy chiquito en relación a toda la página. Obviamente la imagen podríamos hacerle más pequeña, pero yo siento que igual el texto está como muy muy pequeño. Así que mejor me voy a ir a darle unos poquito más de tamaño por aquí al texto. Sí, una buena práctica es manejarse con contextos de catorce píxeles para arriba, pero también se puede poner en otras unidades, pero además siempre es bueno dejar aire. Entonces, trabajar mucho con los panes de las celdas y las columnas. Aquí igual podemos venirnos aquí a la columna y alinearlo al medio para que no tener este espacio tan brusco, sino que distribuir un poquito más del espacio. Creo que por ahí más o menos está empezando a tomar forma. Alineado. Sí, un poco. También tengo más texto que podría colocarlo acá para hacerle más, más largo. Ya podemos probar o podemos luego intercambiar y colocar imagen texto para para balancear. Pero ahorita probemos este colocarle el primer tercio de la página. Yo creo que a menos texto mejor. Entonces ya podríamos poner el más texto más abajo. Entonces tendríamos que agregar. Perdón. Si es que le redondeas las bordes de la imagen. No sé cómo queda. Veamos por aquí. Tú dices aquí unos 10 píxeles así. A ver si se ve mejor. Volvemos a dejar plana. Sí, me gusta. Es un toquecito. Tal vez le haría un poco. No, creo que si le hacemos medio mal de imagen, se va a hacer muy chiquita. Veamos. Sí, no. Me dio un pulsadis. Dejemos de no más como estaba. Ya. Siguiente. Yo creo que aquí hacemos el juego de alternares. Es decir, vamos a colocar lo mismo, pero al revés, una imagen a la izquierda y un texto a la derecha para ir generando más, más movimiento. Entonces venimos acá. Vamos a buscar de nuevo nuestras columnas. Vamos a seleccionar de nuevo dos columnas con todas las columnas seleccionadas. Venimos de nuevo a nuestro Padding y le ponemos al máximo para trabajar exactamente de la misma manera. Con la diferencia de que ahora le vamos a hacer al revés. Entonces aquí nos toca una imagen. Ya. Y aquí vamos a hablar. Déjala ver. También podrías haber duplicado las columnas anteriores y solo cambiarles el orden al. Efectivamente aquí puedo darle click y poner duplicar para. Esto puede ser como un poco más seguro para asegurarnos de que las configuraciones sean las mismas y no rehacer las configuraciones un montón de veces. Aquí vamos a hablar un poco de la comunidad, así que busquemos otra imagen de. De gente. Ya. Y aquí vamos a hablar de qué aportamos a la comunidad. Entonces. Busquemos una foto por ahí. Si ven alguna que les parezca. Está como qué aportamos a la comunidad. Me dicen para. Y le ponemos una foto que se vea. Puede ser esta de gente feliz. Igual luego podríamos que poner fotos ya nuestras de. De eventos nuestros. Esa del fondo celeste. No te gusta que se ven más como sombras. No, el otro lado. Ahí está. A ver. Probemos. No lo sé. Igual la idea es que esta es la base. No luego todos los. Los contenidos podemos ir revisándolos para. Hasta que quede como queremos. Coloquemos un heading. Y pongamos ahí. Vamos a venir igual aquí a nuestro texto. Y vamos a seleccionarle el color para que sea el color que nosotros queremos. Vamos a sebrarnos de que esto esté en el medio. Vamos a agregar aquí abajo. Justo debajo de esto. Un. Un bloque de párrafo. Se colocó fuera. A ver. Aquí. Vamos a agregar un paro. Perfecto. Y tengo este texto. Vamos a colocarlo aquí adentro. Vamos a asegurarnos de que el tamaño esté en es normal que es el que estamos manejando ahorita. Y rápidamente le damos un poco de. De formato. Nos quede. Listo. Y cierto que faltó esto. Seguro. Tenemos ya treinta y cinco minutos de sesión, no? Perfecto. Bueno, aquí avanzaremos lo que. Lo que tengamos que avanzar y. Esto es nuestro primer. Les podemos mostrar el. La evolución. Contado después de haber hecho. Horas de trabajo. Por acá tenemos el Padding. Y esta imagen le habíamos puesto un radio de diez. Correcto. Quiero que te falta aire entre los textos y las fotos. Sí, aquí es como que como que está muy pegado, no? Entonces tendríamos que venirnos aquí a la columna que solo tiene texto y a esta a colocarle un Padding. Correcto. Pero separa el Padding para que solamente le pongas Padding Padding derecho y izquierdo que en otro caso. Entonces, aquí le ponemos unos tres aquí. Y luego venimos a la columna de acá. Nos vamos al Padding y le ponemos a la izquierda tres. Seis seis. Entonces, sí, ya tenemos un poco más de aire. Tal vez hasta le pondría un par de más. No sé tú qué opinas. Sí, yo creo que mientras más aire mejor. Cuando los textos están tipo los textos de las columnas periodísticas son más legibles. O sea, si son menos anchos, los textos son más legibles. Es por ejemplo, un insight que yo no me lo conocía. Y si y si la letra es más grande, obviamente. Más accesible, pero. Pero mientras más angosta, la columna más legible. Aquí hay un detalle que también podríamos ver y es que el ancho del contenido estaba sentiado donde estábamos. Estamos aquí en mil doscientos píxeles. Entonces, realmente también podríamos bajarle esto a no sea mil para ganarle un poco más de margen a los lados y y comprimir todo el contenido más hacia el centro. No es mala idea. Podemos probar ponerle aquí mil. No, no, pero es que estaba. Qué cambiaste a no ya estoy. Y ver qué pasa. No, mira. Esa no ahí no es la configuración. Inventions. Pues que estás cambiando en dónde en la columna. En el layout de toda la página le estaba cambiando. Ah. Pero bueno, podemos irnos como tú dices directamente aquí a las columnas y ver qué opciones no está teniendo aquí de de ancho de la página. Es que si ves en este tema no me. No me permite cambiar el el ancho. Ya es ya es la configuración del tema. Es configuración. Empezar a editarlo en el json y creo que eso ahorita no. De momento dejémoslo así. Sí, dejémoslo no más ahí. Y vamos a ver qué otra área le vamos a colocar aquí. Tú creo que ahorita tenemos como que un. El quiénes somos. Entonces yo creo que podemos aquí colocar algo de los eventos. Sí, esa era la otra que íbamos a tocar. Entonces eso era como un. Aquí vamos a poner como snapshots de los de unos tres eventos. Sí, puede ser, no sé, un carrusel quizás. Lo vemos de aquí. Entonces aquí vamos a venir. Y vamos a colocar directamente un carrusel. Por defecto no tenemos un carrusel. Dentro de nuestro. ¿Quiere cargar algún grupo de bloques? Sí, podría ser. También cuando buscas de aquí así a veces te aparecen aquí como. Pero vale caro ucel. Son sin la doble ere caro ucel. Te salen decirles de aquí algunos como carruseles creados por. Por terceras personas. Esas son patrones o son? Son bloques. Es como que te descarga un plugin con eso con ese bloque. Creados ya por la comunidad. Pero. Podemos también irnos al. Al dashboard y buscar un plugin. Que tenga. Que tenga algún carrusel interesante. Hay varios grupos de plugins que tienen bloques interesantes. Un momentito que se me se volvió loco. Ahí estás con la. Ahí está. Que el zoom se está cargando la conexión. Este. Este es Google Timber Vlogs by Cadence, los he usado. Entonces yo creo que si cargas ese ya ya trabajemos con. Aquí tenemos dejado un millón de bloques más que que que nos da. Aquí tenemos tabs, testimonials, icons, galerías, botones. Loutis. Vamos a ver. Ya vemos cuál de esos usamos. Lo que decía yo es que mientras menos de esos grupos de bloques cargas, mejor porque si no te haces de. Mira cuántos íconos se aumentaron ahora. Nosotros estos con tres o cuatro grupos te hace loco. Y a veces son duplicados. Es decir, claro, la mayoría tienen lo mismo. Pero por ejemplo, aquí tampoco me da un de por sí, un un carrusel. Un carrusel de imágenes. Yo creo que mejor no nos compliquemos la vida ya. Y y vayámonos más por la idea de mantenernos o sea, sin sin el sin el plugin le voy ahorita a deshabilitar rápidamente aquí para que para que no esté. No me aparezca y en vez de un carrusel, lo que voy a hacer es poner cuatro columnas y ponemos una imagen en cada columna. No y no no nos vamos tan. Es decir, para que se den cuenta los los oyentes y la mayoría de los bloques se pueden sustituir en cualquier momento por unos que sean más dinámicos. Ahorita estamos usando como la versión más estática por por rapidez y por maqueteación. Pero luego podemos encontrar el plugin adecuado de carrusel y y cambiarlo. Entonces, aquí vamos a colocar imágenes ya. Gorky, tú que andas por ahí eres el chico de las poesías. Tienes este fotos que me puedas pasar, si no me voy a meter a nuestro aprovechamos que tenemos aquí el link. Mira Facebook. Vamos a robarnos las imágenes directamente de nuestro propio Facebook. Entonces, por ejemplo, esta misma. Podemos Save Image. Cero cero uno. Veamos qué más tenemos por aquí de otros eventos. Cero cero dos. Quiere. Y eso. Tres. Y esta. Cuatro. Entonces, vengan a monos aquí. Upload. Cero cero uno. Márcales todas de uno. Bueno, a que se suba. Tienes toda la razón. Upload. Todas a no es como estoy subiéndole. A través del botón de Upload no te permite para subir todas. Tienes que venir al media. Al aire media. Y ahí sí podemos seleccionar. Muchas imágenes de corrida. Entonces seleccionamos esta. Aquí otra imagen. Hacer esta. Y por último aquí una imagen. Que va a ser esta. De la misma manera hay que venir acá y vamos a meterle un padding para que sea más. Será más bonito. Seis. Y refresquemos nuestra página. Tenemos nuestras imágenes de aquí. Le vamos a manejar un título ahí o. Podríamos colocar un nuestro deventos o algo así. Como un heading. Un heading aquí que diga algo de. De nuestros eventos, correcto. Sí podría ser. Podemos colocar algo que diga. Nuestros eventos. No podemos entrar. Y podemos. No le puedes setear al bloque del hache del heading de una vez del color que estamos usando. Es en el estilo para que no tengas que poner el color cada rato de Uyo en bloques. No, no en bloques de abajo. No, ahí, ahí, ahí. Headings. Vamos a venirnos al hache dos. Text color for hache dos. Perdón. Esto es malo. Sí, ya está. Pero si cada vez que agreguemos un hache dos ya va a venir con. Con escolar. Con este colorcito. Aquí justamente lo que hablaba hace un ratito jc. Si se dan cuenta este padding de aquí es medio raro. Entonces nos toca venir aquí a las columnas. Al padding y coger y decirle que el tope sea. Se llama menor menor. Que le quitaste. Demasiado o estoy tal vez un. Un puntito más. Ahí, por ejemplo, sería bueno editar las imágenes para dejarles todas todas con el mismo diseño. Sí, más o menos para que no se vea como un escalero. Las imágenes del centro están con el fondo claro de esto. Ajá. Entonces, bueno, ahí se puede editar esas imágenes recortándole justo esa parte. Y con eso ya se vería bien. Pero bueno, de momento no es necesario. Yo creo que verás. Teníamos otras secciones más. Pero yo creo que ahorita como en el plan de. De que ya no nos queda mucho tiempo y no alargaros muchos. Y yo creo que lo siguiente sería ahorita solo agregar como que un formulario de contactos o algo por el estilo. Ya habíamos hablado de que más que un formulario de de contactos, más bien. Consultas y sugerencias de preguntar a los a los usuarios de la comunidad qué temas les gustaría que tratemos. Claro. Eso también se puede modificar sobre la marcha, dependiendo de cómo las necesidades de cada sitio web tú puedes irle poniendo ahí el contenido que que más se ajuste a tu. A tus requerimientos. Exactamente. Entonces, aquí le estoy dando un poco de formato y veamos qué cómo le hace, cómo le hacemos un formulario aquí sin instalar otro plugin. ¿Es posible? Necesitamos de ley meter un plugin de formularios. Preguntad de examen. Yo pensaría que si necesitas un. Necesitamos un plugin de que nos permita que nos permita hacer eso. Entonces, ¿qué será irnos por un? ¿Cuál usas tu contacto? WP Form 7. Tenemos contact form plugin. A ver qué más. A ver, dame de nuevo. El WP Form estaría bien también. O este contact form 7. Hasta el now. Activémosle. Ya tenemos aquí nuestro contact. Veamos qué tiene nuestro contact form per defect. Tenemos nombre. Vamosle nombre. Vamosle solo email. Aquí podemos leer su gerencia. Su gerencia. Perfecto. Y aquí podámonos dejarnos tus sugerencias para próximos workshops. Y pegámosle. Y el submit debería decir. Enviar. Si. Acá puedes configurar a quien quiero que se valle. Dice adicional que es invalid. Mailboxes. En el reply to. ¿Dónde está esto? No te comiste alguna ropa en el informe. Aquí no coloqué nada de. No. Tal vez es. Pero incluso si es que no te deja, se te haría, debería parecerte el formulario. Deja ver qué te aparece. Después la configuración del envío se puede hacer. Bueno, sí. Entonces vayámonos de regreso. A ver, vámonos de aquí. Contact Forms. Y aquí tenemos nuestro. Shortcode. Shortcode. Volvámonos a nuestra paginita. ¿Qué estábamos haciendo aquí? Yo ya había creado las columnas. Estaban aquí abajo. Entonces aquí podemos poner. ¿No para por qué? Se puede hacer. Creo que hay una propia de Shortcode, si ves. Ah, y acá se me ocurre que igual le metemos una imagen. De nuestro media library, no, si media library. No sé. Una que tenga que ver con mi idea de. Es un foco, suele ser la típica imagen de ideas. Luego le escogemos tal vez otra imagen, pero por ahora coloquemos un foco. Coloquemos, vayámonos aquí. Segurémonos de que esto esté centrado. Y a esta columna que contiene esto, le vamos a dar igual un padding a la derecha. Al máximo lo habíamos hecho, creo. Save. Aquí tenemos nuestro formulario. Está un poco deforme. ¿Qué pasa si tocaría padding? Ahí sí tocaría con estilos. Claro, eso normalmente está dentro del mismo de aquí del contact. Edit. Aquí tenemos para ir configurándole cómo queremos que se vea en el estilo. Pero eso no creo que sea bueno hacer esto. Claro, ahorita la idea es solo mostrar cómo se puede ir armando con. Sin necesidad de instalar ningún tipo de editor de bloques, estamos haciendo una página completa. El poder de nuestro querido. Gutenberg. Ahí lo que sería bueno es ir poniendo los los identificadores de las secciones de las que vamos a saltar, por ejemplo, cuando veamos de nuestros eventos, ahí deberíamos tener un identificador para que cuando pongamos el menú de nuestros eventos o de eventos. Efectivamente. Aquí necesitaríamos colocarle un ancla. Sí. Ya entonces podemos. ¿Será como ancor aquí? No sé si es que dentro del mismo objeto en propiedades te deja poner un ancla. Puede ser. Veamos. Advanced. Aquí está nuestro ancla efectivamente. Entonces eventos. Ahí le ponen eventos. Exacto. Safe. Safe. Por acá. Aquí le podríamos aquí poner un. Se me ocurre que, claro, este hagámosle como dentro de la misma columna. Aquí. Agregamos un heading aquí que diga como sugiere un workshop. Y aquí podemos ponerle a este nuestro. Nuestro ancla. Sugerencias. Sugerencias. Podemos. Aquí colocar un que aportamos. O comunidad o no sé. Que aportamos. Y dejaste. Así está con guión. Sí. Y aquí. Quienes somos? Seguimos. Podemos crear un menú con enlace. Efectivamente. Podemos venir a nuestro header. Y aquí teníamos justo creado una columna adicional. A ver, aquí tenemos una de más. De más. Teníamos esta columna de aquí donde le podemos agregar un. Navigación. Navigation. Ya. Que nos crea automáticamente un sample page que le vamos a remover. Ahí. No quieres removerle. Después de que le crees uno. Un. Adlink. Custom link. Aquí tendríamos que poner un. Quienes somos? Quienes somos. Te falta una. Ah, perdón, no estoy haciendo mal. Este verás le voy a quitar porque le dice mal. Es aquí. Ponemos. Hasta. Ay, qué espesa. Almoadilla. Hasta. Quienes. Yo. Somos. Correcto. Mhm. Taca. Pero si ves el texto dice otra cosa. Aquí nos toca editar el texto. Escribir. Quienes somos. Mhm. Si está el link, si está el link. Vale, bueno. Primero antes de nada no veo nada. Entonces. Tenemos esto. Crescámosle. Muy bueno. Lo vemos ahí. Funciona. Hay un. Hay por ahí un plugin de Smooth Scroll que hace que te muevas, que no se vaya así bruscamente al link. Ahorita no, no es como para buscarle, pero como para que ya vayas terminando cosas, es mejor que los links no se vayan así super bruscos. Claro. Y muevan como que estuvieras haciendo scroll en la página. Entonces aquí, ¿un qué? ¿Raportamos tú? Editamos el texto. Lo que diga. No, a ver. ¿Qué pasó? ¿Qué pasó? Creo que te. Me malé. Se te juntaron los englaces. Ajá. ¿Qué aportamos? Aquí, ¿qué editamos para que diga que esto cosas de la vida ya? Save. Probamos. Este no está. A ver, ¿por qué no estás? Nos faltan. El salto de la almohadilla. El jaque. El gato le dicen los mexicanos. El gato también. Los españoles dicen el mojito. Pero no creo que se llamaba así el englazo, ¿o sí? Sí, sí está. De ahí algo que yo haría aquí es que necesitamos como que se separen, si te das cuenta, están como muy pegados. Entonces. Por ahí, no tanto tampoco. Veamos en live. ¿Qué tal? Sufi. Sufi. Y no sé qué opines tú, pero a mí me gusta cuando se van hacia la. Sí, porque ahí no tenemos ese hueco en el. Y así que vamos agregando menús. Esto se va. Se va acomodando ahí. Y aquí me faltó un atilde. ¿Quién es? Es importante la ortografía también. Claro. Luego espantosa la. Cualquier más teníamos que no somos bien bonitos, pero con una ortografía desastrosa. Da. Hasta. Vintos. Y el último que teníamos era sugerencias. Vamos a venir acá. ... ... También algo que se pueden agregar luego con algún plugin es un top Mightcrawler de esta forma para cuando estemos abajo no tener queilerse... Para que se hagas diez veces. Acabamos de cumplir una hora exacta de Workshop. Entonces, yo creo que ahorita preparamos el tema de seguir haciendo más cosas. Veo que están seis participantes, lo que decir que tenemos a Verónica, Luis Santiago, Luis Dutero, Gorky, JC y yo aquí haciendo esto, entonces este. Habramos preguntas. Preguntas, alguien quiere decir algo, alguien si le ocurre algo, preguntas, sugerencias, ideas locas, alguien se anima a hablar. Delen nomás, sin vergüenza. Delen, desactiven nomás, o sea, activen nomás un micrófono y pregúnten lo que quieran, con confianza. Alguien se anima. Preguntas. Aló. Ya. Ahí estamos. Luis, cuéntanos. Ah, ¿cómo es? Entonces para... para hacer un... bueno, no sería ya necesaria entonces hacer, digamos, un tema o un tema, hijo, en golpes, o... Si quieres, lo contesto yo. Los temas, hijos, siguen estando vigentes, pero hay que ver que son temas igual basados en bloques. Entonces, no sé si se vayan a descontinuar. Como ves ahora, no pierdes nada porque tienes, puedes crear partes y puedes crear temas dentro del editor de WordPress. Entonces la necesidad antes de los temas hijos era para utilizar estilos propios y poder como darle un poco más de flexibilidad al diseño que antes era, de algunos temas era bien cerrado. Pero ahora con el, con la misma configuración de Gutenberg, los temas hijos cada vez pierden un poco de vigencia. Igual siguen estando, como es accesibles, tú puedes hacer un tema hijo de cualquier tema de bloques, ya sea con plugins o directamente escribiendo en el código como te acomodes mejor, pero no es que sean tan, tan necesarios como eran antes que tenías que, si no hacías el tema hijo, no podías moverle los temas comerciales por eso. Otra cosa que es interesante aquí, que tiene el editor de bloques, es que una vez que tú ya armaste todo, tú te puedes ir a estos puntitos de aquí y aquí te dice exportar el tema con los templates y estilos. Entonces básicamente tú creas como una versión de tu tema ya con toda la información del estilo y del template que creaste. Entonces tú puedes, digamos, que el contenido que ahorita estamos haciendo nos estamos inventando un poco, pero vamos luego a montar otra página, podemos descargar el tema y volverlo a subir en otro servidor, en otra página y los colores de fondo, los colores de texto, todo este tipo de cosas ya van a estar seteadas, entonces es como que creaste un hijo de alguna manera. Y eso, otra cosa, ahí mismo en esa sección, si es que te vas a la vista de código, puedes ver la estructura del código y si es que quieres copiar solamente partes de la estructura, entonces también lo puedes hacer. Obviamente para eso ya tienes que estudiar un poquito como les nombras a las secciones y a los objetos de WordPress, pero no es nada complicado y toda la información está en WordPress.org. Ahí puedes aprender fácilmente como muerte con el código. Y tal vez en la, bueno, hace unos meses había visto, pero no estaba muy como avanzada la documentación sobre estos, sobre los temas de bloques. Ya, bueno verás, a partir de marzo, abril, ya empezaron a meter mucha información del tema, más que nada en inglés, pero verás, están habiendo eventos en España y en otros países de Te Habla Hispana, si tú te metes a WordPress.tv y le filtras la búsqueda por idioma, puedes encontrar ya información en vídeo. Estabas diciendo algo mal. Estabas diciendo algo mal y te corté. No, no, no, eso era todo. Bien, gracias. Bueno, eso gracias Luis por tu participación. Si alguien más quiere decir algo, comentarios. Veronica, veo que te abriste el micrófono, pero no te escucho. Si es que tienes problemas de audio, nos podrías describir al chat también. Hola chicos, ¿cómo están? ¿Qué tal? La semana nada, pues muy peligro realmente de poder compartir este momento por día digital. Es muy bueno, es muy importante porque a veces se completan las personas para la parte difícil. Realmente, lo que pasó mucho es mucho bueno, gracias a todos las personas que tienen la posición. Bueno, realmente se ha visto a los patrónicos, los patrónicos, los patrónicos, los patrónicos y los patrónicos. Hay un poco de interferencia en tu música. Estamos perdiendo. Estamos perdiendo. Ahí, ahí me escuchan. Hay un ruido como de moto. No, no sé, no sé, pero estoy haciendo una información gracias por la charla y gracias a la charla. Gracias a ti también por haber asombrado aunque estés en una moto. Muchas gracias. Y aprovechando lo que decía Gorky, hay una pregunta de Veronica que dice buenas noches se puede personalizar la cabecera por página. Sí, en las partes del editor, tantas cabeceras como necesitas y quieras, hándate a template parts. Claro, aquí tienes tus templates para cada una de las páginas y en template parts tú puedes seguir agregando aquí más cabeceras. Añadir tantas cabeceras como quieras. Aquí en el front page nosotros tenemos agregado el header y el footer. Entonces tú también podrías hacer que el front page no tenga header simplemente borrándolo de aquí y en otras páginas agregar el header 1, header 2, header 3 igual los footers. Gracias. Igual cuando abres el header ahí puedes escoger que header vas a usar. Exactamente. Otra cosa que no hicimos le estaba diciendo que no le pusimos a la página en español porque un poco estamos acostumbrados a trabajar en el idioma nativo de Wordpress tú puedes ponerle en español y todo lo que están en términos de inglés aparece en español, aparece cabecera en vez de header, columnas y pie de página. Entonces como para que te puedas orientar mejor porque a veces hay gente que también no sabe dónde encontrar los elementos pero sí se puede hacer lo que necesitas lo que preguntaste. Aprovechando lo que decía Gorky vamos a seguir teniendo Wordshops virtuales ya vamos a hacer un calendario más o menos de Wordshops virtuales pero la idea es que sean como este de ahora tipo taller que la gente puede aprender un poco la interfaz de Wordshops y de bloques y claro poco a poco vamos a ir añadiendo un poco más de intensidad y de temas un poco más que no son básicos entonces les recomendamos que sigan los Wordshops como decía Gorky lo puedes hacer desde la comunidad de tu casa y puedes aprender un poquito no sé en las fechas en que se planifiquen alguna otra consulta ¿Alguien más o ya quieren ir a dormir en este viernes cansados no entonces creo que agradecerle a el señor Chimo por habernos dado esta clase magistral de hacer un sitio con bloques en una hora obviamente solo hicimos el front page pero de la misma manera se pueden hacer páginas internas y no es tan complicada la cosa lo que si les recomiendo es que se familiaricen mucho con interfaz porque a la entrada si requiere una mínima curva de aprendizaje pero una vez que aprendes como se hace y a esto mecánica y cada vez te gusta más lo que vas consiguiendo si sin más muchísimas gracias a todos los que vinieron esperamos verlos en otros Wordshops virtuales y también cuando hagamos eventos presenciales se viene como dijo aquí JC algunos eventos que vamos a tener durante este mes, durante el siguiente mes y esperamos verlos ahí y si es que no pueden asistir físicamente seguiremos haciendo eventos virtuales a través de Zoom para que sigamos uniendo la comunidad y sigamos creciendo juntos así es un abrazo a todos y muchas gracias muchas gracias chimo ya nos estamos hablando, qué gusto esperamos un fin de semana ya da igual muchas gracias gracias a todos y sin más finalizamos esto y nos vemos la próxima listo