Jak dodać Lightbox w WordPress z Elementor

Integrując funkcję Lightbox z witryną WordPress, możesz zmienić sposób, w jaki odwiedzający angażują się w treści wizualne. To eleganckie rozwiązanie jest idealne do prezentacji wysokiej jakości obrazów, tworzenia urzekających galerii i prezentacji szczegółowych informacji o produkcie, bez zakłócania wrażeń użytkownika. W rzeczywistości może podnieść wrażenia użytkownika na nowe wyżyny.

Niezależnie od tego, czy jesteś fotografem, który chce wyświetlić swoje portfolio, czy właściciel witryny e -commerce, który chce pokazać szczegóły produktu, funkcja Lightbox może być świetną opcją. Jeśli Twoja witryna jest zbudowana z Elementor, dodanie Lightboxs jest tylko o krok.

W tym artykule zapewniamy kompleksowy przewodnik krok po kroku, jak dodać Lightbox w WordPress z Elementor. Pamiętaj, aby przeczytać do końca, aby jak najlepiej wykorzystać to potężne narzędzie!

Co to jest Lightbox w WordPress?

Lightbox to wyskakująca nakładka. Wyświetla obrazy, filmy i inne wizualizacje medialne na stronie internetowej w większym i bardziej ukierunkowanym widoku. Ilekroć użytkownicy klikną powiązany przycisk, link lub miniaturę, funkcja Lightbox prezentuje załączone wizualne wizualne widoki, jednocześnie przyciemniając tło.

Pomaga podkreślić treść. Ta funkcja jest idealna do galerii, portfeli i wyświetlaczy produktów, które można lepiej obejrzeć z bliższego wyglądu. Uwzględniając funkcję LightBox, nie możesz sprawić, by treści wizualne są zaangażowane, ale także odbiorcy pozostają na stronie przez długi czas.

Korzyści z dodawania Lightbox do strony internetowej

Przed wskoczeniem do samouczka rzuć okiem na niektóre z kluczowych zalet dodania funkcji Lightbox do strony internetowej z omówionych poniżej.

• Zwiększone wrażenia użytkownika

Lightbox pokazuje treści użytkownikom bez przerywania sesji przeglądania witryny. Odwiedzający mogą skoncentrować się na wyznaczonej treści, ponieważ pojawia się ona na innych elementach strony internetowej. Przeglądaj tajemnice poprawy wrażenia użytkownika.

• Ulepszony urok wizualny

Lightboxes używają płynnych animacji i współczesnych układów, które sprawiają, że witryny wyglądają bardziej atrakcyjnie dla użytkowników. To sprawia, że ​​witryna jest bardziej profesjonalna.

• Łatwiejsza nawigacja dla zdjęć i filmów

Lightboxes pozwalają użytkownikom przeglądać elementy multimedialne na jednej stronie z płynną nawigacją i łatwymi przejściami między nimi. Jeśli cierpisz na pliki multimedialne, użyj HappyMedia do zarządzania biblioteką multimediów i plików.

• Zwiększa zaangażowanie i interakcje

Lightboxes pomagają użytkownikom lepiej zobaczyć treść wizualną, co może sprawić, że będą chcieli bardziej odkrywać witrynę. Ich rosnące sesje mogą przekazać pozytywny sygnał do wyszukiwarki.

• Pozwala na lepszą prezentację treści

Lightboxes pomagają lepiej wyświetlać treści bez czynania stron internetowych. Jest to świetne do prezentacji treści takich jak wykresy i kolekcje wydarzeń wraz z zdjęciami produktów.

Jak dodać Lightbox w WordPress z Elementor

Jesteśmy teraz w części samouczkowej. W tej sekcji pokażemy, jak dodać Lightbox w WordPress z Elementor. Aby zacząć od samouczka, musisz upewnić się, że w witrynie zainstalowane i aktywowane są następujące wtyczki.

• Elementor
• Happyaddons

HappyAddons to widoczny dodatek wtyczki Elementor. Jest wyposażony w ponad 130 dodatkowych widżetów i dziesiątki funkcji, które mogą pomóc w dalszym upiększeniu Twojej witryny. Gdy będą gotowe na Twojej stronie, zacznij śledzić samouczki wyjaśnione poniżej.

Krok 01: Przeciągnij i upuść widżet Lightbox na płótno

Otwórz post lub stronę z płótnem elementu. Znajdź widżet Lightbox na panelu elementor. Przeciągnij i upuść na płótnie.

Domyślnie widżet Lightbox jest dodawany do płótna jako przycisk.

Krok 02: Wybierz typ Lightbox

Widżet jest wyposażony w dwa typy Lightbox - przycisk i obraz . Wybierz rodzaj Lightbox, który chcesz dla widżetu. W tym samouczku idziemy z typem przycisku.

Krok 03: Wybierz typ treści, który chcesz wyświetlić

