Como adicionar uma barra de áudio de "último episódio" fixa ao cabeçalho Divi

Se você estiver hospedando um site de podcast com Divi, é provável que você já esteja usando o Módulo de Áudio integrado. Agora, se você está procurando uma maneira especial de colocar seu último episódio em destaque, você vai adorar este tutorial. Hoje, mostraremos como incluir uma barra fixa de áudio do último episódio em seu cabeçalho Divi. Incluiremos uma animação em loop do Módulo de Texto para chamar a atenção para a barra de áudio e você também poderá baixar o template de cabeçalho global, incluindo a barra de áudio!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o modelo de cabeçalho da barra de áudio GRATUITAMENTE

Para colocar as mãos no modelo de cabeçalho de barra de áudio gratuito, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Vá para Divi Theme Builder e comece a construir um cabeçalho global

Vá para Divi Theme Builder

Comece acessando o Divi Theme Builder no backend do seu site WordPress.

Comece a construir o cabeçalho global

Em seguida, comece a construir um cabeçalho global.

Criar cabeçalho global com a barra de áudio do último episódio

Configurações da seção

Cor de fundo

Uma vez dentro do editor de template, você notará uma seção. Abra essa seção e mude a cor de fundo. Estamos combinando este cabeçalho global com o Pacote de Layout de Podcast, mas sinta-se à vontade para usar qualquer outro tipo de estilo de design de sua escolha.

• Cor de fundo: # 1a1844

Espaçamento

Em seguida, vá para a guia de design e adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 50 px (desktop), 80 px (tablet e telefone)
• Preenchimento inferior: 0 px

Sombra da caixa

Para separar o cabeçalho do conteúdo da página / postagem, também adicionaremos uma sombra de caixa à nossa seção.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.3)

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma primeira linha à sua seção usando a seguinte estrutura de colunas:

Cor de fundo

Esta linha inteira será dedicada à nossa barra de áudio do episódio mais recente. Mas antes de chegarmos a isso, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: # fe4943

Dimensionamento

Vá para a guia de design da linha e altere as configurações de dimensionamento a seguir.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 90%
• Largura máxima: 100%

Espaçamento

Estamos adicionando alguns preenchimentos personalizados na parte superior e inferior também.

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Fronteira

Em seguida, iremos para as configurações de borda e adicionaremos alguns cantos arredondados.

• Inferior esquerdo: 10px
• Inferior direito: 10px

Sombra da caixa

Também incluímos uma sombra de caixa.

• Força do desfoque de sombra da caixa: 50 px
• Cor da sombra: rgba (0,0,0,0.3)

Posição

A seguir, iremos para a guia avançada e consertaremos toda a linha. Aumentaremos o índice z da linha também para garantir que ele se sobreponha à segunda linha que adicionaremos à nossa seção.

• Cargo: Fixo
• Localização: Centro Superior
• Índice Z: 11

Visibilidade da coluna 1

Conclua as configurações de linha definindo os transbordamentos da coluna 1 como ocultos. Isso vai ajudar na animação do texto que você notou na prévia deste post. Ao definir os overflows como ocultos, garantiremos que a animação esteja oculta além do contêiner da coluna.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de adicionar módulos, começando com um Módulo de Texto na coluna 1. Adicione algumas cópias de sua escolha.

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Estilo da fonte do texto: maiúsculas
• Cor do texto: #ffffff
• Tamanho do txt: 15px
• Espaçamento entre letras do texto: 3px

Espaçamento

Vamos adicionar alguma margem esquerda negativa ao nosso módulo também. Isso ajudará com nossa animação em loop.

• Margem esquerda: -190%

Animação

Por último, mas não menos importante, adicione a seguinte animação em loop ao seu Módulo de Texto:

• Estilo de animação: slide
• Direção da animação: esquerda
• Duração da animação: 9000ms
• Intensidade de animação: 30%
• Opacidade inicial da animação: 100%
• Curva de velocidade de animação: Linear
• Repetição de animação: Loop

Adicionar Módulo de Áudio à Coluna 2

Remover todo o conteúdo

Na coluna 2, o único módulo de que precisamos é um Módulo de Áudio. Certifique-se de que o conteúdo seja removido.

Carregar arquivo de áudio

Em seguida, envie um arquivo de áudio contendo seu último episódio.

Remover cor de fundo

Em seguida, remova a cor de fundo do módulo.

Espaçamento

Em seguida, vá para a guia de design e remova alguns valores de preenchimento padrão adicionando '0px' a eles.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 0px

Adicionar linha # 2

Estrutura da Coluna

Para a próxima linha. Esta linha conterá nosso logotipo, menu e ícones de mídia social. Escolha a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e modifique as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura máxima: 100%

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar Módulo de Menu à Coluna 1

Selecione o menu

Em seguida, adicione um Módulo de Menu à coluna 1 e selecione um menu de sua escolha.

Carregar logotipo

Faça upload de um logotipo a seguir.

Remover cor de fundo

Em seguida, remova a cor de fundo branca padrão.

Configurações de texto do menu

Vá para a guia de design e altere as configurações de texto do menu da seguinte forma:

• Fonte do menu: Open Sans
• Cor do texto do menu: #ffffff (desktop), # 1a1844 (tablet e telefone)
• Tamanho do texto do menu: 15px
• Alinhamento de Texto: Direito

Configurações de texto do menu suspenso

Estamos mudando a cor da linha do menu suspenso nas configurações do menu suspenso também.

• Cor da linha do menu suspenso: #ffffff

Configurações de ícones

Junto com a cor do ícone do menu de hambúrguer nas configurações dos ícones.

• Cor do ícone do menu de hambúrguer: # fe4943

Dimensionamento

E vamos completar as configurações do módulo atribuindo uma largura máxima do logotipo nas configurações de dimensionamento.

• Largura máxima do logotipo: 65%

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 2

Adicionar redes sociais

Na segunda coluna de nossa segunda linha, precisaremos de um Módulo de Acompanhamento de Mídia Social. Adicione as redes sociais de sua escolha.

Alinhamento

Vá para a guia de design do módulo e altere o alinhamento do módulo.

• Alinhamento do Módulo: Centro

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem superior: 20px
• Margem inferior: -4% (apenas tablet e telefone)

Fronteira

E complete o cabeçalho adicionando alguns cantos arredondados às configurações de borda do módulo. Depois de preencher o cabeçalho global, salve todas as alterações do Divi Theme Builder e visualize o resultado em seu site!

• Todos os cantos: 50vw

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como ser criativo com o Módulo de Áudio embutido do Divi. Mais especificamente, mostramos como incluir uma barra de áudio fixa em seu cabeçalho global personalizado. Essa é uma ótima maneira de enfatizar o episódio mais recente do seu podcast. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.