Jak tworzyć zawartość na płótnie w Elementor: Przewodnik

Prezentacja dużej treści w małej przestrzeni internetowej bez mylących użytkowników jest wyzwaniem dla projektantów stron internetowych. Off Canvas Content to modne, nowe i inteligentne rozwiązanie, które może pomóc w tym kontekście.

Dzięki wtyczce Elementor Page Builder możesz łatwo tworzyć menu poza Canvas, banery promocyjne, paski boczne i inne na swojej stronie. Może to nie tylko pomóc w prezentacji treści, ale także uprościć nawigację, poprawić czytelność i przekonwertować użytkowników.

Jeśli Twoja witryna jest zbudowana z Elementor, utworzenie zawartości płótna zajmie tylko kilka minut. W tym poście na blogu poprowadzimy Cię, jak dodać treść na płótnie w Elementor z przewodnikiem krok po kroku. Zacznijmy!

Co to jest wyłączona treść na płótnie?

Off Canvas Treści to widżet elementor, który utrzymuje ukrytą zawartość poza ekranem, dopóki nie jest uruchomiona przez interakcję użytkownika. Zwykle ten widżet jest połączony z przyciskiem na ekranie. Ilekroć użytkownicy klikną przycisk, zawartość off-canvas natychmiast wsuwa się i prezentuje dodatkowe informacje.

Jak wspomniano powyżej, widżet treści poza Canvas obejmuje treści, takie jak menu, banery promocyjne, paski boczne, panele logowania i rejestracji, koszyki, filtry treści i opcje szybkiego oglądania. Pomaga utrzymać czysty i zorganizowany układ, który w razie potrzeby jest łatwy w dostępie.

Jak tworzyć zawartość z płótna w Elementor

Teraz, w tej sekcji, omówimy, jak tworzyć zawartość na płótnie w Elementor z przewodnikiem krok po kroku. Ale przed wskoczeniem do samouczka upewnij się, że masz zainstalowane i aktywowane następujące wtyczki na swojej stronie.

• Elementor
• Happyaddons
• Happyaddons Pro

Gdy są gotowi na Twojej witrynie, zacznij śledzić samouczek wyjaśniony poniżej.

Krok 01: Dodaj widżet zawartości Canvas do płótna Elementor

Otwórz post lub stronę z płótnem elementu. Znajdź widżet, wpisując jego nazwę w polu wyszukiwania panelu elementor. Po zobaczeniu widżetu przeciągnij go i upuść na płótnie.

Zobaczysz przycisk lub ikonę dodaną na płótnie. Klikając go, możesz otworzyć sekcję Off Off Canvas. Możesz rzucić okiem na klip wideo dołączony poniżej.

Krok 02: Dodaj widżet OFF Canvas do swojej strony internetowej

Powyżej umieściliśmy widżet na pustym płótnie. Ale możesz go dodać do dowolnej części swojej strony internetowej. Aby to wyjaśnić, otworzyliśmy zdobioną stronę internetową. Następnie umieścił widżet nad sekcją bohatera

Możesz zobaczyć, jak widżet został dodany do sekcji nagłówka strony internetowej.

Sprawdź, jak ulepszyć lokalne SEO w WordPress z Elementor.

Krok 03: Wybierz niestandardowy typ treści dla widżetu OFF Canvas

Przejdź do treści> OffCanvas . Kliknij listę rozwijaną obok opcji typu treści.

Musisz wybrać odpowiedni typ treści z listy rozwijanej dla widżetu na podstawie typu treści, którą chcesz wyświetlić.

W tym samouczku wybraliśmy niestandardowy typ treści.

Przeglądaj ten przewodnik, jak zaprojektować bazę wiedzy w WordPress.

Krok 04: Dodaj informacje do widżetu

Dodaj żądaną zawartość do widżetu za pomocą tych pól. Kliknięcie pola rozszerzy je i utworzy przestrzenie w celu dodania informacji.

Widać, że dodaliśmy treść do pudełka, rozszerzając ją. Możesz dodać pliki tekstowe i multimedialne, klikając odpowiednie opcje.

Dowiedz się, jak tworzyć oszałamiające strony internetowe infografiki w Elementor.

Krok 05: Wybierz źródło przełączania

W sekcji przełączania możesz zmienić typ źródła przełączania, pozycję, animację i etykietę .

Otwórz listę rozwijaną obok opcji źródła przełączania. Wybierz żądany typ przełączania. Wybraliśmy przycisk jako typ przełączania dla tego samouczka.

Następnie zmień kopię przycisku z opcji tekstu przycisku . Możesz nawet dodać ikonę przycisku . Sprawdź wszystkie zmiany przycisku na płótnie.

Krok 06: Dostosuj ikonę Zamknij pasek

Sekcja Off Canvas jest wyposażona w ikonę krzyżową (x) w prawym górnym rogu. Aby go dostosować, rozwinąć sekcję Zamknij pasek na panelu elementor.

Korzystając z odpowiednich opcji, możesz wyłączyć ikonę, zmienić wyrównanie, zmienić typ ikonę, tytuł ikony i wiele innych. Mam nadzieję, że możesz to zrobić sam.

Oto samouczek, jak utworzyć kalendarz zdarzeń w WordPress.

Krok 07: Zmień ustawienia widżetu

Rozwiń sekcję Ustawienia . Z opcji kierunku możesz zmienić położenie widżetu OFF Canvas. Możesz ustawić go po lewej, prawej, górnej lub dolnej.

Następnie możesz wybrać efekt przejścia treści . Dodaje efekt animacji do strony internetowej i pokaże go po kliknięciu przycisku.

