399 | Q&A: iconos gratis, sliders livianos y checkouts minimalistas

En el episodio 399 de WordPress semanal resuelvo dudas sobre cómo encontrar galerías de iconos libres y gratuitos, qué plugins hay livianos para crear sliders, cómo evitar un error muy típico que es cuando navegas en un formulario desde un móvil que te haga zoom cuando quieres pulsar en un campo, cómo puedes mostrar tu página de Facebook directamente en tu web y cómo crear un checkout minimalista si utilizas EDD. Te contaré además cómo lo tengo yo hecho. Vamos allá. Hola, Hola. Soy Gonzalo Navarro y Bienvenidos al episodio 399 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy respondemos dudas. Ya sabéis que están sacadas directamente del soporte que ofrezco en la membresía en Gonzalo ES. Además de los contenidos, todos los cursos que ya he publicados, 80 y subiendo, todos los vídeos de la zona código 350 y subiendo, y la comunidad privada en Telegram, pues también podéis preguntarme vuestras dudas del día a día con WordPress. Y he seleccionado cinco que responderé en un momentito. Pero antes, como siempre, novedades. Y hoy te quería hacer una recomendación personal. Y es el podcast de Marketing Digital de Borja Girón. Es un podcast muy original, no por la temática de Marketing Digital, pues que habrá muchos, sino porque a mí me da la sensación de que siempre está probando cosas. De hecho, hace algunos años ya, no sé, un par de años o más, recuerdo que me contactó y me oye, ¿Te interesaría grabar un trocito de algo? No me acuerdo de qué hablé en ese momento de mi negocio, no lo recuerdo exactamente, pero entonces yo se lo grabé y él lo incluyó como un podcast de invitado, como un episodio de invitado dentro de su podcast. Y hace muy poquito, pues no sé si hará dos o tres episodios, en el 258 publicó uno que se llama 10 increíbles podcast que debes escuchar e incluyó el mío. Pero no lo digo porque incluyera el mío, que se lo agradezco mucho, sino por el formato. Lo que hace es que habla de los podcast, además va metiendo. Está divertido porque se nota que va metiendo como en. Bueno, como en falso directo, va metiendo soniditos y demás, pero lo que hace es que te presenta el podcast y te introduce un trocito Es decir, coge un trozo específico de un episodio para que su audiencia pueda escucharlo, de modo que se pueden hacer una mucho mejor idea de cómo transmite ese podcaster y demás, y si le gusta ir a escucharlo. En el momento de grabar esto, su podcast de marketing digital tiene 260 episodios. De hecho el 260 es he clonado mi voz con inteligencia artificial. Así que si te interesa este tema, pues también puedes echarle un vistazo. Y bueno, está disponible en todas las aplicaciones de podcasting, pero si buscas podcast de marketing digital de Borja Girón, pues lo tendrás disponible. Venga, y ahora con lo nuestro. ¿Qué está pasando en Gonzalo Navarro Es esta semana? Pues tenemos nuevo vídeo de la zona código. Es una nueva animación por CSS, No sé si ya llevo 5 o 6 publicadas, así que nos va a quedar una sección muy complet dentro de la zona código. Recuerda, estos vídeos y el código que os dejo debajo del vídeo están pensados para que podáis usarlos sin saber desarrollo, para que veáis el vídeo, copiéis el código y lo peguéis. De esta forma os podéis ahorrar un montón de plugins, os podéis ahorrar incluso constructores visuales, porque estas animaciones son las típicas que te ofrecen plugins de construcción de contenidos y demás, pero realmente relativamente sencillo configurarlo si sigues los pasos adecuados. Y en este caso la animación es de giro horizontal y vertical. Por ejemplo, si estás en un programa de edición de imágenes tipo Canva, siempre tienes como una opción de voltear imagen o girar imagen. Lo puedes hacer horizontal o verticalmente. Bueno, pues yo te enseño a hacer esto, pero de forma animada y por supuesto que lo vea el visitante de tu web sin que tenga que hacer nada. Ya digo, con un poquito de CSS. Te explico las dos formas, por ejemplo, cómo puedes hacer que un elemento gire en su eje horizontal o que un elemento gire en su eje vertical. Y además lo hacemos con un ejemplo práctico, porque uso un icono de flecha para que veas el efecto. Si la flecha está apuntando hacia arriba y hacemos el volteo vertical, pues empezará a apuntar hacia abajo. Se ve ese movimiento de la flecha moviéndose de apuntar arriba a apuntar abajo. Y hacemos lo propio de forma horizontal, moviéndose de apuntar a uno de los lados, apuntar a otro, este y el resto de más de 350 vídeos. Ya lo tenéis disponible en la zona de códigos desde Gonzalo Navarro. Es esto por un lado. Después tenemos los cursos, y el curso más reciente publicado es el curso del tema Spectra One. Ya publiqué un episodio la semana pasada hablando en profundidad de este tema, de las diferencias que tiene con otros temas, de sus peculiaridades, qué tipo de cine es y de cuándo puede ser buena idea utilizarlo. Si te gusta y quieres aprender a usarlo, pues ya lo tienes disponible. Y si no, puedes echar un vistazo al resto de cursos. Ya digo, más de 80 cursos publicados desde WordPress básico hasta WordPress avanzado, pasando por productividad, SEO, Marketing, seguridad, mantenimiento. Es decir, todo lo necesario para crear y gestionar webs con WordPress de forma profesional o con resultados profesionales, ya sea para ti o para cliente. Fantástico. Esto en cuanto a las novedades. Vámonos ahora con el plugin de la semana. Y recupero un mítico, porque seguramente lo haya comentado hace años ya en esta sección del plugin de la semana, y no es otro que Foo Gallery. Este es un mítico plugin para crear galerías de imágenes que se ha ido renovando con el paso de los años y siempre ha tenido mucho énfasis en el buen rendimiento de carga, pero también incluye plantillas prediseñadas y si lo necesitas, pues mucho control sobre las opciones. Está activo en unas 100.000 webs con WordPress. Está preparado para utilizar desde el editor de bloques de WordPress, así que una gran opción si buscas crear galerías de imágenes. Como siempre lo voy a dejar enlazado en las notas del episodio. De todas formas se llama Foo Gallery por si quieres buscarlo directamente. Recuerda que puedes acceder a todo lo que voy comentando si escribes en tu navegador Gonzalo Navarro es 399, que es el número de este episodio. Gonzalo Navarro es 399. Ahí encontrarás. De hecho este es un episodio de preguntas y respuestas, así que debajo de cada pregunta siempre pongo enlaces relevantes. Si digo pues en este tutorial explico cómo puedes hacer esto, pues ahí, justo debajo de la pregunta os dejo el enlace. Además, si queréis volver a escuchar una pregunta determinada o una respuesta mía determinada, también pongo el minuto exacto en el que trato esa pregunta, por si después de escuchar el episodio queréis ir a escuchar otra cosa en cuestión o dentro de un tiempo queréis hacerlo. Ya digo todo esto en las notas del episodio. Fantástico. Pues ahora sí, vámonos con vuestras preguntas y mis respuestas. Comenzamos con la primera que es de Sergio y que va sobre cómo encontrar galerías de iconos libres y gratuitos. Hola Gonzalo, una pregunta, al igual que conoces Unsplash puntocom como galería de imágenes gratis, ¿Conoces algo similar para iconos? Gracias y un saludo. Sergio Sí, por supuesto, hay un montón de webs que te ofrecen iconos gratuitos, en su mayoría pues te ofrecen en una parte gratuita y luego otros que puedes comprar. Pero aprovechando la pregunta de Sergio, quería comentar algo que vi el otro día en Twitter, que me perdone porque no me acuerdo quién se lo vi, de hecho lo he visto un par de veces ya tuteado y es un banco de imágenes igual que Unsplash, es decir, donde la gente sube las fotos que ellos hacen. Eso funciona un poco así ¿No? Unsplash lo que hace es que permite que fotógrafos se creen cuentas y que vayan subiendo imágenes y luego otra gente las busca y las puede utilizar pues en sus webs y demás. Pues ahora ha salido uno igual pero con imágenes generadas por IA, es decir, tú por ejemplo generas tus imágenes con IA y si son buenas pues las subes a este banco de imágenes y luego cualquiera puede descargarlas y utilizarla. Pues eso es la idea que tú digamos como fotógrafo, que puede que haya algún caso de vosotros, pero sobre todo si necesitáis buscar imágenes generadas con IA y no queréis generarlas vosotros porque no se os da bien, porque es demasiado caro o porque directamente lo queréis hacer más rápido, pues en este banco de imágenes las podéis buscar. Se llama AI, es decir, juegan con esto de splash, por eso me lo recordó la pregunta de Sergio, pero le ponen el AI delante y le quita el. Es decir un. Bueno, os dejo el enlace de todas maneras. Y luego vamos a los iconos específicos. Bueno, tenéis varias, tenéis Icon Finder, que yo la suelo utilizar bastante, de hecho he comprado iconos por ahí. Tenéis Flat Icon que es hiperpopular, también tiene muchos gratuitos, icons 8 o icons, que es otra de las populares. Y luego si queréis una libre de derechos, porque normalmente tienes que dar crédito, la gente no lo hace, pero deberías, deberías de poner pues quién es el autor de ese icono, salvo que estén libres de derechos y hay una página que se llama UX Wing donde ahí sí tenéis iconos libres de derechos. Todos estos sitios los tengo enlazados directamente en las notas. Perfecto, dejamos la pregunta de Sergio. Vámonos con la número 2 que es de Maximiliano y que va sobre cómo encontrar sliders livianos o para el editor de Gutenberg. ¿Me Hola Gonzalo, cómo estás? Cuánto tiempo, Espero que muy bien. Te contacto por algo que seguramente sea sencillo para ti responder con tu experiencia en WordPress. Vengo evitando usar sliders en todos los sitios que administro, pero llegó el momento de usar uno por razones informativas. ¿Es un sitio con muchas secciones de productos y la gente casi no baja a ver el pie del sitio, entonces necesitamos algo en la cabecera que los invite a ir a las promociones, ofertas, etc. Qué slider me recomiendas que sea limpio en su código y no afecte demasiado al rendimiento? Desde ya muchas gracias por tu ayuda, como siempre. Saludos Maximiliano Bueno, gracias a ti Maximiliano. A ver, casi nunca es verdad esto que dice Maximiliano de que llegó el momento de usarlo por razones informativas. Si tú quieres usar algo por razones informativas y lo vas a ir mostrando fuera de pantalla, es decir, un slider te muestra una cosa al principio pero luego tiene que pasarse la diapositiva, ya sea automáticamente o que tú la pases. Entonces si tienes interés en mostrar algo que la gente lo vea, pues es mejor, por ejemplo si son tres cosas, poner tres columnas y poner esas tres informaciones directamente para que se vean arriba del todo. Ahora, que aún así lo necesitas porque lo quieres, porque el cliente te lo pide, porque lo que sea, pues os voy a decir opciones de buen rendimiento y luego una que yo he añadido porque realmente Maximiliano no me pregunta por una opción para el editor de bloques, pero sí que me lo habéis preguntado en otras ocasiones, así que creo que es interesante y así la respuesta queda más completa. Por un lado el slider, bueno, el slider ya sabéis lo que es, es como un paso de diapositivas que puede pasar de forma automática. Está compuesto normalmente por imágenes más texto, puede que tenga algún botón o simplemente algún enlace o puede que nada, que sólo sea informativo. Y bueno, hay cada vez más gente que no los recomienda, sobre todo los que estudian el UX, la experiencia de usuario y dicen que al final pues tú no te pones a ver los sliders porque no te vas a esperar a que vayan pasando o porque no le das siquiera a siguiente, entonces la gente puede que vea la de primera diapositiva, pero luego lo normal es hacer scroll o irte a otro lado, no es lo normal esperarte. Y otra gran pega que le suelen poner es que sobre todo antiguamente, bueno, todavía quedan muchos, pero para construir un slider y hacerlo tú, digamos a través de algún plugin, de alguna extensión, tienes que poner en común muchos elementos, por eso suelen ser bastante pesados, no solo desde la parte de administración, los que te dan mucho control en su diseño suelen ser bastante pesadetes. Y luego en la parte frontal también, al tratarse de imágenes muy grandes, al tratarse de efectos que van pasando, pues también suele afectar de forma negativa a la carga de la web. Suele tardar más en cargar también, sobre todo porque suele ser un elemento que se pone arriba del todo, entonces si lo primero que tiene que cargar el navegador es un pedazo de slider, pues va a tardar. Bueno, estos son todos los contras que los quería quitar ya de encima. Ahora sí, como digo, como opción más liviana tenéis metaslider, es el que mejor rendimiento ofrece, es un plugin que está activo en 600.000 webs con WordPress, optimiz, optimizado para el SEO, optimizado para el rendimiento, con bastantes opciones, más que antes. Y luego tienes una versión Pro que te deja meter vídeos de YouTube, de Vimeo, etcétera. Sin duda gran opción, echarle un vistazo. Y después si queréis uno para utilizar directamente desde el editor de Gutenberg, desde el editor de bloques, vamos, ya no lo llama nadie Gutenberg, pues tenéis Guten Slider. De este creo que hablé en algún momento en la zona de plugins de la semana y ha ido creciendo desde la última vez que hablé de él, está activo en más webs ahora mismo, en más de 10.000 webs con WordPress, y es básicamente un plugin que te aporta un bloque dentro del editor de WordPress que puedes insertar y configurar un slider. Así que estas son mis dos recomendaciones, las dejo en las notas del episodio. Por cierto, publiqué un episodio completo hablando de los sliders, de por qué mucha gente los considera malos, de por qué tal, de cuándo poder usarlos y demás, así que lo dejo enlazado, es el episodio 202 de todas maneras, por si queréis ir directamente desde vuestra aplicación de podcast, ahí hablo de los sliders en móvil, de la accesibilidad, del efecto ceguera, que es esto que te decía de que la gente los ve pasar pero realmente no los está viendo. Bueno y muchos me adentro un poco en todo el mundo de los sliders y demás y os doy opciones por supuesto por si queréis utilizarlos. Bien, vámonos con la pregunta 3 que es de Denny y que va sobre evitar el zoom en móviles al pulsar en formularios. Me dice, hola Gonzalo, tengo el siguiente poder anular el zoom que hace en la versión móvil con sistema iOS o cualquier otro sistema operativo al hacer clic para escribir un nombre o teléfono en un formulario. Veo que en tu web está perfecto, Un abrazo. Muchas gracias de antemano. Bueno, es un poco larga digamos la frase en la que me lo pregunta. Básicamente lo que quiere hacer Denny aquí es, imagínate que tú estás navegando por móvil en una web y que vas a rellenar un formulario, cuando haces, seguro que te ha pasado, cuando pulsas en un campo de ese formulario, la pantalla te hace zoom y te pone como el formulario muy cerca y te quita lo demás de la pantalla. Esto lo hacen muchos navegadores en móvil, sobre todo Safari, por eso menciona aquí Denny lo de iOS, lo de Apple, y es porque si detecta que el tamaño de letra de lo que tú vas a escribir, de lo que rellenas en el campo es menor de 16 píxeles, te hace el zoom. Y esto lo hace por accesibilidad, porque lo puedas ver más grande y demás. ¿Cuál es la solución? Asegurarte de que los inputs, es decir, el texto que se escribe en los campos de formulario tiene 16 píxeles o más. Esto pues lo podéis configurar, pero si no sabéis, publiqué un vídeo de la zona código explicando cómo hacerlo, cómo inspeccionar para asegurarte dónde tienes que ponerle esos 16 píxeles. A veces lo puedes hacer, por ejemplo en este caso Denis, si no me equivoco, he acortado la pregunta, pero si no me equivoco, él utilizaba Elementor, pues a lo mejor desde Elementor lo puedes configurar, o si utilizas un plugin, pues a lo mejor lo puedes configurar, pero si no tendrás que hacerlo por CSS, tendrás que decirle los inputs tienen que tener un tamaño de letra de 16 píxeles y así lo solucionas. Ya digo, tenéis un vídeo en la zona código, lo dejo enlazado. Cómo evitar zoom en móvil al pulsar en un campo de un formulario. Perfecto, dejamos la pregunta de Denny. Vamos con la 4 de Manuel, que va sobre cómo mostrar una página de Facebook en su web. ¿Buenas Gonzalo, qué tal? Espero que hayas disfrutado de las vacaciones. ¿Si has tenido mi consulta es la existe algún plugin gratuito que conecte un WordPress con la página de empresa de Facebook por el cual en la propia página web puedas ver las publicaciones que se hacen en esa página de Facebook, pero que se vean las imágenes y el texto? Un saludo y muchas gracias. Emanuel lo que quiere hacer es mostrar un widget, una zona de su web que vaya publicando el feed que él tiene en su página de Facebook y tienes dos opciones, hacerlo manualmente desde un configurador que tienen en Facebook, que os dejo el enlace, o utilizar un plugin como Social Page Feeds, que es uno de los más populares y que es gratuito. Así que las dos opciones, en el caso de si lo hacéis desde el configurador de Facebook, es como crear tu propio plugin y después te dan como un código, entonces tú lo vas rellenando, vas diciendo mi página es esta y tienes algunas opciones de lo que quieres configurar y al final del proceso te dan ese código de incrustación, tú lo copias, tienes que irte a tu web y donde lo quieras poner necesitas tener una zona de HTML. Si usas el editor de bloques, pues simplemente añade un bloque de HTML, si usas el editor clásico de WordPress, pues pásate a la pestaña de HTML, si usas un constructor visual, pues añade un widget o lo que sea de HTML. Con estas cosas cuidado también con el rendimiento, ¿Vale? Porque al final estás cargando recursos de fuera, recursos directamente desde Facebook. Entonces yo no lo pondría muy arriba en la página y si no lo necesitas no lo pongas por ejemplo en un footer, porque en un footer se va a cargar en todas las páginas de tu web, si no, si no hay más remedio, hazlo así, pero si no, yo lo pondría solo en una página y me aseguraría de que solo se cargaran las cosas de Facebook en esa página. Que esto explico en el curso de WPO, que no lo había dejado enlazado, pero me lo apunto para dejarlo enlazado cómo puedes hacer que ciertos recursos, ciertos plugins, sólo se carguen en páginas concretas y no se carguen en toda tu web. Sí que esto es importante también desde el punto de vista de la optimización, el rendimiento de carga. Bien, nos vamos con la pregunta 5 y última que es de Xander y que va sobre cómo conseguir un checkout minimalista en IDD. Hola Gonzalo, tengo una duda sobre el curso de EDD y es que no sé cómo dejar mi checkout como el que tienes tú, con muy pocos campos, en columnas y sin etiquetas en muchos casos. ¿Cómo lo has hecho? Bueno, esta pregunta de Xander, bueno, primero es Easy Digital Downloads, es un plugin para vender descargas, aunque yo lo utilizo para vender pues el acceso a la membresía porque lo combino con otros plugins, con Content Restriction, con IDD Recurrent Payments, que es para los pagos recurrentes y entonces pues se parece mucho, mucho a Restrict Content Pro en mi caso, tal y como lo tengo configurado. Pero bueno, deciros que tenéis el curso de IDD si queréis vender productos digitales o incluso servicios, en el propio curso explico cómo puedes hacer cuando quieres vender servicios además de productos digitales o en lugar de productos digitales. Y atendiendo la pregunta de Xander, a ver, yo lo tengo bastante minimalista. ¿Qué ocurre? Yo por ejemplo, no muestro datos de facturación, no muestro por ejemplo el menú de navegación de la web en la parte de lo que es el carrito donde sale el propio producto, no muestro la palabra producto, simplemente el nombre del producto, no muestro la palabra borrar, sino que simplemente tengo una X. Luego lo tengo un poquito personalizado desde el punto de vista de la estética. Antes lo tenía por columnas cuando me escribió Xander, ya no, porque prefiero tenerlo hacia abajo porque no sé, me he dado cuenta que creo que es mejor experiencia, pero simplemente ahora mismo lo tengo abierto, pone finaliza tu compra, pone el total de lo que te cuesta suscribirte. He marcado más claramente la opción de iniciar sesión porque había un problema que imagínate que alguien estuvo suscrito hace un año, quería suscribirse de nuevo y empezaba a rellenar sus datos como para crear una cuenta y después se daban cuenta, nunca mejor dicho, de que ya la tenían. Le ponía un aviso de este correo ya está en uso, usa otro o lo que sea. Entonces la gente se liaba y ahora tengo bien claro arriba marcado con un fondo diferente que el fondo del checkout que si te has registrado o has comprado antes en la web inicia sesión he editado este texto para que se muestre así Y luego en los campos para comprar si te vas a registrar pongo email y además pongo entre paréntesis revísalo bien porque si alguien pone mal su email luego yo no me puedo comunicar con él y es el email que está relacionado con con su cuenta, nombre de usuario, contraseña y repetir contraseña, ya está. Y después directamente los datos de pago. Entonces ¿Qué modificaciones tengo yo hechas? Bueno, por un lado desde los ajustes de ID tengo quitados los campos ya digo de facturación ¿Por qué? Porque yo lo que hago es que después de que la persona se suscribe, si necesita factura me escribe con sus datos y yo desde mi programa de facturación que es factura directa ya le creo el contacto y creo ya pues que se vayan generando mes a mes las facturas y se las vaya enviando al cliente. ¿Por qué hago esto? Porque la mayoría de los que me compran la suscripción no necesitan factura y como tal pues no me dan sus datos, entonces yo a nivel contable lo que hago es que lo meto en una factura de varios y ya está. ¿Si este no es tu caso tienes que mostrar la parte de la facturación vale? Una cosa importante es que si quieres que no se muestren los datos de facturación tienes que desmarcar la parte del IVA, entonces el IVA no se va a ver desglosado en el carrito, esto tenlo en cuenta y además tendrás que añadir, si quieres recoger los datos completos tendrás que añadir el campo de ZIF en Eddy. Esto puedes hacerlo por ejemplo con el plugin de Checkout Fields Manager, yo tengo un vídeo de la zona código donde explico cómo puedes hacerlo por código, en fin, hay varias formas de lograrlo. Después tengo modificado por CSS algunas cosas como he quitado u ocultado algunas zonas que no me interesan, sobre todo de la parte de donde se muestra el propio producto. He desactivado por PHP también algunos campos. He modificado cadenas de texto, por ejemplo en la parte de email que pongo revísalo bien, he modificado la cadena de texto, esto lo hago con el plugin loco Translate, esto en el curso de WordPress Intermedio os explico cómo podéis hacerlo. Así que en definitiva, es una combinación de CSS con algún que otro trocito de código de PHP para desactivar, pero vamos, casi que con CSS podéis lograr un aspecto muy similar al que tengo yo. Y ya si lo combináis con una forma de modificar cadenas de texto y con los propios ajustes de EDD, pues ya lo tendríais. Y además, en el caso de que queráis añadir campos extra y demás, pues tenéis, ya digo, el plugin de IDD Checkout Fields Man. Es de la parte de pago, ya sabéis que yo tengo un servicio de activación de licencias, así que si necesitáis los addons de pago de EDD lo podéis poner por ahí. No lo tengo visible la parte de edd porque los de IDD se molestaron, aunque no tienen por qué porque al final yo tengo la licencia comprada, pero bueno, se molestaron. Así que no lo tengo de forma visible, pero si marcáis la palabra otro o me escribís primero, pues os digo cómo hacerlo. Bien, importante para esta pregunta os dejo enlaces del curso de IDD, del plugin que os digo, de IDD Checkout Fields Manager, de mi servicio de activación de licencias, de cómo ocultar elementos por CSS y de la clase de cómo modificar cadenas de texto. ¿Sí? Fantástico. Pues hasta aquí las cinco preguntitas. No me voy sin antes recordarte que si quieres soporte como este, directamente en tu bandeja de correo puedes acceder a él si eres miembro en Gonzalo Navarro Es. Y no sólo eso, sino que además tendrás acceso a los más de 80 cursos ya publicados sobre creación y gestión de webs con WordPress, los vídeos cortitos de la Zona Código y la comunidad privada en telegram. Todo por 10 euros al mes. Así que ni te lo pienses, toda la info en Gonzalo Navarro Es. Nada más, como siempre, muchísimas gracias por estar ahí, por compartir este podcast, por suscribirte y vamos a por el episodio 400, que ya es la semana que viene. Nos seguimos escuchando. Adiós.