​​Jak dostosować menu nawigacyjne Elementor i widżet portfolio Elementor (samouczek)

Czy chcesz poprawić wrażenia użytkownika swojej witryny WordPress dzięki lukratywnemu projektowi? Jesteś we właściwym miejscu, jeśli to pytanie krąży w twoim umyśle.

Podróż użytkownika zaczyna się dopiero po wejściu na Twoją stronę. Co się stanie, jeśli odwiedzający uznają Twoją witrynę za niezorganizowaną lub złożoną? Z pewnością Twoja witryna zrobi złe wrażenie, a użytkownicy nie będą mogli znaleźć preferowanej treści.

61% użytkowników wypróbowuje inną witrynę, jeśli nie może szybko znaleźć tego, czego szuka.

Google

Więc co może pomóc Ci rozwinąć strukturę Twojej witryny, aby zapewnić lepsze wrażenia użytkownika?

W dzisiejszym samouczku pokażemy, jak możesz poprawić wrażenia użytkownika swojej witryny, korzystając z widżetu menu nawigacyjnego i portfolio w witrynie Elementor.

Zacznijmy od widżetu menu nawigacyjnego Elementor .

Co to jest menu nawigacyjne Elementora?

Menu nawigacyjne lub menu nawigacyjne to segment witryny, który prezentuje wszystkie ważne klikalne linki łącznie. Jeśli użytkownicy wejdą na witrynę, mogą kliknąć każdy link, aby znaleźć preferowaną treść w witrynie. Menu nawigacyjne można prezentować na różne sposoby. Na przykład poziomo, pionowo i menu rozwijane .

W zależności od szablonu Twojej witryny możesz wybrać dowolny z nich. Zalecamy jednak korzystanie z najbardziej zgodnego, który pasuje do projektu Twojej witryny.

Oto próbka aktualnego menu Happy Addons. Wygląda świetnie i prosto. Staraj się, aby menu Twojej witryny było takie jak to i zawierało wszystkie ważne linki.

Jak działa menu nawigacyjne Elementor (rodzaje menu nawigacyjnego)

Wiemy, że widżet Elementor Nav Menu ma trzy rodzaje wzorców, których możesz użyć w swojej witrynie WordPress. Podobnie jak inne widżety Elementora, widżet menu nawigacji jest również łatwy do wdrożenia i całkowicie elastyczny. Nawet nie musisz używać rozszerzeń innych firm, aby zastosować ten widżet.

Oprócz tych trzech typów układu możesz dodać wskaźniki i animacje, wstępnie przemyślane dostosowywanie menu, podmenu, responsywność urządzeń mobilnych i tak dalej.

Omówmy jeden po drugim i zobaczmy, jak to działa na dowolnej witrynie WordPress:

Poziome menu nawigacyjne

Używając tego wzorca, menu zostanie rozwinięte w poziomie od lewej do prawej strony. Ten układ projektu jest przeznaczony szczególnie dla użytkowników, którzy chcą, aby ich witryna była prosta i schludna. Na przykład dla profesjonalistów, osób publicznych, portali informacyjnych i innych rodzajów witryn Elementor.

Pionowe menu nawigacyjne

Podobnie jak menu poziome, menu pionowe rozszerza menu od góry do dołu. Ten układ wygląda świetnie, modnie i prosto. Możesz zastosować ten układ w swojej witrynie Elementor, jeśli Twoja witryna reprezentuje nieruchomości, edukację lub jakąkolwiek agencję online.

Dowiedz się więcej: Jak stworzyć stronę docelową o wysokiej konwersji dla biznesu online

Rozwijane menu nawigacyjne

Wygląda pionowo, ale menu otworzy się po kliknięciu przycisku rozwijanego. Możesz użyć tego prostego, ale świetnie wyglądającego układu, jeśli chcesz zachować miejsce w sekcji nagłówka. Wystarczająca ilość miejsca zapewnia użytkownikom ładny widok na stronę internetową, w tym logo, tekst nagłówka, przyciski społecznościowe i inne.

