Como criar uma bela página de podcast com Divi

Você tem um podcast incrível. Mas seu site pode precisar de algum trabalho. Ele faz seu trabalho, mas não se destaca. Não tema, podcaster! Eu tenho você coberto.

Vou te ensinar uma maneira simples de usar o Divi para criar não apenas uma página inicial facilmente atualizada para o seu podcast, mas também uma página de arquivo estilosa e um modelo para episódios individuais.

Produto final de hoje: página inicial do podcast de três seções

Eu queria manter o design simples e mínimo possível, sem perder a personalidade que um bom podcast deve manter. Este design é para um podcast indie fictício chamado You're An All-Star , cujo foco é sapatos e ser feliz. Eu queria que o design refletisse esse tema.

A primeira seção usa uma cor brilhante para chamar a atenção do usuário, fornece uma sinopse rápida sobre o que é o podcast à esquerda e usa o Divi Audio Module para apresentar um episódio de podcast para audição imediata.

Conforme o usuário rola para baixo, a estética muda ligeiramente para a seção Episódios selecionados, que novamente usa o módulo de áudio Divi para apresentar conteúdo facilmente acessível, bem como uma opção para visitar os arquivos do programa. O fundo é uma paralaxe para chamar a atenção para os próprios episódios.

A seção final é simplesmente um opt-in por e-mail. Cada marca, podcast, blog e empresa precisa de um e, para fazê-lo se destacar, mudei esta seção de volta para um plano de fundo colorido e a tornei pequena o suficiente para que a paralaxe da segunda seção ajudasse a chamar mais atenção para ela.

Abaixo, darei a você um tutorial passo a passo sobre como estilizei e criei cada módulo, seção e página do site.

Ativos de que você precisa

A grande vantagem desse design é que ele não exige muitos recursos fora do próprio Divi. Tudo o que você precisa são 5 imagens de alta resolução para usar em fundos e qualquer arte de podcast e miniaturas que você usar em seus episódios.

Todas as minhas imagens vieram do Unsplash (todas as imagens deste site podem ser encontradas nesta coleção). Usei o Preview para converter alguns deles para preto e branco, mas você pode usar qualquer software de edição de imagem que desejar. Quase todos eles permitem que você selecione uma opção de tons de cinza / preto e branco ou reduza a saturação para zero.

Fora isso, todos os recursos de que você precisa estão dentro do Divi. Vamos começar então!

Página inicial do site do podcast: primeira seção

Comece criando uma nova página no painel do WordPress e definindo-a como a página inicial do seu site. (Eu convenientemente chamei o meu de “Casa.)

Agora volte para editar sua nova página. Na caixa Atributos da página na barra lateral direita, altere o modelo padrão para o modelo de página em branco.

Primeira coisa, criamos uma linha de três colunas.

Dentro da coluna do meio, queremos inserir um módulo divisor Divi.

Dentro das configurações do divisor, na guia Design, defina a altura para 600. Isso não apenas manterá as duas colunas externas (o conteúdo principal da seção) separadas, mas também manterá a seção alta o suficiente para permitir espaço em branco adequado em vários resoluções da janela de visualização. (Enquanto permanece oculto no celular por padrão.)

Agora, na coluna da esquerda, vamos adicionar dois módulos de texto. Decidi que, para este projeto, um cabeçalho horizontal ficaria fora do lugar, então o primeiro módulo de texto será simplesmente um título.

Na guia de conteúdo das Configurações de texto, adicione o título à caixa de conteúdo.

Na guia Design, atualize a Cor do Texto para “Claro” e altere a Orientação do Texto para “Centro”. Em seguida, ajuste a fonte e o tamanho do texto. Escolhi a fonte “Special Elite” por causa de sua aparência desgastada e, em seguida, defina seu tamanho para 60. Defina também a altura da linha de texto para 1em.

Depois de cuidar disso, é hora de passar para a segunda caixa de texto. Estamos usando este como um resumo rápido para o podcast.

