Cum să modelați modulul Post Slider al lui Divi, cum ar fi Postul Slider al Facebook Newsroom

Postele glisante sunt o soluție elegantă pentru a prezenta o varietate de conținut cititorilor dvs. Postările care sunt evidențiate pot fi organizate în mai multe moduri, de la categorii până în prezent. În proiectul de astăzi, ne uităm la un exemplu de pe pagina de blog Facebook Newsroom, care prezintă o categorie de postări numite „Top Stories”. Este un glisor foarte atractiv, care subliniază titlul postării și imaginea prezentată. Vom recrea aspectul acestui glisor folosind modulul Post Slider al lui Divi.

Înainte și după: modulul Divi Post Slider

Prima imagine de mai jos prezintă modulul glisor divi post cu setările implicite, în timp ce a doua este o modificare creată doar cu câteva ajustări în setări și unele CSS personalizate.

Inainte de

După

Conceptul și inspirația

Așa cum am menționat, modelul pentru stilul actual de post glisor provine de la Facebook Newsroom. Acesta este un blog de știri dedicat, după cum probabil ați ghicit, toate lucrurile Facebook. În timp ce majoritatea dintre noi știm Facebook ca gigantul rețelelor sociale, o privire rapidă prin acest blog vă va lărgi perspectiva. Cu venituri de 8,8 miliarde de dolari în ultimul trimestru și 1,23 miliarde de utilizatori activi pe zi, glisorul pentru postarea de pe pagina Facebook Newsroom oferă un model demn pentru proiectul de astăzi.

Pregătirea elementelor de proiectare

În pregătirea pentru acest design, veți avea nevoie de câteva postări de blog cu imagini prezentate. Dacă nu sunteți familiarizați cu setarea imaginilor prezentate pentru postările dvs., veți găsi setarea în pagina de editare a postării din partea dreaptă jos a paginii.

Acest design glisant va funcționa cel mai bine dacă fiecare dintre imaginile prezentate este de 600 px x 400 px, dar dimensiunea exactă nu este critică.

De asemenea, vă recomandăm să adăugați un text extras pentru fiecare dintre postările dvs. în caseta de intrare „Extras” aflată în partea de jos a paginii editorului de postări. Postarea va afișa extrasul de postare dacă aveți unul, dar va folosi o parte din conținutul dvs. real dacă nu aveți.

Implementarea proiectării cu Divi

Abonați-vă la canalul nostru Youtube

Dacă urmăriți și nu aveți deja o configurare a paginii pentru a afișa glisorul de postare, pur și simplu creați o pagină nouă și faceți clic pe „Utilizați Visual Builder” pentru a începe modificările necesare.

Începem prin a adăuga o secțiune regulată cu un rând de structură cu 1 coloană.

Apoi adăugați modulul Post Slider la rând.

Modificările noastre încep cu setările „Conținut”, unde vă aflați în mod implicit după adăugarea oricărui modul nou în Visual Builder.

Efectuați următoarele modificări la setările implicite de conținut:

Setați „Număr postare” la oricâte postări doriți. Pentru acest exemplu, folosesc 3.

Apoi setați „Utilizați extrasul de postare dacă este definit” la da și setați „Lungimea extrasului automat” la 180.

Acum suntem gata să trecem la setările de proiectare făcând clic pe fila din partea de sus a modului de setări ale modulului.

Efectuați următoarele modificări la setările de proiectare:

Schimbați „Culoarea suprapunerii fundalului” în alb (#ffffff).

Schimbați „Culoare personalizată Dot Nav” la # 576d90.

Schimbați „Culoarea textului” la Întunecat.

Acum faceți „Font antet” îndrăzneț, setați „Dimensiunea fontului antet” la 34 px, setați „Culoare text antet” la # 3b5998 și „Înălțimea liniei antet” la 42 px.

Acum setați „Culoarea textului corpului” la # 141924 și „Înălțimea liniei corpului” la 24 px.

Acum faceți clic pe „Utilizați stiluri personalizate pentru buton” pentru a-l schimba în da. Schimbați „Dimensiunea textului butonului” la 16 px, „Lățimea chenarului butonului” la 0 px, „Culoarea textului butonului” la # 666666 și „Culoarea fundalului butonului” la rgba (0,0,0,0).

Acum faceți clic pe fila „Avansat” din partea de sus a modului de setări ale modulului. În textul introdus sub CSS ID, adăugați „fb-post-slider”. Acest lucru ne permite să adăugăm stiluri la acest modul specific fără a avea niciun efect asupra altor module post care pot fi afișate pe pagină.

Acum adăugați cod CSS la diferitele elemente după cum urmează:

Inainte de

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

Elementul principal

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

După

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;

Descriere diapozitiv

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

Titlu diapozitiv

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

Buton Slide

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

Controlere de diapozitive

margin-bottom:-55px;

Glisați săgețile

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

Acum salvați setările modulului făcând clic pe bifa din colțul din dreapta jos al modalului.

Puteți vedea în Visual Builder că există încă câteva modalități de parcurs pentru a face ca glisorul nostru de postare să arate la fel ca cel de pe pagina de redacție Facebook.

Nu este un lucru de care CSS nu poate avea grijă și vom putea să-l urmărim prindând formă adăugând codul rămas la Setările paginii chiar din Visual Builder. Pentru a ajunge acolo, faceți clic pe pictograma Extindeți setările din partea de jos centrală a paginii, apoi faceți clic pe pictograma „Setări pagină”.

Dacă lucrați la un monitor mai mare, vă sugerez să mutați modalitatea în partea laterală a glisorului de postare, astfel încât să puteți vedea ce face fiecare bit de cod pe măsură ce îl adăugăm. Acest lucru vă va ajuta mai bine să înțelegeți CSS folosit pentru a modela modulul nostru.

Mai întâi vom avea grijă de dimensiunea și poziția imaginii de fundal (în prezent ascunse în spatele suprapunerii albe), precum și de poziția textului glisant și a suprapunerii prin adăugarea următorului CSS în zona de text „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;
}

Acum ne vom ocupa să ascundem meta-ul postării noastre, cu excepția datei și să mutăm poziția datei deasupra titlului. Pentru a realiza acest lucru, adăugați următorul cod la introducerea textului CSS personalizat chiar sub codul introdus anterior.

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

Suntem aproape acolo, doar cu câteva excepții minore. Veți observa când treceți peste modulul nostru Post Slider, că atât săgețile anterioare, cât și cele următoare apar. Pe glisorul redacției Facebook, apare doar următoarea săgeată. Acest lucru este ușor de remediat adăugând următorul CSS la textul CSS personalizat introdus chiar sub codul introdus anterior.

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

Acum trebuie să repoziționăm punctele de navigație sub glisor cu următorul cod. Apropo, veți observa, de asemenea, că setarea proprietății de revărsare a glisorului la vizibil dezvăluie efectul 3D pe care l-am creat mai devreme pentru eticheta „Top Stories” care se înfășoară în colțul din dreapta sus.

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

În cele din urmă, acest ultim bit de cod va schimba animația glisorului nostru pentru a se potrivi mai bine cu glisorul modelului nostru. Deși nu este o potrivire perfectă, este cel mai apropiat pe care l-aș putea obține fără să intru în soluții jQuery. Există, de asemenea, câteva interogări media pentru a face glisorul nostru să fie mai receptiv.

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

Acum puteți salva pagina făcând clic pe butonul de salvare din colțul din dreapta jos al ecranului. Odată ce pagina este salvată, ieșiți din constructorul vizual pentru a vedea glisorul de postare terminat, inspirat de glisorul de postare pe pagina Facebook Newsroom.

Gânduri finale

Ei bine, indiferent dacă ați găsit util acest design sau nu, sper că a oferit o privire detaliată asupra unora dintre setările mai avansate din cadrul modulului Post Slider Divi, precum și a stârnit imaginația dvs. cu privire la ceea ce este posibil.