Naar secties linken en stijlen hergebruiken met klassen.

Learn DXPR BuilderBuild pagesElementen stylen

Geef een sectie een HTML-ID zodat een knop ernaartoe kan springen. Voeg HTML-klassen toe om een element op telefoons te verbergen, om witruimte per schermgrootte in te stellen, of om een uiterlijk te hergebruiken dat je thema definieert. Beide velden vind je onderaan het paneel Algemeen van elk element. Een klasse houdt een uiterlijk consistent: als zijn CSS-regel wijzigt, volgt elk element met die klasse.

De video volgt het eerste recept hieronder: hij laat een knop springen naar een sectie verderop op de pagina.

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”.
  • Gebruik een HTML-ID voor een springdoel. Een knop “Boek een rondleiding” kan scrollen naar het boekingsformulier. Een lijst met links bovenaan een lange pagina kan naar elk deel leiden.
  • Gebruik een klasse voor een uiterlijk dat zich herhaalt. Je webmaster schrijft de CSS één keeren jij voegt de klasse toe waar je hem nodig hebt. Het paneel Stijl kopieert waarden juist in elk element, wat na verloop van tijd uit elkaar groeit.
  • Gebruik een klasse voor wat het paneel Stijl niet kan, zoals een element verbergen op telefoons of witruimte wijzigen per schermgrootte.

Recept: een knop die naar een sectie springt

  1. Beweeg over de doel-Sectie, klik op More en daarna Instellingen.
  2. Typ in het paneel Algemeen een korte naam, zoals programmes, in HTML-ID. Klik op Opslaan.
  3. Open de instellingen van de Knop. Typ in Link # gevolgd door precies dezelfde naam: #programmes. Klik op Opslaan.
  4. Klik op Opslaan op de builder-werkbalk.
  5. Kies Voorbeeld in het weergavemenu (het oogpictogram) en klik op de knop.

Test met de sectie verderop op de pagina dan de knop, zodat je het scrollen ziet. Als het doel in een uitklappaneel, een tabblad of een carrouseldia zit, opent de link het eerst.

Het paneel Algemeen van een knop met de Titel Bekijk onze programma's en de Link #programmes, naast die knop op de pagina

Recept: een element verbergen op telefoons

  1. Beweeg over het element, klik op More en daarna Instellingen.
  2. Klik in het paneel Algemeen op het vak HTML-klassen.
  3. Kies Verborgen op extra kleine apparaten, telefoons (<576px). Hij staat in de groep Responsieve zichtbaarheid.
  4. Klik in het dialoogvenster op Opslaan en daarna Opslaan op de werkbalk.

Het element verdwijnt nu op schermen smaller dan 576 px, ook in de editor. Om het te controleren open je de pagina op een telefoon.

Het veld HTML-klassen van een Tekst-element met de chip Verborgen op extra kleine apparaten, telefoons (<576px), naast de grijze box Plan je bezoek, nog steeds getoond op desktopbreedte

Recept: typ je eigen klassen

De HTML-klassen laat je alleen kiezen uit zijn lijst. Om een klassenaam te typen schakel je hem eerst om naar tekst.

  1. Beweeg over het element, klik op More en daarna Instellingen.
  2. Klik onder HTML-klassen op Bewerken als tekst. De wordt een gewoon tekstveld met de klassen die het element al heeft.
  3. Voeg je klassenamen erachter toe, gescheiden door spaties, bijvoorbeeld brand-card py-3 py-lg-5. Laat de punt weg: .brand-card in de CSS van je team is hier brand-card.
  4. Klik in het dialoogvenster op Opslaan en daarna Opslaan op de werkbalk.

Het element krijgt het uiterlijk dat je webteam heeft gedefinieerd.

HTML-klassen in de modus Bewerken als tekst, een gewoon veld met brand-card py-3 py-lg-5, naast de grijze box Werk met ons samen met de klasse-opvulling boven en onder zijn tekst

Wat je ziet

Paneel Algemeen van sectie met HTML-ID open-day en drie klassenchips, naast die sectie met een grijze achtergrond en gecentreerde tekst

In Voorbeeld scrolt de knop soepel naar de sectie en houdt hij ruimte voor een vaste header; de adresbalk eindigt op #programmes. Onder 576 px breed is het verborgen element weg. Klassen die je hebt getypt verschijnen als chips als je het dialoogvenster opnieuw opent, tussen aanhalingstekens als ze niet in de lijst staan, zoals “brand-card”.

