{"id":124608,"date":"2018-03-08T15:31:34","date_gmt":"2018-03-08T14:31:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/templates-and-masters\/"},"modified":"2025-02-03T16:43:49","modified_gmt":"2025-02-03T15:43:49","slug":"templates-and-masters","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/templates-and-masters","title":{"rendered":"Mod\u00e8les et Masters"},"content":{"rendered":"<p>Avec les mod\u00e8les et les masters, vous pouvez d\u00e9finir des mises en page et des styles globaux pour de nombreux \u00e9crans dans vos prototypes.<\/p>\n<h2><a id=\"templates\"><\/a>Mod\u00e8les<\/h2>\n<p>Les mod\u00e8les sont utiles pour cr\u00e9er des grilles d&rsquo;\u00e9cran et \u00e9tablir des designs d&rsquo;\u00e9l\u00e9ments par d\u00e9faut.<\/p>\n<div class=\"embed-container\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/781862690\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<h3>Design d&rsquo;un \u00e9cran<\/h3>\n<p>Une grille d&rsquo;\u00e9cran vous permet de conserver une mise en forme et un espacement coh\u00e9rents dans l&rsquo;ensemble de votre prototype. Il est facile d&rsquo;en ajouter une : <\/p>\n<ol>\n<li>Allez dans la palette Mod\u00e8les et s\u00e9lectionnez \u00ab\u00a0Mod\u00e8le 1\u00a0\u00bb, ce qui ouvrira un canevas vierge. Si vous ne voyez pas la palette des mod\u00e8les, assurez-vous qu&rsquo;elle est visible dans le menu Fen\u00eatre. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42930\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/06\/Templates-Palette.png\" alt=\"Affichez la palette Mod\u00e8les dans le menu Fen\u00eatre\" width=\"1458\" height=\"824\"><\/li>\n<li>Survolez les r\u00e8gles autour du canevas et cliquez lorsque vous \u00eates pr\u00eat \u00e0 placer un guide de mise en page. Vous pouvez cliquer sur un guide d\u00e9j\u00e0 plac\u00e9 et le faire glisser pour le d\u00e9placer. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/add-guides.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/add-guides.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/add-guides.png\" alt=\"Ajouter des guides\"><br \/>\nAjouter des guides<\/source><\/video><\/li>\n<li>Revenez \u00e0 un \u00e9cran de votre prototype et remarquez comment les guides que vous avez dispos\u00e9s se refl\u00e8tent. Vous verrez ces guides sur tous les \u00e9crans que vous cr\u00e9erez avec ce mod\u00e8le. <\/li>\n<\/ol>\n<p>Ensuite, commencez \u00e0 construire le contenu de la mise en page, en utilisant des \u00e9l\u00e9ments et des widgets pour cr\u00e9er des designs communs que vous pr\u00e9voyez d&rsquo;utiliser plusieurs fois, comme les en-t\u00eates et les barres lat\u00e9rales de navigation. Vous pouvez m\u00eame ajouter des \u00e9v\u00e9nements tels que les <strong>liens<\/strong> et les effets de <strong>survol de la souris<\/strong> aux \u00e9l\u00e9ments du mod\u00e8le, qui fonctionneront sur tous les \u00e9crans utilisant ce mod\u00e8le. Revenez \u00e0 un \u00e9cran de votre prototype et vous verrez le contenu que vous venez d&rsquo;ajouter sur le canevas. Le contenu du mod\u00e8le sera teint\u00e9 pour vous indiquer qu&rsquo;il provient d&rsquo;un mod\u00e8le. Vous pouvez d\u00e9sactiver cette teinte dans le menu Affichage.<\/p>\n<h3>Cr\u00e9er et attribuer un nouveau mod\u00e8le<\/h3>\n<p>Vous pouvez ajouter un nouveau mod\u00e8le vierge \u00e0 votre prototype en cliquant sur le bouton \u00ab\u00a0+\u00a0\u00bb dans la palette Mod\u00e8les.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42932\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/06\/AddnewTemplate.png\" alt=\"Cliquez sur le bouton plus pour cr\u00e9er un nouveau mod\u00e8le\" width=\"1062\" height=\"684\"><br \/>\nApr\u00e8s avoir cr\u00e9\u00e9 un nouveau mod\u00e8le, vous pouvez l&rsquo;affecter \u00e0 un \u00e9cran de votre prototype :<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/change-template.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" change-template.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/change-template.png\" alt=\"Modifier le mod\u00e8le\"><br \/>\nModifier le mod\u00e8le<\/video><\/p>\n<ol>\n<li>S\u00e9lectionnez un \u00e9cran dans lequel vous souhaitez utiliser ce mod\u00e8le.<\/li>\n<li>Cliquez sur le nom de l&rsquo;\u00e9cran dans la palette des calques ou double-cliquez sur le canevas pour s\u00e9lectionner l&rsquo;\u00e9cran.<\/li>\n<li>Acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s et modifiez le mod\u00e8le dans le menu d\u00e9roulant \u00ab\u00a0Mod\u00e8le\u00a0\u00bb.<\/li>\n<\/ol>\n<h3>D\u00e9finir des styles d&rsquo;\u00e9l\u00e9ments par d\u00e9faut<\/h3>\n<p>Vous pouvez \u00e9galement sp\u00e9cifier les propri\u00e9t\u00e9s de base des widgets, telles que la taille, la couleur et les polices dans un mod\u00e8le :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42861\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/06\/Edit-Template-Element-Styling.png\" alt=\"Modifier les styles d'\u00e9l\u00e9ments par d\u00e9faut\" width=\"2058\" height=\"1163\"><\/p>\n<ol>\n<li>Cliquez avec le bouton droit de la souris sur un mod\u00e8le dans la palette Mod\u00e8les et s\u00e9lectionnez \u00ab\u00a0Modifier le style du mod\u00e8le\u00a0\u00bb.<\/li>\n<li>S\u00e9lectionnez des \u00e9l\u00e9ments dans la liste d\u00e9roulante et personnalisez leur apparence.<\/li>\n<\/ol>\n<p>D\u00e9sormais, tous les nouveaux \u00e9l\u00e9ments que vous placerez sur le mod\u00e8le et tous les \u00e9crans qui utiliseront ce mod\u00e8le afficheront les styles que vous avez d\u00e9taill\u00e9s.<\/p>\n<h2><a id=\"masters\"><\/a>Ma\u00eetres<\/h2>\n<p>Les ma\u00eetres sont des \u00e9l\u00e9ments ou des groupes d&rsquo;\u00e9l\u00e9ments que vous pouvez r\u00e9utiliser dans votre prototype. Ils sont utiles pour cr\u00e9er des designs de base que vous pr\u00e9voyez d&rsquo;utiliser plusieurs fois, comme les boutons CTA, les textes et les listes d\u00e9roulantes. Toute modification apport\u00e9e \u00e0 un \u00e9l\u00e9ment ma\u00eetre sera r\u00e9percut\u00e9e dans toutes les instances de cet \u00e9l\u00e9ment ma\u00eetre que vous utiliserez dans votre prototype. Contrairement aux mod\u00e8les, vous pouvez utiliser plusieurs masters diff\u00e9rents sur un m\u00eame \u00e9cran. <\/p>\n<h3>Cr\u00e9er un master<\/h3>\n<p>Il est facile d&rsquo;ajouter un nouveau ma\u00eetre \u00e0 votre prototype :<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742188835\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Allez dans la palette Masters et cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb pour cr\u00e9er un nouveau master. Si vous ne voyez pas la palette Masters, assurez-vous qu&rsquo;elle est visible dans le menu Fen\u00eatre. <\/li>\n<li>Notez que vous ne verrez pas de toile blanche vierge sur laquelle vous pourrez faire votre design, comme c&rsquo;est le cas avec un mod\u00e8le. Les masters \u00e9tant ind\u00e9pendants de tout \u00e9cran, ils n&rsquo;ont pas d&rsquo;arri\u00e8re-plan r\u00e9gulier comme les \u00e9crans et les mod\u00e8les. Au lieu de cela, vous pouvez simplement faire glisser et d\u00e9poser des \u00e9l\u00e9ments sur le canevas transparent. Comme pour les mod\u00e8les, vous pouvez ajouter des \u00e9v\u00e9nements aux \u00e9l\u00e9ments d&rsquo;un master.   <\/li>\n<\/ol>\n<h3>Modifier un master<\/h3>\n<p>Pour \u00e9diter ou modifier un master, cliquez dessus dans la palette des masters, ou double-cliquez sur l&rsquo;instance du master sur un \u00e9cran, ce qui l&rsquo;ouvrira \u00e0 l&rsquo;\u00e9dition.<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 58%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742188894\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>N&rsquo;oubliez pas que toute modification apport\u00e9e \u00e0 un fichier ma\u00eetre sera appliqu\u00e9e \u00e0 toutes ses instances dans l&rsquo;ensemble du prototype. Si vous souhaitez modifier un master pour un \u00e9cran sp\u00e9cifique, cliquez avec le bouton droit de la souris sur l&rsquo;instance du master sur le canevas et s\u00e9lectionnez \u00ab\u00a0D\u00e9tacher du master\u00a0\u00bb. Les \u00e9l\u00e9ments du master sur cet \u00e9cran seront regroup\u00e9s dans un panneau dynamique, que vous pourrez ouvrir et modifier \u00e0 votre guise.<\/p>\n<div><strong>Remarque :<\/strong> si vous supprimez un fichier ma\u00eetre, vous supprimerez toutes ses instances dans tous les \u00e9crans. Toutefois, vous pouvez supprimer une instance de master d&rsquo;un \u00e9cran ou d&rsquo;un mod\u00e8le sans affecter le reste de ses instances. <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Avec les mod\u00e8les et les masters, vous pouvez d\u00e9finir des mises en page et des styles globaux pour de nombreux \u00e9crans dans vos prototypes. Mod\u00e8les Les&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8417],"tags":[],"class_list":["post-124608","post","type-post","status-publish","format-standard","hentry","category-formation","category-pour-commencer"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124608"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124608"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124608\/revisions"}],"predecessor-version":[{"id":126132,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124608\/revisions\/126132"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}