Como estilizar o módulo de controle deslizante de postagem da Divi como o controle deslizante de postagem do Facebook Newsroom

Os controles deslizantes de postagem são uma solução elegante para apresentar uma variedade de conteúdo aos leitores. As postagens destacadas podem ser organizadas de várias maneiras, por categorias até o momento. No projeto de hoje, estamos vendo um exemplo da página de blog do Facebook Newsroom que apresenta uma categoria de posts chamada “Top Stories”. É um controle deslizante muito atraente que enfatiza o título do post e a imagem em destaque. Vamos recriar a aparência deste controle deslizante usando o módulo Post Slider do Divi.

Antes e depois: o módulo Divi Post Slider

A primeira imagem abaixo mostra o módulo divi post slider com suas configurações padrão, enquanto a segunda é uma modificação criada com apenas alguns ajustes nas configurações e algum CSS personalizado.

Antes

Depois de

O conceito e inspiração

Como mencionado, o modelo para o estilo do controle deslizante de postagem de hoje vem do Facebook Newsroom. Este é um blog de notícias dedicado, como você deve ter adivinhado, todas as coisas do Facebook. Embora a maioria de nós conheça o Facebook como o gigante da mídia social, uma olhada rápida neste blog ampliará sua perspectiva. Com receita de US $ 8,8 bilhões no último trimestre e 1,23 bilhão de usuários ativos por dia, o controle deslizante de postagem do blog na página do Facebook Newsroom fornece um modelo válido para o projeto de hoje.

Preparando os Elementos de Design

Na preparação para este design, você precisará de algumas postagens de blog com imagens em destaque. Se você não está familiarizado com a configuração de imagens em destaque para suas postagens, você encontrará a configuração na página de edição de postagem no canto inferior direito da página.

Este design de controle deslizante funcionará melhor se cada uma das imagens apresentadas tiver 600px x 400px, mas o tamanho exato não é crítico.

Você também pode adicionar alguns trechos de texto para cada uma de suas postagens na caixa de entrada “Trecho” localizada na parte inferior da página do editor de postagem. A postagem exibirá o trecho de sua postagem, se você tiver um, mas usará uma parte de seu conteúdo real se não tiver.

Implementando o Design com Divi

Inscreva-se no nosso canal no Youtube

Se você estiver acompanhando e ainda não tiver uma configuração de página para exibir seu controle deslizante de postagem, simplesmente crie uma nova página e clique em “Usar Visual Builder” para começar a fazer as modificações necessárias.

Começamos adicionando uma seção regular com uma linha de estrutura de 1 coluna.

Em seguida, adicione o Módulo Post Slider à linha.

Nossas modificações começam com as configurações de “Conteúdo”, que é onde você está por padrão após adicionar qualquer novo módulo no Visual Builder.

Faça as seguintes alterações nas configurações de conteúdo padrão:

Defina “Número da postagem” para quantas postagens você quiser. Para este exemplo, estou usando 3.

Em seguida, defina “Use Post Excerpt if Defined” como yes e defina “Automatic Excerpt Length” como 180.

Agora estamos prontos para passar para as configurações de design clicando na guia na parte superior do modal de configurações do módulo.

Faça as seguintes alterações nas configurações de design:

