Google Web Designer offre une grande zone centrale pour la création de vos projets et la modification du code. Cette zone est entourée d'une barre d'outils, d'une barre d'options de l'outil sélectionné, d'une timeline et d'un ensemble de panneaux qui permettent de modifier des éléments ou d'ajouter des composants, des événements, etc.
Document
Au centre de l'interface de Google Web Designer se trouve le document actif.
Deux vues sont disponibles pour le document :
- La vue Conception affiche les images, les textes et les autres éléments de votre document de la même manière que dans un navigateur. L'espace de création blanc représente la zone visible de l'annonce ou de la page Web.
- La vue Code affiche le code du document avec le code de couleurs et la mise en forme appropriés.
Pour personnaliser les vues Conception et Code, définissez vos préférences.
Barre Vue
La barre Vue vous permet de choisir entre les vues Conception et Code, de prévisualiser votre document dans un navigateur et de publier votre annonce.
Outils
La barre d'outils contient des outils de création et de manipulation des éléments dans l'espace de création. Il s'agit notamment d'outils de création de textes et d'éléments de page simples, d'outils de sélection de couleurs et d'outils 3D.
Outil | Description |
---|---|
Outil de sélection |
Permet de sélectionner et de déplacer des objets dans l'espace de création. |
Outil Trajectoire d'animation |
Permet de tracer des trajectoires d'animation courbes pour les éléments animés. Non disponible pour les annonces AMP HTML et illustrées. |
Outil de rotation des objets en 3D |
Permet de faire pivoter des objets dans un espace tridimensionnel. |
Outil de translation des objets en 3D |
Permet de déplacer des objets dans un espace tridimensionnel. |
Outil d'élément |
Permet de créer des balises HTML de n'importe quel type par cliquer-déposer sur l'espace de création. |
Outils Stylo, Ovale, Rectangle et Ligne |
Permettent de créer des dessins SVG, y compris des formes élémentaires avec l'outil Forme et des courbes de Bézier avec l'outil Stylo. |
Outil Texte |
Permet d'ajouter ou de modifier du texte. |
Masques rectangulaire, ovale et polygonal |
Permettent d'ajouter un masque de chemin de découpe à un élément. |
Outils Backdrop rectangulaire, ovale et polygonal |
Permet d'ajouter un élément div avec un filtre Backdrop. Disponible uniquement pour les documents illustrés et vidéo. |
Outils Remplissage, Trait et Dégradé |
Permet de modifier la couleur de remplissage, de trait et de dégradé des éléments de votre projet. |
Outil Pipette |
Permet de sélectionner la couleur d'un élément dans l'espace de création. |
Outil de rotation de l'espace de création en 3D |
Permet de modifier la vue 3D du projet. |
Outil Main |
Permet de modifier la vue de l'espace de création. |
Outil Zoom |
Permet d'effectuer un zoom avant ou arrière sur votre création. |
Couleur du remplissage et du trait |
Permet de modifier la couleur actuelle du remplissage et du trait (bordure). |
Options des outils
La barre d'options des outils affichée en haut montre les options disponibles pour l'outil sélectionné. Par exemple, si l'outil Texte est sélectionné, la barre affiche des options de police et de mise en page.
Timeline
La timeline vous permet de créer des animations à l'aide d'images clés. En mode rapide, l'animation est créée scène par scène. En mode avancé, vous pouvez animer chaque élément séparément.
Panneaux
Les panneaux disponibles sont les suivants : Couleur, Propriétés, Texte, Composants, CSS, Effets CSS, Responsive, Événements, Créations dynamiques, Bibliothèque, Outil de validation des annonces et Idéateur. Vous pouvez redimensionner, repositionner, combiner et fermer ces panneaux. En savoir plus sur la façon d'organiser les panneaux
Onglets de documents
Lorsque plusieurs documents sont ouverts, les noms des fichiers s'affichent sur des onglets distincts. Vous pouvez passer d'un document à l'autre en cliquant sur un onglet. Vous pouvez également appuyer sur les touches Ctrl+Tabulation pour accéder au document suivant ou sur Maj+Ctrl+Tabulation pour revenir au document précédent.
Si tous les onglets de documents ne sont pas visibles dans la fenêtre, vous pouvez voir la liste de ceux qui sont ouverts dans un menu contextuel en cliquant sur l'icône située à droite des onglets. Sélectionnez un document pour y accéder, ou passez la souris sur le nom du fichier correspondant et cliquez sur x pour le fermer.