Toelichting met achtergrondkleur

Aanvullend op de aangepaste toelichting met 1 rij, kan het ook gebeuren dat een klant een tekstbanner in een survey wil zien. Voorbeeld hiervan is een onderzoek van gemeente Uitgeest, waarbij in een toelichting met 2 rijen zowel het gemeentelogo als de tekstbanner worden getoond:

Voer hiervoor de volgende stappen uit:

1. Voeg de toelichting in op de gewenste plaats.
2. Klik in de Rich Text Editor op de knop ‘Bekijk code’
3. Kopieer nu de volgende code en plak deze in de editor (rode tekst kun je aanpassen, de rest mag niet gewijzigd worden):

<!-- rij 1 -->  
<table style="width:100%;background-color:#FFF;border-radius:4px;box-shadow:0px 1px 2px 0px rgba(0, 0, 0, .15)"><tbody><tr><td style="padding-left:calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));padding-right:calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px))"><p> 
<img src="https://kcmg.nl/contents/bcaed4d0-42ba-11f0-85ba-9b688090823f/emailTemplate/emailtemplate-xtCw6X.jpg" 
style="max-height:100px"><br></p></td></tr>

<!-- rij 2 -->
<tr><td style="background-color:#e01616;
border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0px 1px 2px 0px rgba(0, 0, 0, .15);padding-left:calc(var(--sd-base-padding) + var(--sv-element-add-padding-left, 0px));padding-right:calc(var(--sd-base-padding) + var(--sv-element-add-padding-right, 0px))"><h5 style="text-align:left"><font color="#ffffff">Witte tekst (H5) op gekleurde achtergrond</font></h5></td></tr></tbody></table>
  

4. Klik weer op de knop ‘Bekijk code’.
5. Je kunt nu in de visuele editor eenvoudig de tekst aanpassen.

Aanpassen van de achtergrondafbeelding:
Dit kan in de visuele editor, maar het is veiliger om dit in de code aan te passen, zodat alle instellingen bewaard blijven. Uitleg hiervoor staat in het voorbeeld onderzoek onder ‘EXTRA: Toelichting met afbeelding op volledige breedte’

Aanpassen van de achergrondkleur kan alleen in de code.

Direct na het plakken van de code in de editor staat de kleurcode van de bovenste rij (‘rij 1’) vermeld als background-color:#FFF en  de code van de onderste rij (‘rij 2’) als background-color:#e01616

Om bijvoorbeeld de kleur van de onderste rij te wijzigen in lichtblauw:

1. Selecteer de cijfers en letters van de kleurcode in rij 2 (e01616)
2. Vervang deze door 90D5FF
3. Nu kun je weer verder in de visuele editor