Guía para HTML y CSS

5 minutos

18/11/2022

Cuando creas una Landing Page, puedes agregar código HTML o CSS en los cuadros de su área de texto. Esta guía te ofrece algunas ideas sobre las posibilidades de diseño así como una explicación de cómo incrustar contenido multimedia.

Cómo incrustar CSS

Puedes incrustar CSS personalizado en tus microsites, tanto desde la sección de Personalización o en el campo CSS personalizado. Estos son algunos ejemplos de fragmentos de código CSS.

<style>
/* Change Background Color */
body {background:#000}

/* Background Gradient */
body {background: linear-gradient(to right, red , yellow)}

/* Embed Background Image */
body {background: url("/img/background-example.jpg") no-repeat}

/* Fullscreen Background Image */
body {

  background-image: url("/img/background-example.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Change Heading Text Color */
h1 {color:#f4f !important}

/* Change Type Font */
div {
    font-family: "Times New Roman", Georgia, Serif;
}
</style>

Puedes obtener más información sobre CSS en el tutorial W3 Schools sobre CSS.

Estilo de los elementos de tu Landing Page

Con el inspector de tu navegador puedes seleccionar un elemento en la página de destino. Como puedes ver en la imagen, cuando seleccionas un elemento, aparecen la etiqueta y la clase del elemento en la ventana de inspección.

Una vez que los hayas identificado, en la sección de Personalización de tu microsite podrás definir tu propio estilo para ese elemento en el campo "CSS personalizado". El siguiente ejemplo muestra cómo puedes cambiar el tamaño de fuente del elemento h1.headline del encabezado.

Si quieres reutilizar este código CSS para otras páginas de destino, puedes guardar el código en una plantilla CSS haciendo clic en el botón Añadir.

Inspector del navegador — Inspector de tu navegador

Incrustar Google Fonts

<style>
@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}
</style>

Incluye siempre la etiqueta @import al inicio de tu CSS. Más información sobre Google Fonts.

Ten en cuenta que en Europa, desde el 25 de mayo de 2018, se aplica el nuevo Reglamento general de protección de datos. Si integras contenido de servidores externos (como Google Fonts) en las páginas de destino, debes incluir un aviso en tu política de privacidad para cada servicio. Puedes poner un enlace a tu política de privacidad en cada página de destino en la sección GDPR.

Incrusta tus propias fuentes tus landing pages

Para incrustar tus propias fuentes en tus páginas de destino, vé a la sección de medios y carga la fuente que deseas incluir haciendo clic en el botón Cargar fuente.

Se aceptan los siguientes formatos de fuente woff, woff2, ttf y eot.

Todos los archivos de fuentes cargados se enumeran en la sección de medios. Para utilizar la fuente en su página de destino, abre la pestaña de fuente haciendo clic en el icono de lápiz de la fuente correspondiente.

En la pestaña puedes elegir entre un enlace de origen y el enlace de URL. Para copiar el enlace de la fuente, haz clic en el icono de copiar.

Vé a la página de destino que has creado, luego abre la sección Personalización de la página de destino e inserta el enlace en el campo CSS personalizado como se muestra en la captura de pantalla a continuación. Guarda la página.

Pega el enlace de fuente en la sección de Personalización

Prueba siempre tu código CSS

Antes de insertar el código CSS en tu página, valídalo siempre, para confirmar que es correcto, con CSS Validator.

Cómo incrustar elementos multimedia

Imágenes

En la Mediateca puedes subir imágenes o documentos PDF. Una vez que hayas cargado un archivo, puedes hacer clic en el ícono de lápiz de la imagen y verás un fragmento de HTML para incrustar el documento en cualquiera de tus páginas de destino. Ejemplo:

<img alt="qr icon" src="/img/qr-icon32.png"/>

Vídeos de YouTube

Youtube incrustado — Vídeo de YouTube incrustado en una landing page

Integra facilmente videos de YouTube, Vimeo o cualquier otra plataforma de video. El siguiente fragmento de código muestra cómo incrustar un video de YouTube a través de iFrame en tu página de destino. El video se ajusta automáticamente al ancho de la pantalla.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>

Cuidado: usa siempre el enlace para insertar desde YouTube //youtube.com/embed/1234 y no uses el enlace de la barra de direcciones //youtube.com/watch?v=1234

Vídeos de Vimeo

Vimeo video iframe incrustado — Vídeo de Vimeo incrustado

El siguiente fragmento de código muestra cómo incrustar un video de Vimeo a través de iFrame en tu página de destino. El video se redimensiona automáticamente al ancho de la pantalla.

<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>

Vídeos MP4

También puedes usar la etiqueta de video de HTML5 para incrustar videos en formato mp4.

Más información y parámetros sobre la incrustación de vídeos en HTML5.

<video width="100%" controls>
  <source src="/resources/sample.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Google Maps

Puedes integrar un iframe, adaptable a dispositivos móviles, con una ubicación de Google Maps.

Encuentra tu ubicación en Google Maps.
En el menú desplegable que hay en la caja de búsqueda, selecciona “Compartir o insertar el mapa”.
En el menú que aparecerá, escoge la opción “Insertar un mapa” y haz click en la opción “Copiar HTML”.
Inserta el iFrame que has copiado en el siguiente fragmento de código de ejemplo.

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Incrustar JavaScript

Puedes incluir código JavaScript en las áreas de texto. Sin embargo, asegúrate de insertar el código como una sola línea. Los saltos de línea provocarán errores de JavaScript.

<script>alert('hello');</script>

Incrustar iFrames

Incluye iFrames, por ejemplo, en la sección "Acerca de mí" de tu tarjeta de presentación digital.

<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>

Incrustar sitios web externos

Si quieres incluir un sitio web externo en tu landing page, debes volcar todos los recursos externos como js, css e imágenes en la landing page. Para hacerlo, hay una herramienta muy útil en Github - Inliner.

Formularios personalizados

Landing page con formulario de recogida de datos

Para crear un formulario en una landing page y enviar los datos a nuestro servidor, puedes utilizar un Microsite con formulario.

Lead form register — Formulario de recogida de datos perosonalizado

Recuperar datos del formulario

Puedes descargar los datos de los formularios enviados de tu landing page haciendo click en el botón Leads que que aparece en el menú de tu microsite, o vía API.

Leads download — Descargar datos del formulario

Cómo crear un formulario personalizado con HTML y JavaScript

Por otro lado, también puedes crear tu propio formulario y enviar los datos fácilmente a nuestro servidor incluyendo el siguiente fragmento de Javascript en una landing page personalizada.

<script>
    $(function() {
        $('#submit').on('click', function() {
            $.post("/api/post", $("form").serialize()).done(
                function(data) {
                    alert('Thank you for registration!');
                });
            return false;
        });
    });
</script>
<form>
    <label>Your Name</label>
    <input name="name">
    <label>Your E-Mail</label>
    <input name="email">    
    <a href="#" id="submit">Register</a>
</form>

Campos opcionales del formulario

<input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://yourwebsite.com/api/webhook/lead">
<input name="rewardurl" type="hidden" value="https://yourwebsite.com/resources/test.pdf">

Con el campo notify, puedes habilitar o deshabilitar las notificaciones por correo electrónico que se generan cuando se rellenan y envían los datos del formulario.
Con el campo webhook, puedes establecer una URL externa que se ejecutará cuando la persona que rellene el formulario.
Con el campo rewardurl puedes establecer una URL externa que el usuario recibirá por correo electrónico después de suscribirse.

<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">

Los campos lng, lat y accuracy se pueden rellenar con el siguiente fragmento JS si la función GPS está activada.

<script>
    $(function() {
        const urlParams = new URLSearchParams(window.location.search);
        $('input[name=lng]').val(urlParams.get('lng'));
        $('input[name=lat]').val(urlParams.get('lat'));
        $('input[name=accuracy]').val(urlParams.get('accuracy'));
    });
</script>

Botones de Call-2-Action

Añade un botón personalizado a tu landing page

Puedes añadir botones de llamada a la acción en cualquier landing page directamente desde el editor, haciendo clic en el icono Añadir. Un botón de llamada a la acción puede enlazar con un sitio web, un documento PDF, iniciar una llamada o enviar un correo electrónico. Puedes obtener más información en nuestro tutorial qué es un botón de llamada a la acción (C2A).