Sådan opbygger du en Nav-menu i Elementor Without Pro

Nøgle takeaways

• Elementor uden Pro kan ikke placere en WordPress-menu på en side eller i en overskrift, fordi Elementor Menu-widgetten (tidligere Nav Menu) kun leveres med Elementor Pro.
• En Elementor nav menu uden Pro kan bygges med Master Addons Nav Menu widget, som viser enhver WordPress menu og sætter sit layout separat til desktop, tablet og mobil.
• Undermenuer i en Elementor nav-menu kommer fra WordPress: træk et element lidt lige under dets overordnede i Udseende > Menuer, indtil det læser “underelement”, og gem derefter.
• Master Addons Nav Menu-widgetten har fire lodrette typer: Normal åbner undermenuer til siden ved svæve, Toggle og Accordion udvider dem ved klik, og Side sætter menuen fast til sidekanten.
• Master Addons Nav Menu-widgetten giver telefoner en hamburger-skift som standard, mens Hamburger på desktop eller tablet og Popup- og Offcanvas-typerne har brug for Master Addons Pro.

Du kan bygge en stylet Elementor nav menu uden at købe Elementor Pro. Elementors egen menu widget er kun Pro, men Master Addons Nav Menu widget trækker enhver WordPress menu ind i editoren, styles hvert niveau fra panelet og kollapser til en hamburger på telefoner.

Denne vejledning dækker, hvorfor kerne Elementor forlader hullet, måderne at udfylde det og overskriften bygge i seks trin. Derefter kommer undermenuer, de fire lodrette menutyper, mobil adfærd, de sædvanlige grunde til, at en menu ikke vises, og de dele, der har brug for Master Addons Pro.

Hvorfor Elementor gratis har ingen menu widget

Elementors gratis plugin sender snesevis af layout- og indholdswidgets og ingen måde at placere en WordPress-navigationsmenu på en side eller skabelon. Widgetten, der gør det, oprindeligt kaldet Nav Menu og nu Menu-widgetten, er kun Pro. Elementors egen dokumentation bekræfter det.

Du kan stadig bygge menuen under Udseende > Menuer. Mellemrummet er på designsiden: kerne Elementor har intet at slippe den menu ind i, så den vises overalt, hvor dit tema udskriver det.

På et simpelt websted med en menu-klar tema, der kan være nok. Når du vil have en brugerdefineret overskrift, en hamburger skifte du kontrol eller en mega menu, gratis Elementor alene kan ikke komme der. Gamle tutorials kalder Pro widget Nav Menu og nyere kalder det Menu, men det har altid haft brug for Pro.

Tre måder at tilføje en nav-menu uden Pro

Der er tre reelle muligheder uden Elementor Pro licens. Den fjerde række er Elementor Pro, til sammenligning.

Tema menu placering. Hvert tema registrerer mindst ét menuområde. Tildel din menu, og den fungerer med nul plugins, men du får ingen kontrol over dens udseende fra Elementor, og mobil adfærd er uanset temaforfatteren bygget. Hvis den menu allerede ser rigtigt ud på en telefon, skal du springe widgetten over.

Master Addons Nav Menu widget. Dette er Elementor-native mulighed, der kører uden Elementor Pro. Drop den nav menu widget peg den ind i en hvilken som helst skabelon, peg på en menu fra Udseende > Menuer, og stil farver, mellemrum, undermenuer og mobilen skifter fra panelet.

Master Addons Mega Menu. For websteder med en masse kategorier bygger Mega Menu-udvidelsen paneler med flere kolonner oven på den samme widget og kører uden Elementor Pro. Gennemgang: sådan opbygger du en megamenu i Elementor uden Pro.

Elementor Pro. Hvis du allerede ejer det, skal du bruge dens Menu widget og Theme Builder. To plugins til et job tilføjer kun vægt.

Vil du se hvert layout, før du bygger? de Nav Menu widget side har levende demoer af vandrette overskrifter, lodrette sidebjælker og telefonhamburgeren.

Byg menuen, start til slut

Bygget sker i wp-admin og Elementor editor, uden kode. Kontroller først, at dit tema ikke udskriver sin egen overskrift, fordi to stablede overskrifter er det mest almindelige rod her.

Trin 1: Registrer menuen

Gå til Udseende > Menuer, oprette en menu, tilføje dine sider og links, og give det et navn, du vil genkende i seks måneder. Dette er almindelig WordPress, intet plugin-specifik, og WordPress har en guide til Menuer skærmen hvis du ikke har bygget en før. Opsæt eventuelle dropdowns også her (se den undermenuafsnit).