Na guia Conteúdo, atualize as seguintes opções:

Conteúdo : insira seu texto para a descrição (sugiro uma versão truncada da descrição que você usa no iTunes e outros serviços)
Cor de fundo : rgba (0,0,0,0.4)

Na guia Design, selecione “Light” para a cor do texto e selecione “Center” para a orientação do texto como você fez na caixa anterior. Defina também a fonte do texto para “Special Elite” com tamanho de 20px.

Por fim, adicione 10 px de preenchimento ao redor de toda a caixa de texto.

Depois disso, vá para a guia Avançado e, em CSS personalizado, insira-o no campo Elemento principal para arredondar os cantos da caixa de texto:

border-radius: 10px;

Depois de fazer isso, você terá concluído as duas primeiras colunas do seu novo site! Viva! Salve seu trabalho clicando no círculo roxo na parte inferior da página e clicando no botão verde salvar.

Excelente trabalho!

Para torná-lo um pouco mais atraente visualmente, no entanto, precisamos definir o plano de fundo da seção, então vá para as configurações da caixa azul (seção) e carregue uma imagem de plano de fundo. Costumo manter a minha resolução de 1920 × 1280.

Você deve ver algo parecido com isto agora:

A esta altura, você pode estar se perguntando: “E os podcasts? É um site de podcast, e não fizemos nada com um podcast ainda! ” Você está totalmente certo. Então, vamos começar um pouco de áudio selecionando o (adivinhou) módulo de áudio na terceira coluna de nossa linha.

O módulo de áudio padrão não se encaixa exatamente no tema que vamos usar para este site, então vamos partir daqui:

Para isso:

Abra as configurações do módulo de áudio. O campo Áudio é onde você pode fazer upload de seu próprio arquivo para qualquer host que usar ou pode vincular diretamente ao arquivo de mídia de qualquer serviço de podcasting que usar. Eu uso Libsyn para o meu, então peguei o URL da mídia e colei.

(Curiosidade: qualquer pessoa que clicar em jogar no seu site por meio deste módulo também será contado como um download no painel do seu Libsyn. Pontuação!)

Em seguida, coloque o título do episódio ao qual vinculou em Título e seu nome em Nome do artista (ou o que quer que você use em seu programa. Para nosso podcast ficcional sobre sapatos, como eu poderia escolher outra coisa senão Chuck Taylor? ) O título do álbum será o nome do seu podcast.

Em seguida, vamos mudar essa cor verde-azulado esverdeado para um fundo totalmente transparente. A cor não importa. Basta deslizar a barra de transparência até o final ou até que o último dígito do RGBA seja 0.

Para a imagem da capa, é melhor usar a miniatura deste episódio em particular ou a arte do podcast que você usa no iTunes e em outros lugares.

Assim que os detalhes do podcast forem classificados, vá para a guia Design para que você possa realmente personalizar este player.

Selecione “Light” para a opção Text Color. Defina as fontes como “Special Elite”, o tamanho do título em 50px e o tamanho da legenda em 20px.

Também defini a margem superior neste player em particular para 50px porque essa margem mantém o player centralizado horizontalmente na seção e, quando você muda para celular, permite um bom espaçamento entre os elementos. (A configuração se aplica a todos os tamanhos de janela de visualização, contanto que você não clique no ícone do smartphone.)

Como o fundo é transparente, não há necessidade de arredondar os cantos para coincidir com a caixa de texto na primeira coluna, então clique em salvar.

Como este reprodutor de podcast é a estrela do show, não queremos ter que recriá-lo todas as vezes, então vamos salvar este módulo na biblioteca Divi, o que nos permitirá duplicá-lo facilmente em todo o site e edite conforme necessário.

Insira o nome do modelo que desejar e NÃO marque “Tornar este um item global”. Usaremos essa opção na Parte 2 desta série, mas não agora.

