Een sectie toevoegen.

DXPR Builder lerenPagina’s bouwenContent toevoegenLay-out

Een sectie is één strook van je pagina, zoals een hero bovenaan of een grijze strook met functies eronder. Je geeft elke sectie een eigen achtergrond, tekstkleur, witruimte en hoogte, en vult hem daarna met rijen of inhoud. Lees deze pagina om secties toe te voegen en in te stellen; om er een in kolommen te splitsen, zie Rijen en kolommen.

De kliniekpagina zoals bezoekers hem zien: een donkerblauwe sectie van rand tot rand met de gecentreerde kop Boek je gezondheidscheck, een regel over afspraken in dezelfde week en een witte knop Boek online, boven een lichtgrijze sectie met drie kolommen, Bezoeken in dezelfde week, Ervaren huisartsen en Resultaten online

Een sectie toevoegen

Het voorbeeld bouwt een donkerblauwe hero-sectie voor een kliniek. Eronder volgt een lichtgrijze sectie met drie kolommen.

  1. Klik op Add Elements op een lege pagina en kies Sectie op het tabblad Lay-out. Klik onder een bestaande sectie op Sectie hieronder toevoegen, de ronde plus eronder.
  2. Beweeg over de sectie, open More en kies Settings.
  3. Stel de hele sectie in: hier Align text center onder HTML-klassen, een donkerblauwe Achtergrond en een witte Tekstkleur. Klik op Opslaan.
  4. Klik op + op de sectie om er direct inhoud in toe te voegen, of voeg een Rij toe om hem in kolommen te splitsen.
  5. Klik op Opslaan op de werkbalk om de pagina te bewaren.

Achtergrond en Tekstkleur staan in het paneel Stijl van de dialoog. Nieuwe elementen belanden bovenaan de sectie, dus voeg het onderste eerst toe: in de video gaat de knop vóór de kop.

Wat je ziet

De donkerblauwe strook vult het venster van rand tot rand. Kop en knop blijven in een gecentreerd vak, de binnenste container van de sectie. De grijze sectie begint er direct onder, met de drie functiekolommen in hetzelfde gecentreerde vak.

Elke nieuwe sectie heeft in HTML-klassen al de klasse Vertical padding size 5 (py-5). Die klasse geeft de ruimte boven en onder de inhoud.

Je sectie instellen

De instellingendialoog heeft vijf panelen: Algemeen, Achtergrondeffecten, Animatie, Stijl en Hoverstijl. Alleen secties hebben Achtergrondeffecten.

Instelling Paneel Wat het doet Standaard
Volledige breedte Algemeen Rijen lopen van rand tot rand in plaats van in de gecentreerde container Uit
100% hoogte Algemeen De sectie is minstens zo hoog als het browservenster Uit
Verticaal centreren Algemeen Inhoud staat verticaal in het midden van een sectie die hoger is Uit
HTML-id Algemeen Een ankernaam, zodat een link naar #name naar deze sectie springt Leeg
HTML-klassen Algemeen Utility-klassen, zoals Align text center of een paddinggrootte Vertical padding size 5 (py-5)
Achtergrondeffect Achtergrondeffecten Simple image, Fixed image, Parallax image, Gradient of YouTube video Simple image
Achtergrond, Tekstkleur Stijl De kleur achter de sectie en de kleur van de tekst Geen: het thema beslist

De achtergrond beslaat altijd de hele sectie, wat Volledige breedte ook zegt. De afbeeldingseffecten bewegen de Achtergrondafbeelding die je kiest in het paneel Stijl; Achtergronden toont elk effect.

Voor meer of minder ruimte wissel je Vertical padding size 5 (py-5) in voor een kleinere grootte of No vertical padding (py-0). Voor exacte pixels gebruik je het boxmodel in het paneel Stijl, zoals Witruimte uitlegt.

Sectierecepten

Sectie Instellingen die hem maken
Hero 100% hoogte en Verticaal centreren aan, een Parallax image-effect, een kop en een knop
Functies Een lichte Achtergrond, een kop, daarna een rij van drie kolommen
Oproep tot actie Een sterke Achtergrond, Align text center, één korte regel en een knop
Testimonials Een lichte Achtergrond en een rij van drie kolommen, elk met een Blokcitaat

Een hero-sectie ontwerpen bouwt de eerste stap voor stap.

Als je het niet ziet

  • De lege pagina heeft geen knop Add Elements. De assistent voor het maken van pagina’s staat uit, zodat de lege pagina alleen Kies een sjabloon biedt. Klik op het lege gebied om de elementenkiezer te openen, of zet Assistent voor het maken van pagina’s inschakelen aan op /admin/dxpr_studio/dxpr_builder/ai_settings.
  • Er is geen knop Sectie hieronder toevoegen. Alleen secties direct op de pagina hebben hem, niet een sectie in een kolom of tabblad. Klik in plaats daarvan op + op de kolom.
  • Verticaal centreren verandert niets. De sectie is slechts zo hoog als zijn inhoud, dus er is geen ruimte om in te centreren. Zet ook 100% hoogte aan.
  • Volledige breedte lijkt niets te doen. De achtergrond beslaat de hele sectie al; Volledige breedte verplaatst alleen de rijen naar de randen. Bij korte tekst in één kolom is de verandering moeilijk te zien.
  • Er is een sectie verschenen die je niet toevoegde. Je koos een Rij of een inhoudselement op een lege pagina, en elk element heeft een sectie eromheen nodig. DXPR Builder voegde er een voor je toe; open de instellingen zoals bij elke andere.

Wat nu?