Przekształcenie modułu bloga w zaawansowaną karuzelę do przeciągania/przesuwania za pomocą Divi & Slick

Dla wielu stron blogowanie stało się ważną częścią ich strategii SEO. Ale oprócz tworzenia wysokiej jakości treści, ważne jest również uproszczenie procesu nawigacji po wpisach dla odwiedzających. W ten sposób mogą przeskakiwać od jednego posta do drugiego i spędzać więcej czasu w Twojej witrynie, czytając zamieszczone tam treści. W Divi znajduje się moduł blogu, którego możesz użyć do dynamicznego wyświetlania postów na blogu i ich stylizacji. Jeśli szukasz sposobu, aby przenieść doświadczenie wyszukiwania postów na wyższy poziom, pokochasz ten post. Pokażemy Ci, jak zamienić wbudowany moduł bloga Divi w zaawansowaną karuzelę do przeciągania/przeciągania z wbudowanymi elementami Divi i darmową, zgrabną biblioteką js. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ przeciągania karuzeli przeciągania modułu bloga ZA DARMO

Aby położyć swoje ręce na darmowym układzie karuzeli przeciągania w module Blog Module, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Utwórz stronę bloga

Dodaj nową stronę

Zacznij od dodania nowej strony do witryny, nad którą pracujesz. Nadaj swojej stronie tytuł, opublikuj stronę i przełącz się na Visual Builder.

Prześlij układ strony bloga firmy zajmującej się projektowaniem wnętrz

W tym samouczku dotyczącym przypadków użycia użyjemy układu bloga Interior Design Company, ale możesz użyć dowolnego innego układu, który wybierzesz.

2. Twórz projekty poprzednich i następnych strzałek za pomocą modułów Blurb

Dodaj nowy wiersz na górze sekcji

Struktura kolumny

Gdy znajdziemy się na stronie bloga, możemy zacząć tworzyć zaawansowaną karuzelę do przesuwania. Pierwsza część poświęcona jest zaprojektowaniu strzałek, których potrzebujemy, aby umożliwić odwiedzającym poruszanie się tam iz powrotem między postami. Strzałki nie będą jedyną opcją poruszania się po karuzeli. Będą mogli przeciągać karuzelę na komputerze i przesuwać palcem również na urządzeniu mobilnym. Aby zaprojektować strzałki, użyjemy wbudowanego modułu Blurb Divi, ale możesz użyć dowolnego innego wybranego modułu. Dodaj nowy wiersz na górze sekcji bloga, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól, aby wiersz dotykał lewej i prawej strony sekcji, zmieniając ustawienia rozmiaru w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Dodaj moduł Blurb

Dodaj tytuł

Następnie dodaj moduł Blurb i wstaw tytuł.

Wybierz ikonę

Następnie wybierz ikonę.

Ustawienia ikon

Przejdź do zakładki projektu i zmień ustawienia ikony w następujący sposób:

• Kolor ikony: #000000
• Ikona koła: Tak
• Kolor koła: #f2f2f2
• Umieszczenie obrazu/ikony: góra
• Wyrównanie obrazu/ikony: środek

Ustawienia tekstu tytułu

Następnie zmodyfikuj ustawienia tekstu tytułu.

• Czcionka tytułu: Muli
• Grubość czcionki tytułu: pół pogrubiona
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #000000

Rozmiary

Następnie zmieniamy ustawienia rozmiaru modułu dla różnych rozmiarów ekranu.

• Szerokość: 10% (komputer), 20% (tablet), 30% (telefon)
• Wyrównanie modułu: w prawo

Klasa CSS

Dodamy również klasę CSS. Ta klasa CSS pomoże nam uruchomić akcję karuzeli po kliknięciu w dalszej części samouczka.

• Klasa CSS: przycisk wstecz

Główny element CSS

Na koniec dodamy również jedną linię kodu CSS do głównego elementu modułu, aby zmienić kursor w wskaźnik.

cursor: pointer;

Klonuj rząd i umieść na dole sekcji

Po wykonaniu pierwszej strzałki możesz sklonować cały kontener wiersza i umieścić zduplikowany wiersz na końcu sekcji bloga.

