Principes de base de la mise en page
Structure d'une page web slidde
Slidde.co utilise une structure simple à quatre couches :
- userCompName.Page (Styles Globaux)
- userCompName.Slide (Segmentation du Contenu)
- userCompName.Container (Largeur Réactive, Colonnes Multiples)
- Éléments en Ligne (Contenu Spécifique)
userCompName.Page
La couche userCompName.Page est au sommet et est utilisée pour définir des styles globaux comme les polices, les couleurs et les styles de liens, car les propriétés CSS sont héritables.
Vous pouvez éventuellement utiliser des variables CSS pour rendre votre modèle plus convivial.
Si vous ne pouvez pas sélectionner directement l'élément userCompName.Page, utilisez l'option userCompOption.Select page dans la barre d'outils.
La fonctionnalité userCompOption.hashSection peut simuler un site web multi-pages. Consultez cette démo : Lien de la Démo
userCompName.Slide
Un userCompName.Slide est le premier élément sous un userCompName.Page, utilisé pour segmenter le contenu.
- Les pages simples, comme les pages "lien en bio", peuvent n'avoir qu'un seul Slide.
- Les pages d'atterrissage complexes peuvent inclure plusieurs sections comme #header, #hero, #works, #contact, #footer.
Un userCompOption.htmlId est essentiellement un ID HTML. Nommez-les en fonction du contenu à l'intérieur du userCompName.Slide pour une navigation facile à l'aide de liens comme “#ID”. En savoir plus sur les liens de saut.
Pour masquer un userCompName.Slide du site web final tout en les gardant enregistrés, cochez l'attribut userCompOption.hidden. Cela est similaire aux diapositives cachées de PowerPoint et peut également être utilisé pour des tutoriels.
La fonctionnalité userCompOption.sticky est destinée aux barres de navigation flottantes ou à tout autre élément. Voir un exemple ici : Sticky Demo
userCompName.Container
Un userCompName.Container gère les largeurs réactives et les affichages multi-colonnes.
- Les largeurs mobiles et de bureau diffèrent généralement. Utilisez l'attribut userCompOption.width dans un userCompName.Container pour des largeurs adaptatives sur différents appareils.
- Les colonnes définissent combien de colonnes se trouvent dans un conteneur. Vous pouvez définir des largeurs comme x/12 (par exemple, deux colonnes de 6/12 pour une largeur de 50 % chacune).
Chaque colonne peut également avoir des paramètres d'alignement horizontal et vertical.
Autre
D'autres éléments sont des éléments en ligne, qui peuvent être positionnés à l'intérieur du conteneur.
En suivant cette approche structurée, vous pouvez créer facilement des pages web attrayantes et réactives en utilisant Slidde.co.