Como criar um ticker de postagem de blog com o módulo Slider de postagem da Divi
Publicados: 2021-07-03Um marcador de postagem de blog é uma ferramenta conveniente para mostrar dinamicamente postagens de blog (recentes, relacionadas etc.) em seu site. Você pode pensar nisso como um ticker de notícias para postagens em blogs do WordPress.
Hoje, vamos mostrar como criar um ticker de postagem no blog com o módulo deslizante de postagem do Divi. Semelhante a um ticker de notícias, o ticker de postagem do blog que vamos criar será uma versão simplificada e compacta do módulo de controle deslizante de postagem do Divi. E, como o módulo de controle deslizante de postagem possui recursos integrados para mostrar as postagens de várias maneiras, você pode usá-lo onde quiser. Você pode usá-lo na página inicial como um marcador de postagem para mostrar postagens recentes ou pode usá-lo no cabeçalho de um modelo de postagem de blog para mostrar postagens relacionadas à categoria atual.
Depois de mostrarmos como criar o ticker de postagem de blog no Divi, também mostraremos como salvá-lo em sua Biblioteca Divi para que você possa adicioná-lo a um cabeçalho de um modelo de postagem de blog no Divi Builder.
Vamos começar!
Espiada
Aqui está uma rápida olhada no ticker de postagem do blog que construiremos neste tutorial.
Aqui está como o marcador de postagem se empilha bem na tela do telefone.
Mostraremos como adicionar o marcador de postagem para mostrar postagens relacionadas no cabeçalho de um modelo de postagem de blog também.
Baixe o layout e o modelo 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!
Importe o Layout para a Biblioteca Divi
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. Será o arquivo JSON dentro da pasta chamada “blog post ticker layout (Divi Library)”.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Importe o modelo de cabeçalho para o Divi Theme Builder
Se quiser importar o modelo de postagem do blog com o marcador de postagem adicionado ao cabeçalho, você precisará navegar em Divi> Theme Builder.
Em seguida, use o ícone de portabilidade no canto superior direito da página para importar o arquivo JSON. Será o arquivo dentro da pasta chamada “modelo de cabeçalho de postagem de blog com ticker de postagem (Theme 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.
Criando o Marcador de postagem do blog no Divi
Criando a linha
Para começar, vamos criar uma linha de uma coluna dentro da seção.
Configurações de linha
Em seguida, atualize as configurações de design da linha da seguinte maneira:
- Largura da calha: 1
- Preenchimento: 0 px superior, 0 px inferior
Criação do título do Post Ticker com um módulo de texto
Agora que a linha está no lugar, adicione um módulo de texto à linha para criar o título do marcador de postagem.
Texto do Título e Fundo
Atualize o corpo do texto para ler “Postagens recentes:”.
Em seguida, atualize a cor de fundo:
- Cor de fundo: # 333333
Configurações de design
Na guia de design, atualize os estilos de texto da seguinte maneira:
- Fonte do texto: Poppins
- Peso da Fonte do Texto: Semi Negrito
- Estilo da fonte do texto: TT
- Cor do texto do texto: rgba (255,255,255,0,7)
- Espaçamento entre letras do texto: 1px
- Altura da linha de texto: 40px
- Alinhamento de Texto: Centro
- Largura: 100%
- Largura máxima: 175 px (desktop e tablet), 100% (telefone)
Isso cuida do título do nosso post ticker. Agora vamos começar a construir o marcador de postagem.
Criação de um marcador de postagem no blog com um módulo deslizante de postagem no blog
Para criar o ticker de postagem no blog, vamos usar um módulo de controle deslizante de postagem e, em seguida, simplificar o design para torná-lo realmente compacto.
Adicione um módulo de controle deslizante de postagem no módulo de texto.
Publicar conteúdo deslizante
Na guia de conteúdo, você pode escolher a contagem de postagens, categorias incluídas e como elas ou ordenadas. Para este exemplo, vamos manter o padrão e fazer com que o controle deslizante mostre as postagens mais recentes.
Para ocultar o trecho da postagem, certifique-se de atualizar o seguinte:
- Use pós-excertos: NÃO
- Comprimento do trecho: 0
Elementos e fundo do controle deslizante da postagem
Na verdade, tudo o que queremos exibir no controle deslizante é o título da postagem e as setas do slide. No grupo de opções de elementos, oculte tudo, exceto as setas.
- Mostrar controles: NÃO
- Mostrar botão Leia mais: NÃO
- Mostrar meta da postagem: NÃO
Manteremos a opção de mostrar a imagem em destaque como plano de fundo de cada slide. Mas, para um backup, certifique-se de adicionar a seguinte cor de fundo:
- Cor de fundo: #eeeeee
Post Slider Design Settings
Estilos de sobreposição e seta
Na guia de design, atualize a sobreposição de plano de fundo e a cor da seta da seguinte maneira:
- Usar sobreposição de plano de fundo: SIM
- Cor de sobreposição de fundo: rgba (248.248.248,0.9)
- Cor da seta: #ffffff (desktop), # ef51f7 (pairar)
Texto do Título
Em seguida, atualize os estilos de texto do título da seguinte maneira:
- Fonte do título: Poppins
- Peso da fonte do título: médio
- Alinhamento do Texto do Título: Esquerda
- Cor do texto do título: # 333333
- Cor do texto do título (foco): # ef51f7
- Tamanho do texto do título: 16 px (desktop), 14 px (telefone)
- Altura da linha de título: 40px
- Sombra do texto do título: veja a captura de tela
- Cor da sombra do texto do título: transparente
Espaçamento
Precisamos abrir espaço para o módulo de texto do título do post ticker para que possamos posicionar nosso controle deslizante de postagem no lado direito dele. Para fazer isso, atualize o seguinte:
- Margem: 175 px à esquerda (desktop e tablet), 0 px à esquerda (telefone)
- Preenchimento: 0 px superior, 0 px inferior, 0 px à esquerda, 0 px à direita
Animação Automática
O controle deslizante de postagem possui uma opção embutida para adicionar animação automática. Isso nos dará a funcionalidade de ticker de que precisamos para ver as postagens sem ter que clicar nas setas do slide.
Adicione a animação automática da seguinte forma:
- Animação Automática: ON
- Velocidade de animação automática: 3500
Sinta-se à vontade para aumentar ou diminuir a velocidade para o que achar melhor.
Estilo Avançado
Classe CSS e CSS personalizado
Neste ponto, o controle deslizante de postagem é um marcador de postagem em funcionamento em sua maior parte. Mas existem alguns ajustes avançados que podemos adicionar para limpar o design.
Primeiro, adicione uma classe CSS personalizada da seguinte maneira:
- Classe CSS: et-post-ticker
Para garantir que o título da postagem permaneça em uma linha dentro do controle deslizante / ticker e oculte o excesso com reticências, adicione o seguinte CSS ao Título do slide:
padding-bottom:0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Para dar às setas do slide uma sensação de botão, adicione o seguinte CSS às setas do slide:
height: 40px; width: 40px; line-height:40px; font-size: 28px; text-align: center; margin-top:-20px; background:#333;
CSS adicional com módulo de código para posicionar setas deslizantes
Neste ponto, a funcionalidade padrão das setas do slide será exibida apenas ao passar o mouse e o posicionamento das setas está nos lados direito e esquerdo do slide. Para melhorar a experiência do usuário e torná-la mais parecida com um marcador de postagem, podemos fazer com que as setas sejam mostradas sempre e posicioná-las à direita do controle deslizante.
Para fazer isso, adicione um novo módulo de código sob o controle deslizante de postagem.
Em seguida, cole o seguinte CSS, certificando-se de envolvê-lo com as tags de estilo necessárias.
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
right: 40px !important;
opacity: 1 !important;
left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
right: 0px !important;
opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
padding: 0 84px 0 3% !important;
}
Resultado final
Aqui está o resultado final em uma página ao vivo.
Observe como o marcador de postagem lida com o estouro do texto do título.
E aqui está como o marcador de postagem se empilha perfeitamente na tela do telefone.
Adicionando o Post Ticker ao Cabeçalho de um Modelo de Postagem de Blog
Um caso de uso óbvio para este ticker de postagem é fazer com que ele exiba postagens recentes em um cabeçalho real de um modelo de postagem de blog. Veja como você pode fazer isso.
Salvando o Row na Divi Library
Primeiro, salve a linha que contém os elementos que constituem nosso marcador de postagem na Biblioteca Divi. Você pode fazer isso clicando no ícone de três pontos na linha e selecionando “Salvar na biblioteca”. Em seguida, dê um nome ao layout e clique no botão “Salvar na biblioteca”.
Adicionando a linha Post Ticker ao modelo de cabeçalho
Edite o cabeçalho personalizado
Depois que a linha foi salva na biblioteca, estamos prontos para adicioná-la a um cabeçalho personalizado. Para este exemplo, certifique-se de que o modelo esteja atribuído a “Todas as postagens”. Em seguida, clique para editar o cabeçalho personalizado desse modelo.
Inserir linha (Post Ticker) da biblioteca
No editor de layout de cabeçalho, clique para adicionar uma nova linha onde quiser que o marcador de postagem seja exibido.
No modal Inser Row, selecione a guia Add From Library. Encontre a linha do marcador de postagem do blog que você salvou anteriormente na biblioteca e selecione-a.
Agora, o marcador de postagem aparecerá no cabeçalho.
Mostrar postagens relacionadas para a categoria atual
Como este marcador de postagem será exibido apenas em postagens de blog, podemos escolher exibir apenas as postagens relacionadas à categoria atual.
Primeiro, precisamos atualizar o texto do título em nosso módulo de texto para “Postagens relacionadas:”.
Em seguida, abra as configurações do controle deslizante de postagem. Em Categorias incluídas, selecione a opção Categoria atual.
Agora, cada postagem do blog terá um marcador de postagem no cabeçalho que exibe as postagens relacionadas por categoria atual.
Resultado no modelo de postagem do blog
Aqui está a animação automática em ação.
Veja como você pode clicar nas setas de navegação para pular para as próximas postagens e as anteriores. E clicar no título da postagem leva você a essa postagem.
E aqui está como fica no tablet e no telefone. 
Pensamentos finais
Como aprendemos, podemos criar um ticker de postagem no blog facilmente, simplificando o design do módulo deslizante do Divi e fazendo alguns ajustes personalizados nas setas de navegação. E não se esqueça de que você sempre pode fazer ajustes de estilo facilmente usando todas as opções embutidas no controle deslizante de postagem. Esperançosamente, isso será útil para todos os blogueiros e desenvolvedores da web que estão por aí.
Estou ansioso para ouvir de você nos comentários.
Saúde!