Ajouter et réorganiser les éléments d’une section
Une section contient des éléments : textes, images, boutons et conteneurs. Les conteneurs servent à regrouper et à disposer leur contenu. Les calques montrent cette organisation et permettent de la modifier sans saisir de HTML.
1. Lire les parents et les enfants
Dans Design, ouvrez Calques et passez en Expert. Dans l’arbre, un enfant est décalé sous son parent. Dépliez un conteneur pour voir ce qu’il contient.
Dans notre exemple, une grille contient deux cartes. Chaque carte contient un titre et un paragraphe. Pour changer la disposition des deux cartes, sélectionnez la grille. Pour changer la disposition du contenu d’une carte, sélectionnez cette carte.
Cliquez sur une ligne et observez le cadre de sélection dans le rendu. Cette vérification évite de modifier tout un ensemble alors que vous vouliez agir sur un seul texte.
2. Ajouter un élément à la bonne place
Lecture impossible. Réessayez avec les commandes vidéo.
Faites un clic droit sur l’élément de repère, puis choisissez Insérer avant…, Insérer après… ou Insérer à l’intérieur…. Sélectionnez un type proposé par l’interface : <p> pour un paragraphe ou <div> pour un conteneur, par exemple.
Avant et après ajoutent un voisin dans le même parent. À l’intérieur ajoute un enfant dans la cible. Pour cette dernière commande, sélectionnez un conteneur adapté dans les calques.
L’élément ajouté peut être vide. Retrouvez-le dans les calques, puis saisissez son contenu et réglez son apparence dans le panneau. Son ordre dans l’arbre et la disposition de son parent déterminent sa place à l’écran.
3. Créer un conteneur autour d’un élément
Lecture impossible. Réessayez avec les commandes vidéo.
- Sélectionnez l’élément à regrouper.
- Faites un clic droit et ouvrez Envelopper avec….
- Choisissez
<div>. - Ouvrez les calques : le nouveau conteneur est le parent de l’élément sélectionné.
Vous pouvez ensuite régler le conteneur pour organiser ses enfants ou leur donner un fond commun. La commande conserve le texte d’origine. Annuler rétablit le parent précédent et retire le conteneur ajouté en un seul geste.
4. Déplacer un élément dans les calques
Dépliez les conteneurs concernés, puis faites glisser la ligne de l’élément vers le conteneur de destination. Repérez l’indication de dépôt avant de relâcher la souris. Déposer sur un conteneur et déposer entre deux lignes ne demandent pas la même position.
Dans la démonstration, le titre Prendre le temps quitte la première carte et rejoint la deuxième. Ce déplacement conserve l’élément ; il ne crée pas une copie. La première carte garde son paragraphe.
Après le dépôt, vérifiez le nouveau parent dans les calques et la disposition dans le rendu. Les réglages de l’élément restent les siens, mais ceux du nouveau parent peuvent changer sa place ou l’espace disponible. Cliquez sur Annuler si la destination ne convient pas.
5. Dupliquer ou retirer la bonne sélection
Pour créer une copie dans le même parent, faites un clic droit sur l’élément et choisissez Dupliquer. Vérifiez ensuite que vous sélectionnez la copie avant de modifier son contenu.
Pour la retirer, choisissez Supprimer dans son menu contextuel. L’original doit rester présent. Si vous supprimez un conteneur, ses enfants sont retirés avec lui : vérifiez donc le cadre et la ligne sélectionnée avant cette commande.
Pour déplacer plutôt que copier, vous pouvez aussi utiliser Couper, puis Coller. Le collage dans une autre cible se fait à l’intérieur de cette cible ; choisissez le conteneur attendu.
6. Vérifier avant de poursuivre
Contrôlez trois choses : le parent, l’ordre et le contenu. Vérifier seulement qu’un texte apparaît encore ne suffit pas à confirmer que la structure est correcte.
Cliquez sur Enregistrer. Après une réorganisation importante, rechargez et vérifiez les calques ainsi que le rendu. Les gestes montrés ici ont été contrôlés avec les identifiants, les parents et l’ordre sauvegardés, puis après rechargement.
Pour continuer
Comprendre les positions d’insertion