Customizable template
Last updated
Last updated
Met de customizable template kunt u zelf een responsive pagina bestaande uit rijen en kolommen bouwen. U kunt zoveel rijen en kolommen toevoegen aan een pagina als u wilt, om zo uw ideale responsive pagina te creëren. Your browser does not support the video tag.
U start met het bouwen van uw template door eerst een rij toe te voegen aan de pagina. Selecteer hiervoor een rij uit de lijst met rijen. U kunt na het kiezen de rij nog volledig aanpassen, dus u kunt rustig even uitproberen met welke verdeling u wilt gaan werken.
Uit het keuze-menu kunt u kiezen of u met een rij met één kolom wilt werken, of met meerdere kolommen. Een gekozen rij bestaat altijd uit minimaal één kolom.
Met de plus icon kunt u een kolom toevoegen aan de rij. U kunt zoveel kolommen toevoegen aan een rij als u wilt. Let wel op dat voor de breedte van de kolommen een maximum van “12” wordt gebruikt. Dit betekent dat kolommen maximaal “12” breed kunnen zijn, en mimimaal waarde “1” breed zijn. Er passen daarom maximaal 12 kolommen van breedte “1” op een rij. Voegt u meer kolommen toe aan dezelfde rij, of zijn uw kolommen in totaal breder dan “12”, dan zullen de kolommen op twee regels verspreid worden.
Met het prullenbakje kunt u een rij verwijderen. Wanneer u dit doet zullen alle kolommen in de rij dus ook direct verwijderd worden. Verwijdert u een rij dan doet u dat op alle resoluties, dus zowel op desktop grootte, als op tablet en smartphone weergaven.
Wanneer u een rij heeft geselecteerd worden de opties van de rij zichtbaar. Met de meest rechtse icon kunt u de zichtbaarheid van de rij uitschakelen voor een bepaalde beeldschermgrootte. Zo kunt u er bijvoorbeeld voor kiezen de rij op de kleinste weergave (smartphone) niet weer te geven.
Met het linker icon uit het menu kunt u de rijen die u met de toggle hebt verborgen tonen. Stel u wilt een rij verbergen op de desktop weergave, dan kunt u door met deze knop de rij te laten tonen wel zien wat er in de rij staat. De rij blijft echter wel verborgen. Wilt u de rij niet meer verbergen dan moet u de toggle knop gebruiken.
U kunt rijen en kolommen verplaatsen door ze te verslepen met het verplaatsen-icon. Dit vind u links bovenaan bij iedere rij en kolom.
Ook iedere kolom heeft een eigen menu. Met de eerste knop kunt u kolommen verslepen. U kunt op deze manier de volgorde veranderen waarop de kolommen worden vertoond. Als u de volgorde verandert, zal de nieuwe volgorde direct worden toegepast op alle resoluties. De volgorde van kolommen is dus altijd voor alle resoluties gelijk.
Het smaller en breder maken van de kolommen doet u met behulp van de pijltjes-knoppen uit het menu. Met het linker-pijltje maakt u de kolom smaller, met het rechter-pijltje maakt u hem breder. In het responsive template passen 12 kolommen naast elkaar. Eén kolom heeft daarom de maximale breedte van “12”. Kiest u bijvoorbeeld voor 4 gelijke kolommen, dan krijgen zij alle vier de breedte “3”, zodat het totaal weer “12” is.
Met het prullenbakje uit het kolom-menu kunt u de kolom uit de rij verwijderen. Wanneer u dit doet wordt de kolom op alle resoluties verwijderd. De kolom wordt dus zowel op de desktop weergave verwijderd, als op de tablet en smartphone weergave.
Helemaal rechts in het menu vindt u de toggle voor het uitschakelen van de zichtbaarheid van de kolom. Hiermee kunt u een kolom voor één resolutie uitschakelen. Schakelt u de kolom bijvoorbeeld uit voor de smartphone resolutie, dan wordt de kolom wel op desktop en tabletgrootte getoond, maar niet op de kleinste weergave.
Wanneer u op een gecreëerde kolom klikt, komt het tekst-editor menu tevoorschijn. De werking van dit menu vindt u hier.
De customizable template is een responsive template. U kunt daarom op drie verschillende formaten dezelfde pagina bewerken. Bovenaan in het hoofdmenu vindt u een desktop knop, een tablet knop en een smartphone knop. Met deze knoppen kunt u de weergave van uw template dus op drie formaten bewerken.
U kunt de breedte van de kolommen op ieder formaat aanpassen aan uw wensen. Daarnaast kunt u er ook voor kiezen om kolommen en/of rijen op bepaalde beeldschermformaten niet weer te geven.
Wanneer u één weergave heeft geselecteerd kunt u met de preview functie bekijken hoe uw pagina er op die weergave uitziet.
In dit voorbeeld hebben we op desktop formaat gekozen voor een rij met 2 kolommen, die beide even breed zijn. In de rechter kolom staat een interactieve Google Maps kaart, die men aan de voorkant zelf kan in- en uitzoomen.
Op tablet formaat hebben we er hier voor gekozen om de twee kolommen niet naast elkaar, maar onder elkaar weer te geven. Zo is er op de kleinere tablet schermen meer ruimte om het kaartje goed te kunnen gebruiken.
Op smartphones is het gebruik van een interactieve Google Maps kaart minder handig. Wanneer gebruikers op het kleine smartphone scherm naar beneden willen scrollen, is het lastig om langs het kaartje te komen zonder per ongeluk in of uit te zoomen. Daarom kiezen we er in dit voorbeeld voor om op de smartphone weergave het kaartje niet weer te geven. Kolom 2 moet dus op de smartphone resolutie worden verborgen.
Omdat we de locatie van het kaartje ook aan de smartphone gebruikers duidelijk willen maken creëren we een extra kolom. Hier komt, in plaats van een interactief Google Maps kaartje, een afbeelding van de locatie in.
Op deze manier wordt dus op de smartphone weergave niet de interactieve kaart weergegeven, maar een afbeelding.
Omdat we een nieuwe kolom hebben gecreëerd met de afbeelding, is deze kolom er op de tablet en desktop resoluties ook bijgekomen. Aangezien deze twee weergaven wél gebruik maken van het interactieve kaartje, hoeft deze kolom hier niet getoond te worden. We zetten de kolom dus uit bij de desktop weergave en de tablet weergaven.
Als we nu aan de voorkant kijken zien we het volgende:
Twee kolommen naast elkaar op desktop formaat. Een kolom met tekst, en een kolom met de interactieve Google Maps kaart (afbeelding 1).
Twee kolommen onder elkaar op tablet formaat. Een rij-brede kolom met tekst, en een rij-brede kolom met de interactieve Google Maps kaart (afbeelding 2).
Twee kolommen onder elkaar op smartphone formaat. Een kolom met tekst, en een kolom met de afbeelding van de locatie (afbeelding 3).
