MEGAPROMPT para ChatGPt para crear una Landing Page Optimizada para la venta de un curso online

image top

Para estar al tanto de los post que publico, te recomiendo seguirme en twitter:
@javiergordoweb.

Quiero que diseñes una template para una landing page optimizada para la venta de un curso online que siga esta estructura. La landing page debe ser clara, persuasiva y visualmente atractiva, enfocada en aumentar conversiones y facilitar la navegación. Utiliza las librerías de bootstrap4, jquery, animate.css, fontaweome.css, slider, swiper bundle para los sliders, Aquí están los elementos que quiero incluir, con detalles específicos de cada uno:

1. SECCIÓN HERO: Título Atractivo y Promesa Clara, con un video

  • Empieza con un título fuerte y claro que capte la atención del visitante. Debe incluir una promesa específica que destaque el principal beneficio del curso.

  • Incluye un subtítulo que refuerce la promesa, añadiendo un valor tangible y emotivo.

  • Esta sección debe ocupar en total 80vh de pantalla, y debe contener además un video representativo embebido de youtube. Coloca un video de ejemplo.

  • Debajo del video, añade un botón de CTA que lleve hacia la tarjeta resumen de toda la formación (te la describo más adelante en el punto 7)

2. SECCIÓN RESUMEN DEL CURSO

  • Esta es una breve barra divisoria entre la sección de head y la siguiente sección.
  • En ella se deben encontrar 3 iconos identificativos del curso y lo que se ofrece, así como textos resumen en 3 columnas, basate en esta estructura html, Por ejemplo: <div class="col-md-4 text-center" style="border-right: 1px solid #c5c5c5;">
    <p class="font-weight-bold text-center mb-1" style="font-size: 1.75rem;line-height: 2rem;letter-spacing: .00893em;"><i class="fas fa-history action"></i> +81,2 horas</p>
    <p class="text-center" style="padding-left: 0;justify-content: center;font-family: Grotesk-Medium,Arial;font-weight: 400;font-size: .95rem;line-height: 1.25rem;letter-spacing: .07917em;color: #595e67;text-transform: uppercase;"><small>DE NUEVOS APRENDIZAJES</small></p>
    </div>
  • Los iconos representativos pueden ser: nº de alumnos incritos, nº de horas de formación, nº de lecciones

3. BREVE SECCIÓN DE TESTIMONIOS

  • En esta sección añade 3 testimonios que marquen la diferencia para aumentar al máximo la autoridad y los resultados que ofrece la formación. Deben ser frases claramente impactantes, hazlo con esta estructura:
  • <h2 class=" h3-responsive my-3 text-center">titulo del testimonio y logro conseguido.</h2><p class="font-italic text-center"><sup><i class="fas fa-quote-left"></i></sup> texto del testimonio. <sup><i class="fas fa-quote-right"></i></sup></p><div class="testimonial-box row no-gutters align-items-center" id="">
    <div class="col-md-6 text-center">
    <div class="embed-responsive embed-responsive-16by9">
    < iframe class="embed-responsive-item z-depth-4" src=" https://player.vimeo.com/video/..." allowfullscreen=""></iframe>
    </div>
    </div>
    <div class="col-md-6">
    <img src="" class="img-fluid z-depth-2" style="max-height:400px;"> </div>
    </div>

3. SECCCIÓN Características Más Importantes:

  • Crea una sección clara y directa con los beneficios clave del curso. En total deben ser 3 viñetas en 3 subsecciones bien diferencaidas, pues los beneficios principales de la academia siempre serán: método propio, comunidad y soporte.

  • cada subsección tiene 2 columnas, en una hay una imagen representativa del beneficio, y en la columna de al lado, está el título del beneficio, y luego un par de frases motivacionales sobre como esto ayuda a que sea la mejor academia del mundo

4. Testimonios de Alumnos o Personas de Autoridad:

  • Muestra ahora en formato de tarjetas slider un total de 5 testimonios, con la librería de swiper-bundle, estas tarjetas deben estar conformadas por una foto del alumno, debajo el texto que dijo el alumno entrecomillado y después el nombre del alumnos.

  • Recuerda que la frase de este alumno debe ser breve clara y concisa, que aumente la autoridad del curso e invite a las personas a sentirse identificadas.

5. Temario y Contenidos del Programa:

  • Dedica una sección a detallar el contenido del curso. Divide el temario en semanas para un curso que dura 3 meses, explicando brevemente qué aprenderá el estudiante en cada apartado.

  • Usa íconos visuales o títulos destacados para facilitar la lectura. Asegúrate de que el contenido esté organizado y sea fácil de escanear. Te paso un ejemplo para que lo tengas en cuenta: <div class="col-lg-6 mb-5 px-4">
    <img src="" class="img-fluid d-block mx-auto mb-4" style="height:250px">
    <p class="text-center mt-0">Etapa 1. Semana 1 y 2</p>
    <h3 class="text-center h2-responsive font-weight-bold">titulo de la semana</h3>
    <ul class="pl-4" style="list-style-type: '✓ '">
    <li><p>beneficio 1 .</p></li>
    <li><p>beneficio 2.</p></li>
    <li><p>beneficio 3.</p></li>
    </ul>
    </div>

