Jak zamienić moduł bloga Divi w karuzelowe posty na blogu?

Opublikowany: 2022-10-28

W Divi jest moduł blogu, który może dynamicznie wyświetlać posty na blogu, a także możesz je stylizować w dwóch układach bezpośrednio od nietoperza, układ o pełnej szerokości, który wyświetla posty ułożone pionowo, dzięki czemu w jednym wierszu pojawia się tylko jeden post, oraz siatka układ, który umieszcza posty na blogu w wielu kolumnach, tworząc w ten sposób siatkę. Jeśli korzystasz z modułu od jakiegoś czasu, prawdopodobnie będziesz chciał mieć inny styl niż układ siatki i pełnej szerokości dla swoich postów na blogu.

Wcześniej przygotowaliśmy również kilka artykułów, w których możesz spróbować wystylizować swoje posty na blogu. Jedna z nich dotyczy przeniesienia zawartości postów na blogu nad wyróżniony obraz modułu blogu z układem siatki, a druga dotyczy przekształcenia postów w blogu z układem o pełnej szerokości w układ listy.

Tym razem chcemy pokazać jeszcze jedną możliwość dostosowania stylu postów na blogu: przekształcenie postów na blogu w karuzelę z funkcją przeciągania na PC i przeciągania na urządzeniu mobilnym, aby poruszać się po postach na blogu, jak na poniższej animacji.

Przekształcenie modułu bloga Divi w karuzelę

Krok 1: Utwórz stronę lub edytuj istniejącą stronę

Aby rozpocząć przekształcanie modułu bloga Divi w karuzelę, dodaj nową stronę do witryny lub edytuj istniejącą stronę, a następnie edytuj ją za pomocą edytora wizualnego Divi Builder. W tym samouczku utworzymy nową stronę i użyjemy układu bloga z gotowych pakietów układów łodzi czarterowych .

Krok 2: Utwórz przycisk Poprzedni i Następny dla karuzeli

Po załadowaniu układu moduł bloga będzie wczytywał posty na blogu dynamicznie. Następnym krokiem jest utworzenie poprzedniego i następnego przycisku, aby umożliwić użytkownikowi poruszanie się tam iz powrotem między postami.

Dodaj nowy wiersz dla przycisków nawigacyjnych

Zacznij od dodania nowego wiersza i przenieś go tuż nad wiersz modułu bloga, a następnie użyj następującej struktury kolumn.

Nie dodając jeszcze żadnych modułów, otwórz Ustawienia wiersza , a następnie ustaw szerokość wiersza na 100% szerokości przekroju, przechodząc do zakładki Projekt → Blok rozmiaru i ustawiając Szerokość i Maks. szerokość na 100%.

Dodaj moduły Blurb dla przycisków

Gdy wiersz będzie gotowy, dodaj moduł notki dla pierwszego przycisku, aby poruszać się po postach. Wybieramy moduł blurb dla przycisku, ponieważ ma wiele opcji stylizacji ikony przycisku, którego używamy do nawigacji po wpisach.

Otwórz Ustawienia Blurb po dodaniu modułu, zastosuje do niego następujące ustawienia:

  • Zmień tytuł na „Poprzedni”
  • Usuń tekst główny
  • Otwórz blok Obraz i ikona , przełącz opcję Użyj ikony na Tak i wybierz ikonę strzałki w lewo.
  • Przejdź do karty Projekt , a następnie otwórz blok Obraz i ikona , aby zmienić ustawienia ikony w następujący sposób:
    • Kolor ikony : #000000
    • Kolor tła obrazu/ikony: #f2f2f2
    • Obraz/ikona zaokrąglony róg : 50 pikseli dla wszystkich rogów
  • Otwórz blok Tekst tytułu , aby wystylizować tekst tytułu w następujący sposób:
    • Grubość czcionki tytułu : pół pogrubiona
    • Wyrównanie tekstu tytułu: do środka
  • Zmień opcję rozmiaru modułu na różnych rozmiarach ekranu i dostosuj jego wyrównanie w prawo, przechodząc do bloku Rozmiar , a następnie zmodyfikuj jego ustawienia w następujący sposób:
    • Szerokość : komputer stacjonarny = 10%, tablet = 20%, telefon = 30%
    • Wyrównanie modułu : w prawo
  • Dodaj niestandardową klasę CSS do modułu, aby później uruchomić akcję karuzeli, przechodząc do zakładki Zaawansowane → Blok CSS i klasy , a następnie dodaj niestandardową klasę CSS „wstecz” do pola Klasy CSS .
  • Zmień kursor we wskaźnik, dodając następujący fragment kodu CSS do niestandardowego CSS → Główny element :
    • cursor: pointer;

Sklonuj rząd przycisków i przenieś go poniżej rzędu bloga

Po ustawieniu poprzedniego przycisku sklonujmy jego wiersz i moduł, abyśmy nie musieli powtarzać kroków, przenieś wiersz poniżej wiersza postów na blogu i po prostu zmień niektóre ustawienia w sklonowanym module notatek dla ikony, tytułu, i niestandardową klasę CSS dla następnego przycisku. Zmienione ustawienia są następujące:

  • Na karcie Treść zmień wartość:
    • Tytuł: Dalej
    • Ikona: strzałka w prawo
  • Następnie przejdź do zakładki Zaawansowane , aby zmienić klasę CSS
    • Identyfikator i klasy CSS → Klasa CSS : następny przycisk

Krok 3: Przygotuj moduł bloga

Przygotuj rząd na posty na blogu karuzeli

