Podświetlenie wtyczki Divi: moduł wstążki Divi

Divi Ribbon Module to wtyczka innej firmy do Divi, która dodaje stylową wstążkę do zawartości modułu. Dodaj obraz, przycisk, tytuł, treść i stylizuj każdy element tak szczegółowo, jak chcesz. Użyj go, aby wyróżnić wyprzedaż produktu, zbudować wezwanie do działania lub zwrócić uwagę na dowolny element. W tym wyróżnieniu wtyczki Divi przyjrzymy się modułowi wstążki Divi i zobaczymy, co może zrobić.

Instalowanie modułu wstążki Divi

1. Przejdź do i pobierz wtyczkę
2. W panelu WordPress przejdź do Wtyczki > Dodaj nowy
3. Kliknij Prześlij wtyczkę
4. Wybierz spakowany plik z komputera
5. Kliknij Zainstaluj teraz
6. Gdy zobaczysz „Wtyczka zainstalowana pomyślnie”, kliknij Aktywuj wtyczkę
7. Przejdź do Narzędzia > Licencja wtyczki Divi Ribbon i wprowadź swój klucz licencyjny

Moduł wstążki Divi

Do Divi Buildera dodawany jest nowy moduł o nazwie Divi Ribbon. Moduł tworzy notkę (wraz z tytułem, treścią, ikoną, obrazem i przyciskami) i umieszcza w niej wstążkę. Masz kontrolę nad umieszczeniem i stylem wstążki, a także innymi elementami w module. Notatka domyślnie zawiera cień pudełka.

Karta zawartości wstążki Divi

Karta Treść zawiera główne ustawienia, rotację notatek, obraz i ikonę, link, tło i etykietę administratora. Główne ustawienia zapewniają wybory typu wstążki, lokalizacji, tekstu, tytułu i zawartości.

Ustawienia główne

Do wyboru jest 7 rodzajów wstążek. Działają w ten sam sposób i zawierają tę samą treść, ale mają różne kształty. Kształty obejmują wstążki z rozwidlonymi końcami, wstążki, które obejmują notki, wstążki z boku lub u góry i mają różne rodzaje końców, takie jak widelce lub koła. Daje to wiele możliwości wyboru wyświetlania.

Każdy typ wstążki ma różne opcje lokalizacji w zależności od możliwości wyświetlania. W tym przykładzie pokazano wstążkę narożną. Może być umieszczony na górze po lewej lub prawej stronie lub na dole po lewej lub prawej stronie.

Widelec może być wyświetlany w lewym lub prawym górnym rogu.

Pełna szerokość może być wyświetlana powyżej lub poniżej.

Niektóre typy wstążki mają inne opcje, które otwierają się po ich wybraniu. W tym przykładzie pokazano wstążkę o pełnej szerokości. Możesz dostosować jego położenie i wysokość.

Wstążka boczna zawiera korekty lokalizacji, szerokości i wysokości. Wszystkie elementy sterujące to standardowe suwaki Divi, dzięki czemu są łatwe w użyciu.

Tytuł i treść są dodawane do samej karty. Obszar zawartości zawiera zakładki wizualne i tekstowe, które mogą zawierać multimedia, linki, kod i skróty.

Obrót plamki

Obrót rozmycia dodaje opcję odwracania 3D, która pokazuje zawartość po odwróceniu karty na bok, a także obraz i ikonę do wyświetlenia na czcionce.

Dodaj obrazy z biblioteki multimediów i ikony z listy. Obraz/ikona pojawi się jako pierwszy, a następnie karta zostanie odwrócona, aby wyświetlić zawartość po najechaniu myszą. Możesz także dodać obrazy jako tło.

Przycisk

Przycisk zawiera tekst, łącze, opcje okna, dopełnienie i margines. Dodałem trochę lewego marginesu, aby wyjąć przycisk spod wstążki.

Karta projektowania wstążki Divi

Karta Projekt wstążki Divi zawiera ustawienia obrazu i ikony, obrotu, tekstu, rozmiaru, wstążki, tekstu tytułu, tekstu podstawowego, przycisku, odstępów, obramowania, filtrów, przekształcania i animacji.

Obraz i ikona

Ustawienia obrazu i ikony pozwalają dostosować szerokość obrazu, obramowanie, cień pola, kolory, tryb mieszania itp.

Obrót

Ustawienia rotacji pozwalają dostosować kolor twarzy. To jest tło obrazu. Wyłącz oryginalną ramkę karty, aby móc tworzyć własne. Dostosuj ikonę obrotu. Ma wiele opcji dla ikony. Dodaj kolor ikony, tło, obramowanie i użyj rozmiaru czcionki sprzed rotacji.

Na początku było trochę mylące, że korekta ikon była tutaj zamiast ustawień obrazu i ikon, ale warto znaleźć się w tej sekcji. Sensowne byłoby umieszczenie tutaj ustawień obrazu, ale jest ich tak wiele, że potrzebuje osobnej zakładki.

Odstępy w tekście