6. Bonuses Limitados:

  • En este punt odebes añadir una pequeña sección separadora que indique ahora vienen los bonuses, por ejemplo algo como esto: <section class=" " id="bonuses">
    <div class="container">
    <h2>¡Y ADEMÁS!<br>BONUSES ESPECIALES SOLO DISPONIBLES SI TE APUNTAS AHORA</h2>
    </div>
    </section>

  • A continuación crea la template para dar en total 3 bonuses bien diferenciados siguiendo esta estructura html: en donde cada bonus ocupa una subsección. esta subsección está dividida en 2 columnas, una col-lg-8 y col-lg-4, en la columna de la derecha hay una imagen representativa del bonus, y en la de la izquierda pone en un badge bonus 1,2,3... después, el título del bonus y el texto descriptivo del bonus.

  • encuadra estos bonuses en card card-body con un sombreado.

7. TARJETA CALL TO ACTION

  • Esta tarjeta está compuesta por un slogan motivacional para que la gente se apunte a la academia, debajo hay una imagen represnetativa del curso y a continuación todos lo que incluye punto a punto en una sola frase corta y representativa tanto de la academia como de los bonuses,
  • además puedes añadir mejoras a esta tarjeta como imagenes de garantía, pago seguro, etc
  • para que sea más llamativa, rodeala de un borde dashed 2px rojo y un shadow que haga que destaque.

8. Preguntas Frecuentes (FAQs):

  • Incluye una sección de preguntas frecuentes. Asegúrate de abordar posibles dudas que los usuarios puedan tener antes de inscribirse: “¿Cuánto tiempo tendré acceso al curso?”, “¿Es este curso adecuado para principiantes?”, “¿Qué pasa si no puedo seguir el ritmo del curso?”.

  • haz que esta sección de preguntas y respuestas esté en formato de acordion collapase de booststrap para mayor fluided, te paso un ejemplo de código: <ul>

    <li class="card">
    <div class="card-header" id="heading2">
    <h5 class="h4-responsive mb-0">
    <a id="FAQ_2" class="collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
    [[pregunta]]
    </a>
    </h5>
    </div>

    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#faqs" style="">
    <div class="card-body">
    <p>[[respuesta]]</p>
    </div>
    </div>
    </li>

    </ul>

9. ULTIMA SECCIÓN DE TESTIMONIOS

* Añade una nueva sección de testimonios, pero esta vez en formato tarjeta y video, te paso ejemplo html: <div class="testimonial-box row card align-items-center" id="">
<div class="col-md-6 text-center">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item z-depth-4" src=" https://player.vimeo.com/video/..." allowfullscreen=""></iframe>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
<p style="font-style: italic;">.</p>
<span class="name-test"></span>
</div>
</div>
</div>

10. Garantía de Devolución o Resultados:

  • finaliza la página con una sección de garantía de resultados, esta es una sección en donde a la izquierda hay un icono de garantía y a la derecha está un texto motivacional explicando la garantía y convenciendo a la persona de que no pierde nada por intentarlo, por ejemplo, puedes poner textos como ¡prueba la academia sin miedo!

11. Contacto y Soporte:

  • Termina la página simplemente añadiendo el email de soporte, y comentando algo como "si te falta alguna duda escribenos,



###



ADICIONALMENTE, Ten cuenta las siguientes instrucciones:
0. solo me interesa el contenido del body, obvia el head.
1. añade bastantes preguntas FAQs para el ejemplo, que tengan sentido
2. añade más textos en la parte de metodo propio, comunidad y soporte, qeu explique y motive más
3. en la parte de temario hazlo mejor en 2 columnas, no en 3, y dividelo seman a asemana, no pongas semana 1-2, sino "semana 1" "semana 2" "semana 3"... y así, y debajo de esta añade la descripción de l oque aprenderán durante la semana, inventate las lecciones o lo que aprenderán, pero que tenga sentido
4. en los bonuses añade imagenes de ejemplo


###



Bien, la temática del curso es: "[INSERTAR TEMÁTICA]", comienza!!
haz un resultado que sea excepcional, te daré un premio si consigues sorprenderme y das en el clavo de lo que necesito, recuerda ser imaginativo e inventate toda la información.

Más sobre Templates y recursos Gratuitos

Para estar al tanto de los post que publico, te recomiendo seguirme en twitter:
@javiergordoweb.

Más artículos que también pueden interesarte:

Como ya sabes uso cookies, igual que todo el mundo para mejorar tu experiencia en la web. Deshazte de este infernal mensaje. Más Información