Brug CSS-sjablonen

Heldere brug-CSS-templates

Een brug-CSS-template heeft zijn uitstraling al helemaal vaststaan. Het lettertype en de kleuren zijn gekozen en de tekst heeft een vaste plek op de foto. In We Build Bridges bevat één enkel blok een compacte witte kop linksboven op een gedempte blauwgrijze foto van een hangbrug. Nicepage biedt deze ontwerpen aan als pagina's en blokken inclusief styling, klaar om te worden aangepast aan uw afbeeldingen en merk. De uiteindelijke keuze draait om de visuele stijl en hoe gemakkelijk deze zich laat aanpassen.

Ontwerpen in één oogopslag onderscheiden

Enkele visuele eigenschappen bakenen de opties al af vóór u begint met bewerken:

• Hoe de kop is opgemaakt, van lettertype en grootte tot de ruimte die overblijft voor een lange naam.
• Welke accentkleuren het ontwerp dragen en of ze afkomstig zijn uit een gedeeld palet.
• Hoeveel ademruimte het blok laat rondom de kop en paragraaf.

Twee ontwerpen laten hier het belangrijkste onderscheid zien. We Build Bridges plaatst zijn tekst direct op de foto, waardoor vervangende afbeeldingen een rustig stuk lucht of water achter de woorden nodig hebben. We Build Bridges and Roads plaatst zijn tekst en een knop „meer lezen” in een oranje paneel dat over een bouwfoto ligt. Het paneel blijft goed leesbaar over drukke achtergronden, terwijl de open lay-out juist uitstekend werkt voor één opvallende overspanning.

Gedeelde paletten en gerichte aanpassingen

De meeste wijzigingen vinden plaats via gewone instellingen. Themakleuren bepalen een palet voor elke pagina, zodat koppen en knoppen die hiervan gebruikmaken tegelijk mee veranderen zodra u uw merkkleur invoert. Een aangepaste kleur blijft beperkt tot het ene element waarop u deze toepast. Schieten de standaardopties tekort, dan kan aangepaste CSS worden toegepast op een element met een eigen class, een enkele pagina of de volledige website. Dit effect is alleen zichtbaar in de Voorvertoning, omdat het editorcanvas deze regels niet uitvoert.

Panorama's passend gemaakt voor smartphones

Een panoramische brugfoto gedraagt zich op een telefoon heel anders. Naarmate het blok smaller wordt en de uitsnede strakker, kan een kop die eerst tegen een open lucht stond over een pyloon heen vallen. Met responsieve modi past u lettergroottes en marges aan voor tablets en smartphones. Werk hierbij van de desktopweergave naar beneden, aangezien grotere weergaven hun wijzigingen doorgeven aan kleinere. Let erop of tekst buiten het tekstvak loopt of dat tussenruimtes tussen elementen verdwijnen. Ook het contrast neemt af wanneer de kop over een lichter deel van het beeld schuift.

De beste test voor elk brug-CSS-template is om uw eigen foto en merkpalet in te voegen en vervolgens de telefoonweergave te bekijken. Wat dan nog niet helemaal klopt, lost u eenvoudig op met enkele instellingen of een korte Custom CSS-regel, terwijl u het blok verder ongemoeid laat.