Hace unos días publiqué el tutorial Crea increíbles landing pages cinematográficas con Claude y Higgsfield, y llévalas a WordPress, WooCommerce y Divi, donde convertimos una landing con película por scroll en un plugin de WordPress.
Después de verlo, varios de ustedes me hicieron la misma pregunta: ¿cómo puedo cambiar los textos, las imágenes o los botones sin tener que editar el código?
Es una pregunta muy válida. Si entregas una landing a un cliente, lo normal es que quiera actualizar una frase, un botón o una foto sin depender de ti cada vez. Y si la usas para tu propio negocio, tampoco quieres abrir archivos HTML cada vez que cambia una promoción.
Por eso preparé esta segunda parte. En este tutorial te mostraré cómo agregar campos personalizados a tu landing page con Claude, para que puedas editar todo su contenido desde la misma página de WordPress donde pegaste el shortcode, sin tocar código.
¿Qué aprenderás?
En este tutorial te mostraré cómo convertir una landing con contenido fijo en una página completamente editable desde WordPress, usando Claude y un solo prompt.
Tu landing seguirá viéndose y funcionando igual, pero ahora cada texto, imagen y botón se podrá cambiar desde el administrador de WordPress, como cualquier otra página de tu sitio.
Campos personalizados dentro de la misma página
La idea es muy sencilla. Al editar la página donde pegaste el shortcode, aparece una nueva caja llamada Contenido de la landing, organizada por secciones en el mismo orden que el sitio.
Ahí encontrarás un campo para cada elemento de la página. Escribes el nuevo texto, eliges una imagen de la biblioteca de medios, guardas y la landing se actualiza.
Hay tres detalles que hacen que este método sea muy cómodo:
- Si dejas un campo vacío, se muestra el contenido original. Así no se rompe nada y solo cambias lo que necesitas.
- Cada campo muestra el valor actual como referencia, para que sepas exactamente qué vas a reemplazar.
- Cada página guarda su propio contenido. Puedes usar la misma landing en varias páginas con textos distintos, por ejemplo una por producto o por campaña.
Además, la caja solo aparece en las páginas que usan el shortcode del plugin, así que no ensucia el resto de tu sitio. Y todo funciona sin ACF ni otros plugins de campos personalizados.
Funciona con cualquier landing page
Aunque en el video uso como ejemplo la landing de OBSIDIANA que creamos en la primera parte, este método no está limitado a ese proyecto ni a Higgsfield.
El prompt que te comparto es genérico. Sirve para cualquier landing o página independiente que tengas como plugin de WordPress con shortcodes: una creada con Higgsfield, una generada con ChatGPT o Claude, o una que hayas programado tú mismo.
No necesitas escribir uno por uno los campos que quieres: el método se adapta a las secciones de cada sitio, y en el tutorial te explico cómo funciona y cómo aplicarlo a tus propios proyectos.
¿Qué puedes editar?
Claude crea el tipo de campo adecuado para cada elemento de la página:
- Textos: títulos, frases, párrafos, etiquetas y textos de los botones.
- Enlaces: la URL de cada botón, incluidas las anclas de la propia página y el enlace que abre el carrito.
- Imágenes: con el selector de la biblioteca de medios de WordPress, vista previa y botón para quitarlas.
- Listas repetibles: capítulos, tarjetas, menús, testimonios o filas de datos que puedes agregar, quitar y reordenar.
- Variantes: si tu landing tiene selectores, como sabores, colores o planes, también puedes editar sus textos y descripciones.
- Videos: en una opción avanzada puedes reemplazar los videos de escritorio y móvil con sus posters.
Si tu landing está conectada a WooCommerce, los precios y las variaciones se siguen administrando desde la tienda. Así el precio que ve tu cliente siempre coincide con el del carrito.
De OBSIDIANA a CACAOTL
Para el ejemplo del tutorial cambié el nombre de la marca de OBSIDIANA a CACAOTL, inspirado en la palabra náhuatl para el cacao.
Lo cambiamos en el hero, en el encabezado, en la etiqueta de la tableta y en el pie de página, cada uno desde su propio campo. Es un buen ejemplo de lo que significa tener el control de cada elemento, sin abrir un solo archivo.
Aprende el proceso completo paso a paso
En el tutorial te comparto el prompt que uso y te explico paso a paso cómo aplicarlo a tu plugin, actualizarlo en WordPress y editar la landing desde la página, cambiando textos, imágenes y elementos de las listas.
El prompt genérico está dentro de la lección, en la pestaña Tutoriales, para que lo uses con tus propias landings.
Si todavía no has visto la primera parte, te recomiendo empezar por ella: ahí creamos la landing con Higgsfield y la convertimos en plugin.
👉 Ver la primera parte del tutorial
¿Cómo acceder al tutorial?
Este tutorial forma parte de Tutoriales Exclusivos de Academia OV DIVI, por lo que está disponible únicamente para los suscriptores activos de esta membresía.
Si ya eres suscriptor de Tutoriales Exclusivos, puedes acceder directamente a la lección y copiar el prompt desde la pestaña Tutoriales.
👉 Ver tutorial y obtener el prompt
Si todavía no tienes una suscripción a Tutoriales Exclusivos, puedes conocer la membresía y descubrir los demás recursos disponibles desde el siguiente enlace:
👉 Conocer Tutoriales Exclusivos de Academia OV DIVI
Una landing que tu cliente puede editar
Con esta segunda parte quise cerrar el ciclo: en la primera creamos una landing espectacular y la llevamos a WordPress, y ahora la hacemos fácil de mantener.
Me gusta mucho la idea de que puedas entregar a tus clientes una página con efectos de alto nivel y, al mismo tiempo, la libertad de actualizar su contenido como cualquier otra página de WordPress.
Gracias a todos los que me escribieron con esta pregunta. Muchos de los mejores tutoriales nacen de sus dudas, así que sigan compartiendo lo que les gustaría aprender.
¡Nos vemos en el tutorial! 🚀
0 comentarios