Możesz użyć tego wzorca projektowego, jeśli masz witrynę z portfolio, witrynę pasyjną, muzykę lub witrynę osobistą. Oto przykład, który możesz zobaczyć.

Jak dodać menu w Elementorze

Poniżej przedstawiamy krok po kroku proces dodawania menu nawigacyjnego Elementor w witrynie WordPress.

Warunki wstępne

• Witryna WordPress
• Elementor (ZA DARMO)
• Elementor (Pro)

Załóżmy, że masz już witrynę WordPress. I zainstalowałeś zarówno Elementor FREE, jak i wersję Pro. Menu nawigacyjne to funkcja premium. Musisz więc kupić pakiet pro przed użyciem tego widżetu.

Krok pierwszy: otwórz nową stronę

• Wybierz płótno Elementora i kliknij przycisk „ Edytuj za pomocą Elementora ”.

Krok drugi: dodaj sekcję

• Po wybraniu elementu Elementor Canvas otrzymasz nowy interfejs. W tym celu kliknij czerwony przycisk (+) . A następnie wybierz preferowaną sekcję, której chcesz użyć. W naszym przypadku wybraliśmy drugi wzór.

• Po wybraniu drugiego wzoru możesz zobaczyć dwie sekcje u góry ekranu.

• Teraz wyszukaj widżet „Menu nawigacyjne” na pasku wyszukiwania Elementora.

• Po znalezieniu przeciągnij i upuść widżet w wybranej sekcji. Zalecamy wklejenie go po prawej stronie sekcji.

• Po dodaniu menu w sekcji pojawi się ono natychmiast.

Jeśli nie wiesz, jak utworzyć menu w WordPressie, zapoznaj się z przewodnikiem tutaj.

Krok trzeci: dostosuj menu nawigacyjne

Cóż, wszystko jest gotowe do dostosowania menu swojej witryny. W tej personalizacji możesz wykorzystać trzy kluczowe części.

• Zawartość
• Styl
• Zaawansowany

Dostosowywanie treści

W treści można znaleźć dwie opcje. Link do układu i opakowania . Teraz dotknij przycisku Układ . Znajdziesz wszystkie powiązane opcje dostosowywania projektu menu.

• Menu : wybierz menu utworzone w witrynie WordPress.
• Układ : Dostępne są trzy typy układów. Pozioma, pionowa i rozwijana.
• Wyrównaj : Aby zmienić wyrównanie menu.
• Wskaźnik : dodaj je, aby Twoje menu wyglądało ładniej. Takie jak podkreślenie, nadkreślenie, obramowanie, tekst itp.
• Animacja : Dzięki niemu możesz dodawać animacje do swojego menu. Takie jak zanikanie, zmniejszanie, zmniejszanie i inne.
• Menu rozwijane Mody : sprawdź, czy Twój projekt jest dostosowany do urządzeń mobilnych, czy nie.

• Zobaczmy, jak dodać układ do tego widżetu

• W ten sam sposób możesz zastosować animację do widżetu.

Dostosowywanie stylu

Po wstępnym dostosowaniu możesz wystylizować menu. W tym celu dotknij przycisku Styl . Znajdziesz tu dwie opcje – Menu główne; Lista rozwijana .

• Zobaczmy, jak szybko dodać funkcje do widżetu menu nawigacyjnego Elementor. Tutaj możesz zmienić kolor tekstu, szerokość, dopełnienie, dopełnienie pionowe i spację.

• Aby dodać kolory po najechaniu kursorem, kliknij go i zmień preferowane kolory, które chcesz dodać.

Zaawansowane funkcje

Dzięki zaawansowanym funkcjom możesz zrobić więcej w swoim obecnym projekcie. Takie jak efekty ruchu, tło, efekt obramowania, maskowanie, pozycjonowanie, responsywność, niestandardowy CSS i inne.

• Gdy skończysz z całym projektem, kliknij przycisk Opublikuj . A twoje menu nawigacyjne Elementora będzie jak poniżej:

