Divi Plugin Highlight – Tilt Blurb Divi Module

Blurby są popularne w układach Divi. Wyświetlają tekst, obrazy, ikony i nie tylko, co doskonale nadaje się do prezentacji produktów i usług. Co by było, gdybyś chciał, aby wyróżniały się bardziej i zapewniały ciekawe animacje najechania kursorem? Zwykłe animacje można wykonać za pomocą CSS, ale co, jeśli chcesz czegoś innego? Wtyczka o nazwie Tilt Blurb Divi Module może być tym, czego szukasz.

Co to jest moduł Tilt Blurb?

Tilt Blurb Module to wtyczka innej firmy od Hadworm, która dodaje nowy moduł blurb do Divi Builder (zarówno dla Divi, jak i Extra), który dodaje ciekawe efekty przechylania, tworząc wygląd 3D. W tym wyróżnieniu wtyczki przyjrzymy się modułowi i zobaczymy, co potrafi. Pokazałem kilka gifów, ale większość będzie obrazami ze względu na rozmiary plików gifów. Obrazy do przykładów pochodzą z Unsplash.com i WordPress.org.

Instalowanie modułu Tilt Blurb Divi

Prześlij i aktywuj wtyczkę jak zwykle. W łączu Wtyczka w menu pulpitu nawigacyjnego znajdziesz nowy element o nazwie Licencja na rozmycie płytek. Kliknij to, wprowadź klucz licencyjny i zapisz zmiany. Zapewni to otrzymywanie aktualizacji.

Do Divi Buildera dodano nowy moduł o nazwie Tilt Blurb. W Divi Builder ma kolor fioletowy, więc trudno go przeoczyć. Lubię, gdy programiści używają różnych kolorów dla swoich modułów, aby wyróżniały się na tle standardowych modułów (o ile to jest warte).

Moduł zawiera standardowe zakładki oraz nową:

• Treść – tekst, link, obraz i ikona, tło, etykieta administratora
• Ustawienia pochylenia – ustawienia pochylenia, tło pochylenia, warstwy pochylenia
• Projekt – obraz i ikona, tekst, tekst nagłówka, tekst główny, obramowanie, rozmiar, odstępy
• Zaawansowane – ID i klasy CSS, niestandardowy CSS, animacja, widoczność

Ustawienia pochylenia

W tych przykładach dodałem tło, a następnie umieściłem na nim mniejszy obraz jako pierwszy plan, aby stworzyć efekty 3D. A potem zrobił kawę. Dużo kawy.

Przykład z ustawieniami domyślnymi

Oto przykład tego, jak wygląda pochylenie 3D przed ulepszeniem. Dodałem tytuł, tekst, tło i ikonę. Nachylenie podąża za myszą i oddziela tekst i ikonę od obrazu, nadając mu wygląd 3D. U mnie efekt paralaksy pozbył się tła, więc go nie użyłem.

Rozmiar z obrazem

Powoduje to zmianę rozmiaru notki za pomocą ukrytego obrazu i wyśrodkowanie treści.

Rozmiar pochylenia Blurb z 2 obrazami z zawartością pływającą

Ten zawiera dwa obrazy – jeden dla pierwszego planu i jeden dla tła. Obraz i tekst na pierwszym planie są w 3D przy użyciu funkcji zawartości ruchomej.

Możesz dostosować ilość zmiennoprzecinkową, która działa jak powiększenie, przybliżając zawartość pierwszego planu do czytelnika. Ten obraz używa 200 dla ilości zmiennoprzecinkowej, która jest maksymalna.

Kwota przechyłu

Suwak wielkości pochylenia pozwala kontrolować, jak daleko pochyli się obraz. Domyślne ustawienie to 20. Ten używa 100.

Perspektywa pochylenia

Tilt Perspective pogłębia perspektywę. Im niższa liczba, tym głębsza perspektywa. Wartość domyślna to 1000. W tym przykładzie jest to 200.

Skala pochylenia

Skala przechyłu to poziom powiększenia. Wartość domyślna to 1,1, co oznacza, że ​​po najechaniu kursorem obraz jest mnożony przez 1,1. Ten przykład to 2. Przechodzi do 0, ale poziom 0 utworzył ciągłe powiększanie w przód iw tył, które nie działało dla tego obrazu. Może trochę poeksperymentować, aby zrobić to, co chcesz.

