Jak tworzyć nakładki i efekty najazdu flipbox w WordPressie

Czy chcesz dodać nakładki flipbox i efekty najechania myszką na obrazy do swojej witryny WordPress?

Nawet jeśli używasz wysokiej jakości motywu WordPress, możesz czuć się ograniczony opcjami dostosowywania. W takim przypadku możesz użyć flipboxów i efektów najechania myszką na obrazy, aby dodać do swojej witryny efektowne animowane efekty.

W tym artykule pokażemy, jak dodać nakładki pól flipbox i efekty najechania myszką na obrazek do Twojej witryny WordPress.

Co to jest Flipbox?

Flipbox to pole, które odwraca się, gdy najedziesz na nie myszką. Możesz dodać ten efekt najechania na treści takie jak obrazy i pola tekstowe.

Podobnie jak inne animowane treści, takie jak GIF-y i responsywne slidery, efekt flipbox może sprawić, że będzie bardziej interaktywny i angażujący. Na przykład możesz pokazać zdjęcie autora i jego imię, a następnie użyć animacji flipbox, aby ujawnić jego biografię, gdy czytelnik najedzie na nią kursorem.

Jeśli jesteś freelancerem WordPress, możesz pokazać logotypy swoich klientów, a następnie użyć animacji przewracania, aby ujawnić link do każdego projektu.

Chociaż te animowane efekty mogą poprawić doświadczenie użytkownika Twojej witryny, ważne jest, aby nie przesadzić. Duża liczba animacji może być przytłaczająca i myląca, a nawet wpłynąć na wydajność Twojej witryny.

Biorąc to pod uwagę, przyjrzyjmy się, jak możesz dodać nakładki flipbox i efekty najechania myszką na obrazy do swojej witryny WordPress.

Jak tworzyć nakładki flipbox i efekty najechania myszką w WordPress

Istnieje wiele różnych sposobów dodawania animacji do WordPressa, w tym za pomocą narzędzia do tworzenia stron SeedProd lub pisania niestandardowego kodu.

Jednak najlepszym sposobem na tworzenie efektów flipbox i najedź myszką jest użycie wtyczki Flipbox – Awesomes Flip Boxes Image Overlay. Ta darmowa wtyczka zawiera kilka różnych stylów flipboxów z mieszanką obrazów, tekstu i przycisków wezwania do działania.

Utwórz nowy FlipBox

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Flipbox – Awesomes Flip Boxes Image Overlay. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym jak zainstalować wtyczkę WordPress.

Po zainstalowaniu i aktywowaniu wtyczki możesz utworzyć swój pierwszy flipbox, przechodząc do Flip Box » Utwórz nowy.

Pokazuje to wszystkie różne szablony, których możesz użyć.

Jeśli nie chcesz korzystać z żadnego z tych projektów, kliknij „Importuj szablony”.

Jeśli widzisz szablon, którego chcesz użyć, kliknij „Import”, aby dodać go do swojego bloga WordPress lub strony internetowej.

Po wybraniu projektu musisz kliknąć przycisk „Utwórz styl”.

W pojawiającym się oknie wpisz nazwę dla projektu flipbox. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Możesz również wybrać układ, klikając na 1., 2. lub 3.

Po wykonaniu tej czynności kliknij „Zapisz”.

Dodaj zawartość do swojego Flipboxa

Możesz zmienić wygląd flipboxa, korzystając z zakładek Ogólne, Przód i Tył.

Możesz zmienić czcionki, dopełnienie i marginesy. Większość tych ustawień jest samoopisująca, więc warto je przejrzeć, aby zobaczyć, jakie różne efekty można stworzyć.

Gdy będziesz zadowolony z wyglądu pola, czas dodać zawartość. Po prostu przewiń do podglądu flipbox na dole ekranu i najedź na niego myszką.

Gdy się pojawi, kliknij przycisk „Edytuj”.