Na przykład wybraliśmy ujawnienie jako typ przejścia treści. Teraz zobacz klip wideo załączony poniżej. Po kliknięciu przycisku strona porusza się również wraz z sekcją Off Off Canvas.

W ten sam sposób skonfiguruj inne opcje.

Krok 08: stylizuj widżet na płótnie

Przyjdź na kartę Style i rozszerz treść OffCanvas .

Stamtąd możesz zmienić rozmiar płótna , dodać rodzaj granicy , zwiększyć szerokość granicy , zmienić kolor graniczny i ustawić promień granicy . Mam nadzieję, że możesz to zrobić sam, tak jak to zrobiliśmy.

Rozwiń sekcję treści . Otrzymasz opcje dostosowywania wyrównania zawartości, koloru tła, typu granicznego, szerokości granicy, koloru granicznego i promienia obramowania dla zawartości z widżetem z płótna.

W ten sam sposób możesz zmienić typografię, rozmiar czcionki i kolor tekstu.

Oto prosty przewodnik na temat wyświetlania 360 obrotowej fotografii produktu w WordPress.

Krok 09: stylizuj przycisk przełączania

W ten sam sposób poszerz sekcję przełączania . Umożliwi to dostosowanie wyrównania przycisku, typografii, koloru tekstu, promienia granicy, tło przycisku itp.

Krok 10: Dostosuj ikonę Zamknij pasek

Rozszerzając sekcję Zamknij pasek , możesz dostosować kolor, rozmiar i więcej rzeczy ikony zamykającej.

Krok 11: Wykonaj reakcje na mobilne widżet na płótnie

Każdy z twoich elementów internetowych powinien być zoptymalizowany pod kątem urządzeń mobilnych, aby były one dobrze wyświetlane na wszystkich typach urządzeń. W przeciwnym razie możesz przegapić ogromny potencjał ruchu, ponieważ około 50% całego ruchu w większości stron internetowych pochodzi od użytkowników mobilnych.

Aby uzyskać optymalizację mobilną, kliknij ikonę trybu responsywnego na dole panelu elementu. Pojawi się topbar z opcjami, aby umożliwić przełączanie między różnymi rozmiarami ekranu.

Teraz przełącz między różnymi rozmiarami ekranu i sprawdź, czy projekty są w porządku dla odpowiednich urządzeń. Jeśli występuje jakikolwiek problem, możesz zmienić rozmiar czcionki, rozmiar przycisku, szerokość płótna, wysokość i inne opcje w razie potrzeby.

Zmiany zostaną zapisane tylko dla tego konkretnego rozmiaru ekranu, bez wpływu na inne. W ten sposób możesz sprawić, by mobilny widżet na płótnie responsywnie.

Krok 12: Wyświetl podgląd widżetu treści OFF Canvas

Teraz przejdź do opcji podglądu strony internetowej i sprawdź, czy widżet działa dobrze, czy nie. Możesz zobaczyć, działa dobrze po naszym końcu.

Rzeczy do rozważenia podczas korzystania z widżetu treści OFF Canvas

Aby jak najlepiej wykorzystać widżet, istnieje kilka punktów, które należy dokładnie rozważyć podczas korzystania z widżetu zawartości OFF Canvas. Spójrz na nie poniżej.

• Dalej doświadczenia użytkownika

Treść poza Canvas powinna wspierać użytkowników w nawigacji po stronie zamiast zakłócania ich doświadczenia. Upewnij się, że widżet działa płynnie z dobrze skoordynowanymi animacjami. Minimalizuj jednak ciężkie efekty ruchu, które mogą obniżyć wydajność, szczególnie na telefony komórkowe.

• Zoptymalizuj pod kątem telefonu komórkowego

Jak już powiedziano powyżej, znaczna liczba odwiedzających internetowych zwykle pochodzi od użytkowników urządzeń mobilnych, musisz dobrze zoptymalizować swoje witryny dla wszystkich typów urządzeń. W przeciwnym razie użytkownicy zorientowane na urządzenia mobilne będą mieli bardzo negatywne wrażenia.

• Łatwe zamknięcie

Widżet Off Canvas Content musi zawierać prostą opcję zamknięcia. Jeśli trudno jest znaleźć, użytkownicy z pewnością poczują się sfrustrowani. Nie zapomnij więc, aby bardzo zamykać ikonę w taki sposób, który staje się łatwy w nawigacji.

• Znaczenie treści

Treść poza Canvas musi pozostać krótka i skoncentrowana, aby wykonać określone funkcje, takie jak narzędzia nawigacyjne lub banery promocyjne. Włączenie nadmiernych informacji lub nieistotnych elementów podważa jego cel dostarczenia skoncentrowanego i bezproblemowego wrażenia użytkownika.

Ostateczne słowa!

Widżet Off Canvas Content może być potężnym sposobem na zaangażowanie użytkowników i zwiększenie konwersji, gdy wiesz, jak go dobrze wykorzystać. Próbowaliśmy omówić podstawowy samouczek na widżecie. Ponieważ naprawdę trudno jest omówić wszystkie funkcje widżetu i jak ich używać.

Tak więc, poza tym samouczkiem, jeśli chcesz mieć więcej pomysłów na temat innych rzeczy, które możesz zrobić z widżetem, możesz odwiedzić naszą stronę demonstracyjną zawartości Canvas. Otrzymasz dobrą kolekcję projektów poza Canvas, które możesz bezpośrednio kopiować i wkleić na swojej stronie.

Jeśli masz więcej zapytań bez odpowiedzi, daj nam znać za pomocą poniższego pola komentarza. Wkrótce wrócimy do Ciebie z przydatnymi odpowiedziami.