Widżet LightBox pozwala wyświetlić zawartość obrazu lub wideo. Wybierz typ treści, który chcesz wyświetlić z opcji oznaczonej poniżej.

Jeśli wybrana jest opcja wideo, możesz dodać zawartość wideo z trzech źródeł- YouTube, Vimeo i samodzielnie hostowane .

Jeśli wybrane jest źródło YouTube lub Vimeo, możesz dodać żądany link wideo do odpowiedniego pola pokazanego na zrzucie ekranu dołączonym poniżej.

Możesz nawet włączyć typ obrazu dla Lightbox i przesłać do niego obraz.

Krok 04: Dodaj kopię do przycisku Lightbox

Napisz odpowiednią kopię, która sprawia, że ​​przycisk jest naprawdę znaczący i zainteresuje użytkownikom kliknięcie go.

Krok 05: Skonfiguruj ustawienia widżetu Lightbox

Oprócz powyższych, użyj innych opcji, aby zoptymalizować widżet. Na przykład wyrównaj go centralnie lub gdziekolwiek to wygląda pięknie.

Krok 06: stylizuj widżet Lightbox

Teraz przejdź do zakładki Style . Z tej zakładki możesz dostosować wyściółkę, typ obramowania, promień obramowania, cień pudełka, typografię, kolor i kolor tła dla widżetu. Zrób to sam w razie potrzeby.

Krok 07: Podgląd Lightbox

Po prostu kliknij przycisk. Jeśli Lightbox pojawia się jak klip wideo dołączony poniżej, jest w porządku. Widać, że nasz Lightbox działa absolutnie dobrze.

Krok 08: Spraw, by mobilny widżet LightBox responuje

Kliknij ikonę trybu responsywnego na stopce panelu elementu. To pokaże górny pasek na płótnie z opcjami przełączania między różnymi rozmiarami ekranu.

Sprawdź, czy widżet wygląda dobrze na wszystkich urządzeniach, przełączając płótno między różnymi rozmiarami ekranu. Jeśli nie wygląda dobrze na określonym rozmiarze ekranu, możesz go dostosować tylko do tego rozmiaru ekranu.

W ten sposób możesz utworzyć Lightbox w WordPress za pomocą wtyczki Elementor.

Rzeczy, które należy wziąć pod uwagę przy tworzeniu Lightbox w WordPress

Mam nadzieję, że podobał Ci się ten samouczek. Teraz w tej sekcji omówimy punkty, które musisz rozważyć podczas tworzenia Lightbox w WordPress, aby uzyskać najlepsze wyniki.

• Cel Lightbox

Zdecyduj funkcję LightBox, której potrzebujesz w Lightbox, takim jak pokazanie zdjęć, filmów, formularzy lub galerii. Zaplanuj treści, które pomagają osiągnąć cele swojej witryny i zaspokajają potrzeby odwiedzających.

• Kompresuj obrazy

Dodanie ciężkich obrazów może spowolnić prędkość sieci. Pamiętaj więc, aby kompresować wszystkie obrazy, zanim dodasz je do Lightbox. Użyj HappyMeida do kompresji plików multimedialnych.

• Dodaj alter Text s

Dodanie alternatywnych tekstów do obrazów może zwiększyć wynik SEO obrazów Lightbox. Dodaj także angażującą kopię do przycisku Lightbox lub linku.

• Funkcjonalność wyjścia

Funkcjonalność wyjścia ma kluczowe znaczenie dla doświadczenia użytkownika. Daj użytkownikom łatwe sposoby wyjścia z Lightbox, pokazując widoczny przycisk i pozwalając im go zamknąć.

• Testowanie i rozwiązywanie problemów

Sprawdź, jak Lightbox działa w różnych przeglądarkach internetowych, urządzeniach i rozmiarach wyświetlania, aby potwierdzić, że działa na wszystkich platformach. Nie publikuj go bez testowania i eksperymentu.

Wniosek

Lightbox poprawia zaangażowanie użytkowników, wyświetlając multimedia w nakładce na stronę głównej. To pozwala odwiedzającym skupić się na treści bez nawigacji. Chociaż na WordPress.org dostępnych jest wiele wtyczek do tworzenia światła, Elementor wyróżnia się jako jedna z najprostszych i najbardziej przyjaznych dla użytkownika opcji. Jeśli jesteś fanem budowniczych stron, Elementor zdecydowanie warto rozważyć.

Oprócz widżetu Lightbox możesz również zbadać szeroką gamę funkcji i widżetów oferowanych przez wtyczkę HappyAddons . To potężne narzędzie pozwala dodać jeszcze więcej funkcjonalności do Twojej witryny i sprawia, że ​​jest bardziej dynamiczna i interaktywna.

Jeśli uznałeś ten samouczek za pomocny, chcielibyśmy usłyszeć od ciebie! Podziel się swoimi przemyśleniami lub pytaniami w poniższym polu komentarza.