Podświetlenie wtyczki Divi – intensywny obraz

Image Intense to wtyczka premium innej firmy stworzona przez ludzi z Superfly, która dodaje nowy moduł do Divi Builder zarówno dla Divi, jak i Extra. Nowy moduł łączy funkcje z trzech modułów Divi (moduły obrazu, tekstu i przycisków), a następnie dodaje nowe funkcje dodawania efektów nakładki i najeżdżania na obrazy. Funkcje obejmują 22 przejścia obrazu po najechaniu kursorem, przyciski, ustawienia krycia, tryby mieszania, łącza tekstowe i wiele innych.

Image Intense to świetny sposób na dodanie mikro-interakcji, które przekazują czytelnikom opinie i zwracają uwagę na wezwanie do działania (CTA). Animacje obejmują powiększanie lub pomniejszanie obrazu, rozciąganie obrazu, kompresowanie obrazu, dodawanie nakładki, przesuwanie w poprzek, odsłanianie tekstu itp.

W tym wyróżnieniu wtyczki przyjrzymy się, co może zrobić wtyczka. Obrazy pochodzą z Unsplash.com.

Instalacja i ustawienia

Wtyczka dodaje moduł do Divi Builder. Aby zainstalować moduł wystarczy wgrać i aktywować wtyczkę. Użyj Divi Builder jak zwykle i umieść moduł Image Intense w swoim układzie. Może być używany zamiast modułu obrazu.

Ustawienia ogólne obejmują adres URL obrazu, rozmiar nośnika, styl najechania, tytuły, podpis, orientację podpisu, przycisk, kierunek animacji itp. Są to znane ustawienia i zawierają krótkie opisy. Nowe ustawienia zawierają łącza do dokumentacji, aby uzyskać więcej informacji.

Tytuły nakładek mogą używać znaczników. Tutaj możesz dodać linki, pogrubić tekst itp.

Zaawansowane ustawienia projektu obejmują szerokość obrazu, tryb mieszania mieszania, krycie, krycie po najechaniu kursorem, niestandardowy gradient nakładki itp. Zawiera oczekiwane czcionki, tło, obramowanie, kolor i dopełnienie, a także niestandardowy CSS .

Przykłady – Intensywny obraz w pracy

Aby zobaczyć, co potrafi, stworzyłem kilka układów i dodałem kilka modułów Image Intense. Oto spojrzenie na niektóre animacje i funkcje.

Animacje i rozmiary obrazów

W tym przykładzie widać przycięty rozmiar obrazów z dwoma nałożonymi tytułami. Obraz po lewej używa przyciętego ustawienia 400 x 516 dla rozmiaru nośnika i Auckland dla animacji.

Obraz jest nieco pomniejszony i pokazuje nakładkę z komunikatem. W razie potrzeby można dostosować kolor i rozmiar czcionki.

Obraz po prawej stronie jest powiększony i zawiera wiadomość w nakładce. Ta różnica jest bardziej oczywista. Wykorzystuje styl zawisu jerozolimskiego .

Obraz w środku używa stylu najechania Douala .

Na tym obrazie widać ramkę przesuniętą na dół obrazu i teraz wyświetla komunikat.

Obraz na środku używa stylu nakładki Madison .

Tutaj możesz zobaczyć, w jaki sposób nakłada na obraz nakładkę, która zmniejsza krycie, zachowując ostrość na zakreślonym obszarze zawierającym wiadomość.

Mieszaj tryb mieszania

Mix Blend Mode to łatwy sposób na zastosowanie atrybutów CSS do obrazu. Łączy kolor modułu z jego tłem. Może tworzyć dzikie efekty, a niektóre ustawienia działają lepiej z niektórymi kolorami, więc będzie to wymagało trochę eksperymentowania. Niektóre funkcje mogą nie działać we wszystkich przeglądarkach, dlatego należy używać tej funkcji ostrożnie.

Obraz pośrodku wykorzystuje mieszany tryb mieszania o nazwie Hard Light .

Ten używa Luminosity . Dodałem również przycisk na dole pośrodku i ustawiłem niestandardową stylizację.

Nieprzezroczystość

Krycie to stopień przezroczystości obrazu. Im bardziej nieprzezroczysty obraz, tym mniej ma przezroczystości. Na krycie ma również wpływ styl animacji i wybrany tryb mieszania. Możesz ich używać w różnych kombinacjach, aby zobaczyć, jakie typy efektów możesz stworzyć. Możesz zastosować różne poziomy krycia do normalnego obrazu i do obrazu po najechaniu.

To jest normalny obraz bez krycia. Używam pełnego oryginalnego rozmiaru dla ustawienia rozmiaru nośnika.

Tutaj obraz po najechaniu. Ustawiłem krycie na 0,6. Ten używa stylu hover Cali .

Ten używa dużego obrazu 1024 × 1024 bez przycinania i krycia obrazu 0,4. Oba tytuły nakładek używają znaczników HTML. Używam tagów dla wzmocnienia, podkreślenia i przerwania. Używa stylu najechania Portland .

