Que diriez-vous d 'plakater Twój blog Divi w formie karuzeli, w której z łatwością prześledzisz artykuły?
Dla wielu stron internetowych blogowanie stało się ważną częścią strategii marketingowej. SEO.
Ale oprócz tworzenia wysokiej jakości treści ważne jest również uproszczenie procesu przeglądania postów dla odwiedzających. W ten sposób mogą przeskakiwać z artykułu na artykuł i spędzać więcej czasu na Twojej stronie czytając treści, które tam zamieszczasz.
W Divi znajduje się moduł Blog, którego możesz użyć do dynamicznego wyświetlania artykułów i ich dostosowywania. Jeśli szukasz sposobu na przeniesienie doświadczenia wyszukiwania postów na wyższy poziom, pokochasz ten artykuł.
Pokażemy Ci, jak przekształcić zintegrowany moduł Divi Blog w karuzelę za pomocą zintegrowanych elementów Divi i darmowa biblioteka js .
Chodźmy.
badanie
Zanim zagłębimy się w samouczek, rzućmy okiem na wynik.
Utwórz stronę bloga za pomocą Divi Theme Builder
Zacznij od dodania nowej strony do witryny, nad którą pracujesz.
Nadaj swojej stronie tytuł, opublikuj stronę i kliknij 'Użyj Divi Builder".
Pobierz wstępnie zaprojektowaną stronę bloga „Firma zajmująca się projektowaniem wnętrz”
W tym samouczku będziemy używać strony blogu z układu „Firma zajmująca się projektowaniem wnętrz”, ale możesz użyć dowolnego innego układu, który Ci się podoba.
Utwórz szablony strzałek „Poprzedni” i „Następny” za pomocą modułu podsumowania Divi
Po wejściu na stronę bloga możemy rozpocząć tworzenie karuzeli.
Pierwsza część poświęcona jest tworzeniu strzałek, których potrzebujemy, aby umożliwić odwiedzającym nawigację między artykułami.
Czytaj także: Jak utworzyć lepki globalny nagłówek w DIVI
Aby zaprojektować strzałki, użyjemy modułu podsumowania Divi, ale możesz użyć dowolnego innego wybranego modułu.
Dodaj nową linię na górze sekcji Twój blog stosując następującą strukturę kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii i pozwól, aby linia dotykała lewej i prawej strony sekcji, zmieniając ustawienia rozmiaru w następujący sposób:
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 100%
Dodaj moduł podsumowania
Dodaj moduł Podsumowanie i wstaw tytuł.
Następnie wybierz ikonę.
- Użyj ikon: TAK
Ustawienia ikon
Przejdź do zakładki Styl i zmodyfikuj ustawienia ikon w następujący sposób:
- Kolor ikony: #000000
- Umieszczenie obrazu/ikony: wierzchołek
- Wyrównanie obrazu/ikony: środek
Ustawienia tekstu tytułowego
Następnie zmień ustawienia tekstu tytułu.
- Czcionka tytułu: Mulish
- Miękkie światło Tytuł: Semi Bold
- Wyrównanie tekstu: do środka
- Kolor tekstu tytułu: #000000
zaklejania
Następnie zmieniamy ustawienia rozmiaru modułu na różnych rozmiarach ekranu.
- Maksymalna szerokość: 10% (komputer), 20% (tablet), 30% (telefon)
- Wyrównanie tekstu: do prawej
Dodajmy też klasę CSS. Ta klasa CSS pomoże nam uruchomić akcję karuzeli po kliknięciu.
- Klasa CSS: przycisk wstecz
Na koniec dodamy również wiersz kodu CSS do głównego elementu modułu, aby zmienić kursor w wskaźnik.
cursor: pointer;
Sklonuj linię i umieść ją 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.
Otwórz moduł Podsumowanie w zduplikowanym wierszu i edytuj tytuł.
Użyj ikon: TAK.
Zmodyfikuj także klasę CSS.
- Klasa CSS: następny przycisk
Przygotuj moduł Blog
zaklejania
Po umieszczeniu strzałek nadszedł czas, aby zacząć ulepszać moduł Blog, zaczynając od wiersza, w którym jest umieszczony. Otwórz ustawienia linii i odpowiednio zmień ustawienia rozmiaru:
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 100%
Następnie ustaw przepełnienia linii 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
Ukryj paginację
Po wprowadzeniu ustawień linii otwórz ustawienia modułu Blog. Upewnij się, że stronicowanie jest wyłączone w ustawieniach elementu.
- Pokaż paginację: Nie
Następnie przejdź do zakładki Styl i zmień układ na „Pełny ekran”.
- Model: Pełny ekran
Dodamy również nakładkę.
- Pokazany obraz nakładki: AKTYWNY
- Kolor ikony nakładki: #ffffff
- Kolor tła nakładki: rgba (1,0,66,0.33)
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
I wygenerujemy trochę miejsca między meta postu a fragmentem, dodając dolny margines do elementu CSS Post Metadata w zakładce Zaawansowane.
Odkryj również: Jak stworzyć przesuwane i przesuwane menu w DIVI
margin-bottom: 50px;
Dodaj funkcjonalność Slick JS
Gdy wszystkie ustawienia Divi są już na swoim miejscu, nadszedł czas, aby dodać zręczną funkcjonalność js! Dodaj moduł Kod tuż pod modułem Blog (lub w dowolnym innym miejscu na stronie).
Następnie dodaj zgrabną bibliotekę js w tagach skryptu (jak widać na poniższym zrzucie ekranu). Możesz również dodać je do nagłówka swojej witryny w ustawieniach Motyw Divi.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Każdy wpis na blogu będziemy nieznacznie modyfikować na indywidualnym poziomie za pomocą kodu CSS.
Czytaj także: Jak stworzyć stronę bloga z modułem Blog w DIVI
Pamiętaj, aby umieścić kod między tagami stylu jak pokazano na zrzucie ekranu poniżej.
.slick-slide {
float: left;
margin: 2vw;
}
I na koniec dodamy trochę kodu JQuery, aby karuzela mogła nabrać kształtu. W poniższym kodzie dodajemy również przyciski, które zaprojektowaliśmy dla funkcjonalności karuzeli.
Pamiętaj, aby umieścić kod w tagach skryptu jak widać poniżej.
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
}
}]
});
});
Zapisz stronę i wyjdź z Divi's Visual Builder, aby wyświetlić wynik
W 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!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Pobierz DIVI teraz !!!
Wnioski
Więc ! To tyle w tym artykule. Pokazaliśmy Ci, jak przenieść projekt modułu Blog na wyższy poziom. W szczególności pokazaliśmy, jak zamienić wbudowany moduł Blog Divi w karuzelę za pomocą darmowej biblioteki js.
Jeśli chcesz dowiedzieć się więcej o Divi, nie wahaj się zajrzeć do naszego katalogu Samouczki Divi. Możesz również skonsultować Jak stworzyć stronę Blog z modułem Divi Blog
Zobacz także nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
