Compartir un buen tuit o un vídeo emocionante atrae a la audiencia de tu sitio web. Usa elementos incrustados para compartir contenido sin que los visitantes tengan que abandonar tu página.
Los contenidos incrustados te permiten integrar material de otros sitios en tu propia web. Uno de los ejemplos más comunes son las publicaciones de redes sociales como Twitter, YouTube o TikTok, que se muestran dentro de tu página al insertar su código en el sitio web.
Pero la incrustación va mucho más allá. Puedes insertar formularios web útiles, reseñas de clientes y mucho más. Vamos a explorar qué es la incrustación, cómo implementarla y por qué es una estrategia fantástica.
¿Qué significa incrustar?
En diseño web, incrustar significa insertar contenido de un sitio externo en el tuyo. Estas opciones mantienen a los visitantes interesados y les permiten explorar el contenido a fondo si lo desean. Esto evita interrumpir la experiencia de usuario (UX) y, de paso, reduce las tasas de rebote.
Además, los elementos incrustados son más detallados e interactivos que una simple captura de pantalla o un enlace. Si quieres integrar un vídeo de YouTube en un artículo de blog, los visitantes pueden darle al play y seguir en tu web mientras lo ven. Y si les interesa visitar tu canal de YouTube desde ahí, los enlaces del contenido incrustado los llevarán directamente. Esto mejora el flujo de usuario, conecta tus canales y potencia la experiencia de usuario.
Contenidos incrustados y generación de leads
Cuando los visitantes llegan a tu web, los elementos incrustados pueden recopilar datos clave y conectar a los usuarios con tu organización. Anímales a suscribirse a tu boletín, rellenar un formulario de contacto o seguirte en redes sociales directamente desde tu página de inicio.
Por ejemplo, servicios como Mailchimp, la plataforma de email marketing, te permiten crear plantillas de registro incrustables donde los visitantes pueden suscribirse y conocer más sobre una empresa o servicio. Mailchimp también te permite personalizar los estilos del formulario para que coincidan con tu marca, ayudándote a mantener una interfaz visual coherente.
Una vez que diseñes el formulario, incrustarlo solo requiere unos pocos pasos. Copia el código HTML y pégalo donde quieras que aparezca en tu sitio web.
Tipos de contenidos incrustados
Personaliza tu sitio web con elementos incrustados que funcionen para tu contenido y tu audiencia. Aquí tienes algunos tipos y ejemplos de sitios web que los utilizan muy bien.
1. Audio incrustado
Incrustar audio mejora la experiencia del usuario, ya sea una canción original, la versión en audio de un artículo o un episodio de podcast. Integrar contenido multimedia no solo da a los visitantes la oportunidad de conectar contigo, sino que también les anima a seguirte en otras plataformas como Spotify o SoundCloud.
Boss Your Life Up (BYLU) ofrece recursos para jóvenes profesionales, incluido un podcast. En cada página de episodio —disponible a través del enlace Podcast en la barra de navegación—, BYLU incrusta el audio. Los visitantes pueden darle al play y escuchar sin salir del sitio (el audio se pausará si deciden navegar a otra parte). Añadir este contenido interactivo anima a los usuarios a escuchar sin abandonar la página, lo que puede aumentar las conversiones.
2. Testimonios de clientes
Incluir reseñas positivas de clientes refuerza la reputación de tu negocio y ayuda a que los clientes potenciales sepan qué están comprando. Insertarlas desde sitios de reseñas como Trustpilot, Google Reviews o Yelp aporta un nivel de autenticidad que el simple copiar y pegar no puede igualar.
Q Audio incluye reseñas positivas de Yelp en su página de inicio sobre un mapa de Google integrado. Muestra testimonios de clientes satisfechos con un enlace a las reseñas por si los lectores quieren explorar más. Esto reafirma la legitimidad de la marca y ofrece a los clientes potenciales acceso inmediato a opiniones reales.
3. Publicaciones en redes sociales
Tanto creadores como empresas utilizan elementos integrados para publicar contenido de redes sociales directamente en una página web. Estos fragmentos muestran tuits, vídeos de YouTube, publicaciones de Instagram y otros contenidos compatibles.
Los botones integrados de seguir y compartir para redes sociales también permiten a los visitantes llevar el contenido a una nueva audiencia, ya que pueden compartir la publicación en su propio perfil desde tu sitio web sin tener que abandonarlo.
Pencil, cuyo sitio web fue desarrollado por Will Hanschell, incluye vídeos de YouTube integrados para mostrar sus proyectos publicitarios anteriores. Los visitantes pueden verlos sin salir de la página de inicio, lo que permite a los clientes potenciales conocer la empresa más rápido. También pueden hacer clic en el título del vídeo si prefieren verlo directamente en YouTube.
4. Contenido de vídeo interno
Si prefieres alojar vídeos en tu propio sitio web, también puedes hacerlo mediante integraciones de contenido. Las plataformas de vídeo externas como YouTube reducen la calidad; subirlos tú mismo garantiza que los visitantes disfruten de la mejor versión de tu contenido. Los vídeos internos también ofrecen un mayor control sobre el aspecto y la sensación del elemento integrado para que se ajusten mejor a tu marca y diseño web. Si tu sitio web depende mucho del vídeo, esta opción mejora significativamente la funcionalidad al reducir el tamaño de los archivos y optimizar los tiempos de carga.
OSCO Studios, diseñado por WEBOAF, muestra una forma especialmente eficaz de combinar vídeo integrado con otros contenidos. Como la empresa se especializa en producción de vídeo y fotografía, combina su portafolio escrito con fragmentos de vídeo integrados para que los visitantes puedan apreciar el trabajo creativo del estudio.
5. Encuestas de investigación de clientes
Las integraciones de formularios y encuestas como Mailchimp, SurveyMonkey y Typeform recopilan opiniones e información de los clientes directamente en tu sitio web. Los bloques de formulario, que puedes añadir a tus diseños web sin necesidad de sitios de terceros, también son opciones útiles, pero no ofrecen el mismo nivel de recopilación detallada de datos.
Eyes Here, diseñado por Matthew Butler, centra su página de inicio en su portafolio de diseño y desarrollo web y en testimonios. Pero si bajas hasta el final, encontrarás un formulario de contacto detallado que pregunta a los visitantes sobre su presupuesto, el alcance del proyecto y su sitio web actual. Los clientes no tienen que abrir su aplicación de correo ni completar un formulario externo para ponerse en contacto, lo que los mantiene interesados y dentro del sitio. El formulario plantea preguntas útiles, pero lo más importante es que sus colores de alto contraste y su texto claro se integran perfectamente con la marca, el diseño de experiencia de usuario y la estética de Eyes Here.
6. Anuncios
A veces, los anuncios resultan intrusivos y no encajan con el mensaje de una marca. Sin embargo, los anuncios relevantes aportan valor a los usuarios y apoyan la monetización del sitio web, especialmente si los integras en el lugar ideal. Puedes usar Google AdSense para incluir anuncios que encajen bien. Carbon también es una opción popular.
Los sitios web y blogs con mucho tráfico son excelentes anfitriones de anuncios, y Cookie & Kate —un sitio web de recetas vegetarianas— es un ejemplo excelente. Coloca los anuncios en la parte inferior y lateral de la página para que no oculten el contenido. Además, cada anuncio tiene una pequeña "x" para que los usuarios puedan cerrarlos si no les interesan.
Por qué tu equipo de diseño debería usar Webflow
Descubre cómo los equipos de diseño están optimizando sus flujos de trabajo —y creando mejores experiencias— con Webflow.
Usa el elemento de texto enriquecido de Webflow para integrar
Si estás creando una página web —ya sea una entrada de blog, una página de destino o la historia de una marca—, Webflow te permite integrar código personalizado y conectar contenido externo. Las opciones son abundantes: puedes integrar contenido de Vimeo, Twitter, Soundcloud y más. La plataforma de Webflow acelera el proceso de formato, estructuración e integración para potenciar tus diseños.
Más vale mostrar que contar
Las publicaciones en redes sociales, los formularios de correo, los anuncios estratégicos y mucho más pueden complementar el contenido de tu web. Si quieres sacarle el máximo partido a tu diseño, no temas usar contenido incrustado. Es una de las mejores formas de mejorar la experiencia de usuario y retener a tus visitantes el tiempo suficiente para que conviertan.
Webflow simplifica el proceso de incrustación y ofrecemos tutoriales para ayudarte en cada paso. Copia y pega código personalizado o usa nuestro editor visual para integrar formularios, vídeos, audio y mucho más en tu diseño.
