Divi Plugin Highlight: Next Image Effect Pro

Next Image Effect Pro to wtyczka innej firmy do Divi, która dodaje wiele efektów najechania obrazu, które pomagają zwrócić uwagę na twoje obrazy i linki. Wtyczka dodaje 7 modułów do Divi Builder, każdy z własnym zestawem projektów i efektów. W tym artykule przyjrzymy się Next Image Effect Pro i zobaczymy, co potrafi.

Następna instalacja Image Effect Pro

Kup i pobierz wtyczkę z Divi Marketplace. Wykonaj następujące kroki, aby go zainstalować:

1. W panelu WordPress przejdź do Wtyczki > Dodaj nowy
2. Prześlij wtyczkę ze swojego komputera
3. Kliknij Zainstaluj teraz
4. Po zainstalowaniu wtyczki kliknij Aktywuj

Następnie musisz aktywować licencję. Przejdź do Wtyczki > Licencja Image Effect Pro . Wprowadź swój klucz licencyjny i zapisz zmiany.

Następne moduły Image Effect Pro

Image Effect Pro dodaje zestaw modułów do Divi Builder, które zawierają stylizowane kombinacje obrazów i tekstu. Dodają setki efektów najechania i kombinacji kierunków. Opcje stylizacji tekstu obejmują niezależne kontrolki dla nagłówków, tekstu fokusa, treści i ich tła.

Moduły obejmują:

• Okrągły wskaźnik myszy
• Pole po najechaniu na obraz
• Efekt ikony obrazu
• Mega efekt obrazu
• Minimalne najechanie na obraz
• Przewijanie następnego obrazu
• Ostateczne najechanie na obraz

Okrągły wskaźnik myszy

Circular Image Hover ma dwie główne sekcje: obraz i tekst (zawartość po najechaniu). Dodałem prostokątny obraz. Wyświetla obraz w jego oryginalnym kształcie, ale następnie czyni go okrągłym. Gdyby obraz był kwadratowy, byłby to idealny okrąg.

Ustawienia projektu obrazu obejmują pozycję cienia pola, siłę i kolor.

Tekst zawiera sekcję do dodania tytułu i treści. Możesz je stylizować w ustawieniach projektu. W tym przykładzie zwiększyłem rozmiary.

Tło podpisu może być jednolitym kolorem lub gradientem. Ten używa domyślnego gradientu.

Ma 19 efektów najechania z 4 opcjami kierunku dla każdego efektu. To jest efekt 1. Efekty mają różne sposoby przechodzenia obrazu i przenoszenia zawartości. Obejmują one powiększanie, przerzucanie, slajdy i wiele innych.

Pole po najechaniu na obraz

Pole po najechaniu na obraz zawiera również obraz z zawartością po najechaniu kursorem. Nie zmienia kształtu obrazu.

Zawiera również nakładkę (lub tło, które prześwituje i wygląda jak nakładka) oraz dodaje tło nagłówka. Oba tła mogą zawierać jednolite kolory i gradienty. W tym przykładzie użyto domyślnego tła nakładki. Zmieniłem kolor tła nagłówka i zwiększyłem rozmiar tekstu.

Ma 13 różnych efektów najechania, w tym przewracanie, slajdy, zanikanie, powiększanie itp. Kilka efektów dodaje opcje wskazówek. To jest efekt 1.

Efekt ikony obrazu

Efekt ikony obrazu dodaje element kursora, który wyświetla tytuł i fokus tekst nad obrazem. Podobnie jak inne, możesz zmienić kolor tła za pomocą jednolitego koloru lub gradientu i zawiera wiele efektów najechania. Efekty najechania w tym przypadku wprowadzają granice i wyglądają wyjątkowo elegancko. To jest efekt najechania Zoe.

To, co wyróżnia ten model, to ikony. Możesz dodać 4 różne ikony i otworzyć je w tym samym lub nowym oknie.

Ustawienia ikon obejmują kolor, rozmiar, odstępy, wysokość linii, kolor tła, cień, obramowanie itp. W tym przykładzie dodałem kolor tła i zmniejszyłem wysokość linii, aby utworzyć linię. Dodałem też cień. To jest efekt zawisu Hera.

To jest efekt zawisu Terry. Zmieniłem kolory tytułu i tekstu fokusa oraz użyłem ustawień rozmiarów czcionek i ikon z poprzedniego przykładu.

Mega efekt obrazu

Mega Image Effect to kolejna dwustronna karta z obrazem po jednej stronie i treścią po drugiej. Przednia strona wyświetla obraz w normalny sposób.

Tył karty wyświetla zawartość w normalny sposób i zawiera korekty czcionki i tła. To, co go wyróżnia, to możliwość dodania przycisku.

Masz pełną kontrolę nad projektem przycisku, w tym te same opcje koloru jednolitego i gradientu, co standardowe tło. Ten przykład pokazuje gradient tła przycisku.

Masz pełną kontrolę nad stylem czcionki i tła przycisku. W tym przykładzie dostosowałem czcionkę i obramowanie. Każdy element modułu posiada również regulację rozstawu. Dodałem 20 pikseli na dole przycisku. Każdy z modułów ma takie regulacje odstępów.

