Notions de base sur la mise en page
Structure d'une page web slidde
Slidde.co utilise une structure simple à quatre couches :
Page
La couche Page est en haut 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 les variables CSS pour rendre votre modèle plus convivial.
Si vous ne pouvez pas sélectionner directement l'élément Page, utilisez l'option userCompOption.Select page dans la barre d'outils.
La fonctionnalité Section de hachage peut simuler un site web multi-pages. Découvrez cette démo : Lien de la démo
Diapositive
Un Diapositive est l'élément de premier niveau sous un Page, utilisé pour segmenter le contenu.
- Les pages simples, comme les pages "link in bio", peuvent n'avoir qu'un seul Slide.
- Les pages d'atterrissage complexes peuvent inclure plusieurs sections comme #header, #hero, #works, #contact, #footer.
Un ID d'ancre (ID HTML) est essentiellement un ID HTML. Nommez-les en fonction du contenu dans le Diapositive pour une navigation facile à l'aide de liens comme “#ID”. En savoir plus sur les liens de saut.
Pour masquer un Diapositive 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 : Démo Sticky
Conteneur
Un Conteneur 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 Conteneur pour des largeurs adaptatives sur les appareils.
- Les colonnes définissent combien de colonnes sont dans un conteneur. Vous pouvez définir des largeurs comme x/12 (par exemple, deux colonnes de 6/12 pour 50% de largeur 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 visuellement attrayantes et réactives en utilisant Slidde.co.