Le panneau "Idéateur" présente les éléments et les extraits de votre document sous forme d'arborescence. Vous pouvez y accéder depuis le menu Fenêtre.
La liste des éléments du panneau "Idéateur" présente les mêmes fonctionnalités que les éléments de l'espace de création. Par exemple, vous pouvez cliquer sur un élément du panneau "Idéateur" pour le sélectionner et afficher par un clic droit un menu contextuel contenant des commandes spécifiques à cet élément. Vous pouvez aussi double-cliquer sur les composants dotés d'une boîte de dialogue de modification pour l'ouvrir.
Organisation
Pour les annonces HTML5 et les documents HTML comportant des pages, le panneau "Idéateur" organise les éléments sous chaque page du document. Lorsque vous êtes en mode de modification de groupe, seuls les éléments du groupe s'affichent.
Par défaut, le panneau "Idéateur" présente les éléments dans le même ordre que les calques de la timeline en mode avancé. Si vous le souhaitez, vous pouvez trier les éléments par DOM dans vos préférences liées à la vue Conception.
Développer ou réduire un élément : cliquez sur la flèche à côté d'un élément dans le panneau "Idéateur" pour afficher ou masquer les éléments imbriqués.
Développer ou réduire tous les éléments imbriqués : double-cliquez sur la flèche à côté d'un élément pour développer ou réduire tous les éléments répertoriés sous l'élément en question. Vous pouvez aussi maintenir la touche Ctrl (Windows), ⌘ ou Alt (Mac) enfoncée tout en cliquant sur la flèche pour obtenir le même résultat.
Réorganiser les éléments : faites glisser un élément à l'emplacement souhaité dans la liste. Une ligne jaune apparaît à l'endroit où l'élément va être déplacé. Vous pouvez aussi faire glisser un élément enfant vers un autre élément parent.
Imbriquer des éléments : vous pouvez imbriquer un élément dans un autre en le faisant glisser vers le nouvel élément parent. Une zone jaune apparaît autour de l'élément parent potentiel.
Sélection
Votre sélection dans l'espace de création est dupliquée dans la timeline en mode avancé et dans le panneau "Idéateur". En d'autres termes, lorsque vous sélectionnez un élément à un endroit, il est également sélectionné dans les autres. Google Web Designer vous permet de basculer entre les différents niveaux des éléments imbriqués ou entre différentes pages, selon vos besoins. L'étiquette de l'élément parent actuel s'affiche en jaune.
Sélectionner un élément : cliquez sur un élément pour le sélectionner.
Sélectionner plusieurs éléments : vous pouvez sélectionner plusieurs éléments s'ils partagent le même élément parent.
- Maintenez la touche Ctrl (Windows) ou ⌘ (Mac) enfoncée tout en cliquant sur les éléments que vous souhaitez ajouter à la sélection.
- Pour sélectionner une série d'éléments, cliquez sur le premier d'entre eux, puis appuyez sur la touche Maj tout en cliquant sur le dernier élément.
Désélectionner un élément : maintenez la touche Ctrl (Windows) ou ⌘ (Mac) enfoncée tout en cliquant sur l'élément que vous souhaitez supprimer de la sélection.
Parcourir un élément : double-cliquez sur un élément pour y accéder afin qu'il devienne l'élément parent actif. Vous pouvez modifier des éléments enfants existants ou imbriquer de nouveaux éléments sous l'élément parent. Si l'élément est un composant doté d'une boîte de dialogue de modification, le fait de double-cliquer dessus ouvre la boîte de dialogue.
État et type de l'élément
Pour chaque élément, le panneau "Idéateur" affiche une icône indiquant le type de l'élément, ainsi que son ID, son nom ou son texte si ces informations sont disponibles. Le panneau "Idéateur" comporte également les icônes d'état suivantes :
- Une icône en forme de losange indique lorsqu'un élément comporte une liaison de données dynamique.
- Les calques de guide comportent une icône sur laquelle vous pouvez cliquer pour les convertir en éléments standards.
- Les éléments masqués et verrouillés sont associés à des icônes d'état sur lesquelles vous pouvez cliquer pour afficher ou déverrouiller les éléments. Passez la souris sur un élément visible ou déverrouillé pour afficher les icônes vous permettant de le masquer ou de le verrouiller.
Icônes de chaque type d'élément
Pages
| Page principale | |
| Page |
Éléments
| Groupe | |
| Div | |
| Image | |
| amp-img (image dans un document AMP) | |
| Élément vidéo | |
| Champ de saisie | |
| Liste numérotée | |
| Liste à puces | |
| Lien |
Formes
| Trajectoire (tracée à l'aide de l'outil Stylo) | |
| Rectangle | |
| Ovale | |
| Ligne |
Composants
| Composant "Geste" | |
| Composant "Bouton 'Image'" | |
| Composant "Parallaxe" | |
| Composant "Zone cliquable" | |
| Composant "Appuyer pour appeler/envoyer un SMS" | |
| Composant "Galerie à 360°" | |
| Composant "Galerie carrousel" | |
| Composant "Navigation dans la galerie" | |
| Composant "Galerie à faire glisser" | |
| Composant "Galerie de transition" | |
| Composant "amp-carousel" | |
| Composant "Audio" | |
| Composant "Vidéo" | |
| Composant "YouTube" | |
| Composant "Outil de visualisation du modèle 3D" | |
| Composant "Effet d'image" | |
| Composant "Effets de particules" | |
| Composant "Feuille de sprites" | |
| Composant "Swirl" | |
| Composant "Bouton" | |
| Composant "Case à cocher" | |
| Composant "Menu déroulant" | |
| Composant "Libellé" | |
| Composant "Saisie de numéro" | |
| Composant "Case d'option" | |
| Composant "Curseur" | |
| Composant "Champ de texte" | |
| Composant "Ajouter à l'agenda" | |
| Composant "Date Swap" | |
| Composant "Carte" | |
| Composant "Street View" | |
| Composant "iFrame" | |
| Composant "Notes" |
Éléments Backdrop
| Élément Backdrop rectangulaire | |
| Élément Backdrop ovale | |
| Élément Backdrop polygonal |
Extraits
| Extrait audio | |
| Extrait vidéo ou illustré |
Icônes d'état
| Comporte une liaison dynamique ou une liaison de variante | |
| Calque de guide | |
| Masqué/Affiché (apparaît lors du survol avec la souris) | |
| Verrouillé/Déverrouillé (apparaît lors du survol avec la souris) |
Filtrage
Vous pouvez filtrer la liste d'éléments qui s'affichent dans le panneau "Idéateur". Si un élément correspond à un filtre, l'élément parent et les autres éléments ancêtres s'affichent également afin que vous puissiez situer l'élément correspondant au filtre par rapport à la structure du document.
Pour filtrer des éléments, cliquez dans le champ à côté de l'icône en forme de loupe en haut du panneau "Idéateur", puis saisissez une partie de l'ID d'un élément, de la valeur de la propriété de nom, du nom du tag ou du nom du groupe. La correspondance des éléments textuels se base également sur leur contenu. Si vous saisissez le nom d'un élément, les composants qui l'utilisent correspondent.
Vous pouvez également utiliser des filtres par type d'élément.
Filtres par type d'élément
Le panneau "Idéateur" inclut des filtres afin de n'afficher que certains types d'éléments, comme du texte ou des formes, par exemple. En haut du panneau "Idéateur", cliquez sur les icônes correspondant aux types d'éléments que vous voulez voir dans ce dernier. Lorsque plusieurs filtres sont actifs, les éléments qui correspondent aux filtres actifs s'affichent.
Icônes de filtre par type d'élément
| Permet d'afficher les images et les vidéos | |
| Permet d'afficher les composants | |
| Permet d'afficher le texte | |
| Permet d'afficher les formes |