Creación de hermosos archivos y páginas de notas de espectáculos para su podcast

Ayer, usamos el constructor visual de Divi para configurar una página de inicio para su podcast que impresionará absolutamente a sus oyentes, pero ¿qué pasa si quieren profundizar en su programa?

Se dirigirán a los hermosos archivos y mostrarán las páginas de notas que les voy a enseñar cómo hacer hoy.

Productos finales de hoy: Mostrar notas y páginas de archivos

Las páginas en sí están diseñadas para complementar la página de inicio, pero no reflejan sus elementos directamente.

En la página de notas del programa, quería asegurarme de que cualquier visitante pudiera escuchar el episodio directamente en su navegador, ver los aspectos más destacados y los enlaces para ese episodio en particular y tener la oportunidad de registrarse en su lista de correo electrónico.

La página de archivo es tan simple pero funcional como la página de notas del programa. Las páginas de archivos tienen un propósito: que sus usuarios vean rápida y fácilmente su catálogo anterior. Eso es exactamente lo que hace esta página. Con un extracto rápido sobre el programa, sus oyentes podrán escanear su programa para encontrar exactamente el tema que quieren escuchar.

Activos que necesitará

Como ayer, necesitará algunas imágenes de fondo de alta resolución. Los dos que utilicé están en esta colección en Unsplash (que también incluye los fondos de la página de inicio de ayer). Los edité para que estén en escala de grises en Vista previa, pero cualquier software de edición de imágenes podrá aplicar un efecto de blanco y negro / escala de grises o permitirle mover el control deslizante de saturación hacia abajo a 0.

Su vida también será un poco más fácil si ya ha creado la página de inicio porque usará algunos de los mismos estilos.

Eso es todo, ¡así que manos a la obra!

Creación de la página Show Notes

Las notas del programa son solo "publicaciones" en WordPress, así que navegue hasta su panel de control y vaya a Publicaciones -> Agregar nuevo.

Hará esto cada vez que desee crear una página de notas del programa para un episodio individual de su programa. Ponle el título que quieras y configura el slug de URL en algo simple (para que tus oyentes lo recuerden después de que termine el episodio).

Primero, asegúrese de hacer clic en "Usar Divi Builder".

Eso debería abrir el siguiente conjunto de opciones que necesitamos. En el lado derecho de la página, establezca la publicación en "Ancho completo" porque no vamos a utilizar una barra lateral para las notas de nuestro programa. Y configure el Título de la publicación en "Ocultar" para que los metadatos como el autor, los comentarios y la fecha de la publicación en sí no aparezcan.

Entonces querrás ingresar al Visual Builder y ser presentado por una página web deliciosamente en blanco.

Lo primero que querrá hacer es hacer clic en el ícono de ajustes en la sección azul en la esquina superior izquierda de la página para ingresar a la configuración de la sección.

A partir de ahí, sube tu imagen de fondo. Desplácese un poco más hacia abajo en la configuración y active Usar efecto de paralaje. Deje el método Parallax al predeterminado "True Parallax".

Guarde esa configuración y debería ver algo como esto:

No es exactamente lo que estaba en el producto final arriba, ¿verdad? Tendremos que estirarlo un poco agregando el contenido a la página.

Haga clic en el verde + e inserte una fila de una sola columna (la de la esquina superior izquierda).

A continuación, se alegrará de haber hecho la página de inicio de ayer. Tan pronto como elija su fila, será recibido por una ventana que le pedirá que elija un elemento. Vas a seleccionar el reproductor de podcast que guardamos ayer haciendo clic en "Agregar de la biblioteca".

Yo había llamado al mío simplemente "Episodio de Podcast", pero si eliges algo diferente, asegúrate de elegirlo.

Badabing-badaboom, tienes un episodio de podcast agregado a la página de notas de tu programa como por arte de magia.

Tenga en cuenta que tendrá que editar el título y los medios (y posiblemente el arte del episodio) para cada nueva página de notas del programa. Lo que acaba de agregar es una copia exacta de lo que había guardado.

