--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad' title: 'Het uiterlijk van een element wijzigen in het paneel Stijl | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:39:23+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Gebruik het paneel Stijl wanneer één element op één pagina een eigen uiterlijk nodig heeft: een gekleurde kaart, een vervaagd logo, een knop in campagnekleuren. Je ziet elke wijziging op de pagina terwijl je hem maakt. Voor een uiterlijk dat elke pagina moet delen, zoals de kleur van alle knoppen, wijzig je juist het thema. Eén bewerking daar werkt de hele site bij. De video volgt het eerste recept hieronder: hij dempt een partnerlogo tot de aanwijzer erbij komt. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Het uiterlijk van een element wijzigen in het paneel Stijl' description: |- Gebruik het paneel Stijl wanneer één element op één pagina een eigen uiterlijk nodig heeft: een gekleurde kaart, een vervaagd logo, een knop in campagnekleuren. Je ziet elke wijziging op de pagina terwijl je hem maakt. Voor een uiterlijk dat elke pagina moet delen, zoals de kleur van alle knoppen, wijzig je juist het thema. Eén bewerking daar werkt de hele site bij. De video volgt het eerste recept hieronder: hij dempt een partnerlogo tot de aanwijzer erbij komt. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:39:23+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad' articleSection: 'Elementen stylen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad' description: |- Gebruik het paneel Stijl wanneer één element op één pagina een eigen uiterlijk nodig heeft: een gekleurde kaart, een vervaagd logo, een knop in campagnekleuren. Je ziet elke wijziging op de pagina terwijl je hem maakt. Voor een uiterlijk dat elke pagina moet delen, zoals de kleur van alle knoppen, wijzig je juist het thema. Eén bewerking daar werkt de hele site bij. De video volgt het eerste recept hieronder: hij dempt een partnerlogo tot de aanwijzer erbij komt. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) # Het uiterlijk van een element wijzigen in het paneel Stijl. DXPR Builder lerenPagina’s bouwenElementen stylen ## In deze gids Gerelateerde gidsen - [Een kleur of foto achter inhoud zetten](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/achtergrond) Gebruik het paneel **Stijl** wanneer één element op één pagina een eigen uiterlijk nodig heeft: een gekleurde kaart, een vervaagd logo, een knop in campagnekleuren. Je ziet elke wijziging op de pagina terwijl je hem maakt. Voor een uiterlijk dat elke pagina moet delen, zoals de kleur van alle knoppen, wijzig je juist het thema. Eén bewerking daar werkt de hele site bij. De video volgt het eerste recept hieronder: hij dempt een partnerlogo tot de aanwijzer erbij komt. ## Voordat je begint - Open de pagina in DXPR Builder; als je op een element wijst toont hij zijn besturingsbalk met **More**. Nieuw in de builder? Zie [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina). - **Opslaan** in het dialoogvenster bewaart een wijziging in de editor. **Opslaan** op de builder-werkbalk boven je inhoud slaat de pagina op en toont “Veld opgeslagen”. Instellingen in het paneel **Stijl** horen bij één element. Ze worden bewaard in de inhoud van die pagina, niet in je thema. Als je merkkleur volgend jaar wijzigt, behoudt elk element dat je met de hand hebt gekleurd de oude kleur tot je het bewerkt. - **Hergebruik een uiterlijk** door een gestijld element op te slaan met **More** > **Opslaan als sjabloon**, of door elementen een gedeelde klasse te geven onder **HTML-klassen**. Zie [gebruikerssjablonen](/nl/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) en [HTML-ID en klassen](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/aangepaste-css). - **Kies kleuren uit de stalen** wanneer je site ze toont. Ze komen uit het kleurenpalet van je thema. Een staal kopieert de kleur, dus een latere paletwijziging werkt hem niet bij. ## Recept: logo's vervagen tot de aanwijzer erbij komt Een rij partnerlogo's oogt rustiger als de logo's zijn gedempt. Dit recept dimt één logo en brengt het terug bij hover. 1. Beweeg over een **Afbeelding**-element met een logo, klik op **More** en daarna **Instellingen**. 2. Open het paneel **Stijl** en sleep **Dekking** naar 0,5. Het logo vervaagt terwijl je sleept. 3. Open het paneel **Zweefstijl** eronder en sleep **Dekking** naar 1. 4. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. 5. Open het weergavemenu (het oogpictogram) op de builder-werkbalk, kies **Voorbeeld** en wijs naar het logo. Het schakelt naar volle sterkte en dimt weer als de aanwijzer weggaat. Herhaal de stappen voor elk logo in de rij. ## Recept: een knop in campagnekleuren Je thema geeft knoppen een zweefkleur. Een **Achtergrond** die je zelf instelt vervangt ook die zweefkleur, dus stel beide in. 1. Beweeg over het **Knop**-element, klik op **More** en daarna **Instellingen**. 2. Kies in het paneel **Stijl** een **Achtergrond** en een **Letterkleur**. Klik op een staal, of typ je kleurcode, zoals #e4002b, in het kleurveld. 3. Kies in het paneel **Zweefstijl** een donkerdere **Achtergrond**. 4. Klik in het dialoogvenster op **Opslaan** en daarna **Opslaan** op de werkbalk. 5. Kies **Voorbeeld** in het weergavemenu en wijs naar de knop. Hij wordt de donkerdere kleur. ## Wat je ziet Terwijl het dialoogvenster open is, toont het element elke wijziging. In **Voorbeeld** schakelt het gedempte logo onder de aanwijzer naar volle sterkte, en krijgt de campagneknop zijn donkerdere kleur. Beide uiterlijken blijven na een herlaadbeurt, omdat **Opslaan** op de werkbalk ze heeft bewaard. ## Wat elk veld accepteert | Veld | Bereik | Eenheid | |---|---|---| | **Letterkleur**, **Randkleur**, **Achtergrond** | elke kleur, met transparantie | kleur | | **Achtergrondafbeelding** | een foto uit de mediabibliotheek, of een URL | | | **Achtergrondstijl**, **Achtergrondpositie**, **Randstijl** | een lijst die begint met **Themostandaarden** | | | **Lettergrootte** | 0 tot 100 | px | | **Randradius** | 0 tot 100 | px | | **Dekking** | 0 tot 1, in stappen van 0,01 | | | **Slagschaduw** | niveaus 0 tot 5 | | | Boxmodel **Marge** | -200 tot 200 | **PX** of **%** | | Boxmodel **Opvulling** | 0 tot 200 | **PX** of **%** | | Boxmodel **Rand** | 0 tot 50 | px | | Boxmodel breedte × hoogte | 0 tot 2000 | **PX** of **%** | Een getypte waarde buiten het bereik wordt afgekapt op de dichtstbijzijnde limiet. Het boxmodel en zijn slotjes worden uitgelegd op de pagina [witruimte](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/witruimte). ## Hoe de instellingen zich gedragen ### Themostandaarden Een lege kleur, een schuifregelaar op 0, een lijst op **Themostandaarden** en een boxmodelkant met een “-” betekenen allemaal hetzelfde. DXPR Builder schrijft niets, en je thema beslist. Dus **Dekking** 0 verbergt een element niet, en **Lettergrootte** 0 behoudt de grootte van het thema. Om terug te gaan naar het uiterlijk van het thema klik je op **Wissen** in de kleurkiezer, zet je de schuifregelaar op 0 of kies je opnieuw **Themostandaarden**. ### Waar de instellingen komen Elke **Stijl**-instelling behalve **Slagschaduw** wordt bewaard als een inline stijl op het element. Inline stijlen winnen van gewone thema-CSS. Twee dingen winnen er nog van: themaregels gemarkeerd met `!important`, en Bootstrap-hulpklassen onder **HTML-klassen**, die ook `!important` dragen. Op sommige elementen komen de instellingen op een binnendeel. Op een **Knop** stijlen ze de knop zelf, op een **Afbeelding** de foto, op een **Link** de link en op een **Plattegrond** het kaartframe. ### Elk schermformaat Stijlinstellingen hebben geen breekpunten. 64 px opvulling is ook 64 px op een telefoon. Procentwaarden groeien en krimpen met de breedte van de pagina. Voor verschillende waarden per schermgrootte gebruik je responsieve klassen, zoals op de pagina [HTML-ID en klassen](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/aangepaste-css). ### Dekking vervaagt alles binnenin **Dekking** werkt op het hele element. Hij vervaagt de box, de rand, de tekst en elk element erin. Voor een doorschijnende box achter ondoorzichtige tekst laat je **Dekking** op 0. Kies juist een **Achtergrond**-kleur met wat transparantie: de kleurkiezer heeft daar een eigen dekkingsregelaar voor. ### Zweefstijl **Zweefstijl** is een apart paneel onder **Stijl**. Het heeft dezelfde velden, inclusief zijn eigen boxmodel. Zijn waarden gelden als de aanwijzer op het element staat. Anders dan **Stijl**-waarden zijn ze zelf gemarkeerd met `!important`, dus ze winnen van je **Stijl**-waarden, de hulpklassen onder **HTML-klassen** en de meeste themaregels. Alleen **Slagschaduw** vloeit in, over 0,15 seconden. Andere zweefwijzigingen schakelen meteen, tenzij je thema ze animeert. Bootstrap-knoppen vervagen kleuren over 0,15 seconden. Telefoons en tablets hebben geen aanwijzer. Bezoekers zien daar een zweefuiterlijk pas na een tik, dus zet er nooit informatie in die ze nodig hebben. ### Elementen met hun eigen instellingen Sommige elementen hebben een eigen instelling voor hetzelfde werk. Hun eigen instelling wint, en het **Stijl**-veld doet niets. | Element | Negeert in Stijl | Gebruik in plaats daarvan | |---|---|---| | Cirkelteller | **Achtergrond**, **Lettergrootte**, breedte × hoogte | **Achtergrondkleur** en **Afmeting** in **Algemeen**, **Lettergrootte** in **Cirkelinhoud** | | Voortgangsbalk | **Achtergrond**, breedte × hoogte | **Achterkleur**, **Voorkleur** en **Balkhoogte** in **Algemeen** | | Scheidingslijn | **Achtergrond**, breedte | **Kleur** en **Lengte** in **Algemeen** | | Getalenteller | **Lettergrootte** | **Lettergrootte** in **Algemeen** | | Afbeelding | breedte × hoogte | **Afbeeldingsbreedte** en **Afbeeldingshoogte** in **Algemeen** | | Plattegrond | breedte × hoogte | **Kaartbreedte** en **Kaarthoogte** in **Algemeen** | | Marquee | breedte × hoogte | **Afbeeldingsbreedte** en **Hoogte** in **Algemeen** | | Video, Lokale video | breedte | **Videobreedte** in **Algemeen** | | Gepositioneerde lagen | breedte × hoogte | **Breedte** en **Hoogte** in **Algemeen** | ## Als je je wijziging niet ziet - **De wijziging verdween toen het dialoogvenster sloot.** Je hebt het gesloten met **Annuleren**, het sluitpictogram of de Escape-toets, wat de oude instellingen terugzette. Voer de wijziging opnieuw uit en klik in het dialoogvenster op **Opslaan**. - **De wijziging is weg na een herlaadbeurt.** **Opslaan** in het dialoogvenster bewaart een wijziging alleen in de editor. Klik op **Opslaan** op de werkbalk voordat je weggaat. - **Het uiterlijk van het thema blijft.** Een Bootstrap-hulpklasse onder **HTML-klassen** of een themaregel met `!important` wint. Open het paneel **Algemeen** en verwijder de klassechip, bijvoorbeeld **Primaire achtergrond**, of vraag je webmaster naar de themaregel. - **Een veld doet helemaal niets.** Sommige elementen hebben een eigen instelling voor hetzelfde werk. Zie [Elementen met hun eigen instellingen](#elements-with-their-own-settings). - **De knop verandert niet meer van kleur bij hover.** Je **Achtergrond** vervangt de zweefkleur van het thema. Stel ook een **Achtergrond** in in het paneel **Zweefstijl**. - **De tekst werd vaag mee met de box.** **Dekking** vervaagt het hele element. Zet hem terug op 0 en gebruik een **Achtergrond**-kleur met transparantie. - **Dekking 0 verbergt het element niet.** 0 betekent **Themostandaarden**. Voeg juist de klasse **Element verbergen (d-none)** toe onder **HTML-klassen**. ## Wat nu? - [Achtergronden](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/achtergrond): zet een foto achter een kop en houd de kop leesbaar.