Aby zmienić tytuł widoczny na froncie flipboxa, możesz wpisać go w pole „Tytuł przedni”.

Następnie możesz zmienić ikonę z przodu, klikając pole „Font Icon”, a następnie wybierając nowy obraz z pojawiającego się okna.

Następnie możesz dodać obraz do przodu flipboxa. Po prostu kliknij „Prześlij obraz”, a następnie wybierz plik z biblioteki mediów lub prześlij nowy obraz z komputera.

Jeśli nie masz jeszcze obrazu, którego chcesz użyć, możesz go utworzyć za pomocą oprogramowania do projektowania stron internetowych, takiego jak Canva.

Gdy będziesz zadowolony z przedniej strony flipboxa, czas zaprojektować tył. Aby rozpocząć, wpisz treść, którą chcesz wyświetlić, w polu „Backend Info”.

Często będziesz chciał użyć wezwania do działania, aby wysłać odwiedzających na powiązaną stronę, taką jak lista popularnego produktu, informacje o cenach lub inne treści.

Aby zmienić tekst wyświetlany na przycisku wezwania do działania, po prostu wpisz w polu „Tekst przycisku backend”. Następnie możesz dodać adres URL docelowy w polu „Link”.

Na koniec kliknij „Prześlij teraz”, aby zmienić obraz tła.

Gdy będziesz zadowolony z tego, jak ustawiono tył flipboxa, nadszedł czas, aby kliknąć „Prześlij”.

Podgląd zostanie teraz zaktualizowany, aby pokazać wszystkie Twoje zmiany.

Twórz wiele flipboxów

W tym momencie możesz chcieć dodać więcej pól, klikając na „+” w sekcji „Dodaj nowe pola flipbox”.

Pozwala to na tworzenie wielu flipboxów o tym samym stylu, a następnie organizowanie ich w kolumnach i wierszach.

Możesz teraz tworzyć więcej flipboxów, postępując zgodnie z opisanym powyżej procesem.

Na przykład możesz utworzyć flipbox dla każdego z Twoich planów cenowych.

Dodaj Flipbox do swojej witryny WordPress

Gdy będziesz zadowolony z flipboxa, możesz dodać go do swojej witryny WordPress za pomocą krótkiego kodu , który wtyczka udostępnia automatycznie.

Po prawej stronie ekranu skopiuj wartość z pola „Shortcode”.

Możesz teraz dodać flipbox do dowolnej strony, wpisu lub obszaru gotowego na widżety, używając shortcode'u.

Instrukcje krok po kroku dotyczące umieszczania shortcode'u znajdziesz w naszym przewodniku jak dodać shortcode w WordPress.

Wtyczka posiada również widżet flipbox, który można dodać do dowolnego obszaru gotowego na widżety w Twoim szablonie WordPress.

Jeśli utworzyłeś więcej niż jedną animację flipbox, będziesz potrzebować jej identyfikatora. Aby uzyskać te informacje, przejdź do Flip Box » Flip Box i spójrz w kolumnę „ID”.

Na poniższym obrazku identyfikator flipboxa to 1.

Gdy będziesz mieć te informacje, przejdź do Wygląd » Widżety.

Tutaj musisz kliknąć przycisk „+”.

Teraz możesz wpisać „Flipbox”.

Gdy pojawi się odpowiedni widżet, po prostu przeciągnij i upuść go na pasek boczny, stopkę lub podobną sekcję.

Widżet Flipbox domyślnie wyświetli jedną z Twoich animacji.

Aby zamiast tego wyświetlić inny flipbox, wpisz jego identyfikator w polu.

Gdy będziesz zadowolony z wyglądu widżetu, kliknij „Aktualizuj”.

Więcej informacji można znaleźć w naszym przewodniku na temat dodawania i używania widżetów w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać nakładki i efekty najazdu flipboxów do Twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia galerii obrazów lub sprawdzić nasz wybór najlepszych wtyczek suwaków WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.