Las notas reales de tu programa irán directamente debajo del reproductor de podcasts, así que coloca el mouse sobre el reproductor y presiona el + negro. Desplácese hacia abajo hasta que vea el módulo de texto. Agréguelo a la página.

En la pestaña Contenido en Configuración de texto, ingrese sus notas en el editor WYSIWYG y diríjase a la pestaña Diseño.

En la pestaña Diseño, actualice las siguientes opciones:

Color del texto: claro
Orientación del texto: izquierda
Fuente de texto: Elite especial
Tamaño de fuente de texto: 20px
Color del texto del texto: #ffffff

Guárdelo y verá un nuevo bloque de texto brillante y una página similar a esta.

Estamos llegando a la recta final de la página de notas del programa, solo quedan dos elementos. Haga clic en el + negro nuevamente y agregue la plantilla de botón que guardó ayer.

En lugar de llevar a los usuarios a los archivos como lo haría ayer, este los devolverá a la página de inicio. Navegue a la página de configuración del botón y establezca la URL en una barra invertida simple.

¿Por qué no enviarlo a / home o algo similar? Bueno, usar solo una barra invertida llevará a su usuario a la página principal de su sitio web, pase lo que pase. Y como está en el mismo sitio, ni siquiera mover dominios afectará al botón. Siempre volverá a casa. ¡Que es exactamente lo que quieres que haga!

Revise y complete el resto de la configuración del botón. Haz que se abra en la misma ventana, cambia el texto del botón a "Regresar a casa" (o lo que quieras) y la alineación del botón a "Derecha" (tanto para mantenerlo fuera del camino del contenido como para que quede de pie en contra del contenido). El estilo de la pestaña Diseño debería haberse importado de la Biblioteca Divi.

Ahora tendrá un bonito botón de navegación y le sugiero que lo agregue a su biblioteca para que pueda usarlo en varias páginas.

Y finalmente, configuremos el registro de correo electrónico para que podamos obtener esas dulces direcciones de correo electrónico para mantener a los usuarios actualizados con las noticias sobre el podcast.

Para esto, queremos una fila completamente nueva de una sola columna. Así que haga clic en el verde + y colóquelo en su lugar. Luego agregue un módulo Optin de correo electrónico del menú desplegable. Al igual que ayer, navegue hasta la configuración del módulo e ingrese el título que desee mostrar, así como cualquier texto de llamada a la acción que desee en el editor WYSIWYG.

Además, agregue el texto que desee para el botón en sí. Elegí el exclusivo "Suscribirse".

Elija su proveedor de servicios de correo electrónico y la lista (recuerde de ayer que el módulo completo no aparecerá en la página cuando esté activo si no elige una lista).

Cambie el fondo RGBA a transparente.

En la pestaña Diseño, establezca la Fuente del encabezado en "Elite especial" y el tamaño en 36px.

También establecerá la fuente del cuerpo en "Special Elite" y el tamaño en 16px.

A diferencia de casi todo lo demás para este sitio, queremos usar un borde para el módulo Optin de correo electrónico. Así que mueva "Borde de usuario" a sí, y establezca el color en #ffffff, y el Relleno personalizado en 15px en todos los lados.

Cuando haya terminado, vaya a la pestaña Avanzado y agréguelo al Elemento principal en CSS personalizado para redondear las esquinas del módulo:

border-radius:10px;

¡Guarde su trabajo y obtendrá una opción de correo electrónico!

Lo único que requiere la página de notas del programa es guardar este módulo para usarlo en otras páginas. Dado que desea que sus opciones de correo electrónico sean coherentes en todo el sitio, lo guardaremos como un elemento global. Haga clic en el botón "Agregar a la biblioteca" cuando pase el mouse sobre el módulo y asegúrese de marcar la casilla "Convertir este elemento en un elemento global".

Ahora tiene un solo elemento que puede usar en varias páginas. Y si realiza algún cambio, se reflejará en todas las instancias, a diferencia del reproductor de podcasts y el botón de arriba, donde cada módulo se puede cambiar individualmente.

¡Y ahí, amigos míos, está la plantilla de la página Show Notes! También sugiero guardar toda la página en su biblioteca para que pueda importarla y cambiar los elementos que necesita para cada episodio.

Ahora ... ¡adelante a los Archivos! ¡La línea de meta está a la vista!

Construyendo su página de archivos

Dirígete a tu panel de WordPress y navega hasta Agregar nueva página, asígnale un nombre (el mío es "Archivos") y abre Divi Visual Builder. Pan comido.

Una vez que esté allí, agregue una nueva fila de una sola columna con un módulo de texto.

Navegue a la configuración e ingrese el título de su página en el editor WYSIWYG.

En la pestaña Diseño, establezca el Color del texto en Luz y la Orientación en Centro. Establezca la fuente en "Special Elite" y el tamaño de fuente en 50px.

Para que el texto se vea bien en un dispositivo móvil, asegúrese de cambiar los márgenes superior e inferior a 40 px.

Guarde su trabajo y, prepárese para agregar un fondo a los Archivos. Abra la configuración en el cuadro azul +, seleccione su imagen de fondo y configure el paralaje como lo hizo para Mostrar notas. Nuevamente, hice esta escala de grises usando Vista previa.

En la pestaña Diseño, establezca el relleno superior e inferior en 55px y 176px respectivamente para que toda la página permita que se vea el efecto de paralaje sin importar cuántas publicaciones tenga en sus archivos.

¿Por qué 176px en lugar de 175? Porque soy rebelde, por eso.

Verá esto cuando guarde su trabajo:

A continuación, agregue una nueva fila de una sola columna, solo que esta vez, inserte un módulo de Blog. Esto mostrará cualquier bucle de WordPress que establezca, y solo queremos que sean extractos y títulos para que sus oyentes sepan qué esperar.

Dirígete a la configuración y actualiza las opciones en la pestaña Contenido de la siguiente manera:

Número de publicación: 10 (o lo que crea que se ve mejor para su sitio; se paginará después de que se muestre este número)
Contenido: Mostrar extracto (porque queremos que el usuario haga clic y escuche el episodio en el reproductor)
Mostrar imagen destacada: SÍ
Color de fondo del mosaico de cuadrícula: rgba (73,73,73,0.72)

En la pestaña Diseño, actualice las siguientes opciones:

Diseño: cuadrícula
Fuente de encabezado: Elite especial
Color del texto del encabezado: #ffffff
Fuente del cuerpo: Elite especial
Color del texto del cuerpo: #ffffff
Fuente Meta: Elite especial
Color del meta texto: #ffffff
Usar borde: SÍ
Color del borde: #ffffff
Ancho del borde: 1 px
Estilo de borde: sólido

Cuando todo esté listo, tienes un último estilo que hacer. La cuadrícula en sí tiene esquinas cuadradas y afiladas en cada cuadro, y queremos obtener un radio de borde de 10px para que coincida con el resto del sitio.

Vaya a su Panel de WordPress -> Divi -> Opciones de tema, y ​​luego desplácese hasta CSS personalizado. Agregue este código en el cuadro para redondear las esquinas de los cuadros de extractos individuales:

.et_pb_post {
 border-radius: 10px;
}

Tenga en cuenta que “.et_pb_post” es la clase CSS que Divi usa para ajustar esos cuadros como un todo.

Después de eso, guarde todo su trabajo.

Lo único que queda por hacer es agregar el botón Regresar a casa de su biblioteca y habrá terminado. Haga clic en el signo + negro para agregarlo a la misma fila que su módulo de Blog.

Perro caliente, acabas de terminar de configurar tu página de Archivos.

¡Felicitaciones! Acaba de terminar de configurar su página de Archivos. Guarde su página de Archivos como una plantilla haciendo clic en el + púrpura en la parte inferior de la pantalla, y puede marcar otro elemento de su lista de deseos, porque entre ayer y hoy, acaba de crear un reproductor de podcasts completamente funcional, página de inicio, archivo, y plantilla para mostrar notas individuales.

En conclusión

¡Y eso es! Gracias por seguir mis dos tutoriales de páginas de podcasts. Puede ver el primero Cómo crear una hermosa página de podcast con Divi en este enlace. Si tiene alguna pregunta o comentario, no dude en dejarlos a continuación y haré todo lo posible para responderlos.