Basisprincipes van lay-out

Structuur van een slidde-webpagina

Slidde.co gebruikt een eenvoudige vierlaagse structuur:

Pagina

De Pagina 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 Pagina element niet direct kunt selecteren, gebruik dan de Selecteer pagina optie in de werkbalk.

De Hash sectie functie kan een multi-pagina website simuleren. Bekijk deze demo: Demo Link

Dia

Een Dia is het eerste-niveau element onder een Pagina, 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 Anker ID (HTML ID) is in wezen een HTML ID. Geef ze namen op basis van de inhoud binnen de Dia voor gemakkelijke navigatie met links zoals “#ID”. Meer informatie over skip links.

Om een Dia te verbergen van de uiteindelijke website maar ze wel opgeslagen te houden, vink het Verborgen attribuut aan. Dit is vergelijkbaar met verborgen dia's in PowerPoint en kan ook worden gebruikt voor tutorials.

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

Container

Een Container beheert responsieve breedtes en multi-kolom weergaven.

• Mobiele en desktop breedtes verschillen meestal. Gebruik het Breedte attribuut in een Container voor adaptieve breedtes op verschillende apparaten.
• Kolommen definiëren 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 kunnen worden gepositioneerd.

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