Navigation Menu

Elementet navigation menu lägger till en navigeringsmeny högst upp på din funnel-sida. Det är användbart för att länka till olika sektioner på sidan eller till andra sidor i din funnel. När du lägger till elementet navigation menu får du redigeringsalternativ på vänster sida.

General Settings

Element Name

I avsnittet General Settings hittar du standardnamnet för det Edit-alternativ du arbetar med just nu. Du kan behålla det som det är eller byta namn till något mer beskrivande. Att byta namn på elementet rekommenderas starkt eftersom det hjälper dig att identifiera det enkelt senare när du granskar din lista över funnel-element.

Menu Items

Funktionen Menu Items låter dig inkludera viktiga navigeringsalternativ som Home, About, Team och Contact Menus i webbplatsens navigeringsfält. Du kan lägga till fler alternativ genom att klicka på knappen ”+ Add Item”.

Line Height

Med funktionen Line Height kan du öka det vertikala avståndet mellan textradererna genom att antingen justera storleksreglaget eller skriva in ett tal i det avsedda fältet. Den här anpassningen ger förbättrad läsbarhet och estetik för ditt innehåll.

Text Transform

Med funktionen Text Transform kan du ändra textformatet till Uppercase, Lowercase eller kapitalisera varje ord. Den här anpassningen låter dig modifiera textstilen för förbättrad visuell attraktionskraft och läsbarhet.

Letter Spacing

Funktionen Letter Spacing låter dig justera avståndet mellan varje bokstav i din text.

Text Align

Med funktionen Text Align kan du justera positioneringen av din text efter önskemål. Du har möjlighet att positionera den till vänster, centrerat, höger eller som justerad.

Font Weight

För både Desktop- och Mobile Views kan du justera tjockleken på din text med funktionen Font Weight.

Typography Type

Rullgardinsmenyn Typography Type ger dig alternativ för typsnittet i ditt navigeringsfält. Du kan välja att använda headline- eller content-typsnittet som du ställt in under settings, eller välja ett custom font. Med alternativet custom font kan du sedan välja bland en mängd typsnitt via en ytterligare rullgardinsmeny.

Mobile View Icon

Du kan lägga till en ikon på din sida genom att helt enkelt välja bland tillgängliga ikoner. Om du har en specifik ikon i åtanke kan du skriva den i sökfältet för att begränsa alternativen.

Dropdown Icon

Lägg till en dropdown-ikon i din meny genom att välja bland tillgängliga alternativ i stilredigeraren. Ikonen indikerar när ett objekt kan expanderas, och den inkluderar en mjuk rotationsanimation. 

Font Size

Justera typsnittsstorleken för en viss text/innehåll för både mobil och desktop enkelt genom att dra i storleksreglagen. Den här funktionen gör det möjligt att anpassa det visuella utseendet på ditt innehåll för optimal användarupplevelse. Du kan förhandsgranska den mobila typsnittsstorleken för att säkerställa att den är korrekt formaterad genom att växla till mobile view i den övre menyraden i byggaren.

Spacing Option

Funktionen Spacing Option erbjuder en mängd avståndsalternativ för att justera ditt innehåll. Det är viktigt att komma ihåg att inställningarna bara gäller för det Edit-alternativ du arbetar med just nu.

Padding Left, Right, Top, and Bottom: Alternativen Padding Left, Right, Top och Bottom inkluderar fyra reglage som låter dig flytta ditt innehåll till vänster, höger, uppåt eller nedåt, beroende på vilket reglage du klickar på. Du kan justera avståndet genom att dra i reglaget för att öka eller minska det utrymme du vill ha.

Margin Top and Bottom: Genom att justera reglagen för Margin Top och Bottom kan du ställa in det övre eller nedre marginalvärdet för ditt innehåll. Dra i reglaget för att öka eller minska storleken på din marginal. Det lägger till negativt utrymme ovanför eller under ditt element, beroende på vilken marginal du justerar.

1. Menu Item Alignment: Den här funktionen hjälper dig att styra den övergripande layouten och avståndet mellan objekten så att din navigeringsmeny både är visuellt tilltalande och funktionell. 
2. Menu Item Spacing: Under Menu Item Spacing Options kan du justera avståndet mellan dina menyobjekt. Gör det genom att flytta reglaget för att öka värdet tills du når önskat avstånd. Du kan också ange ett önskat tal i rutan för att säkerställa att elementet är rätt placerat.
3. Business Name: Växla på den här funktionen för att lägga till ett företagsnamn i menyn. Att växla på detta registrerar dock inte ditt företag hos juridiska myndigheter.

Menu Item Direction

Menu Item Direction låter dig välja mellan att visa ditt navigeringsfält i standardordning eller omvänd ordning.

Background Color

För att ändra bakgrundsfärgen på din navigeringsmeny klickar du helt enkelt på önskat färgalternativ. Den här funktionen gör det möjligt att anpassa utseendet och känslan på din meny för desktop-enheter.

Mobile Background Color

För att ändra den mobila bakgrundsfärgen på din navigeringsmeny klickar du på önskat färgalternativ. Det gör att du kan anpassa utseendet på din meny för mobila enheter och förbättra läsbarheten och användarupplevelsen.

Du kan också se färgändringen när du öppnar Hamburger Menu i desktop-vyn.

Color Options

Funktionen Color Options gör det möjligt att justera olika text- och ikonfärger efter dina preferenser.

