Tilpas din mobilside med Velo

Skab Dynamiske Mobiloplevelser med Velo

I dagens digitale verden er en mobiloptimeret hjemmeside ikke bare en fordel, det er en nødvendighed. Flertallet af internettrafik kommer fra mobile enheder, og derfor er det afgørende at kunne tilbyde en skræddersyet oplevelse til dine mobile besøgende. Wix giver dig kraftfulde værktøjer til at opnå dette, og med Velo, deres udviklingsplatform, kan du tage din mobiloptimering til det næste niveau ved at vise eller skjule specifikke elementer baseret på den enhed, din besøgende bruger. Dette åbner op for en verden af muligheder for at levere målrettet information, fremhæve særlige tilbud eller simpelthen skabe en mere personlig interaktion.

Hvorfor Tilpasse Din Mobilside?

At dedikere tid til at tilpasse din mobilside kan have en markant positiv effekt på din online tilstedeværelse. Her er nogle af de vigtigste grunde:

• Forbedret Brugeroplevelse: En side, der er optimeret til mobile enheder, er lettere at navigere og interagere med. Dette reducerer frustration og øger sandsynligheden for, at besøgende bliver længere og engagerer sig med dit indhold.
• Øget Konverteringsrate: Ved at præsentere relevant information og klare opfordringer til handling (CTA'er) på det rigtige tidspunkt og på den rigtige enhed, kan du effektivt guide dine besøgende mod at udføre ønskede handlinger, som f.eks. at foretage et køb eller tilmelde sig et nyhedsbrev.
• Stærkere Brandopfattelse: En professionel og velfungerende mobiloplevelse signalerer, at du værdsætter dine kunder og er opmærksom på de nyeste teknologier og brugeradfærd.
• Bedre SEO: Søgemaskiner som Google prioriterer mobilvenlige hjemmesider. En optimeret mobiloplevelse kan derfor forbedre din placering i søgeresultaterne.

Sådan Viser Du Elementer Kun på Mobilen med Velo

Wix's Velo giver dig mulighed for at styre elementernes synlighed baseret på enhedstypen. Dette gøres ved at skjule elementet som standard og derefter bruge kode til at vise det, når siden besøges fra en mobil enhed. Lad os gennemgå de grundlæggende trin:

Trin 1: Aktiver Velo Dev Mode

Før du kan begynde at kode, skal du sikre dig, at Velo Dev Mode er aktiveret på din Wix-side. Dette gøres typisk via Wix Studio eller Wix Editor.

• Wix Studio: Klik på "Start Coding" (eller lignende) i din editor.
• Wix Editor: Gå til "Dev Mode" i menuen og vælg "Turn on Dev Mode".

Trin 2: Tilføj og Skjul Dit Element

Tilføj det element, du ønsker at vise specifikt på mobilen, til din side. Dette kan være en tekstboks til en særlig meddelelse, en knap til en mobil-specifik funktion, eller et billede. Når elementet er tilføjet, skal du skjule det som standard:

1. Vælg elementet på din side.
2. I "Properties & Events" panelet, markér afkrydsningsfeltet ud for "Hidden". Dette sikrer, at elementet ikke vises, når siden indlæses.
3. Notér dig elementets ID. Dette er vigtigt for at kunne referere til det i koden. Du finder ID'et i "Properties & Events" panelet.

Trin 3: Implementer Koden

Nu skal vi skrive den kode, der styrer elementets synlighed. Koden vil tjekke, hvilken type enhed der bruges til at tilgå siden, og derefter vise elementet, hvis det er en mobil enhed.

Åbn din kodeeditor (typisk et vindue kaldet "Code" eller lignende). Du vil sandsynligvis se noget forudskrevet kode. Følg disse instruktioner:

1. Importer nødvendige moduler: Tilføj følgende linje øverst i din kode for at kunne arbejde med enhedsdetektering:

import wixWindowFrontend from 'wix-window-frontend';

2. Tjek enhedstypen og vis elementet: Erstat de eksisterende linjer (typisk linje 2-6) med følgende kode. Denne kode tjekker enhedstypen og styrer synligheden af dit element:

$w.onReady(function () { // Tjek om siden vises på en mobil enhed if (wixWindowFrontend.isMobile()) { // Vis elementet, hvis det er en mobil enhed $w("ditElementId").show(); } else { // Skjul elementet, hvis det ikke er en mobil enhed (valgfrit, da det allerede er sat til skjult) $w("ditElementId").hide(); } });

Vigtigt: Erstat "ditElementId" med det faktiske ID for det element, du har tilføjet og skjult i Trin 2. Hvis dit element f.eks. hedder "mobileMessage", skal koden se således ud:

$w.onReady(function () { if (wixWindowFrontend.isMobile()) { $w("#mobileMessage").show(); } else { $w("#mobileMessage").hide(); } });

Bemærk: Wix bruger ofte `#` foran element ID'er i koden.

Flere Elementer til Mobilvisning

Hvis du har flere elementer, du ønsker at vise specifikt på mobilen, skal du gentage Trin 2 for hvert element og derefter tilpasse koden:

1. Følg Trin 2 for hvert ekstra element, du vil styre. Husk at notere deres unikke ID'er.
2. Tilføj en ny linje efter den eksisterende kodeblok, der håndterer det første element. Du kan kopiere og indsætte logikken for det første element og derefter ændre elementets ID.

Eksempel med to elementer ("mobileMessage" og "specialOfferButton"):

import wixWindowFrontend from 'wix-window-frontend'; $w.onReady(function () { // Første element: Mobil meddelelse if (wixWindowFrontend.isMobile()) { $w("#mobileMessage").show(); } else { $w("#mobileMessage").hide(); } // Andet element: Særligt tilbud knap if (wixWindowFrontend.isMobile()) { $w("#specialOfferButton").show(); } else { $w("#specialOfferButton").hide(); } });

Hvordan Tilføjer Man Elementer til Sin Mobilsite?

Udover at styre synligheden af eksisterende elementer, kan du også tilføje helt nye elementer specifikt til din mobilsite. Dette kan være alt fra indlejrede widgets, tredjeparts apps, til brugerdefinerede elementer der indeholder særlige funktioner, animationer eller information, der er mest relevant for en mobilbruger. Wix's "Add Elements" menu giver dig et bredt udvalg af muligheder, som du derefter kan placere og designe til at passe perfekt til din mobile layout.

Overvejelser for en Optimal Mobiloplevelse

Når du designer og tilpasser din mobilside, er der flere vigtige principper at huske på:

Ofte Stillede Spørgsmål om Mobil-Elementer

Kan jeg vise forskellige billeder på mobil og desktop?

Ja, absolut. Du kan tilføje et billede til din side, skjule det som standard, og derefter bruge Velo-kode til at vise det specifikt på mobile enheder, mens du måske har et andet, større billede sat til at blive vist på desktops.

Skal jeg kode for hvert enkelt element?

Hvis du vil have hvert element til at opføre sig forskelligt, ja. Men hvis du har en gruppe af elementer, der skal vises eller skjules samlet, kan du gruppere dem og anvende koden på gruppen. For flere individuelle elementer, som vist i eksemplet ovenfor, skal du tilføje logikken for hvert element.

Hvad hvis jeg vil vise et element kun på desktop?

Logikken er den samme, men du ville vende betingelsen om. Du ville skjule elementet som standard og så bruge Velo til at vise det, hvis `!wixWindowFrontend.isMobile()` er sandt (dvs. hvis det IKKE er en mobil enhed).

Hvad er "Hidden" checkbox?

Dette er en indstilling i Wix's "Properties & Events" panel, der sikrer, at et element ikke vises, når siden indlæses. Det er det første skridt i at kontrollere et elements synlighed med kode.

Ved at mestre disse teknikker med Velo, kan du skabe en langt mere engagerende og effektiv oplevelse for dine mobile brugere. Det handler om at levere det rette indhold, på den rette måde, til den rette person, på det rette tidspunkt.

Hvis du vil læse andre artikler, der ligner Tilpas din mobilside med Velo, kan du besøge kategorien Mobil.