Como criar uma barra de conteúdo de áudio fixa em Divi
Publicados: 2021-03-15Adicionar uma barra de conteúdo de áudio aderente é uma ótima maneira de apresentar um clipe de áudio para facilitar o acesso enquanto o usuário rola o conteúdo da página. Por exemplo, os podcasters podem “colar” seu áudio em destaque no topo da página de um episódio para que o usuário sempre possa ter acesso a esses controles de áudio enquanto ouve e se envolve com o resto do conteúdo da página.
Neste tutorial, vamos ser um pouco criativos com as opções de posição aderente integradas do Divi para construir uma barra de conteúdo de áudio aderente no Divi. Mostraremos como converter o conteúdo de áudio existente em uma página (como uma linha com um módulo de áudio) em uma barra de conteúdo de áudio pegajosa que fica no topo da janela quando o usuário passa o conteúdo de áudio enquanto rola. Além disso, também mostraremos como alterar o conteúdo, o estilo e o layout da barra uma vez que o estado aderente é ativado (ou preso na parte superior da janela). A transição suave e a funcionalidade desse design oferece uma solução única para a exibição de conteúdo de áudio em qualquer site da Divi.
Vamos lá!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Aqui está uma olhada na transição do conteúdo de áudio para uma barra de conteúdo de áudio pegajosa.
E aqui está uma olhada em como alguém pode interagir com a barra de áudio enquanto rola a página.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download 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.
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.
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!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Carregar o Podcast Premade Layout Pack do Divi Builder
Para iniciar o design de nossa barra de áudio pegajosa no Divi, usaremos o layout de página de destino de podcast predefinido. No menu de configurações, selecione o ícone de adição “Carregar da biblioteca”. Em seguida, encontre o layout da página de destino do podcast e carregue-o na página.
Parte 2: Criando a linha fixa para reter o conteúdo de áudio
Na seção superior do layout predefinido, encontre a linha dentro dessa seção superior. Em seguida, adicione uma nova linha de uma coluna abaixo da linha existente.
Configurações de linha
Antes de adicionar qualquer módulo, abra as configurações da nova linha e atualize o seguinte:
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
- Preenchimento (desktop): 10px superior, 10px, inferior, 10% à esquerda, 10% à direita
- Preenchimento (tablet e telefone): 10 px superior, 10 px, inferior, 10 px à esquerda, 10 px à direita
Para tornar a linha fixa, vá para a guia avançada e atualize o seguinte:
- Posição pegajosa: grudar no topo
Isso fará com que a linha (que em breve será nossa barra de conteúdo de áudio) fique no topo da janela do navegador ao rolar a página para baixo.
Parte 3: Adicionando o conteúdo de áudio
Adicionando o Módulo de Áudio à Linha
Em seguida, mova / arraste o módulo de áudio existente (pré-projetado) da primeira linha na seção superior para a nova linha que você acabou de criar. Isso servirá como o áudio em destaque que incluiremos dentro do reprodutor de áudio pegajoso
Adicionando um CTA usando um módulo do Blurb
Em seguida, criaremos um CTA que será exibido no lado direito de nossa barra de conteúdo de áudio.
Para criar o CTA, copie o módulo de sinopse com o ícone de reprodução na seção superior do layout.
Em seguida, cole o módulo blurb duplicado sob o módulo de áudio na segunda linha da seção superior.
Parte 4: Estilizando o Conteúdo de Áudio
Estilizando o Módulo de Áudio
Uma vez que a linha herda a posição fixa, queremos um estilo diferente para o nosso módulo de áudio. Para fazer isso, abra as configurações do módulo de áudio e atualize as seguintes opções de estado aderente:
- Tamanho do texto do título (aderente): 14 px
- Altura da linha de título (aderente): 1,3em
- Altura da linha de legenda (aderente): 1,3em
Tudo o que isso faz é reduzir o texto e espaçar um pouco para que o conteúdo de áudio não ocupe muito espaço vertical em nossa barra adesiva.
Em seguida, queremos alterar a largura do módulo de áudio no estado aderente da seguinte maneira:
- Largura (desktop): 80%
- Largura (aderente): 100%
- Largura máxima (aderente): 100%
Em seguida, precisamos ajustar o espaçamento do módulo de áudio da seguinte forma:
- Margem: 0px superior, 0px inferior
- Preenchimento: 0 px superior, 0 px inferior, 0 px à esquerda, 20 px à direita
Finalmente, precisamos adicionar alguns snippets CSS personalizados nas configurações avançadas para alinhar nosso texto à esquerda e adicionar cores exclusivas ao botão e controle deslizante do reprodutor de áudio.
Adicione o seguinte CSS ao Título de áudio apenas na guia aderente :
text-align:left;
Adicione o seguinte CSS ao Audio Meta apenas na guia aderente :
text-align:left !important;
Adicione o seguinte CSS aos botões do player apenas na guia aderente :
color: #fe4943;
Adicione o seguinte CSS aos controles deslizantes do player atuais apenas na guia fixa :
background: #2c4ca3;
Estilizando o CTA do Blurb
A seguir, estilizaremos nosso módulo de sinopse que servirá como um CTA simulado para visualizar todos os episódios.
Primeiro, adicione o texto “Todos os episódios” ao conteúdo do corpo da sinopse.
Na guia de design, atualize o seguinte:
- Fonte do corpo: Lato
- Peso da fonte do corpo: negrito
- Estilo da fonte do corpo: TT
- Tamanho do corpo do texto: 10 px
- Espaçamento entre letras do corpo: 2px
- Altura da linha corporal: 1,3em
Em seguida, ajuste o tamanho do ícone de sinopse:
- Tamanho da fonte do ícone: 50px
Em seguida, ajuste o tamanho do módulo da seguinte forma:
- Largura do conteúdo: 100%
- Largura: 20%
Agora volte para a guia de conteúdo e adicione um plano de fundo para a sinopse da seguinte maneira:
- Cor de fundo: # 1a1844
- Imagem de fundo: [adicionar imagem]
- Mistura de imagem de fundo: luminosidade
Queremos que este módulo fique oculto inicialmente até que a linha atinja o estado fixo e a barra de controle de áudio fique presa na parte superior da janela. Para fazer isso, podemos adicionar alguns trechos de css que ocultam o módulo na área de trabalho e mostram o módulo no estado fixo.
Na guia Avançado, atualize o seguinte CSS personalizado:
CSS do elemento principal (desktop):
display:none;
CSS do elemento principal (aderente):
display:block;
CSS da imagem do Blurb:
margin-bottom: 10px
Parte 5: Mudando o alinhamento do conteúdo da barra de áudio no estado fixo
No momento, a linha pegajosa tem apenas uma coluna com dois módulos empilhados um em cima do outro. Portanto, a barra adesiva mostraria a sinopse CTA abaixo do módulo de áudio. Isso ocuparia muito espaço vertical para uma barra adesiva e não ficaria muito bem.
Para garantir que tudo esteja alinhado horizontal e verticalmente na coluna, nós. pode usar a propriedade CSS flex para ajustar o layout de nossos módulos no estado fixo.
Para fazer isso, abra as configurações da coluna que contém os dois módulos.
Na guia avançada, adicione o seguinte CSS personalizado ao elemento principal
Elemento principal (desktop):
display:flex; flex-direction:column;
Elemento principal (aderente):
display:flex; flex-direction: row; align-items:center; justify-content:center;
É isso! Vamos revisar os resultados.
Resultado final
Aqui está o design na área de trabalho assim que a linha estiver no estado fixo.
E aqui está o design no celular.
E aqui estão alguns videoclipes de como a mágica da barra adesiva de conteúdo de áudio funciona em uma página ao vivo.
Pensamentos finais
As opções de posição fixa do Divi podem ser uma ferramenta poderosa para web designers. Neste tutorial, mostramos como criar uma barra de conteúdo de áudio aderente usando as opções de estilo fixas do Divi de maneiras avançadas e criativas. Uma das técnicas exclusivas apresentadas neste tutorial foi como alinhar o conteúdo de uma linha fixa usando a propriedade flex. Felizmente, o Divi's tem uma maneira conveniente de adicionar trechos de código personalizados ao estado fixo usando os blocos CSS personalizados avançados para nos dar a flexibilidade de design de que precisávamos. Esperançosamente, isso lhe dará alguma inspiração para criar um em seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!