Prędkość przechylania

Tilt Speed ​​kontroluje prędkość przesuwania się obrazu podczas najeżdżania. Im niższa liczba, tym szybciej się porusza. Wartość domyślna to 100. Ta to 5000. Nie podoba mi się efekt spowolnienia.

Przechyl do tyłu

Tilt Reverse zmienia kierunek pochylenia. Normalnie nachylenie odsuwa się od myszy. Odwróć przechyla obraz w kierunku myszy.

Odblask pochylenia

Tilt Glare dodaje efekt odblasku podążający za myszą. Stopień olśnienia jest regulowany. Powyższy obraz używa .8, które jest ustawieniem domyślnym. Świetnie nadaje się do tworzenia efektów świetlnych.

Promień graniczny

Border Radius zmienia kształt granicy. Wartość domyślna to 40. Jest to ustawione na 100, czyli maksymalną kwotę.

Przechyl tło

Pochylenie tła umożliwia ustawienie koloru tła i efektów obramowania.

Przechyl tło

Jednym z efektów ubocznych opcji Kolor tła pochylenia jest to, że tworzy ładną poświatę wokół obrazu.

Dostosuj kolor tła pochylenia, szerokość obramowania, styl obramowania tła, szerokość obramowania oraz kolor obramowania i cienia ramki.

Odległość pochylenia tła

Odległość pochylenia tła dostosowuje odległość cienia. Domyślnie jest ustawiony na -50. W tym przykładzie użyto -25.

W tym przykładzie użyto odległości pochylenia tła równej 0 i krycia 0,3, co tworzy nakładkę na tle.

Rozmiar/skala przechyłu tła

Rozmiar/skala przechyłu tła zmienia odległość przechyłu tła. Wartość domyślna to 1,04. Ten to 1.2.

Warstwy przechyłu

Warstwy przechyłu nakładają ten sam obraz w kółko na wiele warstw, tworząc solidny efekt 3D. Może używać obrazu lub koloru tła i można dostosować głębokość warstwy. Nałożyłem obraz powyżej z głębokością warstwy 50.

Obraz, który zastosowałem, jest tutaj widoczny jako obramowanie. Dostosowałem wielkość pochylenia, aby było lepiej widzieć.

Zgodnie z oczekiwaniami dół obrazu wygląda inaczej. To świetny sposób na dodanie tekstury do obramowania. Mniejsza głębokość warstwy sprawi, że granica będzie cieńsza.

Ten używa głębokości warstwy 10.

W tym przykładzie użyto zarówno tła pochylenia, jak i warstwy pochylenia.

Oto logo 3D WordPress, które wygląda na otoczone kryształem. Przesłałem logo do obszaru obrazu Obraz i ikona, ustawiłem wartość pochylenia na 100, użyłem domyślnego odblasku pochylenia, dodałem logo do obrazu warstwy w obszarze Warstwy pochylenia, ustawiłem głębokość warstwy na 50 i ustawiłem kolor warstwy na biały i prawie całkowicie przejrzyste.

Oto logo bez koloru warstwy. Boki są trudniejsze do zobaczenia.

Licencja, wsparcie i dokumentacja

Wtyczka może być używana na nieograniczonej liczbie stron internetowych dla Ciebie i Twoich klientów. Obejmuje 6 miesięcy wsparcia. Dokumentacja jest dostępna na stronie dewelopera. Zawiera instrukcje, jak tworzyć niektóre przykłady, które są pokazywane na stronie internetowej. Chciałabym zobaczyć jeszcze więcej przykładów, takich jak tworzenie logo.

Końcowe przemyślenia

Tilt Blurb Module zapewnia wiele interesujących efektów przechylania, które nadają obrazom, ikonom i tekstowi ładny trójwymiarowy wygląd. To świetny sposób na tworzenie CTA, okładek książek 3D i zdjęć produktów. Tilt Blurb Module jest zarówno innowacyjny, jak i intuicyjny. Jeśli chcesz dodać fajne efekty przechylania do swoich notek, warto zajrzeć do modułu Tilt Blurb.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś moduł Tilt Blurb Divi? Daj nam znać, co o tym myślisz w komentarzach poniżej.

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