Odstępy w tekście zapewniają ustawienia marginesów i dopełnienia tytułu i tekstu podstawowego. Zwykle wstążka wyświetla się nad zawartością. Dzięki temu możesz dostosować położenie tekstu na podstawie lokalizacji wstążki, jeśli chcesz, aby była widoczna. W tym przykładzie dodałem dopełnienie zarówno tytułu, jak i treści.

Ustawienia wstążki

Ustawienia wstążki pozwalają zmienić kolor, dodać obraz, który wypełni wstążkę, wyłączyć koniec wstążki (aby styl nie nakładał się na kartę), dostosować czcionki, dodać cień tekstu, dostosować rogi wstążki i obramowanie. W tym przykładzie zmieniłem kolor wstążki.

Obraz wypełni wstążkę. Udało mi się uruchomić tylko pliki JPG, ale działa to dobrze. Zalecam wybranie obrazu, który ma już żądany rozmiar, aby mieć kontrolę nad sposobem jego wyświetlania.

Wyłączenie końca wstążki usuwa część, która składa się za kartą, jak widać po lewej stronie wstążki w tym przykładzie.

Tekst

Tytuł i treść zawierają wszystkie oczekiwane opcje. W tym przykładzie zwiększyłem rozmiar obu, zmieniłem kolor tekstu tytułu i wyśrodkowałem oba.

Przycisk

Styl przycisków zawiera wszystkie oczekiwane opcje i dodaje funkcję wyświetlania gradientu nad obrazem tła. W tym przykładzie zwiększyłem rozmiar czcionki, zmieniłem kolor czcionki i obramowania, zaokrągliłem obramowanie, nadałem tłu gradient i dodałem cień.

Przykłady wstążki Divi

Oto kilka przykładów tego, jak wstążka Divi wygląda w układach Divi.

Na sprzedaż wstążka

W pierwszym przykładzie zastąpię CTA po prawej stronie.

Została wykonana z trzech modułów: obrazu, tekstu i przycisku. Użyję tego samego tła, tekstu i przycisku i odtworzę je za pomocą jednego modułu wstążki Divi.

Oto wynik przy użyciu wstążki Divi. Dodałem obraz, tekst tytułu i treść, aby pasowały do ​​oryginału. Dodałem również wstążkę w rogu i przesunąłem przycisk na środek oraz użyłem koloru obramowania z tła wstążki. Oryginał wykorzystał obraz w kolumnie. Usunąłem go i dodałem obraz do modułu, ale działałoby to w obie strony.

Nie dołączyłem falistego obrazu (fala trójkąta), ale można go było łatwo dodać w obszarze zawartości. Tytuł musiałby również zostać przeniesiony do obszaru zawartości, aby grafika pojawiła się nad tytułem. Wstążka On Sale sprawia, że ​​wyróżnia się nieco bardziej.

Wstążka najnowszych projektów

W tym przypadku zastąpiłem obraz modułem Divi Ribbon i dodałem pełną wstążkę jako CTA, aby zobaczyć najnowsze projekty. Wstążka zawiera obraz tła i czcionki z układu. Cień prostokątny jest ustawieniem domyślnym. Wyśrodkowałem tekst.

Wstążka CTA produktu

W tym przykładzie dodałem moduł Divi Ribbon do sekcji bohatera strony sklepu w układzie Leather Company. Używając obrazu z layoutu, zastąpiłem standardowe CTA sprzedażowe. Wstążka i przycisk używają kolorów z układu. Przeniosłem wstążkę do prawego dolnego rogu i usunąłem koniec wstążki.

To jest sekcja specjalistyczna. Cieszę się, że działa dobrze w sekcjach specjalistycznych. Wiele modułów innych firm nie zawsze jest kompatybilnych z tego typu sekcją.

Test i zakup

Możesz kupić Divi Ribbon Module ze strony programisty za 11 USD do użytku osobistego lub komercyjnego na jednej stronie internetowej.

Możesz również przetestować wtyczkę przed zakupem, aby sprawdzić, czy będzie działać dla Twoich potrzeb. Link do przetestowania wtyczki znajduje się na stronie sprzedaży dewelopera. Daje pełny dostęp do Divi Builder i wtyczki, dzięki czemu możesz dostosować go do własnych upodobań. Polecam spróbować.

Końcowe myśli

Divi Ribbon Module to ciekawy moduł dla Divi Builder. Zawiera kilka miejsc do dodawania obrazów i możesz dołączyć tytuł, treść, ikonę i przycisk. Dzięki tym wszystkim funkcjom świetnie sprawdza się jako notka, wezwanie do działania, link do produktu, link do bloga itp. Dodaj do tego stylową wstążkę, aby zwrócić uwagę na sprzedaż lub inne CTA, a ta wtyczka zapewnia opcje stylizacji, które są trudne do dostać z jednym modułem.

Moduł wstążki Divi świetnie współpracuje z Visual Builder i Theme Builder. To doskonała wtyczka, którą łatwo polecić.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś moduł wstążki Divi? Daj nam znać o swoim doświadczeniu w komentarzach.

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