Zmień tytuł

Otwórz moduł Blurb w zduplikowanym wierszu i zmień tytuł.

Zmień ikonę

Wraz z ikoną.

Zmień klasę CSS

I zmodyfikuj także klasę CSS.

• Klasa CSS: następny przycisk

3. Przygotuj moduł bloga

Otwórz wiersz zawierający moduł bloga

Rozmiary

Po umieszczeniu strzałek nadszedł czas, aby zacząć dostosowywać moduł bloga, zaczynając od wiersza, w którym jest umieszczony. Otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Widoczność

Następnie zmień przepełnienia wiersza na ukryte. Pomoże to zapewnić, że karuzela nie spowoduje pojawienia się poziomego paska przewijania na naszej stronie.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Modyfikuj moduł bloga

Ukryj paginację

Po wprowadzeniu ustawień wiersza otwórz ustawienia modułu blogu. Upewnij się, że paginacja jest wyłączona w ustawieniach elementów.

• Pokaż paginację: Nie

Układ

Następnie przejdź do zakładki projektu i zmień układ na pełną szerokość.

• Układ: pełna szerokość

Narzuta

Dodajemy też nakładkę.

• Polecana nakładka obrazu: włączona
• Kolor ikony nakładki: #ffffff
• Kolor tła nakładki: rgba (1,0,66,0.33)

Klasa CSS

Następnie dodamy do naszego bloga klasę CSS, która pomoże nam włączyć karuzelę w dalszej części samouczka.

• Klasa CSS: moduł-blog

Opublikuj meta CSS

Wygenerujemy trochę odstępu między meta postu a fragmentem, dodając trochę dolnego marginesu do elementu meta CSS postu na karcie Zaawansowane.

margin-bottom: 50px;

4. Dodaj funkcjonalność Slick JS

Dodaj moduł kodu poniżej modułu bloga

Gdy wszystkie ustawienia Divi są już na swoim miejscu, nadszedł czas na dodanie zgrabnej funkcjonalności js! Dodaj moduł kodu tuż pod modułem blogu (lub w dowolnym innym miejscu na stronie).

Dodaj zgrabne tagi skryptu JS

Następnie dodaj zgrabną bibliotekę js do tagów skryptu (jak widać na poniższym zrzucie ekranu). Możesz również dodać je do nagłówka swojej witryny w ustawieniach motywu Divi.

src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js

Dodaj kod CSS slajdu

Nieznacznie zmodyfikujemy każdy post na blogu na indywidualnym poziomie, używając kodu CSS. Upewnij się, że umieszczasz kod między tagami stylu, jak widać na poniższym zrzucie ekranu.

.slick-slide {
float: left;
margin: 2vw;
}

Dodaj kod JQuery

I wreszcie, dodamy trochę kodu JQuery, aby zaawansowana karuzela przeciągania przeciągania przybrała swoją formę. W poniższym kodzie dodajemy również zaprojektowane przez nas przyciski do funkcji karuzeli. Upewnij się, że umieszczasz kod w tagach skryptu, jak widać na poniższym zrzucie ekranu.

jQuery(function($){
  
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
  
postContainer.addClass('slider'); 
postContainer.addClass('blog-carousel'); 

$('.blog-carousel').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '10%',
    swipe: true,
    prevArrow: backButton,
    nextArrow: nextButton,
  
    responsive: [{
    breakpoint: 1079, settings: {
    slidesToShow: 1
    }
    }]

});
});

5. Zapisz stronę i wyjdź z programu Visual Builder, aby wyświetlić wynik

W programie Visual Builder nie zobaczysz wyniku. Tak więc, gdy tylko skończysz, zapisz swoją stronę, wyjdź z Visual Builder i zobacz wynik na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak przenieść swój projekt modułu blogowego na wyższy poziom. Mówiąc dokładniej, pokazaliśmy, jak zamienić wbudowany moduł bloga Divi w zaawansowaną karuzelę z funkcją przeciągania, korzystając z bezpłatnej, zgrabnej biblioteki js. Udostępniliśmy również plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.