Crear una landing page para creadores personalizada te ayuda a atraerlos y a hacer crecer tu comunidad. Al agregar código HTML y CSS en el cuadro "Additional Details", puedes diseñar una página completamente personalizada utilizando herramientas de IA como ChatGPT o Claude, incorporando tu branding personalizado.

Esta guía te explica cómo:

Genera código HTML/CSS personalizado usando herramientas de IA
Agrega el código en la configuración de tu Landing Page.
Añadir imágenes y contenidos de tu marca
Vista previa y publica tu página personalizada.

Parte 1: Genera código personalizado usando herramientas de IA

Paso 1: Usa la plantilla de prompt de IA

Inicia sesión en tu herramienta de IA preferida (ChatGPT, Claude, etc.)
Comienza una nueva conversación.
Copia y pega la plantilla de prompt a continuación y personalízala con la identidad de tu marca
- Reemplaza estos marcadores de posición con los detalles de tu marca:
  - SECTOR_OF_ACTIVITY → tu industria
  - YEAR → año de fundación
  - TOWN, COUNTRY → sede de tu marca
  - FOUNDER(S) → nombres de los fundadores
  - MODEL_OF_REVENUE → e.g., “or ejemplo, “directo al consumidor” o “suscripción”
  - WHAT YOU SELL → breve descripción del producto
  - YOUR_ADDED_VALUE → destaca lo que hace única a tu marca
Después de reemplazar los marcadores de posición con los detalles de tu marca, presiona Enviar.

{{MY BRAND}} is a {{SECTOR_OF_ACTIVITY}}, founded in {{YEAR}} in {{TOWN}}, {{Country}}, by {{FOUNDER(S)}}. Operating on a {{MODEL_OF_REVENUE}}, {{MY BRAND}} delivers {{WHAT YOU SELL}}.

{{MY BRAND}} is unique because {{YOUR_ADDED_VALUE}}

Your role is to code the entire ambassador landing page.

- You must edit the text content related to the brand above

- You need to provide me the full answer, not just a portion of it

- You must keep the exact same html and css as the code bellow :

 <div style="font-family: Arial, sans-serif; line-height: 1.6; margin: 0 auto; max-width: 800px; padding: 20px; color: #333;">

    <section style="margin-bottom: 30px;">

        <div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

            Why Collaborate with My Sparkling Gems? 💎

        </div>

        <div style="margin-bottom: 30px;">

            <p style="font-size: 18px;">

                Elevate your style with exquisite jewelry pieces from My Sparkling Gems. We offer meticulously crafted and uniquely designed fine jewelry, delivered with passion and care, starting at €99.

            </p>

            <p style="font-size: 18px;">

                Embrace elegance and craftsmanship. My Sparkling Gems brings you timeless beauty, perfect for special occasions or everyday luxury. Discover the joy of wearing stunning jewelry that speaks to your unique personality. ✨

            </p>

            <p style="font-size: 18px;">

                Partner with My Sparkling Gems to shine even brighter. Our commitment to ethically sourced gemstones and metals ensures not just glamour but also sustainability. Join us in promoting responsible and exquisite beauty. 💍🌿

            </p>

        </div>

    </section>

    <section style="margin-bottom: 30px;">

        <div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

            My Sparkling Gems Ambassador Program ✨

        </div>

        <div style="margin-bottom: 30px;">

            <p style="font-size: 18px;">

                As an ambassador for My Sparkling Gems, you'll receive:

            </p>

            <ul style="font-size: 18px;">

                <li>Attractive commission on each successful sale through your personalized referral link. 💰</li>

                <li>Access to our exquisite collection of jewelry to showcase to your audience. 💎📸</li>

                <li>The opportunity to collaborate with a distinguished luxury brand, cherished by jewelry enthusiasts worldwide. 🤝🌍</li>

                <li>Support for your commitment to sustainable and responsible fashion. 🌱💫</li>

            </ul>

        </div>

    </section>

    <section style="margin-bottom: 30px;">

        <img src="ILLUSTRATION1.jpg" alt="My Sparkling Gems Image" style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: block; margin: auto; width: 100%;">

    </section>

    <section style="margin-bottom: 30px;">

        <div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

            FAQ ❓

        </div>

        <div style="margin-bottom: 30px;">

            <div style="margin-bottom: 15px;">

                <strong style="font-size: 20px;">How does the My Sparkling Gems ambassador program work?</strong>

                <p style="font-size: 18px;">

                    Once you're accepted into the program, you'll receive a unique referral link. Promote our exquisite jewelry through this link, and earn commission on each successful purchase made by your referrals.

                </p>

            </div>

            <div style="margin-bottom: 15px;">

                <strong style="font-size: 20px;">What kind of content should I create as a My Sparkling Gems ambassador?</strong>

                <p style="font-size: 18px;">

                    Showcase the elegance and beauty of our jewelry pieces in your content. Highlight the craftsmanship, uniqueness, and the stories behind each piece. Let your creativity reflect the allure of My Sparkling Gems! 📸✨

                </p>

            </div>

        </div>

    </section>

    <section style="margin-bottom: 30px;">

        <div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

            Ambassador Testimonials 🗣️

        </div>

        <div style="margin-bottom: 30px;">

            <div style="padding: 20px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">

                <div style="display: flex; align-items: center; margin-bottom: 10px;">

                    <img src="Profile_picture1.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">

                    <strong style="font-size: 20px;">Emily, Jewelry Enthusiast</strong>

                </div>

                <div style="font-size: 18px;">

                    <p>

                        "Being a My Sparkling Gems ambassador is a dream come true. The jewelry is not only exquisite but also tells stories. Collaborating with a brand that values beauty, sustainability, and elegance is a privilege!" 💎💫

                    </p>

                </div>

            </div>

            <div style="padding: 20px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">

                <div style="display: flex; align-items: center; margin-bottom: 10px;">

                    <img src="Profile_picture2.jpg" alt="Profile Picture" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">

                    <strong style="font-size: 20px;">Alex, Style Blogger</strong>

                </div>

                <div style="font-size: 18px;">

                    <p>

                        "My Sparkling Gems has brought an extra layer of elegance to my style blog. Their jewelry adds that perfect touch of sophistication, and I'm proud to represent a brand that emphasizes both beauty and ethics." 💍🌟

                    </p>

                </div>

            </div>

        </div>

    </section>

