Cómo crear una hermosa página de podcast con Divi

Tienes un podcast increíble. Pero su sitio web puede necesitar algo de trabajo. Hace su trabajo, pero no se destaca. ¡No temas, podcaster! Te tengo cubierto.

Te voy a enseñar una forma sencilla de usar Divi para crear no solo una página de inicio que se actualice fácilmente para tu podcast, sino también una página de archivo elegante y una plantilla para episodios individuales.

Producto final de hoy: página de inicio de podcasts de tres secciones

Quería mantener el diseño simple y lo más mínimo posible, sin perder la personalidad que debe mantener un buen podcast. Este diseño es para un podcast independiente ficticio llamado You're An All-Star , cuyo enfoque son los zapatos y la felicidad. Quería que el diseño reflejara ese tema.

La primera sección utiliza un color brillante para llamar la atención del usuario, proporciona una breve propaganda sobre de qué se trata el podcast a la izquierda y utiliza el módulo de audio Divi para presentar un episodio de podcast para escucharlo de inmediato.

A medida que el usuario se desplaza hacia abajo, la estética cambia ligeramente a la sección Episodios seleccionados, que nuevamente usa el módulo de audio Divi para presentar contenido fácilmente accesible, así como una opción para visitar los archivos del programa. El fondo es paralaje para llamar la atención sobre los episodios en sí.

La sección final es simplemente una suscripción por correo electrónico. Cada marca, podcast, blog y empresa necesita uno, y para que se destaque, cambié esta sección a un fondo de color y lo hice lo suficientemente pequeño como para que el paralaje de la segunda sección ayudara a llamar la atención sobre él.

A continuación, le daré un tutorial paso a paso sobre cómo diseñé y creé cada módulo, sección y página del sitio.

Activos que necesitará

Lo mejor de este diseño es que no requiere muchos recursos fuera de Divi. Todo lo que necesitará son 5 imágenes de alta resolución para usar como fondos y cualquier arte de podcast y miniaturas que use para sus episodios.

Todas mis imágenes provienen de Unsplash (todas las imágenes de este sitio se pueden encontrar en esta colección). Usé Vista previa para convertir algunos de ellos a blanco y negro, pero puede usar cualquier software de edición de imágenes que desee. Casi todos le permiten seleccionar una opción de escala de grises / blanco y negro o reducir la saturación a cero.

Aparte de eso, todos los recursos que necesitará están dentro de Divi. ¡Vamos a hacerlo, entonces!

Página de inicio del sitio web del podcast: primera sección

Comience creando una nueva página en su panel de WordPress y configurándola como la página principal de su sitio. (Yo llamé convenientemente al mío "Hogar").

Ahora regrese para editar su nueva página. Dentro del cuadro Atributos de página en la barra lateral derecha, cambie la plantilla predeterminada a la plantilla de página en blanco.

Primero, creamos una fila de tres columnas.

Dentro de la columna del medio, queremos insertar un módulo divisor Divi.

Dentro de la configuración del divisor, en la pestaña Diseño, establezca la altura en 600. Esto no solo mantendrá las dos columnas exteriores (el contenido principal de la sección) separadas, sino que también mantendrá la sección lo suficientemente alta como para permitir un espacio en blanco adecuado en varios resoluciones de la ventana gráfica. (Mientras permanece oculto en el móvil de forma predeterminada).

Ahora, en la columna de la izquierda, agregaremos dos módulos de texto. Decidí que para este proyecto, un encabezado horizontal se habría visto fuera de lugar, por lo que el primer módulo de texto será simplemente un título.

En la pestaña de contenido de la Configuración de texto, agregue el título al cuadro de contenido.

En la pestaña Diseño, actualice el Color del texto a "Claro" y cambie la Orientación del texto a "Centro". Luego, ajuste la fuente y el tamaño del texto. Elegí la fuente "Special Elite" debido a su aspecto angustiado y luego establecí su tamaño en 60. También establecí la altura de la línea de texto en 1em.

Una vez que se solucione, es hora de pasar al segundo cuadro de texto. Estamos usando este como un anuncio rápido para el podcast.

En la pestaña Contenido, actualice las siguientes opciones:

Contenido : ingrese su texto para la descripción (sugeriría una versión truncada de la descripción que usa en iTunes y otros servicios)
Color de fondo : rgba (0,0,0,0.4)

En la pestaña Diseño, seleccione "Claro" para el color del texto y seleccione "Centro" para la orientación del texto como lo hizo en el cuadro anterior. También configure la fuente del texto en "Special Elite" con un tamaño de 20px.

Finalmente, agregue 10px de relleno alrededor de todo el cuadro de texto.

Después de eso, diríjase a la pestaña Avanzado y, en CSS personalizado, ingrese esto en el campo Elemento principal para redondear las esquinas del cuadro de texto:

border-radius: 10px;

Una vez que haya hecho eso, ¡habrá terminado con las dos primeras columnas de su nuevo sitio! ¡Hurra! Guarde su trabajo haciendo clic en el círculo morado en la parte inferior de la página y presionando el botón verde de guardar.

¡Excelente trabajo!

Sin embargo, para que sea un poco más atractivo visualmente, necesitamos establecer el fondo de la sección, así que vaya a la configuración del cuadro azul (sección) y cargue una imagen de fondo. Tiendo a mantener la mía en una resolución de 1920 × 1280.

Debería ver algo parecido a esto ahora:

A estas alturas, es posible que se esté preguntando: “¿Qué pasa con los podcasts? ¡Es un sitio de podcasts y todavía no hemos hecho nada con un podcast! " Tienes toda la razón. Así que comencemos un poco de audio seleccionando el módulo de audio (lo adivinó) en la tercera columna de nuestra fila.

El módulo de audio predeterminado no se ajusta exactamente al tema que vamos a utilizar para este sitio, así que tomémoslo de esto:

A esto:

Abre la configuración del módulo de audio. El campo Audio es donde puede cargar su propio archivo a cualquier host que use, o puede vincular directamente al archivo multimedia de cualquier servicio de podcasting que use. Yo uso Libsyn para el mío, así que simplemente tomé la URL del medio y la pegué.

(Dato curioso: cualquier persona que haga clic en reproducir en su sitio a través de este módulo también se cuenta como descarga en su panel de Libsyn. ¡Puntaje!)

Luego, querrá poner el título del episodio al que vinculó en Título y su nombre en Nombre del artista (o lo que sea que use en su programa. Para nuestro podcast ficticio sobre zapatos, ¿cómo podría elegir otra cosa que no sea Chuck Taylor? ). El título del álbum será el nombre de su podcast.

A continuación, cambiemos ese color verde azulado a un fondo totalmente transparente. El color no importa. Simplemente deslice la barra de transparencia hasta el final o hasta que el último dígito del RGBA sea 0.

Para la imagen de la portada, es mejor usar la miniatura de este episodio en particular o el arte del podcast que usa en iTunes y en otros lugares.

Una vez que los detalles del podcast estén ordenados, diríjase a la pestaña Diseño para que realmente pueda hacer suyo este reproductor.

Seleccione "Claro" para la opción Color del texto. Establezca las fuentes en "Special Elite", el tamaño del título en 50px y el tamaño del título en 20px.

También configuré el margen superior de este reproductor en particular en 50 px porque este margen mantiene al reproductor centrado horizontalmente en la sección, y cuando cambia a móvil, permite un buen espacio entre los elementos. (La configuración se aplica a todos los tamaños de ventana gráfica, siempre que no haga clic en el icono del teléfono inteligente).

Debido a que el fondo es transparente, no es necesario redondear las esquinas para que coincidan con el cuadro de texto en la primera columna, así que presione guardar.

Debido a que este reproductor de podcast es la estrella del programa, no queremos tener que volver a crearlo cada vez, por lo que guardaremos este módulo en la biblioteca Divi, lo que nos permitirá duplicarlo fácilmente en el sitio y editar como necesitemos.

Ingrese el nombre de la plantilla que desee y NO marque "Convertir esto en un elemento global". Usaremos esa opción en la Parte 2 de esta serie, pero no ahora.

¡Está bien! Solo un elemento más y la primera sección está completa. (Sin embargo, no se preocupe. Es el más complicado de todos).

