Basisprincipes van lay-out

Structuur van een slidde-webpagina

Slidde.co gebruikt een eenvoudige vierlaagse structuur:

• userCompName.Page (Globale Stijlen)
• userCompName.Slide (Inhoudssegmentatie)
• userCompName.Container (Responsieve Breedte, Meerdere kolommen)
• Inline Elementen (Specifieke Inhoud)

userCompName.Page

De userCompName.Page laag bevindt zich bovenaan en wordt gebruikt om globale stijlen zoals lettertypen, kleuren en linkstijlen in te stellen, aangezien CSS-eigenschappen overerfbaar zijn.

Optioneel kun je CSS-variabelen gebruiken om je sjabloon gebruiksvriendelijker te maken.

Als je het userCompName.Page element niet direct kunt selecteren, gebruik dan de userCompOption.Select page optie in de werkbalk.

De userCompOption.hashSection functie kan een website met meerdere pagina's simuleren. Bekijk deze demo: Demo Link

userCompName.Slide

Een userCompName.Slide is het eerste-niveau element onder een userCompName.Page, gebruikt voor het segmenteren van inhoud.

• Eenvoudige pagina's, zoals "link in bio" pagina's, kunnen slechts één Slide hebben.
• Complexe landingspagina's kunnen meerdere secties bevatten zoals #header, #hero, #works, #contact, #footer.

Een userCompOption.htmlId is in wezen een HTML-ID. Geef ze namen op basis van de inhoud binnen de userCompName.Slide voor gemakkelijke navigatie met links zoals “#ID”. Meer informatie over skip links.

Om een userCompName.Slide te verbergen op de uiteindelijke website maar ze toch opgeslagen te houden, vink je het userCompOption.hidden attribuut aan. Dit is vergelijkbaar met verborgen dia's in PowerPoint en kan ook worden gebruikt voor tutorials.

De userCompOption.sticky functie is voor zwevende navigatiebalken of andere elementen. Zie een voorbeeld hier: Sticky Demo

userCompName.Container

Een userCompName.Container beheert responsieve breedtes en multi-kolom weergaven.

• Mobiele en desktopbreedtes verschillen meestal. Gebruik het userCompOption.width attribuut in een userCompName.Container voor adaptieve breedtes op verschillende apparaten.
• Kolommen bepalen hoeveel kolommen er in een container zijn. Je kunt breedtes instellen zoals x/12 (bijv. twee 6/12 kolommen voor elk 50% breedte).

Elke kolom kan ook horizontale en verticale uitlijningsinstellingen hebben.

Overige

Andere elementen zijn inline elementen, die binnen de container gepositioneerd kunnen worden.

Door deze gestructureerde aanpak te volgen, kun je eenvoudig visueel aantrekkelijke, responsieve webpagina's maken met Slidde.co.