• Background Color: Låter dig ändra bakgrundsfärgen på ditt navigeringsfält eller sektion för desktop-vy. Du kan välja en färg från paletten.
• Mobile Background Color: Anpassar bakgrundsfärgen för din navigeringsmeny specifikt i mobile view, så att designen hålls sammanhängande över enheter.
• Popup Background Color: Justera bakgrundsfärgen för eventuella popups som är kopplade till din navigeringsmeny, till exempel dropdown-menyer.
• Mobile Popup Background Color: Låter dig ställa in bakgrundsfärgen för popups som visas i mobile view, vilket förbättrar läsbarhet och stil.
• Color: Styr textfärgen när den är i sitt standardformat (ej fet, ej kursiv). Du kan välja valfri nyans för att matcha din branding.
• Hover Background Color: Du kan ändra bakgrundsfärgen för Hover här. Det fungerar bara i Desktop-vyn.
• Hover Text Color: Du kan ändra färgen på din Hover här.
• Bold Text Color: När en text är i fet stil kan du ändra färgen här
• Italic Text Color: Du kan bara redigera en kursiv textfärg här. För att göra en text kursiv måste du markera texten och sedan klicka på den snedställda “I”-ikonen.
• Underline Text Color: Du kan bara redigera en understruken textfärg här. För att understryka din text måste du markera texten och sedan klicka på den understrukna “U”-ikonen.
• Icon Color: Om du har lagt till en ikon på den här sidan kan du bara redigera ikonfärgen här. Endast ikonfärgen ändras oavsett var den är placerad.

Brand Logo Config

• Genom att växla på knappen “Logo in Menu” kan du placera din varumärkeslogotyp i det vänstra hörnet av din navigeringsmeny, vilket ger enklare tillgänglighet till din webbplats. När du växlar på knappen blir redigeringsalternativ tillgängliga.
• Brand Logo: Du kan lägga till din varumärkeslogotyp i menyn genom att klicka på bildikonen till höger om det avsedda utrymmet. Det leder dig till importsidan, där du kan ladda upp din logotypbild. Därefter klickar du på urklippsikonen i det övre högra hörnet av sidan för att kopiera bildens URL. Du kan lämna importsidan och klistra in URL:en i det angivna Brand logo-utrymmet.
• Optimize Image load: Se till att din logotypbild är optimerad för snabb laddning genom att komprimera den till en lämplig storlek innan uppladdning. Det hjälper till att förbättra sidhastigheten och den övergripande användarupplevelsen.
• Width and Height: I det här avsnittet Width and Height kan du justera bredden och höjden på din varumärkeslogotyp till önskad storlek så att den passar din meny. Du kan behöva prova dig fram med olika kombinationer av tal för att få rätt passform.
• Alt Text (for SEO): Dra nytta av funktionen Alt Text för att ange SEO-nyckelord som är relevanta för ditt varumärke i navigeringsfältets sektion. Det gör att ditt varumärke kan visas i relevanta sökfrågor på sökmotorer.

Image Actions

I funktionen Actions har du en mängd alternativ att välja bland.

• Open popup: Den här åtgärden låter dig visa en popup när bilden klickas. Du kan anpassa popup-innehållet och designen utifrån dina krav.
• Go to Website URL: När du väljer “Go to website URL” i ikonen “Image Action” behöver du ange vilken webbplatssida du vill leda dina besökare till.
• Hide & Show Elements: Använd den här åtgärden för att växla synligheten för specifika element på sidan. Du kan ställa in bilden så att den antingen döljer eller visar valda element vid interaktion.
• Scroll to Element: Genom att välja den här åtgärden kan du skapa en mjuk scroll-effekt som leder besökare till en specifik sektion på sidan när bilden klickas.
• Step: Använd den här åtgärden för att gå till ett specifikt steg i din funnel när bilden klickas. Det är särskilt användbart för flerstegsfunnels.
• Next Step: Det här alternativet flyttar automatiskt besökare till nästa steg i din funnel när bilden klickas.
• Call: Ställ in bilden så att den initierar ett telefonsamtal till ett fördefinierat nummer när den klickas. Den här åtgärden är idealisk för att uppmuntra direkt kommunikation med din målgrupp.
• SMS: Använd den här åtgärden för att skriva och skicka ett textmeddelande till ett fördefinierat nummer när bilden klickas.
• Email address: Konfigurera bilden så att den öppnar användarens standard-e-postklient med en förifylld mottagaradress, ämne eller brödtext, vilket gör det enkelt för besökare att kontakta dig.”

Advanced Settings

Under Advanced Settings får du ytterligare anpassningsalternativ.

Funktionen Border Options gör det möjligt att välja vilken typ av kant du vill ha för ditt innehåll. När du har valt någon av de tillgängliga kanttyperna visas inställningarna för kanten, inklusive thickness, Color, Radius och Style.

Shadow

Den här funktionen låter dig lägga till en skugga bakom ett element, vilket skapar en känsla av djup och får navigeringsmenyn att sticka ut mer tydligt mot bakgrunden.

Visibility

För att bestämma var ett visst redigeringsalternativ ska synas kan du välja antingen mobila enheter, datorer eller båda genom att klicka på relevant ikon. Den här funktionen låter dig välja var dina redigeringar ska synas och ger större kontroll över ditt innehåll.

Custom Class

Funktionen Custom Class låter dig ange din specifika class till ditt innehåll. Tryck på enter eller mellanslag för att lägga till en class.

CSS Selector

När du är klar med uppsättningen av ditt navigeringsfält får du möjligheten att kopiera Custom CSS för användning någon annanstans. Klicka helt enkelt på kopieringsikonen till höger om referenskoden för att kopiera koden.

Genom att använda Navigation Menu Element kan du skapa en elegant och användarvänlig navigeringsupplevelse för dina besökare. Med omfattande anpassningsalternativ har du full kontroll över menyns utseende och funktionalitet, så att den matchar ditt varumärke perfekt och ökar användarengagemanget.