La mayoría de los podcasts mantienen un blog o muestran notas para que los oyentes regresen y revisen lo que se discutió en el episodio. Tu podcast no es diferente, estoy seguro. Agregar un enlace a las notas mostradas de su podcast es totalmente sencillo.

Cree un nuevo bloque de texto en la tercera columna, abra la configuración y escriba el texto del enlace que desee. Para este ejemplo, es el autoexplicativo "leer las notas del programa".

Haga clic en el icono de la barra de herramientas para agregar un enlace y escriba / pegue la URL de las notas de su programa. (Nuevamente, en la Parte 2, le mostraré cómo crear y diseñar publicaciones de blog para mostrar notas). Debido a que tengo la estructura de enlace permanente de WordPress configurada en "Nombre de la publicación", todo lo que tengo que hacer es escribir el slug del post que escribí para este episodio.

(Nota al margen: al no ingresar la información del dominio y solo el slug, le está diciendo a WordPress que dirija a los usuarios a esa página, independientemente de la información del dominio. ¡Esto es realmente útil en caso de que alguna vez cambie de dominio, y ayuda a evitar enlaces rotos!)

¡Solo guarde ese enlace y estará listo para comenzar!

También debe guardar este módulo en su biblioteca de la misma manera que lo hizo con su reproductor de podcast.

¡Voila! El tuyo ... espera. UH oh. El enlace de las notas de tu programa es ... es ... feo!

Sin embargo, no se preocupe. ¡Los enlaces feos son una solución fácil! Incluso si usa la configuración en el módulo de texto para cambiar el color del texto, no afectará estas palabras porque son un enlace.

Dirígete al campo CSS personalizado en tu Divi -> Opciones de tema e ingresa esto en la parte inferior.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

Lo que esto hará es mantener el texto en blanco (en línea con el resto del texto del sitio, asegúrese de que esté subrayado como la mayoría de los otros enlaces y póngalo en negrita cuando pase el mouse sobre él).

¡Asegúrate de guardarlo y ahora tu reproductor de podcast está completo!

Y para el último ajuste en esta primera sección, haga clic en la configuración de Fila (cuadro verde).

Seleccione "Usar ancho personalizado". Asegúrese de que las unidades estén configuradas en porcentajes y mueva el control deslizante a 80. Hacer esto hará que la fila ocupe el 80% del tamaño de la ventana gráfica que tenga el usuario, lo que evita que todo se agrupe.

¡Y también lo es la sección superior del nuevo sitio web de tu podcast! Debería verse algo así a estas alturas.

Guárdelo, y así, ¡la mayor parte del trabajo está hecho! Y gracias a la función de la biblioteca de Divi, ¡las próximas secciones pasarán volando! Sólo mira.

Página de inicio del sitio web del podcast: segunda sección

Esta sección mostrará episodios seleccionados de nuestro podcast y permitirá a los usuarios visitar los archivos (que, como las páginas de notas del programa, vienen en la Parte 2).

Lo primero que vamos a hacer es crear una nueva sección haciendo clic en el + azul en la parte inferior de la sección y agregando una sección regular. Al hacerlo, se creará otro cuadro azul en el generador visual. Agregue una fila de una sola columna.

Cuando tengamos eso en su lugar, agreguemos un fondo de la misma manera que lo hicimos anteriormente, solo que esta vez, queremos seleccionar la opción "Usar paralaje" en la configuración de la sección. Mantenga el menú desplegable en "True Parallax" en lugar de "CSS".

Esta es la única sección que usaremos con paralaje en la página de inicio. Creo que usar el efecto con moderación llama más la atención sobre el contenido que desea resaltar.

Guarde y luego inserte un nuevo cuadro de texto en la fila. Escriba "Episodios seleccionados", céntrelo en el editor WYSIWYG y diríjase a la configuración para hacer que la fuente del texto sea "Special Elite" y el tamaño del texto 50px. Debería ver algo como esto ahora:

Debajo, cree una nueva fila de tres columnas haciendo clic en el signo + verde y, en la primera columna, ingrese la pestaña "Agregar desde la biblioteca". (No tendrá todas estas opciones de biblioteca en este momento, ¡pero las tendrá más tarde!)

