Principes de base de la mise en page

Last updated on 10/29/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, Colonnes Multiples)
  • Éléments en Ligne (Contenu Spécifique)

Page

La couche 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 Page, utilisez l'option Sélectionner la page dans la barre d'outils.

La fonctionnalité Afficher/masquer la diapositive par le hachage d'URL peut simuler un site web multi-pages. Consultez cette démo : Lien de la Démo

Diapositive

Un Diapositive est le premier élément sous un 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 ID d'ancre (ID HTML) est essentiellement un ID HTML. Nommez-les en fonction du contenu à l'intérieur du 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é Fixe (reste en haut après le défilement) est destinée aux barres de navigation flottantes ou à tout autre élément. Voir un exemple ici : Sticky Demo

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 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.