457 | Diseñar en WordPress con la IA es una pasada

En el episodio 457 de WordPress semanal te cuento qué te ofrece la Inteligencia Artificial para diseñar o maquetar tus páginas webs con WordPress, así como las herramientas que he probado para ello y que ya te digo, son una pasada. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 457 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Este es el primer episodio de 2025, de hecho este episodio sale el día 1 de enero de 2025, así que si me escuchas alrededor de esta fecha, pues feliz año y si no, pues también feliz vida en general. Hoy vamos a hablar de la Inteligencia Artificial aplicada al diseño o a la maquetación de páginas webs con WordPress, cómo nos va a facilitar la vida y qué herramientas he utilizado yo que realmente sirven, que son buenas y que no son los típicos plugins o las típicas herramientas que te ponen una cosita de Inteligencia artificial para poder decir que su servicio usa Inteligencia Artificial. En estos casos vamos a ver cómo de verdad la IA puede mejorar nuestro flujo de trabajo a la hora de diseñar o configurar el aspecto de nuestras webs con WordPress. Pero antes, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues hay nuevo vídeo de la zona código y en él te enseño a ocultar el precio de los productos para los usuarios que no estén registrados en WooCommerce. Esto es algo que mucha gente pide, hay plugins que lo hacen y puede ser muy útil, pues si solo vendes a gente que previamente se ha tenido que dar de alta, puede ser que sea una web para proveedores o que tú lo tengas así montado. Entonces con un poquito de código, sin necesidad de añadir plugins ni nada, que lo puedes hacer también con plugins, pues logras este resultado. La zona código es ese lugar donde yo te muestro un trocito de código y a través de un vídeo te explico cómo lo puedes copiar y pegar en tu web para que funcione. Es decir, usas código sin saber código. Más novedades. El curso de cómo diseñar en WordPress con inteligencia artificial. Este es un curso un poco diferente al resto que hay en la plataforma, porque voy sacando vídeos sobre cómo aprovechar las herramientas de Inteligencia Artificial de distintos planes de distintos teams, de distintos constructores, de distintas herramientas. Entonces, pues ahora mismo tienes una clase de cómo diseñar webs con el tema Astra y todas sus herramientas de Inteligencia Artificial. Tienes otro vídeo de cómo diseñar webs con el tema Cadence y todas sus herramientas de inteligencia Artificial. Tienes otro sobre Elementor AI, es decir, cómo utilizar las características de inteligencia Artificial de Elementor tanto para su parte gratuita como para la Pro. Esto vale para las dos, lo que pasa pues que dependiendo de si tienes la versión gratuita o la versión Pro, pues puedes acceder a unas características u otras y cómo hacer lo propio. Otra clase, cómo hacer todo esto también con Divi Builder o con el tema Divi y su constructor, también sus características de inteligencia Artificial. Estas son las clases que hay hasta el momento y además lo que he hecho es, como yo tengo un curso completo de Astra, pues esa clase está añadida al curso de Astra. Como tengo un curso completo de Kadence, pues también, como tengo uno de Elementor, pues también. Y como tengo uno de Divi, pues también. Pero quería tener este curso donde iré publicando todo lo relacionado con el diseño y la inteligencia artificial. Así que ya lo tienes disponible junto al resto de más de 90 cursos que ya tienes publicados para crear y gestionar webs con WordPress de forma profesional desde cero hasta cosas tan potentes como la Inteligencia Artificial. Ya sabéis que todos los contenidos formativos están incluidos en la membresía, solo tienes que ir a GonzaloNovarro es y ahí tienes todo lo que incluye. También vas a ver que hay una sección de recursos donde publico talleres en vídeo, donde publico plugins desarrollados por mí para que puedas instalar en tu web, Tienes acceso a soporte conmigo personalizado desde tu cuenta y además puedes entrar en la comunidad privada de Telegram para intercambiar dudas, opiniones o lo que quieras con el resto de miembros. Fantástico. Pues una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama Chartify y que te permite generar gráficos interactivos introduciendo datos manualmente o vinculándolo a una hoja de Google Sheets o consultando una base de datos. Así que si por lo que sea necesitas generar gráficos, pues que queden chulos, que queden bonitos y que además sean interactivos, este es tu plugin. Venga, pues ahora sí, vámonos con el tema central del episodio, Cómo diseñar en WordPress con la Inteligencia Artificial y por qué es una auténtica maravilla. Y te voy a hablar de herramientas concretas ahora en un segundito. Pero antes vamos a ver un poco un repaso de cómo la IA puede facilitarte la vida a la hora de o bien generar diseños o modificarlos, o ayudarte si tú ya previamente tienes un diseño, cómo te puede ayudar a hacerlo realidad en tu web. ¿Qué podemos hacer con la IA desde este punto de vista? Bueno, podemos generar de forma automática diseños desde cero. Podemos crear estructuras de páginas completas basadas en tus objetivos o tu nicho. Y esto casi siempre va a estar basado, ya te lo digo, en algo que tú escribas, algo que tú le digas a la IA o en algo que la Ia detecte. ¿Qué más vas a poder hacer gracias a la IA? Pues vas a poder hacer una personalización digamos dinámica o automática, como por ejemplo ajustar colores, ajustar tipografías o estilos y todo de forma automática para que tenga una coherencia visual a lo largo de tus diseños. También todo lo que diseñes con la IA va a estar adaptado para móviles y para dispositivos más pequeños, y si no lo está, se lo puedes decir. Incluso dependiendo de qué herramienta uses, te puede sugerir mejoras para que se vea todavía mejor en dispositivos móviles. Por supuesto, la IA te va a permitir generar contenido visual, generar imágenes personalizadas o incluso optimizarlas directamente desde el editor que estés usando en ese momento, hacerle retoques, quitarle el fondo a una imagen, todo ello directamente cuando estés editando en WordPress o diseñando desde WordPress. También, dependiendo de la herramienta, te puede dar sugerencias en cuanto a experiencia de usuario o en cuanto a accesibilidad. Te puede recomendar mejores ubicaciones para elementos interesantes de tu web y este tipo de cosas. Además te facilita en términos de automatización de estilos, muchas cosas. Puedes aplicar paletas y configuraciones globales sin que tengas que ir manualmente, que esto un poco ya lo teníamos antes, pero al final con la inteligencia artificial está mejor optimizado. Una cosa súper chula es que puedes generar código, por ejemplo CSS o HTML directamente desde editores. Es decir, no es como irte a Chat GPT y decirle necesito un código para esto y luego tú te vas a tu web, tienes que saber dónde ponerlo, tienes que saber cómo aplicarlo y aquí no, aquí en zonas específicas donde tú puedas poner código en un constructor o en un maquetador o lo que sea, te puede dar el código, ya tú se lo explicas con palabras y te pone el código y te funciona. De hecho, en el curso vemos ejemplos de esto. Luego, en términos de los textos y demás, que al final no son de diseño, pero son muy útiles para poder presentar un diseño, para hacerte una idea de cómo quedaría un diseño con contenido real, pues puedes hacer adaptar textos, generarlos, editarlos, modificarlos, traducir a distintos idiomas o para distintas audiencias, y todo ello desde la propia zona donde estés diseñando tu web. Perfecto, todo esto es conceptual, es lo que podemos hacer. Pero ¿Con qué lo hago? ¿Qué puedo coger y utilizar e instalar en mi web para aprovechar esto? Bien, yo te voy a hablar de las herramientas que tengo muy probadas, de hecho son las que he utilizado para este curso que te digo de cómo diseñar gracias a la Inteligencia Artificial en WordPress. Entonces los tengo muy controlados y por eso te puedo hablar de ellas. Pero hay otras opciones, otros constructores, otros temas que traen características y que seguramente sean muy similares. Por ejemplo, si hablamos del uso de la Inteligencia Artificial en constructores visuales como por ejemplo Elementor o Divi, pues son muy potentes. Y aquí te voy a hablar de lo que pueden hacer los dos porque son muy parecidos. En el caso de Elementor tenemos Elementor AI, que es una suscripción aparte que tú contratas, ya sea que tengas Elementor Pro o la versión gratuita de Elementor, la parte de la IA se contrata aparte y con Divi igual. Con Divi tú contratas aparte una suscripción si quieres utilizar sus características de Inteligencia Artificial y ya lo que hacen es que en la actualización más reciente del plugin que tengas, ya se te abren las opciones de Inteligencia Artificial. Y como te digo, ambos builders incorporan características muy similares en cuanto a lo que puedes hacer con la Inteligencia Artificial. Por ejemplo, generar diseños de páginas completas. Esto es algo que Elementor sacó antes que Divi, pero que Divi lo tiene ya también. Y básicamente es a través de un prompt, es decir, a través de un texto que tú le dices a la máquina en un formulario y tú rellenas el contexto de tu web o la información acerca de tu web o de la página que quieres crear en ese momento. Por ejemplo, quiero crear una página de inicio con una sección Hero a pantalla completa y que tenga una llamada a la acción. Después quiero crear una sección donde se muestren mis servicios, diseño web, desarrollo web y mantenimiento. Después quiero crear una sección con valoraciones de mis clientes donde se vean estrellitas. Después quiero crear un formulario de contacto y por último quiero crear. Yo que sé. Pues esto te lo genera, ¿De acuerdo? Y pues dependiendo, te puede dar como varias opciones, otro puede generar y luego tú puedes ir modificando sección a sección. Pero no sólo esto, sino que tú puedes estar en un propio diseño ya generado por la inteligencia artificial o en otro diseño habiendo utilizado por ejemplo una plantilla prediseñada y le puedes decir générame otra sección debajo de esta que sea una llamada a la acción para que la gente se apunte a mi newsletter y te lo va a generar, te va a dar cuatro opciones, puedes generar opciones diferentes y todo esto en base a tus colores corporativos, a la tipografía que tú tengas y demás. ¿Qué más cosas puedes hacer? Generar contenido, Crear contenido, es decir, generar textos automáticamente para diferentes elementos, para títulos, para descripciones, para botones, ajustar el tono de ese contenido, el estilo según el público, pues que sea formal, que sea amigable, que sea persuasivo. Crear ese contenido pensando en el SEO, pues ahí ten en cuenta estas palabras claves y me lo generas. Utiliza estas palabras clave en el texto que vayas a generar e incluso puedes hacer que se genere en base a un prompt, es decir, a unas instrucciones que tú le digas o que lo genere automáticamente en base al contexto que ya hay en esa página en concreto. DIVI incluso por ejemplo tiene, si por ejemplo pones algún elemento, un bloque de Divi que incluye título, imagen y texto, tú le puedes dar a generar automáticamente y entonces te coge el contexto de esa página, te coge de qué va esa página y te genera un título, una imagen y un texto en función de ello. Si no puedes ir a elemento a elemento, si la imagen por ejemplo no quieres que te la genere automáticamente con inteligencia artificial la puedes subir tú y sin embargo el título y la descripción sí generarlo. Hablando de imágenes, también son muy potentes estos constructores, puedes como digo ya crear imágenes directamente desde el editor, desde el builder, ya digo adaptadas a un contexto específico o en base a un prompt que tú le digas. Y luego también puedes modificar sus estilos visuales específicos, puedes ponerlo modo ilustración modo fotografía, que sea más realista, menos realista y editarlo. Tienen herramientas que van incorporando, cada vez van sacando más, en las que imagina que te genera una imagen de un plato de comida, pero no te gusta una cosa que pone, pues tú la puedes marcar y dices bórrame esta cosa o quítame el fondo de la imagen o incluso subir tú una imagen y decirle que te genere una en base a esa imagen. Y además todo esto cada vez van sacando como digo, más herramientas. Otra parte muy chula es lo que te comentaba antes de que puedes generar CSS y estilos directamente ahí. Por ejemplo Elementor Pro y Divi también tiene una sección que tú puedes, yo que sé, imagínate a una sección en tres columnas con imágenes y demás, pues tú puedes aplicar CSS, escribir CSS ahí, porque hay veces que no te llega con las características del constructor. Pues la parte CSS también tiene una opción de inteligencia artificial, entonces tú le das y le dices générame un código CSS para que esta imagen cuando se pase el ratón por encima pegue botecitos y cuando quites el ratón deje de votar. Tú le pones eso y te genera el código, puedes ver si está funcionando, puedes ver si efectivamente al pasar por encima esa imagen vota y después deja de votar y si funciona, le das a OK y te lo pone, te aplica el código, te lo genera y te lo pone en esa sección de código CSS. Esto es una pasada, de hecho incluso Elementor tiene una librería donde te ponen un montón de ejemplos y te ponen prompts, es decir, te ponen esa instrucción que tú le tendrías que dar para lograr ese resultado. Y en general me gusta mucho esta noción de la inteligencia en el diseño porque va aprendiendo todo el rato de lo que hay en tu web, entonces continuamente puedes ir mejorando y cada vez que tengas más contenido en una página o en tu web en general, la IA lo va a entender mejor y conforme vayas generando partes nuevas o textos nuevos o diseños nuevos, cada vez lo va a hacer mejor según el estilo que tenga esa web. Esto en cuanto a constructores, que es básicamente en esencia lo que te permiten hacer pues Elementor, Divi y seguramente otros que ya digo, yo no he probado tan a fondo que también incluyan la inteligencia artificial. Pero ¿Qué pasa con los que no usamos constructores o los que no solemos usar constructores externos? Podemos aprovecharnos de la Inteligencia Artificial para diseñar nuestras webs sí podemos y además debemos. Y por ejemplo, Astra y Cadence, que son de los temas que en la comunidad, por ejemplo, más usamos, o que yo también utilizo, también tienen estas posibilidades. ¿Cómo puedo hacerlo? ¿Cómo podemos aprovechar la Inteligencia Artificial con estos temas que son, ya digo, de los que más me gustan porque ofrecen muy buen rendimiento, son livianos, pero además muy potentes en cuanto a posibilidades de diseño? Bueno, en ambos casos, tanto si usas Astra como tema o usas Cadence, para poder aprovecharte de la IA, necesitas su constructor, al menos para poder sacar el mayor provecho posible, que en el caso de Astra, el constructor se llama Spectra, y en el caso de Kadence, su constructor o su mejora para el constructor se llama Cadence Blocks. Y también vas a necesitar, realmente esto es lo más esencial, su plugin o el plugin de cada uno de plantillas prediseñadas. Astra tiene uno que es gratuito y Kadence tiene otro que también es gratuito. Tienen parte pro, pero digamos que la parte básica es gratuita. Entonces, con estos plugins de plantillas, ya digo, tanto en Astra como en Kadence, tú vas a poder hacer lo de siempre, es decir, mirar entre una lista de plantillas ya prediseñadas y seleccionar una para partir desde ahí, ya sea en una página concreta o un kit de plantillas para toda tu web. Pero con la Inteligencia Artificial puedes decir, igual que comentábamos antes con los constructores, pues aquí puedes darle un prompt, puedes decirle, mi web es un restaurante gourmet en Madrid, donde hacemos comida de vanguardia, no sé qué, no sé cuánto, le das un contexto, le das información acerca de tu web o acerca de ti o de lo que quieras, depende de lo que vaya a ser ese proyecto web, y en base a eso te va a dar propuestas generadas por la Inteligencia Artificial, te va a generar el diseño, pero también te va a generar el texto, con lo cual es mucho más fácil hacerte una idea de si es ese diseño te gusta, porque ya incluye el texto. Bueno, y las imágenes, que tampoco te lo he comentado, pero también las imágenes van a estar relacionadas. De hecho, podrías elegir qué imágenes utilizar si no quieres que las genere la Inteligencia Artificial, y en base a eso ves todas las plantillas que te ha generado. Incluso en la vista previa puedes cambiar el color, la tipografía, para hacerte una idea mucho más clara de si ese es el punto de partida que necesitas. Esto, ya digo, lo puedes hacer con el plugin específico de plantillas prediseñadas que traiga o que se vincula, digamos con Astra o que se vincula con. ¿Qué pasa con el resto de cosas, eso de modificar textos y demás? Bueno, en el caso de estas herramientas también lo puedes hacer y esto se haría desde el plugin que mejora el constructor, el plugin, lo que hace más potente el editor nativo de WordPress, que en el caso de Astra se llama Spectra y en el caso de Kadence se llama Kadence Blocks. Entonces ahí incorporan esas características de inteligencia artificial. No son tan potentes a nivel de generación de diseños como lo son con los constructores que te he comentado anteriormente, pero sí que lo son mucho para mejorar textos, incluso para generar también código. Por el momento no lo son con las imágenes y están sobre todo, como digo, enfocado a los contenidos, a mejora de contenidos, generación de contenidos, pero no tanto con el diseño. La parte del diseño está más en esas plantillas prediseñadas desde cero y no tanto en creación o generación de secciones individuales. Aunque como digo, todo esto va avanzando mucho y lo puedas llegar a tener. Lo que sí que incluyen es porque tú desde un diseño de una página tú puedes añadir más plantillas tanto de secciones individuales como de páginas enteras. Entonces puedes aprovechar esa generación inicial que hizo la inteligencia artificial de diseños para también coger secciones que van a tener también tus colores, que van a tener también un enfoque para el tipo de web que tú querías crear e incluirlo. Es un enfoque un poco diferente, más estilo plantilla típica, pero también ha sido generado con la inteligencia artificial, con lo cual en ese sentido va a estar muy alineado con eso que tú ya habías generado previamente. Venga, vamos con unas conclusiones finales sobre esto de usar la IA en el diseño con WordPress. Lo primero es que esto va rapidísimo y en unos meses, esto que he comentado, seguramente ya se pueden hacer muchas más cosas. Lo segundo, yo usaría esto, hay gente muy reticente, pero al final toda esta tecnología facilita muchísimo el trabajo en varias áreas de la creación web. Ahora todo el mundo tiene acceso a ella. Si por ejemplo te dedicas a hacer webs o tienes un proyecto propio, al final le vas a tener que dar tu toque personal. Sí que es cierto que hasta ahora uno podría decir, vale, tenemos plantillas prediseñadas, todo el mundo usa plantillas prediseñadas. Es verdad, casi que ahora es más fácil diferenciarte porque con la inteligencia artificial, la generación de cosas, aunque realmente se parecen cuando se generan los diseños, pues al final se usa un mismo estándar y en general los diseños de las webs se parecen en cuanto a estructura y demás. Pero sí que creo que hoy más que nunca la parte personal es la que te puede diferenciar. Ahora utiliza la IA para automatizar, para retocar, para que te sugiera cosas, para partir de una buena base, para ahorrarte tiempo, muchísimo, muchísimo tiempo. Y ya el resto, tu toque personal, el contenido, que no es lo mismo generar webs de nicho a mansalva para después ponerle anuncios, que generar una web de un negocio, un proyecto real o algo donde tú divulgues, publiques contenido, eso ya es cosa tuya y ahí es donde está lo importante. Fantástico. Recuerda que tienes el curso completo, o si prefieres, por ejemplo, quieres hacer el de Elementor Pro o el de Elementor y también ver la parte de la Inteligencia Artificial, voy a incluir esa clase ahí también en ese curso. Si quieres ver el de Divi, pues también voy a incluir esa clase. Lo mismo con Astra y lo mismo con. Pero iré ampliando este curso conforme yo vaya descubriendo, vaya utilizando más herramientas o básicamente conforme me las vayáis pidiendo, que es un poco lo que suelo hacer en la comunidad, en Telegram, pues seguramente a raíz de esto alguien me diga, oye Gonzalo, ¿Y esto que tiene? Inteligencia Artificial. Entonces si veo que a la gente le gusta, también me lo curro, me lo estudio y público curso al respecto. Tenéis todos los enlaces de lo que he comentado en las notas del episodio. La puedes ver en tu aplicación de podcast o en la web directamente en GonzaloNavarro es 457, que es el número de este episodio, GonzaloNavarro es 457, y si no, pues vas a GonzaloNavarro es y ahí tienes toda la información de todos los contenidos que incluyen la membresía. Nada más por este episodio, nos seguimos escuchando. Adiós.