Tudo bem! Apenas mais um elemento e a primeira seção está completa. (Mas não se preocupe. É o mais envolvente de todos eles.)

A maioria dos podcasts mantém um blog ou mostra notas para os ouvintes voltarem e revisitarem o que foi discutido no episódio. Seu podcast não é diferente, tenho certeza. Adicionar um link às notas de exibição do seu podcast é totalmente indolor.

Crie um novo bloco de texto na terceira coluna, abra as configurações e digite o texto do link que desejar. Para este exemplo, é o autoexplicativo "leia as notas do programa".

Clique no ícone na barra de ferramentas para adicionar um link e digite / cole o URL para as notas do programa. (Mais uma vez, na Parte 2, mostrarei como criar e estilizar postagens de blog para notas de apresentação.) Como tenho a estrutura de permalink do WordPress definida como "Nome da postagem", tudo o que preciso fazer é digitar o slug do post que escrevi para este episódio.

Observação

Basta salvar o link e você estará pronto para prosseguir!

Você também deve salvar este módulo em sua biblioteca da mesma forma que salvou seu reprodutor de podcast.

Voila! Seu próprio ... espere. Uh oh. Seu link de anotações do programa é ... é ... feio!

Não se preocupe, entretanto. Links feios são uma solução fácil! Mesmo se você usar as configurações no módulo de texto para alterar a cor do texto, isso não afetará essas palavras porque são um link.

Vá para o campo CSS personalizado em seu Divi -> Opções de tema e insira-o na parte inferior.

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

O que isso fará é manter o texto em branco (alinhado com o resto do texto do site, certifique-se de que ele esteja sublinhado como a maioria dos outros links e coloque-o em negrito ao passar o mouse sobre ele).

Certifique-se de salvá-lo e agora seu reprodutor de podcast está completo!

E para o último ajuste nesta primeira seção, clique nas configurações de linha (caixa verde).

Selecione “Usar largura personalizada”. Certifique-se de que as unidades estejam definidas como porcentagens e mova o controle deslizante para 80. Isso fará com que a linha ocupe 80% do tamanho da janela de visualização que o usuário possui, o que impede que tudo se amontoe.

E também a seção superior do novo site do seu podcast! Deve ser parecido com isso agora.

Salve e, assim, a maior parte do trabalho está feito! E graças ao recurso de biblioteca do Divi, as próximas seções vão voar! Apenas observe.

Página inicial do site do podcast: segunda seção

Esta seção apresentará episódios selecionados de nosso podcast e permitirá que os usuários visitem os arquivos (que são, como as páginas de notas do programa, incluídos na Parte 2).

A primeira coisa que faremos é criar uma nova seção clicando no + azul na parte inferior da seção e adicionando uma seção regular. Isso criará outra caixa azul no construtor visual. Adicione uma linha de coluna única.

Quando tivermos isso no lugar, vamos adicionar um plano de fundo da mesma maneira que fizemos acima, só que desta vez, queremos selecionar a opção “Use Parallax Option” nas configurações da seção. Mantenha a lista suspensa em “True Parallax” em vez de “CSS”.

Esta é a única seção que usaremos com paralaxe na página inicial. Acho que usar o efeito com moderação chama mais atenção para o conteúdo que você deseja destacar.

Salve e insira uma nova caixa de texto na linha. Digite “Episódios selecionados”, centralize-o no editor WYSIWYG e vá para as configurações para tornar a fonte do texto “Elite especial” e o tamanho do texto 50px. Você deve ver algo assim agora:

Abaixo disso, faça uma nova linha de três colunas clicando no + verde e, na primeira coluna, insira a guia "Adicionar da biblioteca". (Você não terá todas essas opções de biblioteca agora, mas terá mais tarde!)

Selecione o “Episódio de Podcast” ou o nome que você deu ao jogador acima. Em seguida, adicione outro módulo abaixo dele, navegue até a biblioteca novamente e adicione o módulo “Mostrar link do Notes” salvo. Faça isso para todas as três colunas, até ver isto:

Continue fazendo isso até adicionar todos os episódios que deseja. Edite o título, a capa do álbum e mostre links de notas para cada episódio. Acabei de adicionar uma segunda linha e preenchi apenas a segunda coluna para fazer o design se encaixar com meu plano de fundo escolhido.

A única coisa que resta para esta seção é adicionar um botão “Navegar nos Arquivos”. Crie uma nova linha na parte inferior clicando no + verde e use um layout de coluna única. Insira um módulo “Botão”. Isso criará um botão muito difícil de ler (dependendo do seu plano de fundo, é claro), que precisará de um estilo simples.

Abra as configurações do módulo Botão e insira o slug de URL para a página que será seus arquivos. Eu escolhi o óbvio “/ archives”, usei o texto “Browse the Archives,” e então centralizei o próprio botão.

Na guia de configurações, clicamos em “Usar estilos personalizados para botão” e definiremos a cor de fundo como “#ffffff” e a cor do texto como “# 000000” (que é branco e preto, respectivamente).

Em seguida, vamos querer arredondar os cantos do botão, definindo o raio da borda para 10px, definir a fonte para "Elite especial" e alterar o ícone do botão Adicionar de "Padrão" para "Não."

Por fim, altere o raio da borda do mouse sobre o botão para 10px para que seja arredondado quando o botão do mouse estiver sobre ele.

Salvei isso na minha biblioteca para poder usar o estilo em outros botões à medida que prossigo.

E com isso, sua segunda seção está concluída. Você está quase terminando, podcaster! Você está chegando em terceiro - literalmente!

Página inicial do site do podcast: terceira seção

Este será apenas um único módulo sobre um fundo estático.
Primeiro, crie uma nova caixa azul com uma coluna de largura dupla como fizemos para a seção dois e selecione o módulo “Email Optin” no menu.

Você verá este aceso, o que não se encaixa em nada com o nosso design. É uma solução super fácil, no entanto.

Navegue até as configurações do módulo e atualize as seguintes opções:

Título: deixei o título intencionalmente em branco
Conteúdo: adicione sua frase de chamariz e centralize-a.
Provedor de serviços: Eu uso o Mailchimp, então foi isso que fiz aqui.
Cor de fundo: transparente; isso também torna o próprio botão transparente.

A única coisa que você tem a fazer é garantir que seu serviço de e-mail seja fornecido, ou o formulário não aparecerá depois que você salvar e sair do construtor. Se você usa Mailchimp, há uma grande documentação sobre como encontrar sua chave de API na documentação de suporte.

Assim que tiver sua chave, vá para o painel do WordPress, vá até Divi -> Opções de tema mais uma vez e insira sua chave de API do Mailchimp no campo apropriadamente denominado “Chave de API do Mailchimp”.

Depois de salvar, a única etapa que resta antes de ter uma página bonita e finalizada é definir um plano de fundo para a terceira seção. O produto final deve ser semelhante a este:

Você fez isso! Viva! Agora você tem uma página inicial totalmente funcional para o seu podcast. É hora de bater um recorde e contar ao mundo sobre isso, certo?

Amanhã: Criando belos arquivos e exibindo páginas de anotações para o seu podcast

Como agora você tem uma ótima página inicial, pode mostrar o conteúdo mais incrível que você tem. Mas se seus fãs se tornarem verdadeiros fanáticos, eles vão querer mergulhar fundo em seu show.

Amanhã vou mostrar como montar algumas páginas simples, mas bonitas, para todo o seu arquivo de episódios de podcast, bem como páginas individuais para cada episódio que dizem aos leitores o que você discute em cada episódio e dão a eles a chance de se inscrever. para sua lista de e-mail incrível.

Vejo você amanhã!

Mostrar página de nota:

Página de arquivos: