Podświetlenie wtyczki Divi – Dodatki do bloga Divi

Divi zawiera moduł bloga do wyświetlania twoich postów w pełnej szerokości lub układzie siatki. To fajny moduł i wykonuje swoją pracę. A co, jeśli chciałbyś mieć różne układy i funkcje? Można to zrobić za pomocą CSS, ale wtyczka innej firmy o nazwie Divi Blog Extras znacznie ułatwia to zadanie.

Divi Blog Extras to wtyczka innej firmy od Divi Extended, która dodaje nowy moduł do Divi Builder z kilkoma nowymi funkcjami wyświetlania postów na blogu. Zawiera sześć różnych projektów układu i dodaje funkcję ładowania AJAX z przyciskiem wczytaj więcej. Posty ładują się podczas przewijania, a ładowanie jest szybkie. Możesz zmienić tekst zarówno dla przycisków czytaj więcej, jak i wczytaj więcej.

W tym wyróżnieniu wtyczki przyjrzymy się dodatkom do bloga Divi i dowiemy się, co można zrobić za pomocą tej wtyczki. Obrazy do tych przykładów zostały zaczerpnięte z Unsplash.com.

Divi Blog Dodatki Instalacja i ustawienia

Prześlij i aktywuj jak zwykle. Nowy moduł o nazwie Divi Blog Extras będzie wtedy dostępny w Divi Builder. Aby go użyć, po prostu upuść go w wierszu, tak jak każdy moduł. Ponieważ opcje są takie same, jak w przypadku standardowych modułów Divi Builder, korzystanie z tego modułu jest intuicyjne.

Ustawienia treści obejmują znane opcje i mają sześć opcji układu, długość fragmentu, kolory kategorii, ładowanie większej liczby tekstu przycisku, nakładkę polecanego obrazu, więcej tekstu przycisku i opcje koloru tekstu. Ustawienia projektu obejmują nagłówek, meta i tekst główny oraz styl obramowania. Układ Block Extended dodaje pozycję obrazu, a Classic dodaje ikony społecznościowe. Przyjrzyjmy się bliżej każdemu z układów.

Rozszerzona siatka

Domyślny układ, Grid Extended, wyświetla posty na blogu z naprzemiennymi obrazami i tekstem. Obrazy rozjaśniają się po najechaniu kursorem. Nazwy kategorii są umieszczane w ramce. w trybie responsywnym obrazy umieszczane są na górze.

W tym przykładzie dodałem nakładkę najechania kursorem, ikonę najechania kursorem, zmieniłem tekst czytaj więcej, ograniczyłem fragment do 100 znaków i zmieniłem tekst kategorii i kolory tła. Animacja najechania wyświetla się, gdy najedziesz kursorem na dowolną część wpisu.

Pudełko rozszerzone

Pole rozszerzone umieszcza fragment w ramce, która nakłada się na obraz i usuwa ramkę wokół nazwy kategorii. Zdjęcie autora jest dodawane do sekcji meta. Obrazy i tekst na przemian. To jeden z bardziej eleganckich układów bloga.

W tym przykładzie zmieniłem czcionkę kategorii i kolory tła, ograniczyłem długość fragmentu do 150 znaków i zmieniłem czcionkę na niebieską oraz zmieniłem tekst przycisku Czytaj więcej. Domyślne najechanie rozjaśnia obraz, jak widać na górnym obrazku powyżej.

Pełna szerokość

Pełna szerokość umieszcza obrazy po lewej stronie, a fragment po prawej, dodając stylizowaną datę po lewej stronie. Każdy post jest oddzielony linią. Nazwa kategorii jest umieszczona w meta.

Ten przykład wyłącza informacje o dacie i meta. Tekst wykorzystuje niestandardowe kolory. Zmieniłem czytaj więcej i załaduj więcej tekstu przycisku. Fragment jest ograniczony do 200 znaków.

Wszystkie układy są responsywne. Oto spojrzenie na responsywny wygląd Full Width. To pokazuje dwa moduły obok siebie w rzędzie dwóch kolumn.

Rozszerzony blok

Block Extended to siatka bloga, która dodaje nazwę kategorii nad obrazem i meta na dole karty. Obraz powiększa się po najechaniu na dowolną część karty. Podoba mi się ten rodzaj mikro-interakcji, ponieważ pokazuje, że karta jest klikalna.