Zanim dotkniemy modułu, przygotujmy wiersz modułu bloga, zanim zamienimy go w karuzelowe posty na blogu. Zacznij od otwarcia Blog Row Settings , a następnie wprowadź zmiany w ustawieniach w następujący sposób:

  • Przejdź do zakładki Projekt → Blok rozmiaru , a następnie ustaw:
    • Szerokość: 100%
    • Maksymalna szerokość: 100%
  • Przejdź do zakładki Zaawansowane → Blok widoczności :
    • Przepełnienie poziome : ukryte
    • Przepełnienie pionowe: ukryte

Powyższe ustawienia sprawią, że karuzela nie spowoduje pojawienia się poziomego paska przewijania na Twojej stronie.

Przygotuj moduł bloga

Po przygotowaniu wiersza nadszedł czas, aby rozpocząć ulepszanie modułu bloga. Zacznij od otwarcia Blog Settings , a następnie wprowadź zmiany w ustawieniach w następujący sposób:

  • Na karcie Zawartość → Blok elementów ustaw opcję Pokaż stronicowanie na Nie
  • Przejdź do karty Projekt → Blok układu , aby zmienić układ postu na blogu na pełną szerokość
    • Układ: pełna szerokość
  • Następnie dodaj nakładkę, dodając następujące wartości w bloku nakładki
    • Polecana nakładka obrazu : włączona
    • Kolor ikony nakładki: #ffffff
    • Kolor tła nakładki: rgba (1,0,66,0.33)
  • Nadal na karcie Projekt otwórz blok Obraz i wybierz jeden z efektów cienia pola z opcji Cień pola obrazu , aby dodać efekt cienia do wyróżnionego obrazu i użyć następującego koloru:
    • rgba(1,0,66,0,33)
  • Przejdź na kartę Zaawansowane , dodaj niestandardową klasę CSS do modułu bloga, aby później włączyć karuzelę, otwierając blok CSS i klasy , a następnie dodaj następującą klasę CSS:
    • Klasa CSS: wpblog-module
  • Dodaj trochę miejsca między wyróżnionym obrazem a tytułem, a także trochę miejsca między meta postu a fragmentem, dodając trochę marginesów. Aby to zrobić, dodaj następujący fragment kodu CSS do niestandardowego bloku CSS :
    • Tytuł: margin-top: 10px;
    • Post Meta : margin-bottom: 30px;

I to tyle, jeśli chodzi o ustawienia modułu bloga. Zmieńmy to w przeciąganą i przesuwaną karuzelę, dobrze?

Krok 4: Zmień posty na blogu w przeciąganą i przesuwaną karuzelę

Po skonfigurowaniu ustawień modułu bloga nadszedł czas, aby przekształcić posty na blogu w przeciąganą i przesuwaną karuzelę. Aby to zrobić, musimy dodać bibliotekę Slick JS i kilka niestandardowych kodów, aby to działało.

Dodaj funkcjonalność Slick JS i Slide CSS

Slick JS to wtyczka jQuery do tworzenia w pełni konfigurowalnych, responsywnych i przyjaznych dla urządzeń mobilnych karuzeli. Aby dodać funkcjonalność Slick JS, dodaj moduł kodu do dowolnej kolumny na stronie lub możesz dodać następujący skrypt z adresem URL do nagłówka swojej witryny, przechodząc do Divi → Opcje motywu Divi → Integracje : 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

W tym samouczku używamy modułu kodu i umieszczamy w nim powyższy kod, a następnie dodajemy następujący kod CSS slajdu tuż pod końcem tagu skryptu. 

 <Styl>
	.slick-slajd {
	pływak: lewy;
	margines: 2vw;
	}
</style>

Niech karuzela przybierze formę

Aby wreszcie przeciągana i przesuwana karuzela przybrała formę, musisz dodać następujący kod JQuery. Możesz umieścić kod po poprzednim kodzie CSS slajdu. Bez zbędnych ceregieli oto kod: 

 <skrypt>
  jQuery(funkcja($){
   
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.wpblog-module .et_pb_ajax_pagination_container');
   
postContainer.addClass('suwak'); 
postContainer.addClass('karuzela bloga'); 
 
$('.blog-karuzela').slick({
    nieskończony: prawda,
    slajdyToShow: 3,
    slajdyToScroll: 1,
    centerMode: prawda,
    centerPadding: '10%',
    machnięcie: prawda,
    prevArrow: backButton,
    nextArrow: nextButton,
   
    responsywny: [{
    punkt przerwania: 1079, ustawienia: {
    slajdyToShow: 1
    }
    }]
 
});
});
</script>

Powyższy kod sprawia, że ​​przyciski Poprzedni i Następny działają poprawnie jako przyciski nawigacyjne. Możesz spojrzeć na poniższy obrazek dla naszego rozmieszczenia kodu w module kodu.

Krok 5: Oglądaj swoje posty na karuzeli na żywo

Teraz wszystkie wymagane kody są już na miejscu, jednak moduł bloga nadal jest w układzie pełnej szerokości w naszym kreatorze Divi. Dlaczego?

Nie martw się, zapisz stronę i wyjdź z kreatora wizualnego, aby zobaczyć swoje posty na blogu z poziomu interfejsu. I voila, Twoje posty na blogu są przekształcane w przeciąganą i przesuwaną karuzelę z przyciskami następny i poprzedni, co daje inny sposób poruszania się po karuzeli blogowych postów.

Dolna linia

Jeśli korzystasz z modułu bloga od jakiegoś czasu, prawdopodobnie będziesz chciał mieć inny styl niż układ siatki i pełnej szerokości dla swoich postów na blogu, które są domyślnym układem, który możesz uzyskać od razu. W tym samouczku pokazano, jak zamienić posty na blogu w przeciąganą i przesuwaną karuzelę, która daje więcej możliwości stylizowania elementów witryny, takich jak strona bloga lub powiązane posty.

Pobierz Divi