Créer une mise en page réactive à 3 colonnes

Aperçu

Ce didacticiel montre comment utiliser le Avonni Colonnes composant pour créer une mise en page à trois colonnes qui s'affichent côte à côte sur les grands écrans mais se empilent automatiquement verticalement sur les petits écrans (comme les appareils mobiles).

Objectif : Obtenir une mise en page à 3 colonnes sur les ordinateurs/tablètes qui devient une mise en page à une seule colonne sur les téléphones.

Étapes

Étape 1 : Ajouter le composant Colonnes :

• Glissez le Colonnes composant depuis la bibliothèque de composants sur votre canevas. Ce composant sert de conteneur pour vos colonnes individuelles.

Étape 2 : Ajouter trois éléments de colonne :

• Sélectionnez le Colonnes composant que vous venez d'ajouter.

• Trouvez la section de gestion des colonnes dans le panneau des propriétés (côté droit).

• Cliquez sur le bouton "+" trois fois pour créer trois conteneurs de colonne individuels à l'intérieur du composant principal Colonnes.

Étape 3 : Configurer les tailles réactives pour chaque colonne :

• Concept : La plupart des systèmes de mise en page utilisent une grille (souvent large de 12 unités). Vous indiquerez à chaque colonne combien d'unités occuper sur différentes tailles d'écran. Chaque colonne doit occuper toute la largeur (12 unités) pour s'empiler sur les petits écrans. Pour être côte à côte sur les grands écrans, chacune doit prendre moins (par exemple 4 unités pour une mise en page à trois colonnes).

• Sélectionnez la colonne 1 : Cliquez sur le premier élément de colonne dans les propriétés du composant Colonnes.

  • Définissez Taille (Grand conteneur) (ou propriété similaire pour les grands écrans) à 4.

  • Définissez Taille (Conteneur moyen) (ou similaire pour les écrans moyens) à 4.

  • Définissez Taille (Petit conteneur) (ou similaire pour les petits écrans) à 12.

• Sélectionnez la colonne 2 : Cliquez sur le deuxième élément de colonne.

  • Définissez Taille (Grand conteneur) sur 4.

  • Définissez Taille (Conteneur moyen) sur 4.

  • Définissez Taille (Petit conteneur) sur 12.

• Sélectionnez la colonne 3 : Cliquez sur le troisième élément de colonne.

  • Définissez Taille (Grand conteneur) sur 4.

  • Définissez Taille (Conteneur moyen) sur 4.

  • Définissez Taille (Petit conteneur) sur 12.

Étape 4 : Configurer les paramètres généraux du composant Colonnes (optionnel) :

• Sélectionnez de nouveau le Colonnes composant principal.

• Alignement horizontal : Cela contrôle comment le groupe de colonnes s'aligne dans l'espace disponible (par ex., Début, Centre, Fin). Choisissez Début si vous voulez qu'elles soient alignées à gauche.

• Alignement vertical : Cela contrôle comment le contenu à l'intérieur des colonnes s'aligne verticalement si les colonnes ont des hauteurs différentes (par ex., Haut, Centre, Bas). Choisissez Haut pour un alignement standard.

• Autoriser le retour à la ligne : Assurez-vous que cette option (si présente) est activée. Cela permet aux colonnes de passer à la ligne suivante lorsqu'elles ne tiennent pas horizontalement. Elle est généralement activée par défaut.

Étape 5 : Ajouter du contenu et prévisualiser :

• Glissez d'autres composants Avonni (Texte, Images, Boutons, etc.) dans chacune des trois colonnes que vous avez créées.

• Utilisez le Aperçu bouton. Redimensionnez votre fenêtre de navigateur pour voir comment les colonnes s'empilent automatiquement verticalement sur les petits écrans et s'affichent côte à côte sur les grands écrans.