Ya has lanzado tu podcast. Sabes editar audio, investigar temas y entiendes lo básico de una charla ingeniosa. Pero, ¿cómo consigues una audiencia más allá de la tía Gail y el abuelo Sanjay? Además de distribuir tu contenido en todas las plataformas de podcast, tu sitio web puede ser clave para crear una base de fans leales. Con esto en mente, veamos cómo puedes darle a tus episodios el lugar que se merecen en tu sitio.
Conceptos básicos de Webflow: insertar un podcast de SoundCloud
Si aún no lo has hecho, echa un vistazo a nuestro tutorial sobre cómo insertar pistas de SoundCloud en tu sitio mediante el CMS de Webflow. Incorporar tu audio desde SoundCloud solo requiere 4 pasos:
- Crea una colección llamada "Episodios" o cualquier nombre que tenga más sentido para tu programa
- Configura la URL del nombre de la colección
- Añade un campo de texto simple llamado ID de pista de SoundCloud (nota: también podrías usar un campo numérico aquí, pero el texto simple funciona para más tipos de inserciones, así que es un buen hábito)
- Añade el código de inserción HTML de SoundCloud a la página de la colección y/o a la lista de la colección
- Reemplaza el ID de la pista en el código de inserción con tu campo de ID de pista de SoundCloud
Y no te preocupes si esto parece complicado; te guiaremos paso a paso analizando 7 sitios que lo hacen muy bien.
1. Femtastic Podcast
El Femtastic Podcast, presentado por Katie Breen, trata sobre temas de la mujer y busca inspirar, educar y entretener. Cada episodio cuenta con un resumen conciso que sirve como adelanto.
Femtastic sabe que una forma sólida de aumentar tu audiencia es a través de las suscripciones; por eso incluyen un botón de suscripción en su navegación superior. Puedes suscribirte a través de iTunes, SoundCloud y Overcast.
Para ver cómo está configurado esto en Webflow, abre el Femtastic Podcast en modo de vista previa y síguelo paso a paso.
Echemos un vistazo a cómo está configurada la colección del CMS. Al abrir el panel de la colección del CMS en la barra de herramientas izquierda y hacer clic en el icono de engranaje, aparecerá la configuración de la colección. Aquí podemos ver el campo numérico que se añadió para el identificador único con el ID de pista de SoundCloud.
Ahora vayamos a SoundCloud y busquemos el episodio n.º 35. Haz clic en Compartir, luego en Insertar y copia todo el contenido del campo Código:
Aquí tienes el código:
El ID de pista de SoundCloud aparece justo después de /tracks/ y termina en el ampersand (&), así que para este episodio es 543981285.
Hagamos clic en el episodio 35 en el CMS de Webflow y desplacémonos hacia abajo hasta los últimos 2 campos de la colección. Podemos ver el ID de pista de SoundCloud ingresado hacia la parte inferior. Cada episodio tendrá su propio ID de pista de SoundCloud único.
Ahora veamos cómo se inserta el fragmento de código de SoundCloud en la página de destino.
En el Navegador de la página de inicio, vemos la jerarquía de los elementos. Dentro de la Lista de colección en el contenedor PL-wrapper, vemos el elemento de lista de colección PL-item con el elemento incrustado de SoundCloud.
Si estás configurando el primero de una serie de episodios de SoundCloud, solo tienes que hacer este paso una vez. Después de pegar el código de inserción de SoundCloud en un elemento HTML, selecciona el ID de la pista de SoundCloud y, mientras esté resaltado, haz clic en Añadir campo y elige ID de la pista de SoundCloud en el menú desplegable. Esto apunta a la pista correcta para cada entrada del CMS.
Puede parecer mucha información de golpe, pero una vez que te familiarices con Webflow, todo cobrará sentido. Quédate con nosotros.
2. Peter Hostrawser
Hoy en día, muchos podcasters recurren al vídeo para ayudar a difundir su contenido. Y con el CMS de Webflow, es increíblemente fácil publicar tus vídeos en tu sitio usando el campo de vídeo del CMS.
La marca personal de Peter Hostrawser se centra en cuestionar las prácticas obsoletas del sistema educativo y en celebrar a quienes han seguido caminos poco convencionales hacia el éxito.
Su podcast está disponible en Spotify, Apple Podcasts y YouTube. Su sitio web incluye la versión en vídeo de su podcast de YouTube.
Las versiones en vídeo de sus podcasts se almacenan en una colección del CMS, con una inserción de YouTube para cada uno. Esto se hizo arrastrando un elemento de vídeo desde el panel Añadir elementos a la página de plantillas de podcasts.
Aquí podemos ver el enlace de YouTube y los otros campos que componen cada episodio en la colección de Podcasts.
Para echar un vistazo más de cerca a este diseño, adelante, clónalo.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
3. Bantercade
Bantercade es un podcast dedicado a los videojuegos; su nombre es un guiño perfecto a su humor friki. También integran vídeos de YouTube en su diseño. Parece que tienen algunos marcadores de posición para el contenido, así que ten en cuenta que es un trabajo en curso.
En su página de inicio para los episodios en vídeo, vemos una lista de colección del CMS llamada Juegos.
Las listas de colección como esta, junto con las páginas de colección, son dos formas de usar el CMS de Webflow para integrar contenido dinámico en un diseño. Echa un vistazo a los tutoriales de Webflow University sobre listas de colección y páginas de colección para entender mejor cómo funcionan y en qué se diferencian.
Puedes echar un vistazo al diseño de Bantercade y/o clonarlo para el tuyo.
4. Primo London
Primo London es un promotor de música house. Sus podcasts, que presentan a productores de música electrónica, complementan la música que promocionan.
Los episodios del podcast no están incrustados, lo que evita que salgas del diseño, pero hay muchas pistas de SoundCloud incrustadas de artistas que utilizan el mismo elemento de inserción de SoundCloud que hemos visto en diseños anteriores. Con algo de contenido faltante, este sitio también parece estar en construcción, pero es un buen comienzo con algunos elementos gráficos interesantes.
5. Tea with Tami
Tea with Tami es un podcast centrado en la cultura afroamericana, que profundiza en temas sociales y celebra el hip hop.
En lugar de usar un elemento dinámico como los otros sitios mencionados aquí, Tea with Tami inserta sus episodios de podcast directamente en el campo de texto enriquecido de sus entradas de blog. Es un método más sencillo y algo más amigable para clientes y editores de contenido, ya que solo tienen que copiar y pegar la URL de la pista en el campo de texto enriquecido.
Todos los podcasts forman parte de una colección llamada Blog Posts. Echemos un vistazo a cómo está configurada una entrada individual del CMS.
Tea with Tami es profesional, tanto en la calidad de producción de su podcast como en el diseño de su sitio. Mira cómo se construyó en Webflow.
6. Podcast Blackwood Bugman
Blackwood Bugman es un podcast inquietante con oleadas de música dramática, entrevistas y una narrativa que me recuerda a This American Life o Serial. La historia ficticia sobre el Blackwood Bugman resulta fascinante de escuchar y el diseño —con árboles retorcidos y niebla— emula el ambiente espeluznante del podcast.
En lugar de SoundCloud, Blackwood utiliza un fragmento de código de art19 para su reproductor.
Parece que el catálogo completo del podcast Blackwood Bugman está alojado en art19, por lo que este diseño quizás se creó para destacar su episodio piloto, pero sirve como un buen ejemplo de las otras opciones de inserción disponibles.
Echa un vistazo más de cerca o clona Blackwood Burgman en Webflow.
7. RAD DAD
¿Quién es genial? ¡Los papás!
Vale, las mamás también se llevan el título de geniales, pero el podcast RAD DAD se centra en padres del sector tecnológico. Es un enfoque interesante, donde los papás comparten sus experiencias tanto a nivel profesional como personal.
Utiliza un fragmento de código de Simplecast.
Está configurado igual que el fragmento de SoundCloud, con una referencia de campo de texto plano insertada en el código HTML que apunta al ID de la pista de Simplecast.
Así es como está configurado para una página de podcast individual:
En lugar de añadir un campo numérico para el ID de la pista de SoundCloud, el diseñador añadió un campo de texto plano para el ID de inserción de Simplecast.
Tanto si eres genial como si eres papá, mira cómo se montó este diseño.
Lecturas relacionadas:
20 podcasts de negocios esenciales para el emprendedor ágil
5 podcasts de diseño y desarrollo que vale la pena escuchar
Haz que tu podcast se escuche
Un contenido cautivador, un audio bien producido y la plataforma de alojamiento adecuada te ayudarán a crear un podcast de calidad. Y un sitio web donde promocionarlo te ayudará a hacer crecer tu audiencia: ¡Webflow al rescate!
