{"id":124613,"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:43","modified_gmt":"2025-02-03T15:43:43","slug":"templates-and-masters","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/plantillas-y-maestros","title":{"rendered":"Plantillas y patrones"},"content":{"rendered":"<p>Con Plantillas y Patrones, puedes definir dise\u00f1os y estilos globales para muchas pantallas de tus prototipos.<\/p>\n<h2><a id=\"templates\"><\/a>Plantillas<\/h2>\n<p>Las plantillas son \u00fatiles para crear cuadr\u00edculas de pantalla y establecer dise\u00f1os de elementos por defecto.<\/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>Dise\u00f1a un esquema de pantalla<\/h3>\n<p>Puedes mantener un formato y espaciado coherentes en todo tu prototipo con una cuadr\u00edcula de pantalla. A\u00f1adir una es f\u00e1cil: <\/p>\n<ol>\n<li>Ve a la paleta Plantillas y selecciona \u00abPlantilla 1\u00bb, que abrir\u00e1 un lienzo en blanco. Si no ves la paleta Plantillas, aseg\u00farate de que est\u00e1 marcada para que sea visible en el men\u00fa Ventana. <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=\"Mostrar la paleta Plantillas en el men\u00fa Ventana\" width=\"1458\" height=\"824\"><\/li>\n<li>Pasa el rat\u00f3n por las reglas que hay alrededor del lienzo y haz clic cuando est\u00e9s listo para colocar una gu\u00eda de dise\u00f1o. Puedes hacer clic y arrastrar sobre una gu\u00eda que ya hayas colocado para mover su posici\u00f3n. <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=\"A\u00f1adir gu\u00edas\"><br \/>\nA\u00f1adir gu\u00edas<\/source><\/video><\/li>\n<li>Vuelve a una pantalla de tu prototipo y observa c\u00f3mo se reflejan las gu\u00edas que has dispuesto. Ver\u00e1s estas gu\u00edas en cualquier pantalla que crees con esta plantilla. <\/li>\n<\/ol>\n<p>A continuaci\u00f3n, empieza a construir el contenido del dise\u00f1o, utilizando elementos y widgets para crear dise\u00f1os comunes que esperas utilizar muchas veces, como cabeceras y barras laterales de navegaci\u00f3n. Incluso puedes a\u00f1adir eventos como <strong>Enlaces<\/strong> y efectos <strong>Mouse Over<\/strong> a elementos dentro de la plantilla, y funcionar\u00e1n en todas las pantallas que utilicen esa plantilla. Vuelve a una pantalla de tu prototipo y ver\u00e1s el contenido que acabas de a\u00f1adir en el lienzo. El contenido de la plantilla se colorear\u00e1 para que sepas que procede de una plantilla. Puedes desactivar el tinte en el men\u00fa Ver.<\/p>\n<h3>Crear y asignar una nueva plantilla<\/h3>\n<p>Puedes a\u00f1adir una nueva plantilla en blanco a tu prototipo haciendo clic en el bot\u00f3n \u00ab+\u00bb de la paleta Plantillas.<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=\"Pulsa el bot\u00f3n m\u00e1s para crear una nueva plantilla\" width=\"1062\" height=\"684\"><br \/>\nDespu\u00e9s de crear una nueva plantilla, puedes asignarla a una pantalla de tu prototipo:<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=\"Cambiar plantilla\"><br \/>\nCambiar plantilla<\/video><\/p>\n<ol>\n<li>Selecciona una pantalla en la que quieras utilizar esa plantilla.<\/li>\n<li>Haz clic en el nombre de la pantalla en la paleta Capas o haz doble clic en el lienzo para seleccionar la pantalla.<\/li>\n<li>Ve a la paleta Propiedades y cambia la plantilla en el desplegable \u00abPlantilla\u00bb.<\/li>\n<\/ol>\n<h3>Definir estilos de elementos por defecto<\/h3>\n<p>Tambi\u00e9n puedes especificar las propiedades b\u00e1sicas de los widgets, como el tama\u00f1o, el color y las fuentes en una plantilla:<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=\"Editar estilos de elementos por defecto\" width=\"2058\" height=\"1163\"><\/p>\n<ol>\n<li>Haz clic con el bot\u00f3n derecho en una plantilla de la paleta Plantillas y selecciona \u00abEditar estilo de plantilla\u00bb.<\/li>\n<li>Selecciona elementos de la lista desplegable y personaliza su aspecto.<\/li>\n<\/ol>\n<p>Ahora, cualquier elemento nuevo que coloques en la plantilla y cualquier pantalla que utilice esa plantilla mostrar\u00e1 los estilos que hayas detallado.<\/p>\n<h2><a id=\"masters\"><\/a>Maestros<\/h2>\n<p>Los patrones son elementos o grupos de elementos que puedes reutilizar en tu prototipo. Son \u00fatiles para crear dise\u00f1os base que piensas utilizar muchas veces, como botones CTA, textos y desplegables. Cualquier cambio que hagas en un patr\u00f3n se reflejar\u00e1 en cada instancia de ese patr\u00f3n que utilices en tu prototipo. A diferencia de las plantillas, puedes utilizar muchos patrones diferentes en una misma pantalla. <\/p>\n<h3>Crear un maestro<\/h3>\n<p>A\u00f1adir un nuevo maestro a tu prototipo es f\u00e1cil:<\/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>Ve a la paleta Patrones y haz clic en el bot\u00f3n \u00ab+\u00bb para crear un nuevo patr\u00f3n. Si no ves la paleta Patrones, aseg\u00farate de que est\u00e1 marcada para que sea visible en el men\u00fa Ventana. <\/li>\n<li>F\u00edjate en que no ver\u00e1s un lienzo en blanco sobre el que dise\u00f1ar, como ocurre con las plantillas. Dado que las maquetas son independientes de cualquier pantalla, no tendr\u00e1n un fondo normal como las pantallas y las plantillas. En su lugar, s\u00f3lo tienes que arrastrar y soltar elementos sobre el Lienzo transparente. Al igual que las plantillas, puedes a\u00f1adir eventos a los elementos dentro de una plantilla maestra.   <\/li>\n<\/ol>\n<h3>Editar un maestro<\/h3>\n<p>Para editar o cambiar un patr\u00f3n, haz clic en \u00e9l en la paleta Patrones, o haz doble clic en la instancia del patr\u00f3n en una pantalla, lo que lo abrir\u00e1 para su edici\u00f3n.<\/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>Recuerda que cualquier cambio que realices en un maestro se aplicar\u00e1 a todas sus instancias en todo el prototipo. Si quieres editar un maestro s\u00f3lo para una pantalla concreta, haz clic con el bot\u00f3n derecho del rat\u00f3n en la instancia del maestro en el Lienzo y selecciona \u00abSeparar del maestro\u00bb. Los elementos del maestro de esa pantalla se agrupar\u00e1n en un contenedor de Panel Din\u00e1mico, que podr\u00e1s abrir y editar como prefieras.<\/p>\n<div><strong>Nota:<\/strong> si eliminas un maestro, eliminar\u00e1s todas sus instancias de todas las pantallas. Sin embargo, puedes eliminar una instancia maestra de una pantalla o plantilla sin que ello afecte al resto de sus instancias. <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Con Plantillas y Patrones, puedes definir dise\u00f1os y estilos globales para muchas pantallas de tus prototipos. Plantillas Las plantillas son \u00fatiles para crear cuadr\u00edculas de pantalla&#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":[8418,8419],"tags":[],"class_list":["post-124613","post","type-post","status-publish","format-standard","hentry","category-formacion","category-como-empezar"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124613"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124613"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124613\/revisions"}],"predecessor-version":[{"id":126131,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124613\/revisions\/126131"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}