Trin 2: Opret en Header skabelon

Åbn master addons temabygger og tilføj en ny skabelon med typen sat til Header. Dette lader dig erstatte temaets header i stedet for at bekæmpe den. For at starte fra et færdigt design skal du importere en af disse Elementor header skabeloner og peg dens menuwidget på din menu.

Trin 3: Tilføj Nav Menu widget og vælg din menu

Søg i Elementor-panelet efter “Nav Menu” og træk det ind i overskriften (dets panel læser Navigation Menu). I Indhold > Generelt skal du vælge den menu, du byggede i trin 1 fra Select Menu dropdown, og derefter indstille Layout. Vandret passer til en standardoverskrift, med en Alignment kontrol ved siden af. Lodret passer til en sidebjælke og tilføjer en Type kontrol med Normal, Toggle, Accordion og Side.

Layout er indstillet pr. enhed. Desktop starter på Horizontal og telefoner starter på Hamburger, så menuen kollapser på en telefon uden ekstra opsætning.

Trin 4: Style det

Skrifttype, farve, afstand og hover-tilstande er alle i fanen Stil, uden brugerdefineret CSS. Hovedmenuen Vare holder polstring, elementgab, justering, typografi, Normal, Hover og Aktive farver, baggrund, kant, radius og tekstskygge. Core Elementor kan ikke gøre noget af dette for en menu.

Trin 5: Udgiv og tildel det

Gem skabelonen og tildele det til Hele webstedet. Uden Master Addons Pro, der er den eneste tilgængelige display betingelse, som fungerer, når du vil have én overskrift overalt.

Trin 6: Tjek det på forenden

Indlæs webstedet, og bekræft kun én header-gengivelse. Hvis temaets menu også vises, skal du slå den fra i temaets Customizer-indstillinger, da det at skjule det med CSS efterlader opmærkningen på siden.

Sådan tilføjer du en undermenu og styler dropdownen

Hvis du vil føje en undermenu til en Elementor nav-menu, skal du indlejre elementet under dets overordnede i Udseende > Menuer, og widgetten gør det til en dropdown. Der er ingen undermenuindstilling inde i Elementor.

1. Åbn Udseende > Menuer, og vælg den menu, widgetten bruger.
2. Tilføj den underordnede side eller linket, hvis det ikke er i menuen endnu.
3. Træk den under dens overordnede og lidt til højre, indtil etiketten “underelement” vises ved siden af dens navn.
4. Klik på Gem menu, og genindlæs derefter Elementor-editoren eller frontenden.

På en vandret overskrift får den overordnede en indikatorpil (indstillet i Indhold > Indikatorikon), og undermenuen åbnes ved svæve.

Dropdown Menu styler panelet (bredde, baggrund, kant, radius, skygge, afstand fra den øverste bjælke). Dropdown Menu Vare styler linkene inde i det: typografi, mellemrum, polstring, Normal, Hover og Active farver, og en valgfri divider. Tredje niveau menuer får matchende Dropdown Submenu sektioner. Den dropdown menu variationer demo viser flere paneltypografier bygget på denne måde.

De fire lodrette menutyper

Elementor vertikal menu i Master Addons kommer i fire typer: Normal, Toggle, Accordion og Side. Indstil Layout til Vertikal og en Type kontrol vises under den. Type er indstillet pr enhed også, så en sidebar kan bruge Accordion på en tablet og Normal på skrivebordet.

normal

Normal åbner hver undermenu til siden af sin forælder på hover, som en flyout. Det passer til en desktop sidebar med plads til højre.

Skift

Toggle udvider undermenuen under sit element ved klik og skubber elementerne nedenunder ned. Flere undermenuer kan forblive åbne på én gang, hvilket hjælper, når sidebjælken fordobles som et indeks.

harmonika

Accordion udvider også ved klik, men åbning af en undermenu lukker den åbne. Det holder lange menuer korte i en smal kolonne.

Side

Side fastgør menuen til sidekanten, med hovedelementerne i en lodret bjælke og hver undermenu i et panel ved siden af. Den lodret sidemenu demo viser det på en hel side.

de lodret navigationsmenu demo viser en stylet sidebar version.

At få det til at fungere på mobilen

På telefoner Nav Menu widget kollapser i en hamburger skifte som standard. Hamburger Menu sektionen af fanen Indhold indstiller sin justering, ikon, tekst eller begge dele, en standard, stablet eller indrammet visning, form og separate normale og aktive ikoner.

Skiftet fungerer fra tastaturet såvel som ved berøring. Enter og Space åbner det, Esc lukker det, og et tryk uden for menuen lukker det også.

