Jak stylizować moduł suwaka postów Divi, taki jak suwak postów na Facebooku?

Suwaki postów to eleganckie rozwiązanie do prezentowania czytelnikom różnorodnych treści. Wyróżnione posty można uporządkować na wiele sposobów, od kategorii do daty. W dzisiejszym projekcie przyjrzymy się przykładowi ze strony bloga Facebook Newsroom, która prezentuje kategorię postów o nazwie „Top Stories”. To bardzo atrakcyjny suwak, który podkreśla tytuł posta i wyróżniony obraz. Odtworzymy wygląd tego suwaka za pomocą modułu Divi's Post Slider.

Przed i po: moduł suwaka Divi Post

Pierwszy obraz poniżej pokazuje moduł suwaka divi post z jego domyślnymi ustawieniami, podczas gdy drugi to modyfikacja stworzona za pomocą kilku poprawek w ustawieniach i niektórych niestandardowych CSS.

Przed

Później

Koncepcja i inspiracja

Jak wspomniano, model dzisiejszego stylu suwaka postów pochodzi z serwisu Facebook Newsroom. Jest to blog informacyjny poświęcony, jak można się domyślić, wszystkim rzeczom związanym z Facebookiem. Chociaż większość z nas zna Facebooka jako giganta mediów społecznościowych, szybkie przejrzenie tego bloga poszerzy Twoją perspektywę. Z 8,8 miliarda dolarów przychodu w ostatnim kwartale i 1,23 miliarda aktywnych użytkowników dziennie, suwak postów na blogu na stronie Facebook Newsroom stanowi godny model dla dzisiejszego projektu.

Przygotowanie elementów projektu

W ramach przygotowań do tego projektu będziesz potrzebować kilku postów na blogu z polecanymi obrazami. Jeśli nie wiesz, jak ustawiać polecane obrazy dla swoich postów, znajdziesz to ustawienie na stronie edycji posta w prawym dolnym rogu strony.

Ten projekt suwaka będzie działał najlepiej, jeśli każdy z wyróżnionych obrazów ma wymiary 600 x 400 pikseli, ale dokładny rozmiar nie jest krytyczny.

Możesz także dodać fragment tekstu do każdego ze swoich postów w polu wejściowym „Wyciąg” znajdującym się u dołu strony edytora postów. W poście zostanie wyświetlony fragment Twojego posta, jeśli go masz, ale wykorzysta część rzeczywistej treści, jeśli go nie masz.

Wdrażanie projektu z Divi

Subskrybuj nasz kanał YouTube

Jeśli podążasz dalej i nie masz jeszcze ustawień strony do wyświetlania suwaka postów, po prostu utwórz nową stronę i kliknij „Użyj Visual Builder”, aby rozpocząć wprowadzanie niezbędnych modyfikacji.

Zaczynamy od dodania zwykłej sekcji z wierszem struktury 1 kolumny.

Następnie dodaj moduł Post Slider do wiersza.

Nasze modyfikacje zaczynają się od ustawień „Zawartość”, czyli domyślnie, w którym jesteś po dodaniu dowolnego nowego modułu w Visual Builder.

Wprowadź następujące zmiany w domyślnych ustawieniach zawartości:

Ustaw „Numer postu” na dowolną liczbę postów. W tym przykładzie używam 3.

Następnie ustaw „Użyj fragmentu posta, jeśli zdefiniowano” na tak i ustaw „Automatyczna długość fragmentu” na 180.

Teraz jesteśmy gotowi, aby przejść do ustawień projektu, klikając zakładkę u góry modu ustawień modułu.

Wprowadź następujące zmiany w ustawieniach projektu:

Zmień „Kolor nakładki tła” na biały (#ffffff).

Zmień „Niestandardowy kolor Dot Nav” na #576d90.

Zmień „Kolor tekstu” na Ciemny.

Teraz pogrub „Czcionka nagłówka”, ustaw „Rozmiar czcionki nagłówka” na 34px, ustaw „Kolor tekstu nagłówka” na #3b5998, a „Wysokość linii nagłówka” na 42px.

Teraz ustaw "Kolor tekstu ciała" na #141924, a "Wysokość linii ciała" na 24px.

Teraz kliknij „Użyj niestandardowych stylów dla przycisku”, aby zmienić go na tak. Zmień "Rozmiar tekstu przycisku" na 16px, "Szerokość obramowania przycisku" na 0px, "Kolor tekstu przycisku najechania" na #666666 i "Kolor tła przycisku najechania" na rgba(0,0,0,0).

Teraz kliknij kartę „Zaawansowane” u góry modu ustawień modułu. W polu tekstowym pod identyfikatorem CSS dodaj „fb-post-slider”. Dzięki temu możemy dodawać style do tego konkretnego modułu bez wpływu na inne moduły postów, które mogą być wyświetlane na stronie.

Teraz dodaj kod CSS do różnych elementów w następujący sposób:

Przed

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

Główny element

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

Później

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;

Opis slajdu

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

Tytuł slajdu

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

Przycisk przesuwania

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

Kontrolery slajdów

margin-bottom:-55px;

Strzałki ślizgowe

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

Teraz zapisz ustawienia modułu, klikając znacznik wyboru w prawym dolnym rogu modu.

Możesz zobaczyć w Visual Builder, że wciąż jest trochę sposobów, aby nasz suwak postów wyglądał dokładnie tak, jak ten na stronie Facebook Newsroom.

To nic, czym CSS nie może się zająć, a będziemy mogli obserwować, jak nabiera kształtu, dodając pozostały kod do ustawień strony bezpośrednio z programu Visual Builder. Aby się tam dostać, kliknij ikonę Rozwiń ustawienia w dolnej środkowej części strony, a następnie kliknij ikonę "Ustawienia strony".

Jeśli pracujesz na większym monitorze, sugeruję przeniesienie modalu na bok suwaka postu, abyś mógł zobaczyć, co robi każdy bit kodu, gdy go dodajemy. Pomoże to lepiej zrozumieć CSS używany do stylizacji naszego modułu.

Najpierw zajmiemy się rozmiarem i położeniem obrazu tła (obecnie ukrytego za białą nakładką), a także położeniem tekstu i nakładki suwaka, dodając następujący CSS do obszaru tekstowego „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;
}

Teraz zajmiemy się ukrywaniem naszej meta postu, z wyjątkiem daty i przeniesieniem pozycji daty nad tytułem. Aby to osiągnąć, dodaj następujący kod do niestandardowego tekstu wejściowego CSS tuż pod wcześniej wprowadzonym kodem.

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

Jesteśmy prawie tam, z małymi wyjątkami. Gdy najedziesz kursorem na nasz moduł Post Slider, zauważysz, że pojawiają się zarówno poprzednia, jak i następna strzałka. Na suwaku Facebook newsroom pojawia się tylko następna strzałka. Można to łatwo naprawić, dodając następujący kod CSS do niestandardowego tekstu wejściowego CSS tuż pod wcześniej wprowadzonym kodem.

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

Teraz musimy zmienić położenie kropek nawigacyjnych pod suwakiem za pomocą poniższego kodu. Nawiasem mówiąc, zauważysz również, że ustawienie właściwości przepełnienia suwaka na widoczne ujawnia efekt 3D, który stworzyliśmy wcześniej dla tagu „Najważniejsze artykuły”, który otacza prawy górny róg.

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

Wreszcie, ten ostatni fragment kodu zmieni animację naszego suwaka, aby bardziej pasowała do naszego suwaka modelu. Chociaż nie jest to idealne dopasowanie, jest to najbliższe, jakie mogłem uzyskać bez wchodzenia w rozwiązania jQuery. Istnieje również kilka zapytań o media, aby nasz suwak był nieco bardziej responsywny.

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

Teraz możesz zapisać stronę, klikając przycisk Zapisz w prawym dolnym rogu ekranu. Po zapisaniu strony wyjdź z wizualnego konstruktora, aby zobaczyć gotowy suwak postu, zainspirowany suwakiem postu na stronie Facebook Newsroom.

Końcowe przemyślenia

Cóż, niezależnie od tego, czy ten konkretny projekt okazał się przydatny, czy nie, mam nadzieję, że dostarczył szczegółowego wglądu w niektóre z bardziej zaawansowanych ustawień w module Divi's Post Slider, a także pobudził twoją wyobraźnię, co jest możliwe.