Categorieën

Gelaagde hero-secties en panelen met achtergrondafbeeldingen hebben meer nodig dan alleen een visueel effect. Deze HTML-templates bieden herbruikbare markup voor voorgrondcontent, achtergrondmedia, leesbare tekst en een responsieve sectievolgorde.

Soort:

Meer HTML-sjablonen uit de Kunst ontwerp categorie

andere Kunst ontwerp HTML-sjablonen

Functionele transparante HTML-templates voor gelaagde webpagina's

Een transparante HTML-template biedt kant-en-klare markup voor pagina's die in twee lagen zijn opgebouwd: een achtergrondsectie met de afbeelding en een groep koppen, teksten en knoppen die daar bovenop ligt. Hoe hecht die twee in de broncode met elkaar verbonden zijn, bepaalt wat er gebeurt wanneer de afbeelding verandert of een sectie naar een andere pagina wordt verplaatst.

Achtergrondmedia onder voorgrondcontent

Een gelaagde openingssectie is meestal een mediacontainer met daarin een content-wrapper waarin de kop en de call-to-action zijn ondergebracht. Daar is niets vreemds aan, maar het is wel het onderdeel dat het bestuderen waard is voordat u tot aanschaf overgaat. Bekijk de meegeleverde broncode op patronen die in uw project terugkeren:

een openingssectie met achtergrondafbeelding waarin de contentgroep direct is opgenomen;
een transparante header met eigen menu-items;
een overlay-call-to-action die kop en knop bij elkaar houdt;
een portfoliosectie waarin elk bijschrift bij de bijbehorende afbeelding hoort.

Denk de achtergrond even weg en lees wat er overblijft. Wanneer de kop, de regel eronder en de knop nog steeds logisch en duidelijk zijn, draagt de markup de betekenis en ligt de transparantie er simpelweg bovenop.

Volgorde in de broncode die bewerkingen doorstaat

Visuele overlapping mag nooit de enige indicatie zijn van welke tekst bij welke afbeelding hoort. In goede markup is die relatie expliciet vastgelegd, zodat een sectie kan worden gekopieerd of verplaatst zonder uiteen te vallen. Een paar controles tonen aan hoe de lagen zijn opgebouwd:

een overlaysectie die samen met de afbeelding naar een andere pagina wordt gekopieerd;
de openingssectie die onder de daaropvolgende sectie wordt geplaatst;
een kop die zo lang wordt herschreven dat deze buiten het overlaygebied valt;
dezelfde sectie op smartphonebreedte, waar de content onder het medium verschijnt.

Bij de laatste twee punten openbaart zich zwakke broncode. Een kop die buiten de overlay doorloopt, belandt op het drukste deel van de foto, en een smal scherm scheidt de contentgroep van het medium, tenzij beide binnen dezelfde sectie zijn geplaatst. Nicepage exporteert de voltooide bestanden voor uw eigen server of voor een ontwikkelaar, en de broncode blijft volledig bewerkbaar.

Afbeeldingen vervangen zonder blokken opnieuw op te bouwen

De eerlijke test voor een gelaagde template is het verwisselen van media. Plaats uw eigen foto in de openingssectie en controleer of er niets is verschoven, zodat dezelfde contentgroep in dezelfde volgorde boven een nieuwe achtergrond blijft staan.

Als de kop handmatig gecorrigeerd moet worden, hield de voorbeeldafbeelding de compositie bij elkaar. Een goede transparante HTML-template stelt u in staat achtergrondmedia te wijzigen, voorgrondtekst aan te passen en secties te herschikken terwijl de gelaagde structuur volledig behouden blijft.