Come modellare il modulo Post Slider di Divi come Post Slider di Facebook Newsroom

I cursori dei post sono una soluzione elegante per presentare una varietà di contenuti ai tuoi lettori. I post evidenziati possono essere organizzati in diversi modi dalle categorie fino ad oggi. Nel progetto di oggi stiamo guardando un esempio dalla pagina del blog di Facebook Newsroom che presenta una categoria di post chiamata "Top Stories". È uno slider molto attraente che enfatizza il titolo del post e l'immagine in primo piano. Ricreeremo l'aspetto di questo slider utilizzando il modulo Post Slider di Divi.

Prima e dopo: il modulo Divi Post Slider

La prima immagine sotto mostra il modulo divi post slider con le sue impostazioni predefinite, mentre la seconda è una modifica creata con poche modifiche nelle impostazioni e alcuni CSS personalizzati.

Prima

Dopo

Il concetto e l'ispirazione

Come accennato, il modello per lo stile di scorrimento dei post di oggi proviene da Facebook Newsroom. Questo è un blog di notizie dedicato, come avrai intuito, a tutto ciò che riguarda Facebook. Mentre la maggior parte di noi conosce Facebook come il gigante dei social media, una rapida occhiata a questo blog allargherà la tua prospettiva. Con 8,8 miliardi di dollari di entrate nell'ultimo trimestre e 1,23 miliardi di utenti attivi al giorno, il dispositivo di scorrimento dei post del blog sulla pagina di Facebook Newsroom fornisce un modello degno per il progetto di oggi.

Preparazione degli elementi di design

In preparazione per questo design, avrai bisogno di alcuni post sul blog con immagini in primo piano. Se non hai familiarità con l'impostazione delle immagini in primo piano per i tuoi post, troverai l'impostazione nella pagina di modifica del post nella parte inferiore destra della pagina.

Questo design del dispositivo di scorrimento funzionerà al meglio se ciascuna delle immagini in primo piano è 600 px x 400 px, ma la dimensione esatta non è fondamentale.

Potresti anche voler aggiungere del testo di estratto per ciascuno dei tuoi post nella casella di input "Estratto" che si trova nella parte inferiore della pagina dell'editor dei post. Il post mostrerà l'estratto del tuo post se ne hai uno, ma utilizzerà una parte del tuo contenuto effettivo in caso contrario.

Implementazione del design con Divi

Iscriviti al nostro canale Youtube

Se stai seguendo e non hai già un'impostazione di pagina per visualizzare il tuo dispositivo di scorrimento del post, crea semplicemente una nuova pagina e fai clic su "Usa Visual Builder" per iniziare ad apportare le modifiche necessarie.

Iniziamo aggiungendo una sezione regolare con una riga della struttura a 1 colonna.

Quindi aggiungi il modulo Post Slider alla riga.

Le nostre modifiche iniziano con le impostazioni "Contenuto", che è dove ti trovi per impostazione predefinita dopo aver aggiunto un nuovo modulo nel Visual Builder.

Apportare le seguenti modifiche alle impostazioni del contenuto predefinite:

Imposta "Numero post" sul numero di post che desideri. Per questo esempio, sto usando 3.

Quindi imposta "Usa post estratto se definito" su sì e imposta "Lunghezza estratto automatico" su 180.

Ora siamo pronti per passare alle impostazioni di progettazione facendo clic sulla scheda nella parte superiore del modale delle impostazioni del modulo.

Apportare le seguenti modifiche alle impostazioni di progettazione:

Cambia il "Colore sovrapposizione sfondo" in bianco (#ffffff).

Cambia "Colore personalizzato Dot Nav" in # 576d90.

Cambia il "Colore del testo" in Scuro.

Ora rendi il "Carattere intestazione" in grassetto, imposta "Dimensione carattere intestazione" su 34 px, imposta "Colore testo intestazione" su # 3b5998 e "Altezza riga intestazione" su 42 px.

Ora imposta "Colore corpo testo" su # 141924 e "Altezza linea corpo" su 24 px.

Ora fai clic su "Usa stili personalizzati per pulsante" per cambiarlo in sì. Cambia la "Dimensione del testo del pulsante" in 16 px, la "Larghezza del bordo del pulsante" in 0 px, il "Colore del testo al passaggio del mouse del pulsante" in # 666666 e il "Colore dello sfondo del passaggio del mouse sul pulsante" in rgba (0,0,0,0).

Ora fai clic sulla scheda "Avanzate" nella parte superiore del modale delle impostazioni del modulo. Nell'input di testo sotto ID CSS, aggiungi "fb-post-slider". Questo ci permette di aggiungere stili a questo modulo specifico senza avere alcun effetto su altri moduli di post che possono essere visualizzati nella pagina.

Ora aggiungi il codice CSS ai vari elementi come segue:

Prima

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

Elemento principale

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

Dopo

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;

Descrizione della diapositiva

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

Titolo della diapositiva

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

Pulsante di scorrimento

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

Controller per diapositive

margin-bottom:-55px;

Frecce di scorrimento

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);

Ora salva le impostazioni del modulo facendo clic sul segno di spunta nell'angolo in basso a destra del modale.

Puoi vedere nel Visual Builder che ci sono ancora alcuni modi per fare in modo che il nostro dispositivo di scorrimento dei post assomigli a quello nella pagina della Newsroom di Facebook.

Non c'è niente di cui un po' di CSS non possa occuparsi, e saremo in grado di vederlo prendere forma aggiungendo il codice rimanente alle Impostazioni della pagina direttamente dal Visual Builder. Per arrivarci, fai clic sull'icona Espandi impostazioni nella parte inferiore centrale della pagina, quindi fai clic sull'icona "Impostazioni pagina".

Se stai lavorando su un monitor più grande, ti suggerisco di spostare il modale sul lato del Post Slider in modo che tu possa vedere cosa fa ogni bit di codice mentre lo aggiungiamo. Questo ti aiuterà a capire meglio il CSS usato per definire lo stile del nostro modulo.

Per prima cosa ci occuperemo della dimensione e della posizione dell'immagine di sfondo (attualmente nascosta dietro l'overlay bianco), nonché della posizione del testo del cursore e dell'overlay aggiungendo il seguente CSS all'area di testo "Custom CSS".

#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;
}

Ora ci occuperemo di nascondere il nostro post meta, ad eccezione della data, e di spostare la posizione della data sopra il titolo. Per fare ciò, aggiungi il seguente codice all'input di testo CSS personalizzato appena sotto il codice inserito in precedenza.

#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
}

Siamo quasi lì con solo alcune piccole eccezioni. Noterai quando passi con il mouse sul nostro modulo Post Slider, che vengono visualizzate sia la freccia precedente che quella successiva. Sul dispositivo di scorrimento della newsroom di Facebook, viene visualizzata solo la freccia successiva. Questo può essere facilmente risolto aggiungendo il seguente CSS all'input di testo CSS personalizzato appena sotto il codice inserito in precedenza.

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

Ora dobbiamo riposizionare i punti di navigazione sotto lo slider con il seguente codice. A proposito, noterai anche che l'impostazione della proprietà di overflow del dispositivo di scorrimento su visibile rivela l'effetto 3D che abbiamo creato in precedenza per il tag "Top Stories" che avvolge l'angolo in alto a destra.

#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
}

Infine, quest'ultimo bit di codice cambierà l'animazione del nostro dispositivo di scorrimento in modo che corrisponda più da vicino al nostro dispositivo di scorrimento del modello. Sebbene non sia una corrispondenza perfetta, è il più vicino che potrei ottenere senza entrare nelle soluzioni jQuery. Ci sono anche alcune query multimediali per rendere il nostro slider un po' più reattivo.

.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;
    }
}

Ora puoi salvare la pagina facendo clic sul pulsante Salva nell'angolo in basso a destra dello schermo. Una volta salvata la pagina, esci dal visual builder per vedere lo slider del post finito, ispirato allo slider del post nella pagina Newsroom di Facebook.

Pensieri finali

Bene, indipendentemente dal fatto che tu abbia trovato utile o meno questo particolare design, spero che abbia fornito uno sguardo dettagliato ad alcune delle impostazioni più avanzate all'interno del modulo Post Slider di Divi, oltre a stimolare la tua immaginazione su ciò che è possibile.