Chcesz dodać nakładki flipbox i efekty hover obrazu do swojej witryny WordPress?
Nawet jeśli używasz wysokiej jakości motywu WordPress, możesz czuć się ograniczony opcjami dostosowywania. Flipboxy i hovery obrazu dodają przyciągające wzrok efekty animowane do twojej witryny.
W tym artykule pokażemy, jak dodać nakładki flip box i obrazy do witryny WordPress.
Co to jest Flipbox?
Flip box to pudełko, które przewraca się po najechaniu na nie myszką. Możesz dodać ten efekt animacji kursora do określonych sekcji witryny, w tym pól tekstowych i obrazów.
Termin pochodzi od unikalnej funkcji „flip”, która ma miejsce, gdy mysz najedzie na obraz. Możesz kontrolować sposób, w jaki obraz się odwraca, a także informacje i wygląd obu stron obrazu.
Jeśli Twoja strona jest stosunkowo statyczna, możesz użyć efektu flipboxa, aby uczynić ją bardziej interaktywną.
Możesz na przykład dodać flipbox zdjęcia do strony z cenami produktów. W ten sposób, gdy użytkownicy najadą kursor na poziomy cen, cena pojawi się.
Lub, jeśli jesteś freelancerem, możesz dodać logo firmy, z którą pracowałeś, i link do każdego projektu.
Chociaż te animowane efekty mogą poprawić wrażenia użytkownika witryny, ważne jest, aby nie przesadzić.
Pomyśl o efekt flipbox jak dodanie przypraw do posiłku. Jest tam, aby poprawić istniejące smaki i składniki, ale za dużo i to zrujnuje danie.
Mając to na uwadze, przyjrzyjmy się, w jaki sposób możesz dodać nakładki flipbox i efekty najechania obrazu do swojego bloga lub witryny WordPress.
Jak tworzyć Nakładki Flipbox i efekty Hover w WordPress
Możesz dodać flipboxy i efekty najechania na swoją witrynę WordPress za pomocą wielu metod, takich jak Elementor Page builder lub Dodawanie niestandardowego CSS.
Jednak zalecane przez nas podejście polega na użyciu wtyczki Flipbox – Awesomes Flip Boxes Image Overlay. Ta wtyczka jest elastyczna i łatwa w użyciu. Jest to najlepszy flipbox i obraz hover WordPress plugin.
Darmowa wersja wtyczki oferuje szybkość i prostotę. Po zainstalowaniu wtyczki możesz szybko dodać dobrze wyglądające klapki do swojej witryny.
Jeśli potrzebujesz więcej opcji dostosowywania, możesz zaktualizować wtyczkę do wersji premium. Pozwala to kontrolować kolory flipboxów i dodawać niestandardowe CSS.
Może się okazać, że istniejące szablony wyglądają już świetnie po dodaniu do witryny, w tym przypadku nie ma potrzeby uaktualniania.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Flipbox – Awesomes Flip Boxes Image Overlay. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po zainstalowaniu i aktywacji wtyczki możesz utworzyć swój pierwszy flipbox, przechodząc do Flip Box ” Utwórz Nowy.
W ten sposób pojawia się cały wybór szablonów.
Jeśli to nie wystarczy, możesz kliknąć opcję menu „Importuj szablony”, aby uzyskać jeszcze więcej szablonów, których możesz użyć.
Dzięki darmowej wersji wtyczki do wyboru jest 5 różnych szablonów, a także kolejne 10 szablonów, które możesz zaimportować.
Aby zaimportować nowy, konfigurowalny szablon, kliknij przycisk „Importuj” obok numeru stylu.
Teraz nadszedł czas, aby wybrać i rozpocząć dostosowywanie szablonu.
Musisz kliknąć „Utwórz styl”, aby załadować swój pierwszy projekt flipboxa.
Spowoduje to wyświetlenie wyskakującego menu, w którym możesz nazwać swoją flipbox i wybrać układ, który chcesz dostosować.
Opcje 1., 2., 3. 'Layouts’ pasują do poszczególnych flipboxów w układzie. Po dokonaniu wyboru kliknij przycisk „Zapisz”.
Ważne jest, aby wspomnieć, że twój ostateczny projekt będzie ściśle pasował do szablonu flipbox, więc najlepiej jest wybrać szablon, który będzie wyglądał tak, jak chcesz, aby wyglądał na twojej stronie.
Istnieją trzy główne zakładki, których użyjesz do zmiany wyglądu flipboxa: „ogólne”, „przód” i „zaplecze”.
Na każdej z tych kart można zmieniać czcionki, wypełnienia i marginesy. Ale uważamy, że domyślne opcje już wyglądają świetnie.
Następnie zmienimy tekst po obu stronach flipboxa.
Najedź kursorem na flipbox u dołu ekranu i kliknij „Edytuj”.
Spowoduje to wyświetlenie wyskakującego okna, które pozwala zmienić tekst przedni, tekst tylny i obraz tła.
Aby zmienić tytuł, edytuj pole tekstowe „Tytuł przedni” i ikonę Czcionki, jeśli chcesz wyświetlić inną ikonę.
Jeśli chcesz dodać obraz tła, kliknij „Prześlij obraz” po prawej stronie opcji „Obraz przedni”.
Następnie prześlij nowy obraz lub wybierz obraz z istniejącej biblioteki multimediów.
Następnie wykonasz tę samą serię kroków dla tylnej części flipboxa w „Ustawieniach zaplecza”.
Tutaj możesz zmienić tytuł i tekst wyświetlany po odwróceniu karty.
Możesz także zmienić pola „tekst przycisku zaplecza” i „łącze”.
Zmieniają one tekst przycisku i miejsce, w którym użytkownicy pójdą po kliknięciu.
Na koniec kliknij „Prześlij teraz”, aby zmienić obraz tła z tyłu flipboxa.
Podobnie jak powyżej, możesz przesłać obraz lub wybrać go z biblioteki multimediów.
Po zakończeniu edycji kliknij przycisk „Prześlij”, aby zapisać zmiany.
Zauważysz, że nowe zmiany pojawią się od razu w oknie „podglądu”.
Jeśli chcesz utworzyć cały wiersz flipboxów, kliknij ikonę ’ + 'w polu meta’ Dodaj nowe pola Flip’.
Spowoduje to wyświetlenie wyskakującego okna podobnego do powyższego, które pozwala dostosować drugi flipbox.
Do tej pory stworzyłeś i dostosowałeś swoje flipboxy, więc nadszedł czas, aby dodać je do swojej witryny WordPress.
Najprostszym sposobem na to jest użycie dołączonego shortcode. Po prawej stronie ekranu znajduje się pole meta oznaczone jako „Shortcode”, skopiuj shortcode, który przypomina poniższy obrazek.
Następnie przejdź do strony lub postu, na którym chcesz dodać flipbox i wkleić swój shortcode.
Następnie kliknij „Publikuj” lub „Aktualizuj”, jeśli twój post jest już aktywny.
Twoje nowe flipboxy będą teraz dostępne na twojej stronie.
Zauważ, że podczas zmiany rozmiaru okna przeglądarki flipboxy dostosowują się, ponieważ są w 100% responsywne.
Ta wtyczka zawiera również widżet flipbox, który możesz dodać do dowolnego obszaru widżetu obsługiwanego przez Twój motyw.
Aby to zrobić przejdź do Wygląd ” Widgety i znajdź widget zatytułowany „Flipbox-Awesomes Flip Boxes Image Overlay”.
Następnie możesz przeciągnąć i upuścić widget do preferowanej lokalizacji.
Na koniec wprowadź identyfikator stylu, który można znaleźć w głównym menu Wtyczki Flipbox i kliknij „Zapisz”.
Mamy nadzieję, że ten artykuł pomoże Ci dowiedzieć się, jak dodać nakładki flipbox i hovers do witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat optymalizacji obrazów pod kątem SEO i naszym przewodnikiem rozwiązywania problemów z typowymi problemami z obrazem WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