På telefoner åbner menuen på plads under vippen, og undermenuer udvider sig inde i den. Det passer til korte og mellemstore menuer. Et off-canvas panel, der glider ind fra siden, er en Pro-funktion, dækket nedenfor.

Test på en rigtig telefon samt browserens enhedsværktøjslinje, fordi tryk på mål og udvendige tryk opfører sig anderledes på en berøringsskærm. Kontroller, at ikonet ændrer tilstand, når menuen er åben, og at et undermenupunkt kan nås med en tommelfinger.

Hvorfor din Elementor nav-menu ikke vises

Når en Elementor nav menu ikke vises, er årsagen næsten altid en af disse fire. Tjek dem i rækkefølge.

1. Der er ikke valgt nogen menu, eller der findes ingen menu. Oprettelse af en menu forbinder den ikke med widgetten, så vælg den i Vælg menu. Hvis feltet siger “Der er ingen menuer på dit websted”, skal du oprette en først.
2. Skabelonen til overskriften anvendes ikke. En Header-skabelon gør intet, før den har en visningstilstand. Indstil Hele webstedet i temabyggeren, og kontroller, at ingen temaoverskrift dækker det.
3. På en telefon er menuen bag hamburgeren. Telefoner viser vippen i stedet for linkene. Hvis vippefarven matcher headerbaggrunden, er ikonet usynligt, og menuen ser ud til at mangle. Giv vippen en kontrastfarve i Stil > Hamburger.
4. Caching eller forsinket JavaScript. En sidecache kan betjene den gamle overskrift, og JavaScript-forsinkelse kan stoppe dropdowns og skiften fra at virke, indtil den besøgende flytter musen. Ryd cachen og udeluk menuscripts fra JS-forsinkelse.

Hvad har brug for Master Addons Pro

To dele af denne opsætning har brug for Master Addons Pro.

Hamburger på desktop eller tablet, plus Popup og Offcanvas typerne. Layout tilbyder Vandret og Lodret på hver enhed, med Hamburger mærket Pro. Telefoner får Standard hamburger ud af boksen, men Hamburger på bredere skærme og Popup eller Offcanvas typerne har brug for Pro. Så en glidende off-canvas menu er en betalt funktion her, gennem Hamburger layout eller den separate off-canvas indhold widget, som åbner enhver gemt skabelon i et panel. Uden Pro er den nærmeste mulighed Lodret layouts Sidetype.

Tema Builder målretning er én regel. Den gratis Theme Builder gemmer præcis én visningstilstand: Hele webstedet. En anden overskrift på en landingsside eller for loggede medlemmer har brug for Pro. Vores displaybetingelser opdeling forklarer, hvordan tilstandsregler fungerer, og den gratis Theme Builder guide dækker resten af det niveau.

Widgetten har ingen hover pointer animationer (Elementor Pros menu har dem) og ingen klæbrig indstilling på nogen plan. For at holde overskriften i udsigt, skal du bruge Elementor Pros Bevægelseseffekter på overskriftsbeholderen, eller tilføje selector { position: sticky; top: 0; z-index: 99; } til beholderen gennem Master Addons Brugerdefineret CSS udvidelse. Den Sticky Header Guide går gennem begge.

Hvis du allerede ejer Elementor Pro, gælder intet af dette. Den widgets og udvidelser bibliotek viser resten af plugin'et, og hvis overskriften har brug for en sektion, bliver du ved med at genopbygge i hånden Widget Builder (Pro) gør det til en rigtig widget. Den prissætning side lister niveauerne.

Ofte stillede spørgsmål

Hvad skal man gøre næste

Byg overskriften med et Vandret layout og en eller to undermenuer, og indlæs den derefter på din egen telefon, før du styler noget andet. De fleste menuproblemer er mobilproblemer, og de vises på ti sekunder på en rigtig enhed. Hvis menuen har brug for paneler med flere kolonner, skal mega menu guide henter derfra, og den Nav Menu dokumentation viser hver kontrol.

• Nav Menu widget side: layouts, live demoer og en sammenligning med Elementor Pros menu widgets.
• Mega Menu udvidelse: flersøjlede paneler med enhver Elementor widget indeni.
• Trækul navbar med mega menu demo: en fuld header bygget med begge.

Relateret læsning

• Hvad Er en Mega Menu? Definition, Eksempler og Hvornår skal man bruge en
• Hvordan man opbygger en Restaurant Mega Menu i Elementor
• Sådan oprettes en One Page Website Med Elementor
• Sådan redigeres sidefod i WordPress ved hjælp af Elementor Without Pro