Jak tworzyć nakładki Flipbox i najechanie kursorem w WordPress
Opublikowany: 2023-05-30Jeśli chodzi o projektowanie atrakcyjnej i angażującej witryny WordPress, dodanie elementów interaktywnych może znacznie poprawić wrażenia użytkownika. Flipbox jest jednym z takich elementów, który pozwala wyświetlać treści w sposób dynamiczny i interaktywny.
W tym poście na blogu zbadamy, czym jest Flipbox, jaką rolę odgrywają nakładki Flipbox i najechania kursorem w witrynach WordPress, a także przedstawimy przewodnik krok po kroku, jak dodać nakładki Flipbox i najechania kursorem w WordPress.
Co to jest Flipbox?
Flipbox to funkcja projektowa, która umożliwia dostarczanie materiału w postaci pudełka, które odwraca się lub obraca, gdy użytkownik najeżdża na nie. Zwykle zawiera dwie strony, przód i tył, z inną zawartością po każdej stronie.
Rola nakładek Flipbox i najechania kursorem w witrynie WordPress
Nakładki Flipbox i najechanie kursorem mogą pomóc poprawić wrażenia użytkownika i atrakcyjność wizualną Twojej witryny WordPress. Umożliwiają zwrócenie uwagi na ważne szczegóły, podkreślenie funkcji lub wyeksponowanie zdjęć i filmów w dynamiczny sposób. Możesz uatrakcyjnić swoją witrynę, stymulować zaangażowanie użytkowników i poprawić ogólną estetykę projektu, włączając nakładki Flipbox i najechanie kursorem.
Przewodnik krok po kroku dotyczący dodawania Flipbox do witryny WordPress
Aby dodać nakładki i nakładki Flipbox do swojej witryny WordPress, potrzebujesz odpowiedniej wtyczki oferującej tę funkcjonalność. Dostępnych jest kilka wtyczek Flipbox, ale dwie popularne opcje to wtyczki Elementor i ElementsKit Flipbox . Wtyczki te zapewniają łatwe w użyciu opcje i różnorodne ustawienia dostosowywania, aby tworzyć oszałamiające efekty Flipbox. Instalowanie i aktywowanie wtyczki nie jest nauką rakietową. Możesz to łatwo zrobić, wykonując kilka kroków.
Wróćmy teraz do dodawania Flipboksa do Twojej witryny. Oto 4 łatwe i proste sposoby, aby to zrobić:
Krok 1: Włączanie widżetu Flip Box
Aby to zrobić, zaloguj się do pulpitu administratora WordPress i przejdź do ElementsKit ⇒ widżety ⇒ widżet flip box , włącz widżet i kliknij Zapisz zmiany .
Krok 2: Przeciągnij i upuść widżet
Edytuj stronę, wybierając opcję Edytuj za pomocą Elementora. Następnie wyszukaj widżet z klapką z ikoną Ekit i po prostu przeciągnij i upuść widżet na stronę.
Krok 3: Dostosuj ustawienia
Rozwiń menu Odwróć pole, aby zmienić ustawienia:
- Opcje odwracania: Możesz wybrać wygląd animacji odwracania. Dostępne są cztery opcje: Odwróć, Powiększ, Wsuń i 3D. Każdy ma inny styl.
- Odwróć kierunek: Określa, w którą stronę pójdzie animacja odwrócenia. W zależności od wybranego rodzaju odwrócenia zobaczysz różne opcje kierunku, w którym może się obrócić.
- Flip Trigger: W ten sposób dokonujesz przewrotu. Możesz wybrać jedną z trzech opcji: Najechanie kursorem (kiedy najedziesz na nią myszką), Kliknięcie pudełka (kiedy klikniesz na pole) lub Kliknięcie przycisku (kiedy klikniesz określony przycisk).
- Wysokość pudełka z klapką: Możesz zmienić wysokość pudełka z klapką. Wewnątrz tego ustawienia znajdują się dwie zakładki: PRZÓD i TYŁ. Możesz dostosować zawartość z każdej strony osobno.
Dla każdej strony pudełka z klapką możesz dostosować następujące elementy:
- Typ multimediów: Wybierz, czy chcesz użyć ikony, obrazu, czy żadnego (jeśli nie chcesz dodawać żadnych obrazów).
- Ikona/Wybierz plik: Jeśli wybrałeś ikonę lub obraz, możesz wybrać z listy, którego chcesz użyć, lub wybrać plik z komputera.
- Tytuł: Nadaj tytuł lub nazwę tej stronie pudełka z klapką.
- Podtytuł: Dodaj mniejszy tekst pod tytułem, aby podać więcej informacji.
- Odwróć opis: Napisz opis lub wyjaśnienie tej strony odwróconego pudełka.
- Wyrównanie: Zdecyduj, czy zawartość ma być po lewej stronie, na środku czy po prawej stronie.
Po zakończeniu dostosowywania zawartości obu stron pudełka z klapką możesz zmienić styl, aby wyglądał tak, jak chcesz.
Krok 4: Sformalizuj swoje pudełko z klapką
Teraz przejdź do zakładki Styl i rozwiń każdą sekcję do odpowiednich opcji stylu:
Wrapper: Tutaj możesz zmienić typ tła, kolor, lokalizację, drugi kolor, lokalizację, typ, kąt i tak dalej pod opakowaniem. Opcje zarówno przedniej, jak i tylnej strony pudełka z klapką można dostosować.
Ikona: Rozwijając tę opcję. Możesz zmienić kolor, typ tła, cień pudełka, typ obramowania i inne ustawienia zarówno dla widoku zwykłego, jak i widoku po najechaniu kursorem. Zarówno przednie, jak i tylne końce pudełka z klapką mogą mieć dostosowane style ikon.
Tytuł: Stąd możesz zmień Typografia , Kolor tytułu i Margines tytułu dla obu stron przerzucanego pudełka.
Napisy: zmodyfikuj tę opcję, aby dostosować Typografię, Kolor tytułu i Margines tytułu napisów dla obu stron przewracanego pudełka.
Opis: Tutaj możesz dostosować Typografię, Kolor opisu i Margines opisu dla obu stron pudełka.
Przycisk: Rozwiń sekcję przycisków, aby zmienić kolor tekstu, kolor tła, typ obramowania, promień obramowania, ramkę obramowania i inne ustawienia. Przycisk można stylizować zarówno dla widoków zwykłych, jak i wyświetlanych po najechaniu kursorem.
Na koniec kliknij Publikuj/aktualizuj, aby zapisać zmiany i wyświetlić podgląd przerzucanego pudełka Elementora:
Łatwy w użyciu wykres
| Kroki | Jak to zrobić |
| Krok 1: Włączanie widżetu Flipbox | ElementsKit ⇒ widżety ⇒ widżet odwróć pudełko, włącz widżet ⇒ Zapisz zmiany. |
| Krok 2: Przeciągnij i upuść widżet | Użyj ikony Ekit ⇒ wyszukaj widżet z klapką ⇒ przeciągnij i upuść widżet |
| Krok 3: Dostosuj ustawienia | Dostosuj kierunek odwrócenia, wyzwalacz, wysokość pudełka, typ nośnika, ikonę / wybierz plik, tytuł, podtytuł, opis odwrócenia, wyrównanie itp. |
| Krok 4: Sformalizuj swoje pudełko z klapką | Karta Styl ⇒ rozwiń każdą sekcję ⇒ odpowiednio zmień |
Najlepsza wtyczka Flipbox Overlays i Hovers dla WordPress
Oto mój przegląd dwóch popularnych nakładek Flipbox i wtyczek po najechaniu kursorem do WordPress obok siebie. Są to wtyczki Elementor i ElementsKit Flipbox. Spójrz
Wtyczka Elementor Flipbox
Elementor to szeroko stosowana i ceniona wtyczka do tworzenia stron dla WordPress. Oferuje widżet Flipbox, który pozwala tworzyć wspaniałe animacje odwracania na Twojej stronie internetowej. Dzięki Elementor możesz łatwo dodawać interaktywne efekty odwracania do swoich obrazów, ikon, tytułów i opisów. Wtyczka zapewnia przyjazny dla użytkownika interfejs, w którym można dostosować kierunek odwrócenia, styl animacji, zdarzenie wyzwalające (najechanie kursorem, kliknięcie) i różne elementy projektu. Elementor jest znany ze swojej elastyczności, rozbudowanych opcji stylizacji i kompatybilności z różnymi motywami.
Wtyczka ElementsKit Flipbox
ElementsKit to kompleksowy pakiet dodatków do Elementora, który zwiększa jego funkcjonalność. W ElementsKit dostępny jest dedykowany moduł Flipbox. Dodaje bardziej zaawansowane funkcje i efekty Flipbox do Twojej witryny opartej na Elementorze. Ta wtyczka oferuje obszerną bibliotekę gotowych szablonów Flipbox. Pozwala to szybko tworzyć atrakcyjne wizualnie animacje odwracania. Wtyczka ElementsKit Flipbox zapewnia również dodatkowe opcje dostosowywania. Możesz mieć różne style Flipbox, efekty nakładki, efekty najechania i różne zdarzenia wyzwalające. Bezproblemowo integruje się z Elementorem i zapewnia bezproblemową obsługę podczas projektowania urzekających elementów Flipbox.
Zarówno wtyczka Elementor Flipbox, jak i wtyczka ElementsKit Flipbox mogą być dla Ciebie najlepszym wyborem. Wprowadzają one interaktywne i wciągające animacje odwracania na strony internetowe. Wtyczki te mają przyjazne dla użytkownika interfejsy i rozbudowane opcje dostosowywania. Ponadto są one kompatybilne z narzędziem do tworzenia stron Elementor. Nie ma potrzeby pisania kodów. Te wtyczki ułatwiają tworzenie atrakcyjnych wizualnie i interaktywnych elementów Flipbox.
Często zadawane pytania (FAQ)
Jak dodać efekt najechania kursorem w WordPress?
Aby dodać efekt najechania kursorem w WordPress, możesz użyć CSS lub wtyczek, które oferują funkcje efektu najechania kursorem. Wiele programów do tworzenia stron i wtyczek dostosowywania zapewnia opcje dodawania efektów najechania kursorem do różnych elementów, w tym Flipboxów.
Jak utworzyć flip box w WordPress?
Możesz stworzyć flip box w WordPress za pomocą dedykowanych wtyczek Flipbox, takich jak ElementsKit. Wtyczki te umożliwiają łatwe tworzenie i dostosowywanie elementów Flipbox bez konieczności znajomości programowania.
Jak dodać obraz po najechaniu kursorem w WordPress?
Aby dodać obraz po najechaniu kursorem w WordPress, możesz użyć CSS lub wtyczek, które zapewniają efekty najechania na obraz. Wtyczki te mają zwykle opcje określania innego obrazu lub zmiany wyglądu po najechaniu kursorem na element obrazu.
Jak wyświetlać zawartość po najechaniu kursorem na WordPress?
Możesz wyświetlać zawartość po najechaniu myszką w WordPress przy użyciu różnych metod. Jednym ze sposobów jest użycie CSS do wyświetlania ukrytej treści po najechaniu kursorem na określony element. Alternatywnie, wtyczki Flipbox często oferują opcje wyświetlania różnych treści z przodu iz tyłu Flipboksa, widocznych po najechaniu myszką.
Zakończyć
Dodanie nakładek Flipbox i najechania kursorem do witryny WordPress może znacznie poprawić wrażenia użytkownika i sprawić, że treść będzie bardziej wciągająca. Postępując zgodnie z instrukcją krok po kroku opisaną w tym poście na blogu i korzystając z popularnych wtyczek Flipbox, takich jak ElementsKit, możesz łatwo tworzyć oszałamiające efekty Flipbox bez znajomości kodowania. Śmiało więc uatrakcyjnij swoją witrynę za pomocą nakładek Flipbox i dymków oraz zachwyć odwiedzających witrynę interaktywną i atrakcyjną wizualnie zawartością.