Ayer, usamos el generador 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 enseñaré a hacer hoy.
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 de 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 mostrar notas. 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, vas a necesitar algunas imágenes de fondo de alta resolución. Los dos que usé 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 fueran 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 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 vamos a construir!
Creación de la página Mostrar notas
Las notas del programa son solo «publicaciones» en WordPress, así que navegue a su tablero 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 establece el slug de URL en algo simple (para que tus oyentes lo recuerden después de que termine tu episodio).
Primero, asegúrese de hacer clic en «Usar The Divi Builder».
Eso debería abrir el siguiente conjunto de opciones que necesitamos. En el lado derecho de la página, configure la publicación en «Ancho completo» porque no vamos a usar una barra lateral para nuestras notas del 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.
Luego querrá ingresar al Visual Builder y se le presentará una página web maravillosamente 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.
Desde allí, cargue su 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 en el valor predeterminado «True Parallax».
Guarde esa configuración y debería ver algo como esto:
No es exactamente lo que había en el producto final de arriba, ¿verdad? Vamos a tener 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 que está en la esquina superior izquierda).
A continuación, te alegrarás de haber hecho la página de inicio de ayer. Tan pronto como elija su fila, aparecerá una ventana que le pedirá que elija un elemento. Vas a seleccionar el reproductor de podcasts que guardamos ayer haciendo clic en «Agregar desde la biblioteca».
Llamé al mío simplemente «Episodio de podcast», pero si eliges algo diferente, asegúrate de elegirlo.
Badabing-badaboom, tiene un episodio de podcast agregado a la página de notas de su programa como 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.
Tus notas reales del programa irán directamente debajo del reproductor de podcasts, así que pasa el mouse sobre el reproductor y presiona el + negro. Desplácese hacia abajo hasta que vea el módulo de texto. Agrégalo 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 del texto: Elite especial
Tamaño de fuente del texto: 20 px
Color del texto: #ffffff
Guárdelo y debería 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 faltan 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á 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 hacer que vaya a /home o algo similar? Bueno, usar solo una barra invertida llevará a su usuario a la página principal de su sitio web, sin importar qué. Y dado que está en el mismo sitio, incluso mover dominios no afectará el botón. Siempre volverá a casa. ¡Que es exactamente lo que quieres que haga!
Vaya 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 «Volver 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 se mantenga firme). contra el contenido). El estilo de la pestaña Diseño debería haberse importado de la Biblioteca Divi.
Tendrá un buen botón de navegación ahora, 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 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 Email Optin desde el menú desplegable. Al igual que ayer, navegue a la configuración del módulo e ingrese el título que desea 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 totalmente único «Suscribirse».
Elija su proveedor de servicios de correo electrónico y la lista (recuerde que ayer el módulo completo no aparecerá en la página cuando esté activo si no elige una lista).
Cambia el fondo RGBA a transparente.
En la pestaña Diseño, configure la Fuente del encabezado en «Elite especial» y el tamaño en 36 px.
También establecerá la Fuente del cuerpo en «Elite especial» y el tamaño en 16 px.
A diferencia de casi todo lo demás para este sitio, queremos usar un borde para el módulo Email Optin. 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:
|
01
|
border-radius:10px; |
¡Guarde su trabajo y obtendrá una opción de correo electrónico!
Lo único que requiere su 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 consistentes en todo el sitio, vamos a guardar esto 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 «Hacer de este 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 podcast y el botón de arriba, donde cada módulo se puede cambiar individualmente.
¡Y ahí, mis amigos, está su plantilla de página Mostrar notas! También sugiero guardar la página completa en su biblioteca para que pueda importarla y cambiar los elementos que necesita para cada episodio.
Ahora… ¡hacia 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 Claro y la Orientación en Centro. Establezca la fuente en «Elite especial» y el Tamaño de fuente en 50 px.
Para que el texto se vea bien en dispositivos móviles, asegúrese de cambiar los márgenes superior e inferior a 40 px.
Guarde su trabajo y, prepárese, ¡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 en escala de grises usando Vista previa.
En la pestaña Diseño, configure el relleno superior e inferior en 55 px y 176 px 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ás esto cuando guardes tu trabajo:
A continuación, agregue una nueva fila de una sola columna, solo que esta vez, inserte un módulo 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:
Fuente de encabezado de cuadrícula:
Color de texto de encabezado de élite especial: #ffffff
Fuente del cuerpo:
Color de texto de cuerpo de élite especial: #ffffff
Fuente meta:
Color de texto meta de élite especial: #ffffff
Usar borde: SÍ
Color de borde: #ffffff
Ancho de borde: 1px
Borde Estilo: Sólido
Cuando todo esté listo, tienes un último toque de estilo que hacer. La cuadrícula en sí tiene esquinas agudas y cuadradas en cada cuadro, y queremos obtener un radio de borde de 10 px para que coincida con el resto del sitio.
Navegue a su Tablero 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:
|
01
02
03
|
.et_pb_post { border-radius: 10px;} |
Tenga en cuenta que «.et_pb_post» es la clase CSS que Divi usa para ajustar esos cuadros en su conjunto.
Después de eso, guarde todo su trabajo.
Lo único que queda por hacer es agregar el botón Volver a Inicio de su biblioteca, y habrá terminado. Haga clic en el + negro para agregarlo a la misma fila que su módulo Blog.
Hot diggity dog, acabas de terminar de configurar tu página de Archivos.
¡Felicitaciones! Acabas de terminar de configurar tu 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 shownotes individuales.
En conclusión
¡Y eso es! Gracias por seguir mis dos tutoriales de la página de podcasts. Puedes 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.