Un artículo de referencia que demuestra cada widget, layout y ajuste disponible en el nuevo editor visual de All Home RD.
[{"id":"sec_1","type":"section","layout":"100","columns":[{"id":"col_1","blocks":[{"id":"b_h1","type":"heading","content":"Bienvenido al Benchmark del Editor","settings":{"level":2,"textColor":"text-brand-camel","padding":"p-6"}},{"id":"b_p1","type":"paragraph","content":"Este artículo es una demostración viva de cada funcionalidad del editor Elementor de All Home RD. Cada sección explota un conjunto diferente de widgets, layouts y ajustes visuales. Úsalo como referencia al crear tus propios artículos.","settings":{"fontSize":"text-lg","textColor":"text-white/60","padding":"p-6","bgColor":"bg-black/20","borderRadius":"rounded-md"}},{"id":"b_div1","type":"divider","settings":{"marginY":"my-8"}}]}]},{"id":"sec_2","type":"section","layout":"50-50","columns":[{"id":"col_2l","blocks":[{"id":"b_h2","type":"heading","content":"Layout 50/50","settings":{"level":3,"textColor":"text-brand-camel","align":"text-center","bgColor":"bg-white/5","borderRadius":"","border":"border border-white/20"}},{"id":"b_p2","type":"paragraph","content":"El layout 50-50 divide la sección en dos columnas equilibradas. Ideal para comparaciones, contenido lado a lado, o cuando quieres presentar información visualmente equilibrada.","settings":{"fontSize":"text-sm","padding":"p-4"}},{"id":"b_img1","type":"image","content":"","settings":{"url":"https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&w=800&q=80","alt":"Villa de lujo frente al mar","padding":"p-0"}}]},{"id":"col_2r","blocks":[{"id":"b_img2","type":"image","content":"","settings":{"url":"https://images.unsplash.com/photo-1600607687644-c7171b42498f?auto=format&fit=crop&w=800&q=80","alt":"Interior moderno","padding":"p-0"}},{"id":"b_q1","type":"quote","content":"El diseño no es solo cómo se ve y cómo se siente. El diseño es cómo funciona. — Steve Jobs","settings":{"fontSize":"text-lg","textColor":"text-white/70","bgColor":"bg-brand-camel/10","padding":"p-6","borderRadius":"rounded-md","border":"border border-white/10"}}]}]},{"id":"sec_3","type":"section","layout":"66-33","columns":[{"id":"col_3l","blocks":[{"id":"b_h3","type":"heading","content":"Layout 66/33 — Contenido Principal","settings":{"level":2}},{"id":"b_p3","type":"paragraph","content":"Este layout asigna 2/3 del espacio a la columna izquierda y 1/3 a la derecha. Es perfecto para artículos donde el contenido textual necesita más espacio que los elementos complementarios. La columna derecha funciona como sidebar natural para datos, citas o imágenes de apoyo.","settings":{"padding":"p-6","bgColor":"bg-black/20","borderRadius":"rounded-sm"}},{"id":"b_lst1","type":"list","content":"- Layout 100% para secciones completas\n- Layout 50-50 para comparaciones\n- Layout 66-33 para contenido + sidebar\n- Layout 33-66 para sidebar + contenido\n- Layout 33-33-33 para galerías","settings":{"fontSize":"text-sm","textColor":"text-white/60","bgColor":"bg-white/5","padding":"p-4","borderRadius":"rounded-sm","border":"border border-white/10"}}]},{"id":"col_3r","blocks":[{"id":"b_h4","type":"heading","content":"Widget Highlights","settings":{"level":3,"textColor":"text-brand-camel","align":"text-center"}},{"id":"b_p4","type":"paragraph","content":"8 tipos de widgets disponibles: Título, Texto, Imagen, Cita, Lista, Código, Separador y Contenedor anidado.","settings":{"fontSize":"text-sm","textColor":"text-white/60","align":"text-center"}},{"id":"b_img3","type":"image","content":"","settings":{"url":"https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=600&q=80","alt":"Propiedad destacada","padding":"p-0","borderRadius":"rounded-md","shadow":"shadow-md"}}]}]},{"id":"sec_4","type":"section","layout":"33-66","columns":[{"id":"col_4l","blocks":[{"id":"b_code1","type":"code","content":"{\n \"editor\": \"Elementor All Home\",\n \"widgets\": 8,\n \"layouts\": 5,\n \"settings\": [\n \"bgColor\", \"border\",\n \"borderRadius\", \"shadow\",\n \"padding\", \"marginY\",\n \"fontSize\", \"textColor\",\n \"align\", \"maxWidth\",\n \"customClass\"\n ]\n}","settings":{"fontSize":"text-xs","bgColor":"bg-black/40","padding":"p-4","borderRadius":"rounded-md","border":"border border-white/10","textColor":"text-brand-camel"}}]},{"id":"col_4r","blocks":[{"id":"b_h5","type":"heading","content":"Widget de Código","settings":{"level":2}},{"id":"b_p5","type":"paragraph","content":"El widget de código permite insertar bloques de código con formato monospace. Útil para tutoriales, documentación técnica, o cuando necesitas mostrar JSON, CSS, JavaScript o cualquier lenguaje de programación. El fondo oscuro y el texto en camel aseguran legibilidad.","settings":{"padding":"p-6"}},{"id":"b_q2","type":"quote","content":"El código es poesía. — WordPress.org","settings":{"fontSize":"text-sm","textColor":"text-white/50","border":"border border-white/10","padding":"p-4","borderRadius":"rounded-sm"}}]}]},{"id":"sec_5","type":"section","layout":"33-33-33","columns":[{"id":"col_5a","blocks":[{"id":"b_img4","type":"image","content":"","settings":{"url":"https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=500&q=80","alt":"Cocina de lujo","padding":"p-0","borderRadius":"rounded-md","shadow":"shadow-lg"}},{"id":"b_h6","type":"heading","content":"Shadow LG","settings":{"level":3,"align":"text-center","textColor":"text-brand-camel","fontSize":"text-sm"}},{"id":"b_p6a","type":"paragraph","content":"Sombra grande con bordes redondeados MD. La combinación shadow-lg + rounded-md crea profundidad visual sin exceso.","settings":{"fontSize":"text-xs","textColor":"text-white/40","align":"text-center"}}]},{"id":"col_5b","blocks":[{"id":"b_img5","type":"image","content":"","settings":{"url":"https://images.unsplash.com/photo-1600585154526-990dced4db0d?auto=format&fit=crop&w=500&q=80","alt":"Terraza panorámica","padding":"p-0","borderRadius":"rounded-lg","shadow":"shadow-[0_0_20px_rgba(202,165,115,0.3)]"}},{"id":"b_h7","type":"heading","content":"Shadow Glow","settings":{"level":3,"align":"text-center","textColor":"text-brand-camel","fontSize":"text-sm"}},{"id":"b_p6b","type":"paragraph","content":"El efecto Glow genera un halo en brand-camel que destaca el bloque. Perfecto para elementos que requieren atención inmediata.","settings":{"fontSize":"text-xs","textColor":"text-white/40","align":"text-center"}}]},{"id":"col_5c","blocks":[{"id":"b_img6","type":"image","content":"","settings":{"url":"https://images.unsplash.com/photo-1600573472591-ee6b68d14c68?auto=format&fit=crop&w=500&q=80","alt":"Área de piscina","padding":"p-0","borderRadius":"rounded-sm","border":"border-2 border-white/30"}},{"id":"b_h8","type":"heading","content":"Border Grueso","settings":{"level":3,"align":"text-center","textColor":"text-brand-camel","fontSize":"text-sm"}},{"id":"b_p6c","type":"paragraph","content":"Borde grueso (border-2) con opacidad 30%. Define el bloque con contundencia sin competir con el contenido.","settings":{"fontSize":"text-xs","textColor":"text-white/40","align":"text-center"}}]}]},{"id":"sec_6","type":"section","layout":"100","columns":[{"id":"col_6","blocks":[{"id":"b_div2","type":"divider","settings":{"marginY":"my-12"}},{"id":"b_h9","type":"heading","content":"Contenedor Anidado (Inception)","settings":{"level":2,"textColor":"text-brand-camel","align":"text-center","marginY":"my-8"}},{"id":"b_p7","type":"paragraph","content":"El widget Contenedor permite anidar columnas dentro de columnas, creando layouts complejos tipo Elementor profesional. A continuación, un contenedor con layout 50-50 dentro de una sección 100%.","settings":{"align":"text-center","textColor":"text-white/50","fontSize":"text-sm","marginY":"my-4"}},{"id":"b_inner1","type":"inner-section","layout":"50-50","columns":[{"id":"ic_1","blocks":[{"id":"b_h10","type":"heading","content":"Columna Interior A","settings":{"level":3,"textColor":"text-brand-camel","fontSize":"text-sm"}},{"id":"b_p8","type":"paragraph","content":"Esta columna vive dentro de un contenedor anidado. Puedes aplicar todos los ajustes: fondo, bordes, sombras, padding y margins independientes.","settings":{"fontSize":"text-xs","textColor":"text-white/60","bgColor":"bg-brand-camel/10","padding":"p-4","borderRadius":"rounded-md","border":"border border-white/10"}}]},{"id":"ic_2","blocks":[{"id":"b_h11","type":"heading","content":"Columna Interior B","settings":{"level":3,"textColor":"text-brand-camel","fontSize":"text-sm"}},{"id":"b_q3","type":"quote","content":"La anidación es el poder oculto del editor. No hay límite de profundidad.","settings":{"fontSize":"text-sm","textColor":"text-white/60","bgColor":"bg-black/20","padding":"p-4","borderRadius":"rounded-md"}}]}]}]}]},{"id":"sec_7","type":"section","layout":"100","columns":[{"id":"col_7","blocks":[{"id":"b_div3","type":"divider","settings":{"marginY":"my-12"}},{"id":"b_h12","type":"heading","content":"Catálogo de Fondos y Sombras","settings":{"level":2,"textColor":"text-brand-camel","align":"text-center"}},{"id":"b_p9","type":"paragraph","content":"Cada bloque puede tener su propio fondo, sombra y bordes. A continuación una demostración de las combinaciones posibles:","settings":{"align":"text-center","textColor":"text-white/50","fontSize":"text-sm","marginY":"my-4"}}]}]},{"id":"sec_8","type":"section","layout":"33-33-33","columns":[{"id":"col_8a","blocks":[{"id":"b_p10a","type":"paragraph","content":"Fondo negro al 40%. Sombra SM. Borde fino.\n\nIdeal para bloques de texto que necesitan separarse visualmente del fondo oscuro general de la página.","settings":{"bgColor":"bg-black/40","shadow":"shadow-sm","border":"border border-white/10","padding":"p-6","borderRadius":"rounded-md","fontSize":"text-sm","textColor":"text-white/60"}}]},{"id":"col_8b","blocks":[{"id":"b_p10b","type":"paragraph","content":"Fondo camel al 20%. Sin borde. Sombra MD.\n\nPerfecto para destacar información relevante. El tono camel genera asociación visual con la marca All Home.","settings":{"bgColor":"bg-brand-camel/20","shadow":"shadow-md","padding":"p-6","borderRadius":"rounded-md","fontSize":"text-sm","textColor":"text-white/70"}}]},{"id":"col_8c","blocks":[{"id":"b_p10c","type":"paragraph","content":"Fondo blanco al 5%. Glow. Sin borde.\n\nEl efecto Glow genera un halo luminoso que atrae la mirada. Recomendado para CTAs y datos clave.","settings":{"bgColor":"bg-white/5","shadow":"shadow-[0_0_20px_rgba(202,165,115,0.3)]","padding":"p-6","borderRadius":"rounded-md","fontSize":"text-sm","textColor":"text-white/60"}}]}]},{"id":"sec_9","type":"section","layout":"100","columns":[{"id":"col_9","blocks":[{"id":"b_div4","type":"divider","settings":{"marginY":"my-8"}},{"id":"b_h13","type":"heading","content":"Alineación y Ancho Máximo","settings":{"level":2,"textColor":"text-brand-camel"}},{"id":"b_p11","type":"paragraph","content":"Este párrafo está alineado a la izquierda con ancho máximo del 75%. Los ajustes de alineación controlan la posición del bloque dentro de su columna.","settings":{"align":"text-left","maxWidth":"max-w-[75%]","fontSize":"text-sm","textColor":"text-white/60","bgColor":"bg-black/20","padding":"p-4","borderRadius":"rounded-sm","marginY":"my-2"}},{"id":"b_p12","type":"paragraph","content":"Este párrafo está centrado con ancho máximo del 50%. Útil para citas, testimonios o cuando quieres focalizar la atención en un fragmento de texto.","settings":{"align":"text-center","maxWidth":"max-w-[50%]","fontSize":"text-sm","textColor":"text-brand-camel","bgColor":"bg-brand-camel/10","padding":"p-4","borderRadius":"rounded-sm","border":"border border-white/10","marginY":"my-2"}},{"id":"b_p13","type":"paragraph","content":"Este párrafo está alineado a la derecha con ancho del 25%. Los anchos máximos te permiten crear layouts asimétricos y composiciones más dinámicas.","settings":{"align":"text-right","maxWidth":"max-w-[25%]","fontSize":"text-xs","textColor":"text-white/40","bgColor":"bg-black/20","padding":"p-3","borderRadius":"rounded-sm","marginY":"my-2"}},{"id":"b_div5","type":"divider","settings":{"marginY":"my-8"}}]}]},{"id":"sec_10","type":"section","layout":"100","columns":[{"id":"col_10","blocks":[{"id":"b_h14","type":"heading","content":"Lista con Estilo","settings":{"level":3,"textColor":"text-brand-camel"}},{"id":"b_lst2","type":"list","content":"- 8 tipos de widgets disponibles\n- 5 layouts de columnas\n- Contenedores anidados sin límite\n- Sistema Undo/Redo con Ctrl+Z / Ctrl+Y\n- Drag & Drop desde la paleta y entre columnas\n- Vista responsiva Desktop / Tablet / Mobile\n- 11 ajustes visuales por bloque\n- Toggle entre editor Elementor y Bloques Gutenberg\n- Duplicar secciones y bloques completos\n- Auto-save cada 45 segundos\n- Bilingue ES / EN en tiempo real","settings":{"fontSize":"text-sm","textColor":"text-white/60","bgColor":"bg-brand-camel/10","padding":"p-6","borderRadius":"rounded-md","border":"border border-white/10","marginY":"my-4"}},{"id":"b_div6","type":"divider","settings":{"marginY":"my-12"}},{"id":"b_h15","type":"heading","content":"Clase CSS Personalizada","settings":{"level":2,"textColor":"text-brand-camel","align":"text-center"}},{"id":"b_p14","type":"paragraph","content":"Este bloque usa una clase CSS personalizada: tracking-widest uppercase. Puedes escribir cualquier clase Tailwind directamente en el campo de CSS personalizado para control granular.","settings":{"align":"text-center","fontSize":"text-sm","textColor":"text-white/50","customClass":"tracking-widest uppercase","bgColor":"bg-black/20","padding":"p-4","borderRadius":"rounded-md","marginY":"my-4"}}]}]}]