From e5df6de8fcaf700bfc1c8ced8ffd0dce66f9d00d Mon Sep 17 00:00:00 2001 From: komkida91 Date: Sat, 14 Feb 2026 20:17:54 +0100 Subject: [PATCH] feat(layout): ancho total y dos columnas con control por bloque --- elementor/templates/elementor_builder.html | 31 +++++++++++++++------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/elementor/templates/elementor_builder.html b/elementor/templates/elementor_builder.html index ee930af..1cc2176 100644 --- a/elementor/templates/elementor_builder.html +++ b/elementor/templates/elementor_builder.html @@ -17,7 +17,7 @@ .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#59d9c8,#7aa7ff)} .section-title{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:12px 0 8px} .block-item{background:var(--panel2);border:1px solid var(--border);padding:8px 10px;border-radius:10px;margin-bottom:8px;cursor:grab} - .main{padding:18px} + .main{padding:10px} .topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .save-status{font-size:12px;color:var(--muted);min-width:150px;text-align:right} .save-status.ok{color:#34d399} @@ -28,7 +28,7 @@ .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)} .btn.icon{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center} .btn.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(89,217,200,.15)} - .preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:14px;width:100%;max-width:none;margin:0 auto} + .preview-shell{background:#0f1520;border:1px solid #222b3a;border-radius:18px;padding:0;width:100%;max-width:none;margin:0 auto} body.ub24 .preview-shell{background:#eef1f6;border-color:#e5e7eb} body.ub24 .apple-bar{display:none} body.ub24 .preview-shell{padding:0;border-radius:12px} @@ -49,7 +49,7 @@ .apple-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:8px 12px;font-size:12px;color:#334155;display:flex;align-items:center;gap:6px} .apple-dot{width:9px;height:9px;border-radius:50%} .red{background:#f87171}.yellow{background:#fbbf24}.green{background:#4ade80} - .canvas{min-height:700px;padding:34px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)} + .canvas{min-height:700px;padding:18px;background:#f6f7fb;transition:background .6s ease,color .4s ease; color:var(--site-text,#0b0c10)} .block{background:var(--site-card,#fff);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-4);border:1px solid transparent;box-shadow:0 12px 30px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:fadeUp .25s ease;color:var(--site-text,#0b0c10);position:relative;will-change:transform;cursor:grab} .block.dragging,.block.resizing{transition:none;cursor:grabbing} body.dragging{user-select:none} @@ -485,7 +485,7 @@ const state = { } function defaultData(type){ switch(type){ - case "menu": return { title:"Menu", items:[], menu_mode:"both" }; + case "menu": return { title:"Menu", items:[], menu_mode:"both", full_width:true }; case "hero": return { title:"Tu propuesta de valor", subtitle:"Explica en una frase por que elegirte.", button_text:"Contactar", button_url:"#contacto", image_url:"" }; case "text": return { text:"Describe tu negocio aqui." }; case "image": return { url:"", alt:"", caption:"", fit:"cover", overlay_text:"" }; @@ -952,8 +952,9 @@ const state = { inner.style.zIndex = "1"; if (!state.settings.free_drag && state.settings.two_col){ inner.style.display = "grid"; - inner.style.gridTemplateColumns = "1fr 1fr"; + inner.style.gridTemplateColumns = "repeat(2,minmax(0,1fr))"; inner.style.gap = "16px"; + inner.style.width = "100%"; } canvas.appendChild(inner); if (!state.blocks.length){ inner.innerHTML = '
Arrastra bloques para empezar.
'; return; } @@ -982,10 +983,15 @@ const state = { } else { el.style.transform = ""; if (state.settings.two_col){ - const fullTypes = ["menu","hero","gallery","contact","video","map","calendar"]; - if (fullTypes.includes(block.type)){ el.style.gridColumn = "1 / -1"; } - const w = Math.max(30, Math.min(100, Number(block.data?.width || 100))); - el.style.width = `${w}%`; + const isFullWidth = block.type === "menu" || !!block.data?.full_width; + if (isFullWidth){ + el.style.gridColumn = "1 / -1"; + const w = Math.max(30, Math.min(100, Number(block.data?.width || 100))); + el.style.width = `${w}%`; + } else { + el.style.gridColumn = ""; + el.style.width = "100%"; + } el.style.justifySelf = "start"; } else { const w = Math.max(30, Math.min(100, Number(block.data?.width || 100))); @@ -1116,6 +1122,9 @@ const state = { const input=(label,id,val)=>`
`; const widthVal = Math.max(30, Math.min(100, Number(data.width || 100))); html += `
${widthVal}%
`; + if (!state.settings.free_drag && state.settings.two_col && block.type !== "menu"){ + html += `
`; + } if (block.type==="menu"){ html+=input("Titulo","menuTitle",data.title); const mm = escapeHtml(data.menu_mode || "both"); @@ -1240,6 +1249,10 @@ const state = { if (widthEl){ block.data.width = Math.max(30, Math.min(100, Number(widthEl.value || 100))); } + const fullWidthEl = document.getElementById("blockFullWidth"); + if (fullWidthEl && block.type !== "menu"){ + block.data.full_width = !!fullWidthEl.checked; + } if (block.type==="menu"){ block.data.title=document.getElementById("menuTitle").value; const mm = document.getElementById("menuMode");