Ontwerp - Pagina indeling

Geschreven door Wim - {$BlogTitle}
Geschreven door: Wim
Datum: Vrijdag 17 juli 2020

Rechts bevinden zich horizontaal de tabs van de editor. In de afbeelding hieronder is als voorbeeld de tab Instellingen actief.

Ontwerp
 

Rechts bevinden zich vertikaal de tabs voor de instellingen. In de afbeelding hieronder staat als voorbeeld de tab Algemeen.

Basis

Een betaalpagina van Peggy Pay is ingedeeld in 3 hoofd-secties:

  • Het hoofdpaneel
  • Het zijpaneel
  • Het onderpaneel

Het hoofdpaneel

Het hoofdpaneel is het belangrijkste gedeelte. Dit is waar je de blokken zoals naam en e-mail neerzet. Maar ook keuze-blokken of andere blokken zet je hier neer. Dit is dus het hoofdgedeelte van je pagina. Dit paneel kan als enige paneel gebruik maken van meerdere paginas waarbij je het formulier splitst over meerdere paginas

Zijpaneel

Dit zijpaneel is een oplossing voor grotere betaalpaginas. Als je formulier lang is geworden door bijvoorbeeld veel invoer-blokken of keuze-blokken, wil je vaak dat het betaaloverzicht altijd in beeld is. Hier is exact het zijpaneel voor.  Hierin plaats je idealiter het Betalen-blok, je algemene voorwaarden en natuurlijk de Verzend-knop. Ook het kassakoopje doet het hier erg goed. Zo heb je de belangrijkste afrekenblokken altijd zichtbaar op je betaalpagina.

Onderpaneel

Het onderpaneel is altijd in beeld, ook als je paginatie gebruikt. Het wordt vaak gebruikt om reviews of algemene teksten te plaatsen die je niet direct in het zicht wilt hebben. In dit paneel kunnen dan ook enkel informatieve blokken worden geplaatst, zoals reviews, tekst en afbeeldingen.

Bewerken en vullen van een paneel

Wanneer je voor een extra paneel kiest verschijnt er in de editor een nieuw tabblad: Zijpaneel danwel Onderpaneel, onder de tab Opmaak. Hierin stel je je alle kleuren en instellingen in van dit paneel.

Om een ander paneel te openen in de editor klik je op deze tab:

Om makkelijk blokken van of naar een ander paneel te verplaatsen, selecteer je eerst het blok dat je wilt verplaatsen, en klik daarna op dit icoontje:

Verder lezen? Custom CSS voor blok-opmaak