Kennisbank

Een responsieve pagina is één pagina die zich aanpast aan elk scherm. U bouwt hem op uit secties die onder elkaar op de pagina staan, en met Containers zet u dingen op een computer naast elkaar en op een telefoon onder elkaar. Voor de paar objecten die op een precieze plek moeten staan, zoals een badge op een foto, vinkt u Vrij verplaatsbaar aan en zet u ze vast.

Voordat u begint

• Controleer het soort pagina. Selecteer de pagina en ga naar Details > Pagina instellingen > Layout. Daar moet Responsief staan. Staat er Gecentreerd, zie dan Mijn website ziet er verkeerd uit op een telefoon: zo werkt mobiel in EverWeb.
• Wilt u een bestaande pagina responsief maken? Als u de Layout wijzigt, kan uw hele ontwerp door elkaar raken, en dat kunt u niet ongedaan maken. Het is veiliger om een nieuwe pagina toe te voegen en uw inhoud daarnaartoe te verplaatsen: klik op Pagina toevoegen, kies Responsief in het filtermenu boven in de themakiezer (Theme Template Chooser), kies Blank Responsive (leeg responsief thema) en de paginastijl Home, en klik op Kies.

Hoe een responsieve pagina is opgebouwd

Elk object met Volle breedte, en elke Container, is een sectie. Secties staan op elk scherm in dezelfde volgorde onder elkaar, en worden kleiner om te passen. Een Container schikt wat erin staat, en u kunt Containers in Containers zetten, bijvoorbeeld een Rij met twee Kolommen erin. Objecten die geen Volle breedte kunnen hebben, zoals sommige widgets, moeten in een Container staan. Houd ze ongeveer 280 tot 320 pixels breed, zodat ze op een telefoon passen.

Een Container toevoegen

1. Klik op Containers in de knoppenbalk.
2. Kies Containerrij, Containerkolom of Vrije stroom van container.
3. Sleep objecten erin, of klik op de knop + in het midden van de lege Container.

Staan de objecten al op de pagina? Shift-klik op elk object, klik met de rechtermuisknop (of Control-klik op een Mac), kies Bevatten als en dan Rij, Kolom of Vrije stroom.

Wilt u het later wijzigen, selecteer de Container dan door op een leeg deel ervan te klikken (of klik met de rechtermuisknop en gebruik Selecteer laag), ga naar Details > Widget instellingen (het tandwiel, het laatste pictogram) en wijzig Weergeven > Indeling.

De inhoud op een telefoon onder elkaar zetten

1. Rijen: zet in Widget instellingen > Weergeven de optie Omloop op Wrap (omloop). De objecten komen dan onder elkaar te staan als het scherm te smal wordt. De standaardwaarde, No Wrap (geen omloop), houdt ze op één regel.
2. Wilt u het tweede object op een telefoon bovenaan, zoals de foto boven de bijbehorende tekst? Zet Omloop op Reverse Wrap (omgekeerde omloop).
3. Objecten naast elkaar in een Rij: vink Volle breedte uit in Details > Formaten en geef elk object een breedte. Een object met Volle breedte in een Rij met omloop krijgt een eigen regel.
4. Objecten in een Kolom of direct op de pagina: vink Volle breedte aan en typ een Max. breedte, zodat ze op een groot scherm niet te ver uitrekken. Mijn website ziet er op mijn computer goed uit, maar is op mijn telefoon afgesneden of door elkaar vertelt hier meer over.
5. Laat de hoogte op Auto staan (Widget instellingen > Afmetingen), zodat de Container kan meegroeien als de inhoud onder elkaar komt te staan.

Eén object precies plaatsen: Vrij verplaatsbaar en vastzetten

In EverWeb 4.5 en hoger kunt u een object overal op een responsieve pagina plaatsen, direct op de pagina of in een Container:

1. Selecteer het object en ga naar Details > Formaten.
2. Vink Vrij verplaatsbaar aan en sleep het object naar de plek waar u het wilt hebben.
3. Klik op Pin Settings (vastzetinstellingen) en kies waar u het wilt vastzetten, bijvoorbeeld boven en rechts. Vink Constrain to edge (aan de rand vasthouden) aan om het precies tegen die rand te houden.

Een vrij geplaatst object duwt niets anders naar beneden. Gebruik het voor een paar objecten, niet voor een hele pagina: als elk object vrij is geplaatst, komt er op een telefoon niets onder elkaar te staan. Om een object terug te zetten in de normale volgorde, vinkt u Vrij verplaatsbaar uit. Om een object uit een Vrije stroom-Container te slepen, houdt u tijdens het slepen Command (Mac) of Alt (Windows) ingedrukt.

Waarom geen Responsieve rijen?

Responsieve rijen zijn de oudere versie van Containers, en we raden ze niet meer aan voor nieuwe pagina's. Uw bestaande rijen blijven werken.

Om er een te vervangen, voegt u ernaast een Containerrij toe, sleept u de objecten erheen en verwijdert u daarna de lege Responsieve rij. Als u die verwijdert, wordt alles wat er nog in staat ook verwijderd. Controleer dus eerst of hij leeg is, en gebruik zo nodig Wijzig > Herstellen.

In welke Container staat dit object?

Klik met de rechtermuisknop op het object en kies Insluiten. De lijst toont de Container waar het in staat en laat u het naar een andere verplaatsen. Geef uw Containers namen in Widget instellingen, zoals "Koptekst" of "Diensten", zodat de lijst duidelijk is. Voor het selecteren van verborgen of overlappende objecten, zie Waarom gaat dit niet naar de plek waar ik het naartoe sleep?.

Controleren of het werkt

Maak het EverWeb-venster smaller door het te verslepen en kijk hoe de pagina zich aanpast. Klik daarna op Voorbeeld, kies Preview QR Code (QR-code voor voorbeeld) en scan die met uw telefoon. Niets mag opzij schuiven of boven op iets anders staan. Gebeurt dat wel, zie dan Mijn website ziet er op mijn computer goed uit, maar is op mijn telefoon afgesneden of door elkaar.

Weinig tijd? Wij kunnen uw website voor u opnieuw bouwen als responsieve website. Vraag de support om een vrijblijvende offerte.

Gerelateerde artikelen

• Mijn website ziet er verkeerd uit op een telefoon: zo werkt mobiel in EverWeb
• Mijn website ziet er op mijn computer goed uit, maar is op mijn telefoon afgesneden of door elkaar
• Waarom gaat dit niet naar de plek waar ik het naartoe sleep?
• Dezelfde koptekst, menu en voettekst op elke pagina met een Hoofd Sjabloon