Een kleur of foto achter inhoud zetten.
Geef een strook van je pagina een merkkleur of een foto, zodat een kop opvalt en de strook als één blok leest. Je stelt de kleur en de foto in in het paneel Stijl van elk element. Een Sectie voegt een paneel Achtergrondeffecten toe voor een vaste foto, parallax, een verloop of een YouTube-video.
De video volgt het recept hieronder: hij zet een foto achter een kop en een donker verloop over de foto, zodat de witte kop leesbaar blijft.
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 Sectie voor een strook over de volle pagina. Alleen een Sectie heeft Achtergrondeffecten.
- Gebruik een Tekst- of Kaart-element voor een gekleurd vak achter een paar regels in een kolom.
- Gebruik je thema voor achtergronden op elke pagina, zoals de paginabody of de footer.
- Houd woorden uit de foto. Een achtergrondfoto heeft geen alt-tekst, dus schermlezers slaan hem over. Zet je boodschap in een kop erbovenop.
Recept: een leesbare kop op een foto
Witte tekst op een drukke foto is moeilijk te lezen. Een donker verloop over de foto lost dat op, en het blijft werken als je de foto wisselt. Je hebt een Sectie nodig met je kop in een Tekst-element.
- Beweeg over de Sectie, klik op More en daarna Instellingen.
- Open het paneel Stijl en klik op Afbeelding selecteren onder Achtergrondafbeelding. Kies een foto. Er verschijnt een miniatuur, met een lijst met afbeeldingsgroottes.
- Kies in de lijst een grootte die minstens zo breed is als het breedste scherm waarvoor je ontwerpt, of Oorspronkelijke afbeelding (Niet schalen). Vermijd Optimaliseren voor snel laden voor een volle strook.
- Zet Achtergrondstijl op Vullend en Achtergrondpositie op Midden midden.
- Open het paneel Achtergrondeffecten en zet Achtergrondeffect op Verloop. Je foto blijft; het verloop ligt eroverheen.
- Typ in het kleurveld van Beginkleur
rgba(0, 0, 0, 0.6): zwart op 60%. Typrgba(0, 0, 0, 0.3)voor Eindkleur. Laat Verlooprichting op 180 staan, zodat de sluier van boven naar beneden loopt. - Klik in het dialoogvenster op Opslaan. De sectie toont de foto onder een donkere sluier.
- Beweeg over het Tekst-element, klik op More en daarna Instellingen. Zet in zijn paneel Stijl Letterkleur op wit en klik op Opslaan.
- Klik op Opslaan op de werkbalk.
Controleer de kop tegen het lichtste deel van de foto. Mik op een contrast van minstens 4,5 op 1, of 3 op 1 voor grote koppen; de pagina typografie legt deze doelen uit. Nog steeds moeilijk te lezen? Verhoog beide waarden, bijvoorbeeld naar 0,8 en 0,5.
Wat je ziet
De sectie toont je foto onder een donkere sluier, het donkerst bovenaan, met de witte kop erop. Vullend vult de hele sectie, dus op een smal scherm worden er meer van de zijkanten van de foto afgesneden.
Hoe de instellingen werken
| Veld | Wat het doet |
|---|---|
| Achtergrond | Een kleur achter de inhoud. De dekkingsregelaar van de kiezer maakt hem doorschijnend. |
| Achtergrondafbeelding | Een foto achter de inhoud: via Afbeelding selecteren, via een URL, of via AI-afbeelding genereren tenzij je site het heeft uitgezet. |
| Achtergrondstijl | Hoe de foto het element vult. Zie de volgende tabel. |
| Achtergrondpositie | Het punt waaraan de foto is vastgepind. Met Vullend bepaalt hij welk deel van de foto zichtbaar blijft. |
| Achtergrondstijl | Resultaat |
|---|---|
| Themostandaarden | Tenzij je thema anders zegt, herhaalt de foto zich op zijn eigen grootte vanuit de linkerbovenhoek. |
| Vullend | De foto vult het element en de randen die niet passen worden afgesneden. Het beste voor foto's. |
| Bevatten | De hele foto verschijnt, één keer. Er kunnen lege stroken overblijven aan twee kanten. Het beste voor logo's. |
| Niet herhalen | Eén kopie op zijn eigen grootte. |
| Herhalen | De foto tegelt over het element. Goed voor patronen. |
De kleur zit onder de foto. Hij schijnt door de heldere delen van een foto heen, in de stroken rond een foto op Bevatten, en terwijl de foto laadt. Kies een kleur dicht bij de hoofzaaktoon van de foto.
De grootte Optimaliseren voor snel laden schaalt een foto terug naar maximaal 1024 px breed en slaat hem op als WebP. Dat past bij een vak, maar het oogt zacht op een volle strook op een groot scherm.
Dezelfde foto laadt op elk schermformaat, telefoons inbegrepen. Het paneel Zweefstijl heeft zijn eigen Achtergrond en Achtergrondafbeelding, zodat een vak van kleur kan wisselen of zijn foto kan wisselen bij hover.
Achtergrondeffecten van secties
Deze effecten hebben een Sectie nodig. Vaste afbeelding en Parallaxafbeelding verplaatsen de foto uit Achtergrondafbeelding, dus stel eerst de foto in.
| Achtergrondeffect | Wat bezoekers zien | Instellingen |
|---|---|---|
| Eenvoudige afbeelding | De foto scrolt mee met de pagina. Dit is de standaard. | geen |
| Vaste afbeelding | De foto staat stil terwijl de inhoud eroverheen scrolt. | geen |
| Parallaxafbeelding | De foto scrolt langzamer dan de inhoud. | Parallaxsnelheid (0 tot 100; kiezen van Parallaxafbeelding zet 20 als hij 0 is), Parallaxmodus (Vast of Lokaal), Uitschakelen op mobiel (schermen smaller dan 481 px) |
| Verloop | Een mengeling van twee kleuren, alleen of over de foto. | Beginkleur, Eindkleur, Verlooprichting (1 tot 360 graden; 180 loopt van boven naar beneden), Beginpositie, Eindpositie |
| YouTube-video | Een gedempte video speelt terwijl de sectie in beeld is en pauzeert als hij weg scrolt. | YouTube-video-URL, Begintijd in seconden, Stoptijd in seconden, Video-opties |
Over een foto loopt het verloop altijd van rand tot rand. Beginpositie en Eindpositie gelden alleen voor een verloop zonder foto.
Als je de achtergrond niet ziet
- De foto verschijnt als een dunne strook. Een achtergrond voegt geen hoogte toe; de sectie is zo hoog als zijn inhoud en opvulling. Voeg inhoud toe, of zet 100% hoogte aan in het paneel Algemeen. Voor meer opvulling volg je een hogere sectie.
- De foto herhaalt zich of toont maar één hoek. Achtergrondstijl staat op Themostandaarden. Kies Vullend.
- De foto oogt zacht op een breed scherm. Optimaliseren voor snel laden maakt hem maximaal 1024 px breed. Kies een bredere grootte in de lijst.
- De foto is verborgen achter effen zwart. De verloopkleuren hebben geen transparantie. Eindig elke waarde met een getal onder 1, zoals
rgba(0, 0, 0, 0.6). - De kop blijft donker. Een kleurenklasse onder het Tekst-element bij HTML-klassen, of een themaregel met
!important, wint. Verwijder de chip, of zie typografie. - De achtergrond is weg na een herlaadbeurt. Opslaan in het dialoogvenster bewaart een wijziging alleen in de editor. Klik op Opslaan op de werkbalk.
- De kleur is niet te zien. De foto bedekt hem. Voor een tint over de foto gebruik je Verloop in Achtergrondeffecten.
- Beginpositie en Eindpositie veranderen niets. De sectie heeft een Achtergrondafbeelding, dus het verloop loopt van rand tot rand. Gebruik Verlooprichting en transparante kleuren.
- Een klassekleur wint. Een klasse zoals Primaire achtergrond onder HTML-klassen verslaat je Achtergrond. Verwijder zijn chip.
- Achtergrond doet niets op een Cirkelteller, Voortgangsbalk of Scheidingslijn. Deze elementen gebruiken hun eigen kleuren. Stel Achtergrondkleur, Achterkleur of Kleur in in het paneel Algemeen.
Wat nu?
- Typografie: stel de kopkleur in op je foto en controleer zijn contrast.