Ten moduł ma zbyt wiele efektów najechania, by je policzyć. Same efekty obrazu są imponujące, ale ma też wiele efektów tekstowych. Możesz osobno dostosować wskaźnik obrazu i tekst, a także ustawić czas dla efektu tekstowego.

W tym przykładzie najechanie na obraz Równolegle do lewej, efekt Powiększenie tekstu i niewielkie opóźnienie tekstu.

Minimalne najechanie na obraz

Minimalny efekt obrazu to najprostszy moduł w zestawie. Wyświetla obraz z efektami najechania.

Jedynym niestandardowym ustawieniem są efekty najechania. Zawiera 10 efektów do wyboru. Przyjrzymy się kilku.

Ten przykład to Skaluj w poziomie Obróć. Obraz jest przeskalowany i nieznacznie obrócony w normalnym stanie. Po najechaniu kursorem obraz powiększa się i obraca do normalnego stanu.

To jest rozmycie. Obraz jest rozmazany, dopóki nie najedziesz, a następnie powoli się rozmywa, aż stanie się ostry.

To miga. Nad obrazem rozbłyskuje seria białych błysków, a następnie znika, gdy najedziesz na nią.

Przewijanie następnego obrazu

Następny przewijanie obrazu umieszcza nakładkę na obrazie i dodaje przycisk w prawym górnym rogu. Możesz dostosować kolor przycisku zarówno dla pełnych kolorów, jak i gradientów. Ten przykład pokazuje ustawienia domyślne.

Możesz także dostosować nakładkę. Ustaw jednolity kolor lub gradient. Zawiera również typy gradientów i standardowe elementy sterujące.

Pozycja tła pozwala wyświetlić górę lub dół obrazu.

Obraz przesuwa się na górę lub na dół po najechaniu myszą. W tym przykładzie moduł pokazuje dół obrazu i przewija do góry obrazu po najechaniu myszą.

Ostateczne najechanie na obraz

Ultimate Image Hover wyświetla rozmiar i kształt na podstawie wybranego efektu. To jest Efekt 1. Pokazuje część zdjęcia na wysokim prostokątnym obrazie. Zawiera tekst tytułu i fokusa, treść i nakładkę. Nakładka zawiera korekty koloru w postaci jednolitej lub gradientu.

Po najechaniu kursorem nakładka rozjaśnia się i pojawia się tekst.

Krycie obrazu pozwala dostosować ilość widocznego tła. W tym przykładzie zmniejszyłem krycie, zmieniłem rozmiar nagłówka i tekstu fokusa, kolor tekstu nagłówka, pogrubienie tekstu fokusa, zmieniłem tekst fokusa wielkimi literami i dodałem cień do tekstu fokusa.

Ten moduł ma 24 efekty najechania. Wyświetlają obraz w różnych rozmiarach, poziomach nieprzezroczystości, rozmieszczeniu tekstu i dodają obramowania.

To jest efekt 4. Wyświetla obraz w kwadracie i dodaje obramowanie wokół wnętrza, które nakłada się na końce.

To jest Efekt 5. Przyciemnia nakładkę i dodaje obramowanie wokół wnętrza obrazu i wyświetla obraz w kwadracie.

Efekt 6 umieszcza nagłówek i tekst fokusa na górze z linią pod nimi, a treść na dole.

Efekt 8 zachowuje duży prostokątny rozmiar i dodaje cienką ramkę.

To jest Efekt 10. Po najechaniu kursorem obraz powiększa się, linia staje się x i pojawia się gradient.

Następny Image Effect Pro Przykład

Aby uzyskać prosty przykład, spójrz na układ Divi Home Renovation z dodanym modułem Ultimate Image Hover w celu utworzenia CTA. Dodałem go po lewej stronie obrazu i użyłem kolorów z układu.

Po najechaniu kursorem obraz przesuwa się w prawo, CTA jest ujawniane, obraz staje się mniej nieprzezroczysty (co przepuszcza więcej koloru tła) i dodawane jest obramowanie. W tym przykładzie zastosowano efekt najechania 8.

Kup Next Image Effect Pro

Next Image Effect Pro jest dostępny w Divi Marketplace za 49 USD. Obejmuje nieograniczone korzystanie z witryny, 30-dniową gwarancję zwrotu pieniędzy oraz 1 rok wsparcia i aktualizacji.

Końcowe myśli

Oto nasze spojrzenie na Next Image Effect Pro dla Divi. 7 modułów dodaje wiele funkcji graficznych, które wyróżniają Twoją witrynę. Korzystanie z nich jest intuicyjne. Ilość efektów i kombinacji pomiędzy wszystkimi modułami jest imponująca. Każdy moduł jest wyjątkowy, ale większość dodaje obrazy, nagłówki i treść, aby zapewnić wiele możliwości projektowania CTA, członków zespołu, referencji, ogólnych informacji, informacji kontaktowych i wielu innych.

Chcemy usłyszeć od Ciebie. Czy próbowałeś Next Image Effect Pro? Daj nam znać, co o tym myślisz w komentarzach.

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