W ten sposób możesz dodać widżet menu Nav do swojej witryny Elementor. Po prostu próbowaliśmy pokazać, jak działa ta funkcja i zastosować ją do projektu. Teraz twoja kolej, aby zastosować je jeden po drugim.

Jeśli jednak chcesz uzyskać szczegółowy przewodnik, oto film, który możesz teraz obejrzeć.

Co jeszcze możesz dodać za pomocą menu nawigacyjnego Elementor?

• Podkreślaj animacje
• Animacje w tle
• Animacje tekstowe
• Odstępy i wyrównanie menu
• Kolor, tło i typografia
• I więcej

Dlatego korzystając z tych funkcji, możesz ulepszyć strukturę menu WordPress i nadać mu standardowy wygląd. Ale pamiętaj; spróbuj je wdrożyć, wykonując odpowiednie kroki. Na przykład możesz wypróbować jeden po drugim na swoim lokalnym serwerze. Po potwierdzeniu ostatecznego projektu zastosuj go w swojej aktywnej witrynie. Spróbuj przećwiczyć tę zasadę, jeśli nie chcesz zepsuć formowania szablonu swojej witryny.

Dodatkowa wskazówka: Przedstawiamy widżet Mega Menu Happy Addons

Oprócz łączenia tych funkcji z menu witryny, możesz dodać bardziej zaawansowane funkcje za pomocą widżetu mega menu Happy Addons. Możesz tworzyć mega menu, takie jak drybling, InVision, Bobbi Brown, Adidas, Puma, Evernote i inne, korzystając ze swojej wyobraźni.

Możesz także dodać niestandardowe ikony, plakietki i domyślne menu WordPress w swojej witrynie i sprawić, by były piękniejsze dla użytkowników.

Oto krótki samouczek, który możesz sprawdzić, aby dowiedzieć się o widżecie menu Happy Addons Mega.

Aby uzyskać szczegółowy przewodnik, możesz również sprawdzić oficjalną dokumentację, aby dowiedzieć się, jak działa ten widżet i jak wygląda proces aplikacji.

Jak dostosować swoją witrynę WordPress za pomocą widżetu portfolio Elementor

Tutaj porozmawiamy o innej funkcji premium Elementora – widżecie portfolio . Po dostosowaniu menu nawigacyjnego Elementor możesz upiększyć wygląd swojej witryny, stosując widżet portfolio. Ten widżet pomaga wyświetlać Twoje posty, strony i niestandardowe typy postów w atrakcyjnej, filtrowalnej siatce. Aby zakończyć proces, wystarczy kilka kroków. Możesz więc z łatwością korzystać z tego widżetu na swojej stronie.

Sprawdźmy jednak, jak dodać portfolio za pomocą Elementora. Zakładamy, że masz już witrynę portfolio zbudowaną za pomocą Elementora. Jeśli nie, możesz zapoznać się z artykułem, aby dowiedzieć się, jak utworzyć witrynę portfolio za pomocą Elementora.

Krok pierwszy: utwórz stronę

Przede wszystkim otwórz stronę, do której chcesz dodać widżet portfolio. A następnie kliknij Edytuj za pomocą Elementora .

Następnie otworzy się Twoje płótno projektowe. Podobnie jak dodałeś widżet menu nawigacyjnego Elementor, możesz dodać ten widżet.

Krok drugi: dodaj widżet portfela

Wyszukaj widżet Portfolio na pasku wyszukiwania i przeciągnij go na kanwę.

Uwaga : widżet Portfolio działa WYŁĄCZNIE z postami, stronami i niestandardowymi typami postów. Widżet Portfolio NIE działa z galeriami.

Krok trzeci: dostosuj widżet portfela

Po dodaniu widżetu Twoje posty automatycznie pojawią się na ekranie.

Cała personalizacja składa się z trzech części. Treść, styl i zaawansowanie .

Zawartość

