Een mobiele pagina (Mobile Page) is een tweede, smalle kopie van een pagina, speciaal gemaakt voor telefoons. U bouwt hem op 480 pixels breed en koppelt uw desktoppagina eraan. Opent iemand de desktoppagina op een telefoon, dan stuurt EverWeb hem automatisch door naar de mobiele pagina. Uw desktopontwerp blijft precies zoals het is.
Wanneer u dit gebruikt
- Een pension heeft zijn website in iWeb gebouwd en vindt hem mooi zoals hij is. Het wil dat bezoekers op een telefoon de prijzen en een knop Boeken zien zonder in te zoomen.
- Een loodgieter wil een telefoonversie van de startpagina die op één scherm past: telefoonnummer, werkgebied en een contactformulier.
- Een koor wil zijn concertdata leesbaar maken op een telefoon, terwijl de volledige desktoppagina's blijven zoals ze zijn.
Mobiele pagina of responsief?
Gebruik mobiele pagina's als uw website de lay-out Gecentreerd heeft en u tevreden bent met het ontwerp. Begint u opnieuw of hebt u veel pagina's, dan hebben responsieve pagina's maar één ontwerp per pagina nodig. Zie Moet ik mijn EverWeb-website opnieuw ontwerpen voor mobiele apparaten?
Om uw paginatype te controleren, selecteert u een pagina en gaat u naar Details > Pagina instellingen > Layout. Daar moet Gecentreerd staan. Wijzig de Layout van een bestaande pagina niet: dat kan uw ontwerp door elkaar halen, en u kunt het niet ongedaan maken.
1. Voeg de mobiele pagina toe
- Klik in de knoppenbalk op Pagina toevoegen.
- Gebruik in het venster voor het kiezen van een themasjabloon het filtermenu om alleen sjablonen met Vaste breedte te tonen, kies uw thema en selecteer de paginastijl Mobiel ervan. Klik op Kies.
- Geef de pagina een andere naam, zodat u hem kunt herkennen, bijvoorbeeld Home Mobiel.
Heeft uw thema geen stijl Mobiel? Voeg dan een willekeurige pagina met de lay-out Gecentreerd toe en zet Inhoud breedte: op 480 in Details > Pagina instellingen > Layout.
Gebruiken uw pagina's een Hoofd Sjabloon, geef uw mobiele pagina's dan een eigen Hoofd Sjabloon van 480 pixels breed. Een pagina neemt de breedte over van zijn Hoofd Sjabloon. Zie Dezelfde koptekst, menu en voettekst op elke pagina met een Hoofd Sjabloon.
2. Stel hem in als telefoonpagina
Ga met de mobiele pagina geselecteerd naar Details > Pagina instellingen:
- Laat in Mobiel Instellingen Mobiel pagina: op Geen staan en vink Deze pagina is voor mobiele apparaten aan. Dit laat zoekmachines weten dat het de telefoonversie van uw desktoppagina is, en geen duplicaat.
- Haal het vinkje weg bij Toevoegen aan navigatie menu, zodat de mobiele pagina niet in uw desktopmenu verschijnt.
3. Voeg uw inhoud toe
Kopieer wat bezoekers op een telefoon nodig hebben van de desktoppagina (Wijzig > Kopieer, daarna Wijzig > Plak op de mobiele pagina), en zet het onder elkaar in één kolom.
- Houd: uw logo, telefoonnummer, adres, openingstijden, de hoofdfoto en de knoppen waarvoor mensen komen.
- Vereenvoudig: kolommen naast elkaar, brede tabellen, lange teksten en decoratieve afbeeldingen.
- Zet elke alinea in een eigen tekstvak. Eén groot tekstvak zorgt ervoor dat tekst op een telefoon in elkaar wordt gedrukt of overlapt.
- Maak knoppen groot genoeg om op te tikken, en tekst groter dan op uw desktoppagina.
Het menu: voeg een navigatiebalk toe, ga naar Details > Widget instellingen en vink Responsieve navigatiebalk aan onder Responsieve opties. Op een pagina van 480 pixels verschijnt hij als een menuknop (drie streepjes). Hij toont uw desktoppagina's: tikt een bezoeker op een telefoon er een aan, dan stuurt die pagina hem door naar zijn eigen mobiele pagina, als die er is.
4. Koppel de desktoppagina eraan
- Selecteer de desktoppagina.
- Ga naar Details > Pagina instellingen > Mobiel Instellingen.
- Zet Mobiel pagina: op Een van mijn pagina's en kies daarna de mobiele pagina bij Pagina.
Herhaal stap 1 tot en met 4 voor elke pagina die u op telefoons wilt hebben. Pagina's zonder mobiele pagina openen op een telefoon nog steeds op desktopbreedte.
5. Test het en publiceer daarna
- Klik in de knoppenbalk op Voorbeeld, kies Preview QR Code (QR-code voor voorbeeld) en scan de code met de camera van uw telefoon. Uw telefoon en computer moeten op hetzelfde wifinetwerk zitten. Open de desktoppagina: die moet doorspringen naar de mobiele pagina.
- Ga naar File > Publiceer hele site.
- Controleer het op uw telefoon in een privévenster.
Alleen schermen die smaller zijn dan 700 pixels, dus telefoons, gaan naar de mobiele pagina. Tablets en computers zien de desktoppagina.
Pagina's met een wachtwoord
Simple Password beveiligt mappen. Houd elke pagina en zijn mobiele pagina aan dezelfde kant: mobiele pagina's van openbare pagina's buiten de beveiligde map, en mobiele pagina's van beveiligde pagina's erin. Anders wordt bezoekers op een telefoon om een wachtwoord gevraagd op een openbare pagina. Zie Kan ik mijn website met een wachtwoord beveiligen? Simple Password en Membership Sites
Twee pagina's om bij te houden
Elke wijziging op een desktoppagina, zoals nieuwe prijzen of data, moet u ook op de mobiele pagina doorvoeren. Wordt dat te veel, overweeg dan responsieve pagina's.
Veelvoorkomende problemen
| Wat u ziet | Wat u doet |
|---|---|
| Een telefoon toont nog steeds de desktoppagina | Controleer of Mobiel Instellingen van die pagina naar de juiste mobiele pagina verwijst, publiceer en controleer in een privévenster |
| Een telefoon vraagt om een wachtwoord | De mobiele pagina staat in een beveiligde map. Haal hem eruit, of laat de desktoppagina naar een andere pagina verwijzen |
| Een iPad toont de desktoppagina | Zo werkt het: alleen telefoons gaan naar de mobiele pagina |
| Er verschijnt iets op elke mobiele pagina | Het staat op het mobiele Hoofd Sjabloon. Bewerk of verwijder het daar |
| Tekst overlapt of wordt in elkaar gedrukt | Zet elke alinea in een eigen tekstvak. Minimale Lettergrootte is bedoeld voor responsieve pagina's, dus laat die hier op 0 staan |
Gerelateerde artikelen
- Mijn website ziet er verkeerd uit op een telefoon: zo werkt mobiel in EverWeb
- Moet ik mijn EverWeb-website opnieuw ontwerpen voor mobiele apparaten?
- Mijn website ziet er op mijn computer goed uit, maar is op mijn telefoon afgesneden of door elkaar
- Een responsieve pagina bouwen met Containers, zodat alles netjes onder elkaar komt op een telefoon
- Kan ik mijn website met een wachtwoord beveiligen? Simple Password en Membership Sites