Ancienne page d'Yvon avant modifications de Dominic le 25 oct 11 h 30
Activité individuelle « Mains sur les touches »
La section
À partir du gabarit « 3 Cards » disponible à l'intérieur de la vitrine :
- Ajuster les « padding »
- Définir une couleur d'arrière plan
- Dupliquer un élément
- Déplacer une section
Informations utiles
Lors de la sélection de la section, la classe "Section" est affichée dans la barre flottante.
Au moment de la sélection, le panneau « De base » s'affiche et vous permet de personnaliser la section.
Les « paddings » sont « responsive » : Les espacements s'adaptent à la largeur des écrans
Les colonnes
- Ajuster les largeurs
Informations utiles
Le gabarit « 3 Cards » possède 3 colonnes. On constate que celles-ci se réorganisent sur les petits écrans.
L'analyse des classes révèle la largeur de la colonne sur les écrans de taille supérieure à MD.
Rappel : La grille Boostrap est constituée de 12 espaces en largeur.
Vous pouvez remplacer la classe col-md-4 par col-md-6 afin qu'elle occupe la moitié de la largeur de l'écran.
La barre de titre
- Remplacer la couleur d'arrière plan
- Remplacer la couleur de la police
- Remplacer une icône
- Taille de l'icône
Informations utiles
Le gabarit « 3 Cards » possède une barre de titre
L'analyse des classes révèle la classe bg-primary en lien avec le choix de couleur d'arrière-plan. On remarque également des espacements pour les écrans SM, MD et LG.
Une fois sélectionnée, l'icône peut être remplacée à partir du panneau « De base ».
Les composants
- Remplacer le contenu d'une colonne par une carte avatar
- Ajouter une vidéo à l'intérieur de la carte
- Ajouter un paragraphe (lien autolink)
- Éditer un paragraphe
Informations utiles
Le gabarit « 3 Cards » possède une carte et on souhaite remplacer la carte existante par une carte Avatar.
- À l'aide du panneau « Arborescence », on localise à carte existante à supprimer
- On accède au panneau « Composants » afin de glisser-déposer la carte Avatar à l'intérieur de la colonne
La validation
- Prévisualiser le rendu pour les différents types d'écrans
- Sauvegarder pour fermer la fenêtre de l'éditeur
- Sauvegarder la ressource ou l'activité Moodle
Informations utiles
Prenez un moment pour activer l'aperçu.
- Vous remarquerez que le mode d'affichage « Canevas » altère l'affichage des marges étant donné la présence des lignes pointillées
- Activez les différents types d'écran afin de valider vos marges et l'affichage des éléments de votre page
