{"id":124661,"date":"2022-11-16T17:31:19","date_gmt":"2022-11-16T16:31:19","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-an-inline-edit\/"},"modified":"2025-02-03T16:44:44","modified_gmt":"2025-02-03T15:44:44","slug":"how-to-create-an-inline-edit","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-crear-edicion-inline","title":{"rendered":"C\u00f3mo crear un prototipo de edici\u00f3n en l\u00ednea"},"content":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear un prototipo de edici\u00f3n en l\u00ednea.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73262325\/index.html\" width=\"820px\" height=\"180px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">As\u00ed es como se construye:<\/span><\/p>\n<h3><b>Ver<\/b><\/h3>\n<ul>\n<li>Selecciona un \u00abPanel din\u00e1mico\u00bb de la secci\u00f3n \u00abContenido din\u00e1mico\u00bb y col\u00f3calo en el lienzo.<\/li>\n<li>Mant\u00e9n pulsado Comando (Mac) o Control (Windows) y arrastra un \u00abTexto\u00bb al panel. Ver\u00e1s un tinte azul cuando arrastres un elemento dentro.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\"><source src=\"\" type=\"\"><\/source><img decoding=\"async\" src=\"\" alt=\"\">Crear un panel din\u00e1mico<\/video> <\/li>\n<\/ul>\n<ul>\n<li>A\u00f1ade un panel m\u00e1s haciendo clic en el bot\u00f3n \u00ab+\u00bb del men\u00fa.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-2.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<li>A continuaci\u00f3n, selecciona un \u00abCampo de texto de entrada \u00bb de la secci\u00f3n \u00abCampos de entrada interactivos\u00bb y col\u00f3calo dentro del panel manteniendo pulsado comando (Mac) o control (Windows). Para terminar la vista, en el mismo panel, mant\u00e9n pulsado comando y coloca un \u00abBot\u00f3n\u00bb.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-3.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-3.png\" alt=\"Insertar contenido en el panel din\u00e1mico\">Insertar contenido en el panel din\u00e1mico<\/video><\/li>\n<\/ul>\n<h3><b>Eventos<\/b><\/h3>\n<p><span data-preserver-spaces=\"true\">Selecciona el \u00abTexto\u00bb en el panel 1 y haz clic en \u00abA\u00f1adir evento\u00bb en la paleta Eventos.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-4.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer panel activo\u00bb y selecciona Panel 2. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-5.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Con el bot\u00f3n del panel 2 seleccionado, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-6.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abAsignar valor a un elemento\u00bb, y en la pesta\u00f1a \u00abCapas\u00bb del cuadro de di\u00e1logo, selecciona el texto del panel 1.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculado\u00bb para el valor y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-7.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<li><span data-preserver-spaces=\"true\">En el constructor de expresiones de valor, selecciona el \u00abCampo de texto de entrada\u00bb del panel 2. Pulsa \u00abOk\u00bb y \u00abAceptar\u00bb para terminar de crear el evento.  <\/span><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-8.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-8.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-8.png\" alt=\"Creador de expresiones\">Creador de expresiones<\/video><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Por \u00faltimo, con el bot\u00f3n seleccionado, ve a la paleta Eventos y haz clic en \u00ab+\u00bb para crear un nuevo evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-9.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer panel activo\u00bb y haz clic en el panel 1.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/inline-edit-10.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Simula tu prototipo.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear un prototipo de edici\u00f3n en l\u00ednea. As\u00ed es como se construye: Ver Selecciona un \u00abPanel din\u00e1mico\u00bb de la secci\u00f3n \u00abContenido&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8434,8424],"tags":[],"class_list":["post-124661","post","type-post","status-publish","format-standard","hentry","category-interacciones-avanzadas","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124661"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124661"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124661\/revisions"}],"predecessor-version":[{"id":126188,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124661\/revisions\/126188"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}