Como projetar uma área de widget de postagens recentes com rolagem na Divi
Publicados: 2019-05-02O módulo de barra lateral do Divi é uma ferramenta extremamente útil para integrar áreas de widgets personalizados em seu design. Isso permite que você exiba qualquer widget do WordPress dentro de um layout Divi. Neste tutorial, vou mostrar como criar uma área de widget de postagens recentes rolável no Divi. Estarei projetando uma seção “Do nosso blog” com a área do widget de postagens recentes no lado direito de um módulo de blog. Isso será perfeito para mostrar algumas de suas postagens mais recentes em uma página inicial ou página de destino.
Vamos começar!
Espiada
Aqui está uma pequena amostra do design que construiremos neste tutorial.
Baixe o layout de posts recentes com rolagem GRATUITAMENTE
Para colocar suas mãos no design de layout de postagens recentes roláveis deste tutorial, primeiro você precisará 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.
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 para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
Inscreva-se no nosso canal no Youtube
Criação da área do widget Postagens recentes
Como iremos adicionar um widget de postagens recentes ao nosso layout Divi, a primeira coisa que precisamos fazer é criar uma nova área de widget (com o widget de postagens recentes) para usar com o módulo Barra lateral do Divi.
Para criar a área do widget de postagens recentes, navegue até Aparência> Widgets. Em seguida, crie uma nova área de widget dando um nome à área de widget (chame-a de “postagens recentes” se quiser) e clique no botão Criar. Atualize a página para ver a nova área de widget disponível.
Abra o botão de alternância do widget Postagens recentes que vem com o WordPress, à esquerda da página. Em seguida, escolha a área de widget “postagens recentes” na lista e clique em Adicionar widget para adicionar o widget à área de widget.
Em seguida, abra a área do widget de postagens recentes e atualize o widget de Postagens recentes com um Título. Defina o número de postagens a serem mostradas como um grande número para que tenhamos postagens suficientes para rolar quando nosso design for concluído.
Agora que temos nossa área de widget no lugar, podemos começar em nosso design Divi.
Criando a seção “Do nosso blog” com área de widget de postagens recentes com rolagem
Projetando a Seção de Título
Crie uma nova seção regular com uma linha de uma coluna.
Antes de adicionar um módulo, atualize a seção com o seguinte:
Cor de fundo: # 333333
Preenchimento personalizado: 0px inferior
Em seguida, remova o preenchimento inferior da linha, atualizando as configurações da linha:
Preenchimento personalizado: 0px inferior
Em seguida, adicione um módulo de texto à linha.
Em seguida, atualize as seguintes configurações de texto:
Para o conteúdo, adicione o seguinte html de cabeçalho h2:
<h2>From our Blog</h2>
Em seguida, atualize as seguintes configurações de texto:
Fonte do título 2: Roboto
Estilo da fonte do título 2: TT
Cor do texto do título 2: #ffffff
Tamanho do texto do título 2: 40px
Cabeçalho 2 espaçamento entre letras: 2px
Isso cuida do cabeçalho do nosso layout. Agora é hora de criar o resto do layout usando uma seção de especialidade.
Criando a Seção Especializada
Usar uma seção de especialidade separada para o resto do layout nos permitirá ter uma barra lateral dedicada à direita para nossa área de widget rolável. Além disso, nos permitirá dimensionar e estilizar nossas linhas no lado esquerdo da seção separadamente da área da barra lateral.
Vá em frente e adicione uma seção de especialidade com um layout de coluna da barra lateral direita da seguinte maneira:
Em seguida, adicione uma linha de uma coluna à seção.
Antes de adicionar um módulo, vamos atualizar nossas configurações de seção e linha.
Personalização das configurações da seção
Abra as configurações da seção de especialidades e atualize o seguinte:
Cor de fundo: # 333333
Largura da calha: 2
Preenchimento personalizado: 0px superior
Preenchimento personalizado da coluna 2: 0 px superior, 0 px inferior
Personalize as configurações de linha
Em seguida, abra as configurações de linha e atualize o seguinte:
Altura: 640px
Largura da borda superior: 8 px
Cor da borda superior: # 444444
Largura da borda inferior: 8 px
Cor da borda inferior: # 444444
A altura personalizada de 640px é fornecida para corresponder à altura da área rolável do widget de postagens recentes que adicionaremos à barra lateral de nossa seção de especialidades. isso irá garantir que os dois terão a mesma altura para um design mais esteticamente agradável.
Adicionando o Módulo de Blog
Na linha de uma coluna à esquerda, adicione um módulo de blog.
Em seguida, atualize as configurações do módulo de blog da seguinte maneira:
Número das postagens: 2
Layout: Grade
Fonte do título: Roboto
Meta Font: Roboto
Meta Font Weight: Light
Estilo da fonte meta: TT
Fonte de paginação: Roboto
Estilo de fonte de paginação: TT
Cor do texto da paginação: #ffffff
Tamanho do texto de paginação: 18 px
Espaçamento entre letras de paginação: 2px
Adicionando a área de widget de postagens recentes com rolagem
Finalmente, é hora de adicionar as postagens recentes roláveis ao nosso layout. Para fazer isso, adicione um módulo de barra lateral à área da barra lateral da seção de especialidades à direita.
Em seguida, selecione a área do widget “postagens recentes” que você criou anteriormente, selecionando-a na lista suspensa Área do widget na guia de conteúdo.
Em seguida, atualize o design do título e do corpo da seguinte maneira:
Fonte do título: Roboto
Estilo da fonte do título: TT
Cor do texto do título: #ffffff
Espaçamento entre letras de título: 2px
Fonte do corpo: Roboto
Estilo da fonte do corpo: sublinhado
Em seguida, oculte o separador de borda da seguinte maneira:
Mostrar separador de borda: NÃO
Em seguida, dê ao módulo da barra lateral uma altura máxima e preenchimento personalizado da seguinte maneira:
Altura máxima: 640 px
Preenchimento personalizado: 30px superior, 30px inferior, 5% à direita
A altura máxima de 640 px corresponde à altura personalizada de 640 px fornecida para a linha adjacente.
Agora que demos ao módulo da barra lateral uma altura máxima de 640px, precisamos definir o estouro vertical para rolar a fim de obter nossa funcionalidade de rolagem. Para fazer isso, vá para a guia Avançado e atualize o seguinte:
Overflow vertical: Scroll
Resultado final
É isso! Agora vamos conferir o resultado final.
Opção de bônus: Adicionar CSS personalizado à barra de rolagem do projeto (não compatível com todos os navegadores)
Definir o estilo de uma barra de rolagem no WordPress é meio chato se você deseja suporte para vários navegadores. Portanto, na maioria dos casos, você desejará deixar os estilos padrão do navegador e encerrar o dia. Mas se você deseja personalizar a barra de rolagem para combinar com o design de sua página, você pode adicionar algum CSS personalizado. Infelizmente, o suporte do navegador é limitado a navegadores que suportam :: propriedades CSS com prefixo do webkit (basicamente apenas Safari e Chrome). Veja como fazer.
Abra as configurações da seção de especialidade e adicione a seguinte classe CSS:
Classe CSS: cust-scroll
Em seguida, abra o modal de configurações de página e adicione o seguinte CSS personalizado à página.
/* width */
.cust-scroll ::-webkit-scrollbar {
width: 8px;
}
/* Track */
.cust-scroll ::-webkit-scrollbar-track {
background: #444444;
}
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
background: #888888;
}
/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
Isso altera a largura da barra de rolagem para 8px e ajusta as cores da trilha e da alça. Sinta-se à vontade para experimentar mais designs e cores por conta própria.
E caso você esteja se perguntando, a alternativa para outros navegadores será o estilo padrão dos navegadores para as barras de rolagem.
Pensamentos finais
Adicionar rolagem vertical ao conteúdo é útil sempre que você deseja dar aos usuários a opção de visualizar mais conteúdo em um espaço confinado. Uma área rolável do widget de postagens recentes é um ótimo exemplo de como a rolagem vertical pode funcionar muito bem. Claro, você pode substituir o módulo da barra lateral usado neste tutorial por um módulo de texto e adicionar rolagem vertical a qualquer conteúdo que desejar. A mesma personalização se aplica a qualquer módulo.
No que diz respeito ao estilo da barra de rolagem, tenho certeza de que existem outros plug-ins ou soluções Javascript que dariam uma solução mais cruzada para navegadores. Se você conhece algum bom, sinta-se à vontade para compartilhá-lo conosco.
Estou ansioso para ouvir de você nos comentários abaixo.
Saúde!