> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Verschillende bannerlay-outs gebruiken op mobiel en desktop (nieuwe versie)

### Overzicht

Veel besturingselementen voor Layout en Style ondersteunen een **mobiele afwijking**, zodat telefoons niet gedwongen worden de desktopdialoog te gebruiken.

Op desktop gebruik je misschien een melding in **Wide** of **Box**. Op een telefoon kan diezelfde breedte de productpagina bedekken. Met de nieuwe banner kun je desktop laten zoals het is en op mobiel een **Bar**, kleiner formaat of een andere positie kiezen.

Afwijkingen worden opgeslagen als **Mobile same as desktop** versus **Mobile different from desktop**.

||| **Nieuwe banner.** Voor winkels met het label **New version** bij **Cookie banner**. Voor de Legacy-banner, zie [How to switch to the new banner or switch back to the previous version](/nl/article/overstappen-naar-de-nieuwe-banner-of-terug-naar-de-vorige-versie-1l5zakw/).

### Voordat je begint

* Controleer of je op **Cookie banner** zit met het label **New version**.
* Gebruik de schakelaar **Desktop / Mobile** van de voorvertoning terwijl je bewerkt. Zie [Using the Live Banner Preview mode](/nl/article/de-live-banner-preview-modus-gebruiken-c2v651/).

### Mobiel onafhankelijk instellen

1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**.
2. Ga naar **Cookie banner**.
3. Open **Layout** (en **Style** als je ook andere kleuren, padding of logo's op mobiel wilt).
4. Zoek een besturingselement dat **Mobile same as desktop** toont.
5. Zet het om naar **Mobile different from desktop**.
6. Stel de mobiele waarde in (uiterlijk, positie, grootte, knoplay-out enzovoort).
7. Herhaal dit voor elk besturingselement dat je wilt afwijken.
8. Klik op Save.

![Uiterlijk, positie en breedte van de cookiemelding en pictogrammen voor mobiele afwijkingen](https://images.pandect.es/knowledge-base/how-to-use-different-banner-layouts-on-mobile-and-desktop-new-version-2.png =900xauto)

Veelvoorkomende Layout-afwijkingen:

* **Appearance** van de cookiemelding (Box, Bar, Wide)
* **Position**
* **Width** (XS tot XL)
* Knoplay-out
* Uiterlijk van voorkeuren (box, drawer, sidepanel)

Veelvoorkomende Style-afwijkingen:

* Spacing, radius en float
* Lettergrootte
* Knopgrootte

### Voorgestelde mobiele opstelling

* Kies op mobiel bij voorkeur een **Bar** **onderaan**, zodat productafbeeldingen zichtbaar blijven.
* Houd **Accept** en **Decline** waar mogelijk op één rij.
* Controleer de positie van de **consent widget**, zodat die **Add to cart** of een chatbel niet bedekt.

### Controleren

1. Bekijk **Mobile** in de voorvertoning in de app.
2. Open de webshop op een telefoon of in de apparaatmodus van Chrome.
3. Controleer zowel het eerste bezoek (banner) als een terugkerend bezoek (widget).

### Gerelateerde artikelen

* [Customizing the layout of the banner (New Version)](/nl/article/de-layout-van-de-banner-aanpassen-nieuwe-versie-1mzh2cy/)
* [How to customize banner style, colors, logos, and buttons (New Version)](/nl/article/stijl-kleuren-logos-en-knoppen-van-de-banner-aanpassen-nieuwe-versie-1ptmcl/)