Het uiterlijk van een element wijzigen in het paneel Stijl.

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.
• 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 en HTML-ID en klassen.
• 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

Een getypte waarde buiten het bereik wordt afgekapt op de dichtstbijzijnde limiet. Het boxmodel en zijn slotjes worden uitgelegd op de pagina 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.

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.

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.
• 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: zet een foto achter een kop en houd de kop leesbaar.