Ustawiłem przezroczystość najechania na 1, więc obraz jest w pełni widoczny po najechaniu.

Dodawanie własnego gradientu

W zaawansowanych ustawieniach projektu wybrałem Użyj niestandardowego gradientu nakładki . Spowoduje to otwarcie nowego zestawu opcji, w których mogę wybrać początkowy i końcowy kolor gradientu, orientację gradientu oraz początkową i końcową pozycję końcową zarówno dla zwykłego obrazu, jak i obrazu po najechaniu kursorem.

Oto spojrzenie na gradient przy użyciu stylu nakładki Madison .

Obraz po lewej stronie wyświetla nakładkę przed kursorem.

Po najechaniu kursorem nakładka jest usuwana, aby odsłonić obraz. Ten używa stylu zawisu Hanoi .

Zamiana obrazu

W tym przykładzie chciałem zamienić jeden obraz na inny. Odbywa się to poprzez dodanie obrazu jako obrazu tła modułu w zaawansowanych ustawieniach projektu .

Następnie ustaw poziom krycia, aby jeden obraz był wyświetlany bez najechania kursorem, a drugi po najechaniu. Ten, który pokazuje się po najechaniu, również wyświetli komunikat.

Wybrałem ten obraz jako obraz tła i ustawiłem obraz modułu na 0.

Po najechaniu kursorem koliber zmienia się w orła i wyświetla komunikat. Ten używa stylu zawisu w Kijowie .

Mieszanie obrazów

Możesz także mieszać oba obrazy, dostosowując krycie, aby obraz tła był widoczny przez obraz pierwszego planu. Może to stworzyć ciekawe efekty i komunikaty.

Ten używa londyńskiego stylu hover. Ułożyłem wiadomości, aby wykorzystać ich rozmieszczenie. W tym przykładzie rozmiar czcionki tytułu jest ustawiony na 24, a rozmiar czcionki podpisu na 50.

Oto obraz po najechaniu kursorem. Nieprzezroczystości można również dostosować, aby pokazać oba, ale jedno może być bardziej widoczne.

Dodawanie linków do tekstu

Linki można dodawać do tekstu podpisu. Odbywa się to poprzez umieszczenie pseudo-krótkiego kodu z tekstem, po którym następuje adres URL. Krótki kod znajduje się w opisie pola, dzięki czemu można go kopiować i wklejać. Będzie używał atrybutów href, target i class.

Ten dodaje podpis z linkiem, który może przenosić czytelników na stronę lub post, aby uzyskać więcej informacji.

Jest to świetne do tworzenia CTA, tworzenia linków do postów lub stron itp., aby poprowadzić czytelników do Twoich treści. Same obrazy mogą być również klikalne. Może to doprowadzić ich do portfolio, strony z informacjami lub strony kontaktowej.

guziki

Możesz dodać przycisk do obrazu, aby utworzyć wezwanie do działania.

Obraz po lewej używa gradientu promieniowego ze znacznikami tekstu. Obraz po prawej przedstawia przycisk z efektem najechania. Oba obrazy mają czarne obramowania. Dodałem nakładkę na tło przycisku i ustawiłem promień obramowania na 15. W tym przykładzie zastosowano styl najechania Rochester .

Obraz po lewej używa pionowego gradientu pomiędzy dwoma odcieniami czerni: pierwszym z kryciem 65%, a drugim z kryciem 19% (19%! Wiem… nie ma za co!).

Nakładki, przyciski i gradienty świetnie nadają się do tworzenia CTA.

Cena, licencja i dokumentacja

To jest wtyczka premium. To 25 USD za pojedynczą witrynę plus witrynę programistyczną, która umożliwia korzystanie z niej w witrynie programistycznej w tym samym czasie, w którym używasz jej w swojej aktywnej witrynie. To 45 USD za nieograniczoną liczbę witryn .

Dokumentacja jest dostępna na stronie internetowej i zawiera przykłady oraz obszar demonstracyjny, w którym można zobaczyć efekty na żywo. Wsparcie zapewnia system zgłoszeń pomocy technicznej.

Końcowe przemyślenia

Image Intense to doskonały moduł do dodawania obrazów z przejściami po najechaniu kursorem. Nakładki mogą zawierać gradienty, tekst, łącza, różne poziomy krycia, a nawet przełączać się z jednego obrazu na drugi. Tekst, przyciski, linki itp. mają wiele opcji pozycji i istnieje wiele opcji przejścia do wyboru. Możesz zrobić jeszcze więcej, dodając własny CSS.

Uważam, że moduł jest intuicyjny w obsłudze. Jeśli możesz użyć modułu Divi, dzięki temu poczujesz się jak w domu. Wszystkie funkcje stylizacji są tutaj. Przejścia nakładki po najechaniu kursorem to świetny sposób na dodanie pizazz do swojej witryny Divi. Jeśli jesteś zainteresowany dodawaniem przejść do obrazów, myślę, że Image Intense jest warte obejrzenia.

Chcemy usłyszeć od Ciebie! Czy używałeś Image Intense? Daj nam znać o swoim doświadczeniu w komentarzach poniżej!

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