Notions de base sur la mise en page

Last updated on 12/2/2024@mrbirddev

Structure d'une page web slidde

Slidde.co utilise une structure simple à quatre couches :

Page
(Styles globaux)
Diapositive
(Segmentation du contenu)
Conteneur
(Largeur réactive, plusieurs colonnes)
Éléments en ligne
(Contenu spécifique)
...
Éléments en ligne
(Contenu spécifique)
...
...
...

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 Sélectionner la 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 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 Caché. Cela est similaire aux diapositives cachées de PowerPoint et peut également être utilisé pour des tutoriels.

La fonctionnalité Collant 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 Largeur 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.

Last updated on 12/2/2024@mrbirddev
Loading...