• Kolumny: Ustaw liczbę kolumn wyświetlanych w widżecie
• Liczba postów: ustaw dokładną liczbę postów wyświetlanych w widżecie
• Rozmiar obrazu: Ustaw rozmiar obrazów
• Stosunek przedmiotów: Ustaw stosunek przedmiotów
• Pokaż tytuł: Wybierz, czy chcesz pokazać, czy ukryć tytuł. Tytuł zostanie wyświetlony po najechaniu kursorem na obrazy
• Znacznik HTML tytułu: Owiń tytuł znacznikiem, H1…H6, span, div lub paragraf

• Pasek filtrowania : określ, czy wyświetlać lub ukrywać pasek filtrowania nad portfolio. Wybierz taksonomię, z której mają być wyświetlane posty. Opcje obejmują: Kategorie, Tagi i wszelkie niestandardowe taksonomie typu post

• Zapytanie : Wybierz źródło, z którego widżet będzie wyświetlał zawartość. Opcje obejmują posty, strony, niestandardowe typy postów, jeśli są dostępne, wybór ręczny, bieżące zapytanie i powiązane.

Styl

• Odstęp między przedmiotami : Ustaw dokładną przerwę między przedmiotami
• Rows Gap : Ustaw dokładną przerwę między rzędami elementów
• Promień obramowania : Ustaw promień obramowania obrazów, aby kontrolować zaokrąglenie narożników
• Kolor tła : Ustaw kolor tła nakładki po najechaniu kursorem na obraz
• Kolor : ustaw kolor tytułu posta. Tytuł pojawia się w nakładce po najechaniu kursorem na obraz
• Typografia : dostosuj typografię tytułu
• Kolor : Ustaw kolor tekstu paska filtrów
• Aktywny kolor : Ustaw kolor aktywnego tekstu paska filtrów
• Typografia : Dostosuj typografię tekstu paska filtrów
• Odstęp między elementami : Ustaw odstęp między elementami na pasku filtrów
• Odstępy filtrów : Ustaw odstępy między paskiem filtrów a obrazami

Zaawansowane funkcje

Możesz dodać do swojego projektu kilka zaawansowanych funkcji. Takie jak margines, dopełnienie, indeks Z, CSS, efekty ruchu, tło, obramowanie, maskowanie, atrybuty i inne.

Więc po dostosowaniu wszystkich ustawień swojego projektu, oto jak będzie wyglądał w Twojej aktywnej witrynie.

Jeśli jednak chcesz dodać bardziej szczegółowy samouczek, możesz zapoznać się z następującym samouczkiem wideo.

Niektóre często zadawane pytania dotyczące menu Elementor i widżetu portfolio

Wniosek

Stworzenie menu strony internetowej wymaga dużo ciężkiej pracy i cierpliwości. Ale platforma open source, taka jak WordPress, ułatwia nam to. Dostępne zasoby, wtyczki, dokumentacja i inne krótkie samouczki mogą z łatwością pomóc każdemu w tworzeniu i dostosowywaniu ich witryn.

Istnieje jednak kilka sposobów na stworzenie niestandardowego menu WordPress i witryny z portfolio. Możesz to zrobić ręcznie lub postępować zgodnie z procesem, który pokazaliśmy powyżej. Ale zalecamy unikanie ręcznego procesu. Może to złamać strukturę witryny, jeśli nie masz wystarczającego doświadczenia w projektowaniu witryn.

Aby zautomatyzować proces i zmniejszyć niepotrzebny wysiłek, najlepszym wyborem może być widżet menu nawigacyjnego Elementor. A widżet portfolio może pomóc w przeprojektowaniu witryny, dzięki czemu strony internetowe będą bardziej dochodowe i atrakcyjne.

Jeśli chcesz zwiększyć możliwości projektowania witryny Elementor na wyższy poziom, możesz skorzystać z Happy Addons . Jest to zbiór różnorodnych funkcji i widżetów Elementora. Używając ich odpowiednio, możesz w krótkim czasie wzbogacić profesjonalny wygląd.