Hoe de velden werken

HTML-ID

Een ID moet beginnen met een letter. Daarna mag hij letters, cijfers, koppeltekens en liggende streepjes bevatten, maar geen spaties. Een foute ID toont een fout onder het velden Opslaan doet niets tot je hem herstelt.

Als je het veld leeg laat, behoudt het element een ID die DXPR Builder heeft gemaakt. Het lege veld toont hem grijs. Gebruik elke ID één keer per pagina: als twee elementen er een delen, springen links naar de eerste.

HTML-klassen

De lijst bevat schaduwklassen en Bootstrap 5-klassen, gegroepeerd per taak, zoals Marges, Opvulling, Responsieve zichtbaarheid en Afgeronde hoeken. Je thema kan achteraan een eigen groep toevoegen.

Scrol door de open lijst, of typ een deel van een naam zoals padding, py-5 of circular om hem te vernauwen. Typen filtert alleen de lijst; voor een klasse die er niet in staat gebruik je Bewerken als tekst.

De HTML-klassenlijst gefilterd op het woord padding, met de groep Opvulling met Opvullingsgrootte 1 tot 5 en Geen opvulling, naast de tekst Cursuskosten die hij gaat stijlen

De klassen van Bootstrap werken alleen als de pagina Bootstrap 5 laadt. Hij komt uit je thema, of uit Algemene instellingen > Bootstrap (/admin/dxpr_studio/dxpr_builder/settings), waar Bestanden van Bootstrap bijladen op Bootstrap 5 staat.

De hulpklassen van Bootstrap, zoals de kleur- en witruimteklassen, zijn gemarkeerd met !important. Ze winnen van het paneel Stijl op dezelfde eigenschap. Primaire achtergrond verslaat Achtergronden Bovenmarge grootte 3 (mt-3) verslaat de bovenste Marge.

Een klasse met een schermgrootte in zijn naam geldt vanaf die breedte:

In de klassenaam Geldt vanaf
sm 576 px
md 768 px
lg 992 px
xl 1200 px
xxl 1400 px

Dus py-3 py-lg-5 geeft 16 px opvulling boven en onder op kleinere schermenen 48 px vanaf 992 px breed.

Voor je thema-ontwikkelaar

Een klasse heeft een CSS-regel nodig in het thema, bijvoorbeeld:

.brand-card {
  background: #f4f6fb;
  border-left: 4px solid #1a4d8f;
  padding: 2rem;
}

Om de klasse in de lijst HTML-klassen te tonen voor redacteurs, registreer je hem in de .info.yml van het thema; zie Hulpklassen. Voor stijlen op de hele site, zie Aangepaste CSS.

Als je het niet ziet

  • Opslaan doet niets en HTML-ID zegt “ID must start with a letter”. De ID overtreedt de regels hierboven. Begin hem met een letteren gebruik alleen letters, cijfers, koppeltekens en liggende streepjes.
  • Je kunt geen nieuwe klasse typen. De filtert alleen zijn lijst. Klik eerst op Bewerken als tekst.
  • Een klasse die je verwacht ontbreekt in de lijst. De lijst bevat alleen de klassen die DXPR Builder en je thema definiëren. Klik op Bewerken als tekst en typ hem.
  • De knop scrolt helemaal niet. Link moet # zijn gevolgd door precies de HTML-ID, met dezelfde hoofdletters. Controleer beide veldenen test in Voorbeeld.
  • Een klasse heeft geen effect. De naam is verkeerd gespeld, het thema heeft er geen regel voor, of Bootstrap 5 is niet geladen. Controleer de spellingen vraag je webmaster naar de regel of Bestanden van Bootstrap bijladen.
  • De klasse van je team wijzigt maar sommige dingen. Een waarde van het paneel Stijl op dezelfde eigenschap verslaat een themaklasse. Wis die waarde in het paneel Stijl.
  • De knop springt naar de verkeerde plek. Twee elementen delen de IDen de eerste wint. Geef elk element zijn eigen ID.
  • De kop van de sectie verdwijnt onder de vaste header. DXPR Builder herkent je header niet. Een webmaster stelt Scrollverschuivingskiezer in onder Algemene instellingen > Geavanceerde instellingen (/admin/dxpr_studio/dxpr_builder/settings) op de CSS-kiezer van de header.

Wat nu?