Deutsch
English
Español
Português
ItalianoGuía para HTML y CSS
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.
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.
Prueba siempre tu código CSS
Antes de insertar el código CSS en tu página, validalo siempre, para confirmar que 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
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
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.
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.
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
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).
