De app gebruiken
Weergave
De pagina Weergave stylet alle tabellen in je winkel in één keer, zodat ze allemaal bij je merk passen. Een live voorbeeld op de pagina toont elke wijziging terwijl je hem maakt.
Klik op Opslaan in de balk bovenaan om je wijzigingen toe te passen. Elke actieve tabel in je webshop wordt meteen bijgewerkt — je hoeft tabellen niet één voor één opnieuw op te slaan. Wil je dat één tabel er anders uitziet? Zie één tabel een eigen stijl geven.
Tabelvenster
| Instelling | Wat het doet |
|---|---|
| Breedte | Smal (ideaal voor drie of vier kolommen), Middel (standaard), Breed (ruimte voor brede tabellen zonder horizontaal scrollen) of Extra breed (ideaal met productfoto’s naast de tabel). |
| Hoekradius | 0–24 px. Standaard 8 px. |
| Opvulling | 0–48 px. Standaard 24 px. Ruimte tussen de rand van de tabel en de inhoud. |
Kopgedeelte
De balk bovenaan de pop-up of lade.
| Instelling | Wat het doet |
|---|---|
| Productnaam tonen | Zet bovenaan de pop-up de naam van het product waarvandaan hij is geopend. Verborgen wordt hij nog steeds door schermlezers voorgelezen. |
| Achtergrond van het kopgedeelte | Laat leeg om de tabelachtergrond te gebruiken. |
| Titelkleur | Laat leeg om de tekstkleur te gebruiken. |
| Uitlijning van de titel | Links of Midden. |
| Sluitknop | Eenvoudig ✕, of ✕ in een gevulde cirkel. |
| Pictogramkleur | Het ✕ zelf. Laat leeg om de titelkleur te gebruiken. |
| Cirkelkleur | Voor de stijl met gevulde cirkel. |
Productfoto’s
| Instelling | Wat het doet |
|---|---|
| Productfoto's naast de tabel tonen | Toont de foto's van het product naast de tabel, met pijlen om erdoor te bladeren. Op grotere schermen alleen in de pop-up — lades zijn te smal. Combineer met het venster Extra breed. |
| Ook tonen op telefoons | Op telefoons staan de foto's boven de tabel, zowel in de pop-up als in lades. Uit: telefoons tonen alleen de tabel. |
Achtergrond
| Instelling | Wat het doet |
|---|---|
| Achtergrondkleur | Het vlak van de tabel. Standaard wit. |
| Tekstkleur | Lopende tekst — pas die samen met een donkere achtergrond aan, zodat de tabel leesbaar blijft. |
| Achtergrondafbeelding | Een afbeelding achter de hele tabel. |
| Afbeelding passen | Tabel vullen, Hele afbeelding passend maken of Herhalen (tegels). |
| Positie van de afbeelding | Midden, Boven of Onder. |
| Overlay | 0–90%. Vervaagt de afbeelding met de achtergrondkleur zodat tekst leesbaar blijft. Bij 0% wordt de afbeelding ongewijzigd getoond. |
Tabel
| Instelling | Wat het doet |
|---|---|
| Achtergrond van kolomkoppen | Standaard lichtgrijs. |
| Tekst van kolomkoppen | Standaard bijna zwart. |
| Rasterlijnen | De kleur van de lijnen tussen rijen en cellen. |
| Afwisselende rijkleur | Kleurt elke tweede rij zodat brede tabellen makkelijker te lezen zijn. |
Afzonderlijke tabellen kunnen deze kleuren in de editor overschrijven, onder Stijlopties.
Tekst
| Instelling | Wat het doet |
|---|---|
| Kopkleur | Koppen in de tabel, plus accenten zoals de actieve eenheid in de eenhedenschakelaar en focusranden bij toetsenbordgebruik. |
| Basisgrootte | 11–20 px. Standaard 14 px. Koppen en tekst schalen hiervanuit. |
Gedrag
| Instelling | Wat het doet |
|---|---|
| Sluiten bij klikken buiten de tabel | Standaard aan. Zet uit zodat de tabel alleen sluit met de sluitknop. Escape werkt altijd. |
Aangepaste CSS
Voor alles wat de opties hierboven niet dekken. De CSS wordt toegevoegd overal waar een tabel verschijnt. Begin je selectors met .plug-sc, zodat ze alleen de maattabel raken en niet de rest van je thema.
Handige class-namen:
| Instelling | Wat het doet |
|---|---|
| .plug-sc__trigger | De link of knop Maattabel. |
| .plug-sc__dialog | Het pop-up- of ladevenster. |
| .plug-sc__heading | De titel bovenaan de pop-up. |
| .plug-sc__table | Elke maattabel. |
| .plug-sc__units | De eenhedenschakelaar boven een tabel. |
| .plug-sc__float | De zwevende knop. |
| .plug-sc__inline | Een tabel in de pagina. |
/* Kleinere tabeltekst in de webshop */
.plug-sc .plug-sc__table {
font-size: 13px;
}
/* Zwevende knop verbergen op telefoons */
@media (max-width: 749px) {
.plug-sc .plug-sc__float { display: none; }
}Herstellen
Standaardwaarden herstellen zet elke optie in het formulier terug op de standaardwaarde. In je webshop verandert niets totdat je op Opslaan klikt.