</div>

<section style="margin-bottom: 30px;">

    <img src="ILLUSTRATION2.jpg" alt="My Sparkling Gems Image" style="max-width: 800px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: block; margin: auto; width: 100%;">

</section>

<div style="max-width: 800px; margin: 0 auto; padding: 20px;">

    <section style="margin-bottom: 30px;">

        <div style="font-size: 28px; font-weight: bold; margin-bottom: 20px;">

            How to Become a My Sparkling Gems Ambassador? 📝

        </div>

        <div style="margin-bottom: 30px;">

            <p style="font-size: 18px;">

                Joining our ambassador program is simple. Fill out the application form and let us know about your passion for jewelry and your commitment to sustainable luxury. We're excited to welcome you to the My Sparkling Gems family! 💎🌱

            </p>

        </div>

    </section>

</div>

<p style="text-align: center;">

    Connect with Us - Ambassadors - Terms and Conditions - Privacy Policy - © My Sparkling Gems 2023

</p>

Ejemplo para una marca de relojes de lujo:

Timeless Elegance es una empresa de relojes de lujo, fundada en 1995 en Ginebra, Suiza, por el maestro relojero Robert Cartier. Operando bajo un modelo directo al consumidor, Timeless Elegance ofrece relojes artesanales que combinan precisión con sofisticación.

Nuestra marca es única por nuestro compromiso con la innovación, la artesanía heredada y el diseño atemporal.

Paso 2: Revisa y copia el contenido generado

Una vez que la herramienta de IA genere tu código HTML/CSS personalizado, revísalo para asegurarte de que:

Toda la información de la marca esté correctamente incorporada.
El contenido fluya de manera natural y represente la voz de tu marca.
Todas las secciones estén completas.

Luego, copia todo el código generado para el siguiente paso.

Parte 2: Agrega tu código a tu Landing Page

Ve a tu Ambassador landing page settings
Activa la opción "Additional details"
Selecciona "Custom Code (HTML & CSS)"
Pega el código HTML y CSS generado en el cuadro de texto

Parte 3: Reemplaza las imágenes de marcador de posición

Tu código generado contendrá imágenes de marcador de posición 👇 que deben reemplazarse con URLs reales.
```
php-templateCopyEdit<img src="ILLUSTRATION1.jpg">
```
Reemplaza estas imágenes con URLs reales alojadas en plataformas públicamente accesibles.

Dónde encontrar URLs de imágenes:

Método 1: Google images
1. Busca imágenes adecuadas en Google Imágenes.
1. Haz clic derecho sobre la imagen que deseas usar.
2. Selecciona “Copiar dirección de imagen”.
3. Usa esta URL en tu código.

Método 2: Image hosting platforms
- Sube imágenes a plataformas como Imgur, Google Drive (público) o tu sitio web
- Asegúrate de que las imágenes sean públicamente accesibles

Guía de imágenes

Las ilustraciones deben ser formato horizontal
Las fotos de perfil deben ser cuadradas.

Example:

php-templateCopyEdit<img src="https://example.com/mybrand-banner.jpg">

Parte 4: Vista previa y publica

Haz clic en "Preview" para ver como luce tu Landing Page
Revisa que:
- Las imágenes se vean correctamente
- Asegúrate de que el contenido de texto sea preciso y esté bien formateado.
- Verifica que el diseño general coincida con la identidad de tu marca.
Realiza los cambios necesarios editando el código
Una vez satisfecho, da clic en "Save & Publish" 🎉

Consejos para el éxito:

Revisa nuestras variaciones de plantillas para diferentes formatos de página de aterrizaje.
Observa esta página de Embajadores de ejemplo para inspirarte.

Cómo crear una Landing Page personalizada con ChatGPT