¿Has visto esas páginas de producto donde, al hacer scroll, una película avanza contigo y te cuenta la historia del producto capítulo por capítulo? Son las landing pages que usan marcas como Apple para presentar un nuevo lanzamiento, y durante mucho tiempo parecían reservadas para equipos con presupuesto de agencia.
Crear algo así implicaba grabar o animar el video, cortarlo en fotogramas, programar la sincronización con el scroll y, después, lograr que todo funcionara bien en el celular. Y si además querías vender el producto, faltaba conectarlo con una tienda.
En este nuevo tutorial de la Academia OV DIVI te mostraré cómo crear una landing page cinematográfica de producto con Claude y Higgsfield, y cómo llevarla a WordPress, con WooCommerce y un carrito lateral, lista para usarse en Divi.
Del primer tutorial exclusivo a hoy
Este tutorial tiene un significado especial para mí. El 21 de julio de 2020 publiqué el primer tutorial de Tutoriales Exclusivos: Cómo crear un efecto de animación tipo AirPods Pro de Apple con WordPress y Divi.
En aquel ejercicio exporté desde After Effects cada fotograma de la animación y los fui mostrando uno por uno conforme avanzaba el scroll. Funcionaba, y nos sirvió para entender la lógica de este tipo de páginas, pero producir la animación, exportar los fotogramas y optimizarlos llevaba mucho trabajo.
Desde ese año al día de hoy las cosas han cambiado muchísimo. Ahora la inteligencia artificial genera la película completa con calidad cinematográfica, el sitio la sincroniza con el scroll a partir de un video optimizado, con su versión para celular, y todo llega a WordPress con una tienda funcionando.
Es el mismo efecto que hicimos hace más de seis años, pero con mucha mejor calidad y en una fracción del tiempo.
¿Qué aprenderás?
En este tutorial veremos el flujo completo, desde la idea hasta la página funcionando en WordPress con productos reales.
El proceso es el siguiente:
- Conecta Higgsfield con Claude.
- Instala el skill ov-higgsfield-divi que preparé para la academia.
- Describe tu producto, tu paleta y tus tipografías en un solo prompt.
- Revisa la cotización de créditos y apruébala antes de generar.
- Aprueba el diseño en la vista previa de Higgsfield.
- Convierte el sitio en un plugin de WordPress.
- Instala el plugin, crea los productos en WooCommerce con un clic y monta la landing en Divi con un shortcode.
¡Y listo!
Tendrás una landing cinematográfica con película por scroll, una tienda conectada a WooCommerce y un carrito lateral, todo dentro de tu propio WordPress y sin depender de Higgsfield después de la entrega.
Diseña tu landing en Higgsfield con Claude
Higgsfield es una plataforma de inteligencia artificial para generar imágenes y video, y también cuenta con un constructor de sitios web. Al conectarla con Claude, ya no tienes que saltar entre herramientas: le describes lo que quieres y Claude se encarga de generar los recursos y construir la página.
Para el tutorial creé OBSIDIANA, una marca de chocolate de cacao de origen. En el prompt le indiqué a Claude la paleta de colores, las tipografías, las secciones que necesitaba y los seis capítulos que debía contar la película: desde la mazorca madura en el árbol hasta la tableta terminada.
A partir de ahí, Claude genera las imágenes del producto, crea una sola toma de video continua y la corta en segmentos sincronizados con el scroll. Así la película avanza y retrocede con el movimiento de tu mano, sin saltos entre capítulos.
Tú decides cuántos créditos gastar
Una de las cosas que más me importaba al preparar este flujo era tener control sobre el presupuesto. Las generaciones de imágenes y video en Higgsfield consumen créditos, así que Claude primero consulta el precio de cada modelo, te presenta una cotización y espera tu aprobación antes de generar nada.
En el caso de OBSIDIANA le di un tope de 80 créditos y el sitio completo, con 14 imágenes y la película, costó 53.5. Los cambios de textos, colores u orden de las secciones no cuestan créditos.
De Higgsfield a WordPress con un solo skill
Aquí viene la parte que más me emociona. Un sitio de Higgsfield funciona sobre su propia plataforma, así que para usarlo con un cliente en WordPress normalmente tendrías que reconstruirlo desde cero.
Para resolverlo creé ov-higgsfield-divi, un skill para Claude que convierte cualquier sitio creado en Higgsfield en un plugin de WordPress listo para Divi. Sirve para cualquier diseño: una tienda, una landing de producto, un sitio corporativo o una página tipo storytelling.
Cuando le pides la conversión, Claude:
- Hace el inventario del sitio: secciones, imágenes, videos, tipografías, productos y precios.
- Te propone un plan antes de construir: nombre del plugin, shortcodes, productos y a dónde lleva cada botón.
- Construye el plugin con todos los recursos dentro, sin depender de Higgsfield.
- Lo prueba en un WordPress real con WooCommerce: agrega productos al carrito, cambia cantidades y llega hasta el checkout.
- Compara el resultado con el sitio original en escritorio y en móvil.
- Te entrega un .zip con un archivo de instrucciones para instalarlo.
Un shortcode para todo, o uno por sección
El plugin incluye un shortcode que imprime la landing completa y uno por cada sección. Así puedes pegar toda la página en un solo módulo de Código de Divi, o mezclar las secciones con tus propios módulos.
Cualquier botón de Divi con el enlace al carrito abre el carrito lateral, así que también puedes integrarlo en el resto de tu sitio.
Lo que incluye la landing de OBSIDIANA
Para que el ejemplo fuera lo más completo posible, la landing de OBSIDIANA reúne en una sola página varios efectos que hemos visto por separado en otros tutoriales:
- Hero con impacto: el nombre de la marca se arma letra por letra sobre la tableta.
- Película por scroll en 6 capítulos: el viaje del cacao, del árbol a la tableta.
- Marquesina de notas de sabor: se acelera y se inclina con la velocidad del scroll.
- Tableta flotando en 3D: gira con el scroll y sigue el movimiento del cursor.
- Selector de intensidad: al elegir 55, 70 u 85 % cambian la etiqueta, las notas y el perfil de sabor.
- Presentaciones con ahorro: tableta, caja de 3 y caja de 6, con sus precios en pesos mexicanos.
- Maridajes y un final memorable: secciones editoriales con parallax.
- Diseño responsive: con videos optimizados para que la película vaya fluida en el celular.
Conectada a WooCommerce con carrito lateral
En la vista previa de Higgsfield la tienda funciona como demostración. Al convertirla en plugin, se conecta a WooCommerce real.
Desde los ajustes del plugin, un botón crea el producto variable con sus 9 variaciones, imágenes y precios. A partir de ahí, el carrito lateral agrega productos por AJAX, actualiza las cantidades, muestra cuánto falta para el envío gratis y lleva al checkout de WooCommerce.
Y si tu proyecto no necesita tienda, el mismo método funciona sin WooCommerce: los botones pueden llevar a WhatsApp, a un formulario o a cualquier enlace.
Aprende el proceso completo paso a paso
En este tutorial te mostraré cómo conectar Higgsfield con Claude, instalar el skill, escribir el prompt, revisar la cotización de créditos y aprobar el diseño. Después convertiremos el sitio en plugin, lo instalaremos en WordPress, crearemos los productos en WooCommerce y montaremos la landing en Divi.
El skill ov-higgsfield-divi estará disponible para descargar desde la pestaña Materiales de la lección, para que puedas seguir el tutorial y aplicarlo en tus propios proyectos.
¿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 descargar el skill desde la sección de materiales.
👉 Ver tutorial y descargar el skill
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
La inteligencia artificial diseña, WordPress publica
Con este flujo quise unir lo mejor de dos mundos: la capacidad de Higgsfield para crear imágenes y video de nivel cinematográfico, y la libertad de tener la página en tu propio WordPress, editable desde Divi y conectada a tu tienda.
Me gusta la idea de que una landing que antes requería semanas de producción ahora pueda estar lista en una tarde, con un presupuesto de créditos que tú mismo controlas.
Espero que este tutorial te resulte útil, ya sea para presentar tus propios productos o para ofrecer a tus clientes un nuevo tipo de página que seguramente les va a encantar.
¡Nos vemos en el tutorial! 🚀
0 comentarios