Block Extended ma trzy opcje wyświetlania obrazów. Ten przykład umieszcza wyróżniony obraz w tle, a tekst w nakładce.

W tym przykładzie obraz tła zmienia się między dwoma pierwszymi opcjami.

Tło o pełnej szerokości

Tło o pełnej szerokości wyświetla przyciętą wersję obrazu w pełnej szerokości i umieszcza fragment z meta w nakładce na obraz. Umieszczenie fragmentu zmienia się. Meta jest oddzielona od fragmentu linią.

W tym przykładzie zastosowano ciemną nakładkę na obrazie, aby pokazać, że nakładka fragmentu nie używa tej samej nakładki po najechaniu myszą. W tym przykładzie tło sekcji jest czerwone. Zwróć uwagę, że czerwony prześwituje po najechaniu kursorem. Dodałem również własny tekst przycisku „czytaj więcej” i ramkę o rozmiarze 2 pikseli.

Klasyczny

Układ klasyczny wyświetla posty na blogu z obrazami w pełnym rozmiarze i fragmentami o pełnej szerokości pod obrazami. Kategoria i data znajdują się nad tytułem. Tytuł zawiera separator krótkich linii, aby odróżnić go od obrazu. Pod fragmentem znajduje się imię i nazwisko autora oraz liczba komentarzy oddzielonych kreską. Cieńszy i szerszy separator linii oddziela od siebie posty.

Ten układ ma opcję wyświetlania ikon społecznościowych. Kliknięcie Załaduj więcej (lub jak to nazwałem – Zobacz więcej artykułów) wyświetla następny zestaw postów, który jest równy liczbie postów, które wybrałem do wyświetlenia. W tym przykładzie wyświetlam dwa posty. Wczytaj więcej ładuje następne 2 posty.

Tworzenie unikalnego układu z dodatkami do bloga Divi

Wiele modułów może być używanych razem do tworzenia układów magazynu. Ten prosty układ zawiera cztery moduły wyświetlające układ Gird Extended. Każdy moduł wyświetla różne kategorie. Dwa w środku wyświetlają po dwa posty.

Tworzy to układ magazynu z różnymi kategoriami dla różnych działów. Ten przykład pokazuje, jak rozszerzona siatka wygląda jako responsywna.

Jest to ten sam układ Divi Builder, ale używa tła o pełnej szerokości. W trybie responsywnym nakładki prawie całkowicie zakrywają obrazy.

W tym przykładzie zastosowano układ klasyczny dla górnego modułu i rozszerzoną siatkę dla kolejnych dwóch modułów. Każdy z modułów wyświetla różne kategorie i ma własny styl tekstu kategorii. Górny moduł nie wyświetla fragmentu.

Tworzy to ciekawy układ magazynu. Ustawiłem również wiersze na pełną szerokość. Możesz mieszać i dopasowywać układy, aby uzyskać niepowtarzalny projekt. Stworzyłem układy z różnymi kategoriami dla każdego modułu. W przyszłej aktualizacji moduł będzie miał funkcję przesunięcia, dzięki czemu będzie można używać wielu modułów w tej samej kategorii.

Licencja

Pojedyncza witryna kosztuje 15 USD. Licencja rozszerzona kosztuje 30 USD i może być używana w nieograniczonej liczbie witryn dla Ciebie i Twoich klientów. Obejmuje dożywotnie aktualizacje.

Ta wtyczka nie działa z Extra.

• Możesz kupić tę wtyczkę na stronie Divi Extended.

Końcowe przemyślenia

Dodatki do bloga Divi dodają kilka fajnych funkcji stylizacyjnych i projektowych, aby nadać modułowi bloga nieco pizazz. Dodaje również możliwość stylizowania tła i tekstu kategorii. Używa AJAX do ładowania i zawiera nowy przycisk ładowania. Możesz nawet dodać własny tekst do ładunku i przeczytać więcej przycisków. Każdy z tych projektów doskonale nadaje się do nadania Twojemu blogowi niepowtarzalnego wyglądu w porównaniu ze standardowym blogiem. Jeśli chcesz projekt bloga wykraczający poza standardowy moduł bloga Divi Builder, dodatki do bloga Divi mogą być modułem, którego szukasz.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś dodatki do bloga Divi? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

Polecane zdjęcie za pośrednictwem pulsar011 / shutterstock.com