Altere a “Cor de sobreposição de fundo” para branco (#ffffff).

Altere “Dot Nav Custom Color” para # 576d90.

Mude a “cor do texto” para Escuro.

Agora coloque a “Fonte do cabeçalho” em negrito, defina o “Tamanho da fonte do cabeçalho” para 34px, defina “Cor do texto do cabeçalho” para # 3b5998 e “Altura da linha do cabeçalho” para 42px.

Agora defina “Body Text Color” para # 141924 e “Body Line Height” para 24px.

Agora clique em “Usar estilos personalizados para botão” para alterá-lo para sim. Altere o “Tamanho do texto do botão” para 16px, “Largura da borda do botão” para 0px, a “Cor do texto flutuante do botão” para # 666666 e a “Cor do fundo flutuante do botão” para rgba (0,0,0,0).

Agora clique na guia “Avançado” na parte superior do modal de configurações do módulo. Na entrada de texto em CSS ID, adicione “fb-post-slider”. Isso nos permite adicionar estilos a este módulo específico sem ter qualquer efeito em outros módulos de postagem que podem ser exibidos na página.

Agora adicione o código CSS aos vários elementos da seguinte maneira:

Antes

position:absolute;
top:57px;
right:-6px;
content:"";
border:4px solid transparent;
border-top-color:#2C477F;
border-left-color:#2C477F;

Elemento Principal

border-radius: 3px;
border:1px solid #dedede; 

Depois de

position:absolute;
top:25px;
right:-7px;
display:block;
content:"Top Stories";
color:#F9F4F7;
background-color:#4573CC;
padding:4px 15px;
border-radius:2px;
z-index:2!important;

Descrição do slide

min-height:460px;
width: 35%;
min-width: 300px;
float:left;
padding: 57px 45px 50px 35px!important;
font-family: 'Alegreya Sans', sans-serif;
text-align:left

Título do slide

font-family: 'Alegreya Sans', sans-serif;

Botão deslizante

padding:0!important;
margin-top:0;

Controladores de slides

margin-bottom:-55px;

Setas deslizantes

color:#ffffff!important;
background-color:rgba(0,0,0,.4);
font-weight:bold;
border-radius:2px;
 -ms-transform: scale(1.2, 2.5); /* IE 9 */
 -webkit-transform: scale(1.2, 2.5); /* Safari */
 transform: scale(1.2, 2.5);

Agora salve as configurações do módulo clicando na marca de seleção no canto inferior direito do modal.

Você pode ver no Visual Builder que ainda há algumas maneiras de fazer nosso controle deslizante de postagem parecer igual ao da página do Facebook Newsroom.

Isso não é nada que um pouco de CSS não possa cuidar, e poderemos ver isso tomar forma adicionando o código restante às Configurações de página diretamente do Visual Builder. Para chegar lá, clique no ícone Expandir configurações na parte inferior central da página e, em seguida, clique no ícone “Configurações da página”.

Se você estiver trabalhando em um monitor maior, sugiro mover o modal para o lado do Post Slider para que você possa ver o que cada bit de código faz à medida que o adicionamos. Isso ajudará você a entender melhor o CSS usado para definir o estilo de nosso módulo.

Primeiro, cuidaremos do tamanho e da posição da imagem de fundo (atualmente oculta atrás da sobreposição branca), bem como a posição do texto do controle deslizante e da sobreposição, adicionando o seguinte CSS à área de texto “CSS personalizado”.

#fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
    background-size: 70%;
    background-position: top right;
    padding-left: 0;
    overflow: visible!important;
}
 
#fb-post-slider.et_pb_slider_with_overlay .et_pb_slide_overlay_container {
    width: 30%;
    min-width: 300px;
}

Agora cuidaremos de ocultar nossa meta de postagem, com exceção da data, e mover a posição da data acima do título. Para fazer isso, adicione o seguinte código à entrada de texto CSS personalizado, logo abaixo do código inserido anteriormente.

#fb-post-slider .et_pb_slide_content .post-meta {
    height: 0px;
    overflow: hidden
}
#fb-post-slider .et_pb_slide_content .post-meta .published {
    position: absolute;
    top: 32px;
    left: 35px;
    color: #898f9c;
    font-size: 16px
}

Estamos quase lá, com apenas algumas pequenas exceções. Você notará quando passar o mouse sobre nosso módulo Post Slider, que as setas anterior e seguinte aparecem. No controle deslizante da redação do Facebook, apenas a próxima seta aparece. Isso é facilmente corrigido adicionando o seguinte CSS à entrada de texto CSS personalizado logo abaixo do código inserido anteriormente.

#fb-post-slider .et-pb-arrow-prev {
    display: none
}

Agora precisamos reposicionar os pontos de navegação abaixo do controle deslizante com o código a seguir. A propósito, você também notará que definir a propriedade de estouro do controle deslizante como visível revela o efeito 3D que criamos anteriormente para a tag “Notícias principais” que envolve o canto superior direito.

#fb-post-slider.et_pb_post_slider_0 .et-pb-controllers a {
    height: 8px;
    width: 8px;
    order-radius: 50%
}
#fb-post-slider.et_pb_slider {
    overflow: visible!important
}

Finalmente, este último pedaço de código mudará a animação do nosso controle deslizante para corresponder mais ao nosso controle deslizante do modelo. Embora não seja uma combinação perfeita, é o mais próximo que eu poderia chegar sem entrar em soluções jQuery. Há também algumas consultas de mídia para tornar nosso controle deslizante um pouco mais ágil.

.et-pb-active-slide .et_pb_slide_description {
    animation-name: fadeIn;
}
.et_pb_slide.et-pb-active-slide {
    transition: opacity 2.5s!important
}
 
@media all and (max-width: 1252px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 90%
    }
}
@media all and (max-width: 980px) {
    #fb-post-slider.et_pb_post_slider_0 .et_pb_slide {
        background-size: 100%;
        background-position: top center;
    }
}

Agora você pode salvar a página clicando no botão Salvar no canto inferior direito da tela. Assim que a página for salva, saia do construtor visual para ver o controle deslizante de postagem concluído, inspirado no controle deslizante de postagem na página do Facebook Newsroom.

Pensamentos finais

Bem, quer você tenha achado este design em particular útil ou não, espero que tenha fornecido uma visão detalhada de algumas das configurações mais avançadas do Módulo Post Slider do Divi, bem como despertou sua imaginação sobre o que é possível.