¿Cómo añadir código personalizado a mi landing page?
Puedes añadir tu propio código HTML, formato CSS y JavaScript a tu landing page utilizando el elemento Código personalizado.
Hay que tener en cuenta algunas cosas cuando se trabaja con código personalizado:
- Puedes añadir código personalizado a la sección <head> o <body> de tu landing page. Si estás utilizando un código de terceros, asegúrate de obtener la información sobre la colocación del código de este proveedor.
- Para cumplir con el GDPR, asegúrate de informar a tus clientes potenciales y visitantes de que utilizas cualquier formulario o código de terceros que implique mapas de calor o seguimiento.
- Añadir múltiples códigos de seguimiento, widgets, etc., puede ralentizar tu landing page. Además, sobrecargar la página con contenido puede hacer que los visitantes se vayan
- Cuando trabajes en el editor de la pagina, solo verás el marcador de posición. El script sólo se ejecuta en modo de vista previa y en una página publicada. Por lo tanto, deberías inspeccionar la página justo después de publicarla para ver si funciona como pretendías. No deberías compartir el enlace a la página antes de asegurarte de su calidad.
- Es una buena idea comprobar si la página que contiene el código se muestra correctamente en todos los navegadores web, especialmente si estás modificando CSS.
- Nuestro equipo de Customer Success puede brindar soporte para las funciones estándar disponibles en el editor. No podemos ofrecer asistencia ni garantizar el funcionamiento de otros scripts de terceros.
Añadir un código personalizado al cuerpo de una landing page
El cuerpo de una landing page es el área principal donde se muestra el contenido principal, como texto, imágenes, vídeos y elementos interactivos como formularios de registro. Se sitúa entre el encabezado y el pie de página, y sirve como espacio central para ofrecer información y atraer a los visitantes.
Para añadir un código personalizado al cuerpo de tu landing page:
- En el editor de la página, haz clic en el botón Añadir elementos.
- Arrastra y suelta el elemento Código personalizado en el contenido de tu página. Ten en cuenta que el editor resaltará los lugares donde puedes soltarlo.
- Haz clic dentro del objeto Código personalizado para abrir la barra de herramientas e introduce tu código en el editor de la derecha.
Hay tres tipos de código que puedes utilizar en la sección del cuerpo:
- HTML – formato HTML estándar, por ejemplo:
<p> </p> - CSS – coloca tu código CSS entre las etiquetas de estilo:
<style> </style> - JavaScript – coloca tu código JS entre las etiquetas script:
<script> </script>
Si quieres utilizar el formato Less o Sass, primero tienes que compilarlo a CSS y luego colocarlo entre las etiquetas de estilo:<style> </style>
También puedes configurar opciones adicionales para tu elemento de código personalizado:
- Añadir nombres de clase adicionales – activa esta opción para añadir nombres de clase al elemento contenedor para que puedas estilizarlo según tus necesidades.
- Posicionamiento absoluto – activa esta opción para colocar el código personalizado en cualquier lugar de tu landing page. Sólo recomendamos usar esta opción si tienes algún diseño inusual que no puede ser creado de otra manera. El uso de objetos con posicionamiento absoluto puede hacer que tu página sea menos responsiva en dispositivos móviles. Puedes encontrar más información sobre esta característica aquí.
- Ocultar en dispositivos móviles – activa esta opción para ocultar el resultado del código personalizado cuando tu página se abra en un dispositivo móvil.
Añadir un código personalizado a la cabecera de la landing page
La sección <head> de una landing page es una parte que contiene metadatos e información sobre la página, como su título, codificación de caracteres, hojas de estilo enlazadas, scripts y etiquetas relacionadas con SEO. No muestra el contenido directamente en la página, sino que proporciona instrucciones esenciales para los navegadores y los motores de búsqueda.
Para añadir un código personalizado a la cabecera de tu landing page:
- En el editor de la página, haz clic en el botón Gestionar páginas.
- Pasa el ratón por encima del botón de acción situado junto a la página de inicio y haz clic en Ajustes.
- En la ventana de Ajustes de la página, ve a la pestaña del Elemento <head> y pega allí tu propio script o el de un tercero.
Nota: los cambios se guardan automáticamente al hacer clic fuera del cuadro de texto.
Utiliza etiquetas para indicarnos cómo debe mostrarse el código:
- Para HTML, utiliza etiquetas HTML, como:
<h2> </h2> - Para CSS, rodea el código con etiquetas
<style> </style>. - Para JavaScript, rodea el código con etiquetas
<script> </script>.
Pasos para las landing pages anteriores
Puedes añadir un código personalizado ( HTML, CSS y JavaScript) a tu landing page utilizando el marcador de posición de código personalizado en el editor de landing pages. Utiliza esta opción siempre que quieras añadir herramientas y widgets no incluidos en el editor.
El código se añade a las versiones de escritorio y móvil de tu landing page. Si quieres realizar pruebas A/B en tu página, asegúrate de añadir el marcador de posición a cada variante. También puedes añadirlo a una página de agradecimiento.
Puedes añadir el código personalizado a cualquier plantilla nueva o existente en el editor. He aquí cómo conseguirlo:
- Ve a Landing pages y realiza una de las siguientes acciones:
- haz clic en el botón Crear landing page para crear una nueva página
- selecciona Editar página en el menú acciones situado junto al nombre de la página
- Haz doble clic en el icono Código personalizado para añadir el marcador de posición a la plantilla.
El marcador de posición aparece en la esquina superior izquierda de la sección visualizada.
Al hacer doble clic en el icono, se abre automáticamente un modal en el que puede introducir el código.
- (Opcional) Agarra y arrastra el marcador de posición si quieres que aparezca en un lugar específico de la página. Haz doble clic en el marcador de posición para acceder a un modal en el que puedes introducir el código.
- Pega o escribe el código. Asegúrate de envolver tus scripts en etiquetas <script> (para JavaScript). Cuando agregues varios fragmentos de código, pégalos uno debajo de otro.
- (Opcional) Si estás ejecutando una prueba A/B, repite los Pasos 2-4 para cada variante de la página.
- Al crear una nueva página, haz clic en el icono del teléfono móvil para generar una versión adaptada a dispositivos móviles de tu página. Si estás editando una página existente, haz clic en él para comprobar si apruebas los cambios.
- (Opcional) Haz clic en Vista previa para comprobar si el código muestra correctamente los elementos que has añadido y que deben ser visibles para tus visitantes.
- Guarda los cambios o publica la página.
- Visualiza la página publicada para comprobar que se muestra correctamente.