Seleccione el "Episodio de podcast" o lo que sea que haya nombrado a su jugador anteriormente. Luego agregue otro módulo debajo de él, navegue a la biblioteca nuevamente y agregue su módulo "Mostrar enlace de notas" guardado. Haga esto para las tres columnas, hasta que vea esto:

Continúe haciendo esto hasta que haya agregado todos los episodios que desee. Edite el título, la carátula del álbum y muestre los enlaces de notas para cada episodio. Acabo de agregar una segunda fila y solo completé la segunda columna para que el diseño se ajuste al fondo elegido.

Lo único que queda para esta sección es agregar un botón "Examinar los archivos". Cree una nueva fila en la parte inferior haciendo clic en el + verde y use un diseño de columna única. Inserte un módulo "Botón". Esto creará un botón muy difícil de leer (dependiendo de tu experiencia, por supuesto), que necesitará un estilo simple.

Abra la configuración del módulo de botones e ingrese la barra de direcciones URL de la página que serán sus archivos. Fui con el obvio "/ archivos", usé el texto "Examinar los archivos" y luego centré el botón.

En la pestaña de configuración, hacemos clic en "Usar estilos personalizados para el botón" y estableceremos el color de fondo en "#ffffff" y el color del texto en "# 000000" (que es blanco y negro, respectivamente).

Luego, querremos redondear las esquinas del botón estableciendo el Radio del borde en 10px, establezca la fuente en "Elite especial" y cambie el icono Agregar botón de "Predeterminado" a "No".

Finalmente, cambie el Radio del borde de desplazamiento del botón a 10px para que se redondee cuando el botón tenga un mouse sobre él.

Guardé esto en mi biblioteca para poder usar el estilo en otros botones a medida que avanzo.

Y con eso, tu segunda sección está lista. ¡Ya casi terminas, podcaster! Estás redondeando el tercero, ¡literalmente!

Página de inicio del sitio web del podcast: tercera sección

Este será solo un módulo sobre un fondo estático.
Primero, cree un nuevo cuadro azul con una columna de doble ancho como hicimos para la sección dos y seleccione el módulo "Opción de correo electrónico" del menú.

Verá esto iluminado, que no encaja en absoluto con nuestro diseño. Sin embargo, es una solución muy fácil.

Navegue a la configuración del módulo y actualice las siguientes opciones:

Título: dejé el título intencionalmente en blanco
Contenido: agregue su anuncio de llamado a la acción y céntrelo.
Proveedor de servicios: uso Mailchimp, así que eso es lo que elegí aquí.
Color de fondo: transparente; esto también hace que el botón sea transparente.

Lo único que le queda por hacer es asegurarse de que se proporcione su servicio de correo electrónico, o el formulario no aparecerá después de guardar y salir del constructor. Si usa Mailchimp, hay una excelente documentación sobre cómo encontrar su clave API en su documentación de soporte.

Una vez que tenga su clave, vaya a su panel de WordPress, diríjase a Divi -> Opciones de tema una vez más, e ingrese su clave de API de Mailchimp en el campo "Clave de API de Mailchimp".

Una vez guardado, el único paso que le queda antes de tener una página hermosa y terminada es establecer un fondo para la tercera sección. El producto final debería verse así:

¡Lo hiciste! ¡Hurra! Ahora tiene una página de inicio completamente funcional para su podcast. Es hora de grabar y contárselo al mundo, ¿verdad?

Mañana: creación de hermosos archivos y páginas de notas de presentación para su podcast

Dado que ahora tiene una gran página de inicio, puede mostrar el contenido más impresionante que tiene. Pero si tus fans se vuelven verdaderos fanáticos, querrán sumergirse profundamente en tu programa.

Mañana te mostraré cómo armar algunas páginas simples pero hermosas para todo tu archivo de episodios de podcasts, así como páginas individuales para cada episodio que les dicen a los lectores lo que discutes en cada episodio y les dan la oportunidad de registrarse. para su increíble lista de correo electrónico.

¡Nos vemos mañana!

Mostrar página de notas:

Página de archivos: