Criação de belos arquivos e páginas de anotações para o seu podcast

Ontem, usamos o construtor visual do Divi para configurar uma página inicial para o seu podcast que vai impressionar absolutamente seus ouvintes, mas e se eles quiserem se aprofundar em seu programa?

Eles irão para os belos arquivos e mostrarão as páginas de anotações que vou ensinar a você como fazer hoje.

Produtos finais de hoje: Mostrar páginas de notas e arquivos

As próprias páginas são projetadas para complementar a página inicial, mas não espelhar seus elementos diretamente.

Na página de notas do programa, eu queria ter certeza de que qualquer visitante seria capaz de ouvir o episódio diretamente em seu navegador, ver os destaques e links para aquele episódio específico e ter a oportunidade de se inscrever em sua lista de e-mail.

A página de arquivo é tão simples, mas funcional, quanto a página de notas da mostra. As páginas de arquivos têm um propósito: fazer com que seus usuários vejam de forma rápida e fácil seu catálogo anterior. Isso é exatamente o que esta página faz. Com um rápido trecho sobre o programa, seus ouvintes poderão percorrer seu programa para encontrar exatamente o tópico que desejam ouvir.

Ativos de que você precisa

Como ontem, você vai precisar de algumas imagens de fundo de alta resolução. Os dois que usei estão nesta coleção do Unsplash (que também inclui os fundos da página inicial de ontem). Eu os editei para tons de cinza no Preview, mas qualquer software de edição de imagem será capaz de aplicar um efeito preto-e-branco / tons de cinza ou permitir que você mova o controle deslizante de saturação para 0.

Sua vida também será um pouco mais fácil se você já tiver construído a página inicial, porque usará um pouco do mesmo estilo.

É isso, vamos começar a construir!

Construindo a Página Mostrar Notas

As notas do programa são apenas “postagens” no WordPress, então navegue até o painel e vá para Postagens -> Adicionar novo.

Você fará isso toda vez que quiser criar uma página de notas do programa para um episódio individual de seu programa. Dê o título que você quiser e defina o slug da URL para algo simples (para que seus ouvintes lembrem após o término do episódio).

Primeiro, certifique-se de clicar em “Usar o Divi Builder”.

Isso deve abrir o próximo conjunto de opções de que precisamos. No lado direito da página, defina a postagem como “Largura total” porque não usaremos uma barra lateral para as notas do programa. E defina o Título da postagem como “Ocultar” para que os metadados como autor, comentários e data da postagem em si não apareçam.

Então você vai querer entrar no Visual Builder e ser apresentado por uma página da web em branco deliciosamente.

A primeira coisa que você deseja fazer é clicar no ícone de engrenagem na seção azul no canto superior esquerdo da página para inserir as configurações da seção.

De lá, carregue sua imagem de plano de fundo. Role um pouco mais para baixo nas configurações e ative Usar efeito de paralaxe. Deixe o Método Parallax com o padrão “True Parallax”.

Salve essas configurações e você verá algo assim:

Não exatamente o que estava no produto final acima, não é? Teremos que esticar um pouco, adicionando o conteúdo à página.

Clique no + verde e insira uma única linha de coluna (a que está no canto superior esquerdo).

Em seguida, você ficará feliz por já ter criado a página inicial de ontem. Assim que você escolher sua linha, será saudado por uma janela solicitando que escolha um elemento. Você vai selecionar o reprodutor de podcast que salvamos ontem, clicando em “Adicionar da biblioteca”.

Eu tinha chamado o meu simplesmente de “Episódio de Podcast”, mas se você escolheu algo diferente, certifique-se de escolher.

Badabing-badaboom, você tem um episódio de podcast adicionado à página de notas do programa como mágica.

Lembre-se de que você terá que editar o título e a mídia (e potencialmente a arte do episódio) para cada nova página de notas do programa. O que você acabou de adicionar é uma cópia exata do que você salvou.

As notas reais do programa irão diretamente para o reprodutor de podcast, então passe o mouse sobre o reprodutor e aperte o + preto. Role para baixo até ver o módulo de texto. Adicione-o à página.

Na guia Conteúdo em Configurações de texto, insira suas notas no editor WYSIWYG e vá para a guia Design.

Na guia Design, atualize as seguintes opções:

Cor do Texto: Claro
Orientação do Texto: Esquerda
Fonte do texto: Elite especial
Tamanho da fonte do texto: 20px
Cor do texto do texto: #ffffff

Salve-o e você verá um bloco de texto novo em folha e uma página semelhante a esta.

Estamos chegando à reta final da página de notas do programa - faltam apenas dois elementos. Clique no + preto novamente e adicione o modelo de botão que você salvou ontem.

Em vez de levar os usuários aos arquivos como o que fez ontem, este vai devolvê-los à página inicial. Navegue até a página de configurações do botão e defina o URL como uma barra invertida simples.

Por que não ir para / casa ou algo semelhante? Bem, usar apenas uma barra invertida levará seu usuário para qualquer que seja a página inicial do seu site, não importa o quê. E como você está no mesmo site, mesmo a movimentação de domínios não afetará o botão. Sempre voltará para casa. Que é exatamente o que você quer fazer!

Percorra e preencha o resto das configurações do botão. Abra-o na mesma janela, altere o texto do botão para “Voltar para a página inicial” (ou o que você quiser) e o alinhamento do botão para “Certo” (para mantê-lo fora do caminho do conteúdo e para mantê-lo em pé contra o conteúdo). O estilo da guia Design deve ter sido importado da Biblioteca Divi.

Você terá um bom botão de navegação agora, e sugiro adicioná-lo à sua Biblioteca para que possa usá-lo em várias páginas.

E, finalmente, vamos configurar a inscrição de e-mail para que possamos obter esses endereços de e-mail amáveis ​​e fofos para manter os usuários atualizados com notícias sobre o podcast.

Para isso, queremos uma linha totalmente nova com uma única coluna. Portanto, clique no + verde e coloque-o no lugar. Em seguida, adicione um módulo Email Optin no menu suspenso. Como ontem, navegue até as configurações do módulo e insira o título que deseja exibir, bem como qualquer texto de call to action que você deseja no editor WYSIWYG.

Além disso, adicione o texto que desejar para o próprio botão. Eu escolhi o totalmente exclusivo “Assine”.

Escolha seu provedor de serviço de e-mail e lista (lembre-se de ontem que o módulo completo não aparecerá na página quando estiver no ar se você não escolher uma lista).

Mude o fundo RGBA para transparente.

Na guia Design, defina a fonte do cabeçalho como “Special Elite” e o tamanho como 36px.

Você também definirá a fonte do corpo como “Special Elite” e o tamanho como 16px.

Ao contrário de quase tudo neste site, queremos usar uma borda para o módulo Email Optin. Portanto, mova “User Border” para yes e defina a cor como #ffffff e o preenchimento personalizado como 15px em todos os lados.

Quando terminar, vá para a guia Avançado e adicione-o ao Elemento principal em CSS personalizado para arredondar os cantos do módulo:

border-radius:10px;

Salve seu trabalho e você terá uma opção de e-mail!

A única outra coisa que sua página de notas de programa requer é salvar este módulo para uso em outras páginas. Como você deseja que suas opções de e-mail sejam consistentes em todo o site, vamos salvá-lo como um item global. Clique no seu “Botão Adicionar à Biblioteca” ao passar o mouse sobre o módulo e certifique-se de marcar a caixa “Tornar este um item global”.

Agora você tem um único elemento que pode usar em várias páginas. E se você fizer alguma alteração, elas serão refletidas em todas as instâncias, ao contrário do reprodutor de podcast e do botão acima, onde cada módulo pode ser alterado individualmente.

E aí, meus amigos, está o modelo da página Mostrar anotações! Também sugiro salvar a página inteira em sua Biblioteca para que você possa apenas importá-la e alterar os elementos de que precisa para cada episódio.

Agora ... em frente para os arquivos! A linha de chegada está à vista!

Construindo sua página de arquivos

Vá para o painel do WordPress e navegue até Adicionar nova página, nomeie-o (o meu é “Arquivos”) e abra o Divi Visual Builder. Mole-mole.

Assim que estiver lá, adicione uma nova linha de coluna única com um módulo de texto.

Navegue até as configurações e insira o título da página no editor WYSIWYG.

Na guia Design, defina a cor do texto como claro e a orientação como centro. Defina a fonte como “Special Elite” e o tamanho da fonte como 50px.

Para fazer com que o texto tenha uma boa aparência no celular, certifique-se de alterar as margens superior e inferior para 40px.

Salve seu trabalho e - prepare-se - prepare-se para adicionar um plano de fundo aos Arquivos! Abra as configurações na caixa + azul, selecione sua imagem de fundo e defina a paralaxe como você fez para Mostrar notas. Novamente, fiz esta escala de cinza usando Preview.

Na guia Design, defina o preenchimento superior e inferior para 55px e 176px, respectivamente, para que a página inteira permita que o efeito de paralaxe seja visto, não importa quantas postagens você tenha em seus arquivos.

Por que 176px em vez de 175? Porque sou um rebelde, é por isso.

Você verá isso ao salvar seu trabalho:

Em seguida, adicione uma nova linha de coluna única, mas desta vez, insira um módulo de Blog. Isso exibirá qualquer Loop WordPress que você definir, e nós apenas queremos que sejam Trechos e Títulos para que seus ouvintes saibam o que esperar.

Vá para as configurações e atualize as opções na guia Conteúdo da seguinte forma:

Número da postagem: 10 (ou o que você achar melhor para o seu site - ele paginará depois que esse número for exibido)
Conteúdo: Mostrar trecho (porque queremos que o usuário clique e ouça o episódio no player)
Mostrar imagem em destaque: SIM
Cor de fundo do bloco de grade: rgba (73,73,73,0,72)

Na guia Design, atualize as seguintes opções:

Layout: Grade
Fonte do cabeçalho: Elite especial
Cor do texto do cabeçalho: #ffffff
Fonte do corpo: Elite especial
Cor do corpo do texto: #ffffff
Meta Font: Special Elite
Meta Cor do Texto: #ffffff
Borda de uso: SIM
Cor da borda: #ffffff
Largura da borda: 1px
Estilo de borda: sólido

Quando estiver tudo pronto, você tem um último estilo para fazer. A grade em si tem cantos quadrados e agudos em cada caixa, e queremos um raio de borda de 10 px para que corresponda ao resto do site.

Navegue até o painel do WordPress -> Divi -> Opções de tema e role até o CSS personalizado. Adicione este código na caixa para arredondar os cantos das caixas de trechos individuais:

.et_pb_post {
 border-radius: 10px;
}

Lembre-se de que “.et_pb_post” é a classe CSS que Divi usa para ajustar essas caixas como um todo.

Depois disso, salve todo o seu trabalho.

A única coisa que resta a fazer é adicionar o botão Voltar para a página inicial de sua biblioteca e pronto. Clique no + preto para adicioná-lo à mesma linha do módulo do Blog.

Hot diggity dog, você acabou de configurar sua página de Arquivos.

Parabéns! Você acabou de configurar sua página de Arquivos. Salve sua página de Arquivos como um modelo clicando no + roxo na parte inferior da tela, e você pode marcar outro item de sua lista de balde - porque entre ontem e hoje, você acabou de criar um reprodutor de podcast totalmente funcional, página inicial, arquivo, e modelo para as notas individuais.

Para concluir

E é isso! Obrigado por acompanhar meus dois tutoriais de página de podcast. Você pode ver o primeiro Como criar uma bela página de podcast com Divi neste link. Se você tiver dúvidas ou comentários, fique à vontade para deixá-los abaixo e farei o possível para respondê-los!