🎉 Nuevo: descubre Cleo, la IA que vive dentro de tus códigos QR.Conoce a Cleo, la IA de tus códigos QRDescubre Cleo →

Cómo usar HTML para personalizar una landing page

Usa HTML para añadir divisores, llamadas a la acción y más a la landing page

Puedes personalizar por completo tu landing page utilizando el editor HTML.

Añade uno a tu landing page.

Haz clic en su menú de tres puntos y haz clic en el icono </> para cambiar a la vista HTML.

Aquí tienes algunos ejemplos de lo que puedes añadir:

Divisores

Puedes añadir líneas o divisores entre distintos contenidos.

Añade la siguiente cadena:

<style>.line {border-top: 3px solid #000000;width: 100%;margin: 0;}</style><div class="line"><br></div>

Con "border-top:" puedes definir el grosor de la línea en píxeles.

Con "solid #" puedes definir su color mediante códigos de color hexadecimales.

Enlace para llamar a un número de teléfono

Puedes crear un enlace para permitir que los usuarios inicien una llamada telefónica directamente desde sus dispositivos.

Añade un atributo "href" con el número de teléfono de destino al texto (Call us) que abrirá la aplicación de teléfono. Por ejemplo:

<a href="tel:+1234567890">Call us</a>

Reemplaza "+1234567890" por el número de teléfono correspondiente. El signo "+" indica el código de marcación internacional.

Enlace para enviar un correo electrónico

Puedes crear un enlace para permitir que los usuarios envíen un correo electrónico a una dirección específica directamente desde sus dispositivos.

Añade un atributo "href" con la dirección de destino al texto (Send Email) que abrirá la aplicación de correo. Por ejemplo:

<a href="mailto:abc@example.com">Send Email</a>

Reemplaza "abc@example.com" por la dirección de correo electrónico correspondiente.

Enlace para enviar un mensaje a WhatsApp

Puedes crear un enlace para permitir que los usuarios envíen un mensaje a un número de WhatsApp específico directamente desde sus dispositivos.

Añade un atributo "href" con el número de WhatsApp de destino al texto (Contact us on WhatsApp) que abrirá la aplicación de WhatsApp. Opcionalmente, puedes añadir un mensaje para enviar (This is a message) después de "?text=". Por ejemplo:

<a href="https://wa.me/+1234567890?text=This is a message">Contact us on WhatsApp</a>

Reemplaza "+1234567890" por el número de WhatsApp correspondiente.

Enlace a una parte específica

Puedes crear un enlace para permitir que los usuarios salten directamente a una sección específica de tu landing page.

1) Añade un atributo "id" al elemento de destino (Section 1). Recomendamos que el nombre del elemento sea el mismo que el id (section1). Por ejemplo:

<a id="section1">Section 1</a>

2) Añade un atributo "href" usando el id creado en el paso 1 (#section1) al texto que irá al elemento de destino (Go to Section 1). Por ejemplo:

<a href="#section1">Go to Section 1</a>

Insertar un vídeo

Puedes mostrar vídeos de YouTube, Vimeo y otras plataformas de vídeo en línea en tu landing page siempre que tengan una opción de inserción (etiqueta "iframe"). Después de copiarla, ve a tu landing page y pega la etiqueta "iframe". Por ejemplo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO-URL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Insertar un mapa de Google

Puedes mostrar varios mapas de Google buscando las direcciones en Google Maps, haciendo clic en Share > Embed a map y copiando la etiqueta "iframe". Después, ve a tu landing page y pega la etiqueta "iframe". Por ejemplo:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1589980.4936041927!2d-79.46503024375001!3d38.89126619999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b798ecb5b2c7%3A0xc7edf0c4a86f75af!2sSmithsonian%20National%20Museum%20of%20Natural%20History!5e0!3m2!1sen!2sar!4v1719328865609!5m2!1sen!2sar" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

¿Sigues atascado? Estamos aquí.

Cuéntanos qué intentas hacer y te responde una persona.

Un código QR dinámico rodeado del contenido que puede alojar