v1.0.0 · Panel Mundo Infantil
Documentación Técnica
Panel de Entrega de Kits
Guía completa de arquitectura, componentes, funcionalidades e instrucciones de integración para el desarrollador WordPress.
01 · Visión General
¿Qué es este panel?
Un panel de entrega de productos digitales estilo Netflix, diseñado para mamás emprendedoras que compran kits de papelería imprimible. Permite a la clienta visualizar, organizar y descargar todos sus archivos de forma intuitiva desde cualquier dispositivo.
Single-file HTML
Todo el panel vive en un único bloque HTML. Sin dependencias externas, sin plugins adicionales. Solo el bloque HTML de Gutenberg.
Mobile-first
Diseñado primero para pantallas pequeñas. Grillas adaptativas, scroll horizontal táctil, y modales tipo drawer para mobile.
Modo oscuro / claro
Toggle integrado que cambia entre tema dark y light usando CSS custom properties. Sin recarga de página.
CSS aislado
Todos los estilos están prefijados con
#mi-panel y .mi- para evitar conflictos con el tema WordPress.URL del sitio en producciónEl panel ya está instalado en kitplantillaseditables.com/kit-plantillas-imprimibles/. Esta documentación describe todas las funcionalidades que deben conectarse con datos reales.
02 · Arquitectura
Estructura del código
El bloque se compone de tres partes en un único archivo HTML. No hay archivos separados de CSS o JS.
estructura del bloque
<!– 1. FUENTES (Google Fonts CDN) –>
<link href=«https://fonts.googleapis.com/…» rel=«stylesheet»>
<!– 2. ESTILOS (todo scoped dentro de #mi-panel) –>
<style>
/* Variables CSS (tokens de diseño) */
#mi-panel { –mi-rose: #E8637A; … }
/* Tema claro */
#mi-panel.mi-light { –mi-bg: #FBF7FA; … }
/* Componentes UI */
#mi-panel .mi-nav { … }
#mi-panel .mi-hero { … }
/* etc. */
</style>
<!– 3. HTML + JS (todo dentro de #mi-panel) –>
<div id=«mi-panel»>
…contenido…
<script>
// IIFE para no contaminar el scope global
(function(){
window.miToggleTheme = function(){…};
window.miOpenModal = function(id){…};
// etc.
})();
</script>
</div>
Importante para el desarrolladorEl JS está envuelto en una IIFE
(function(){ ... })(). Las funciones que necesitan ser llamadas desde el HTML (onclick) se exponen explícitamente en window.miNombreFuncion. No modificar esta estructura.03 · Componentes UI
Mapa de componentes
El panel se divide en 8 componentes visuales independientes. Cada uno tiene su propio set de clases CSS prefijadas con .mi-.
.mi-nav
Barra de navegación sticky. Contiene el logo, el botón de toggle de tema (🌙/☀️) y el avatar de usuario. Se mantiene visible al hacer scroll.
.mi-hero
Banner principal con degradado rosa-púrpura. Muestra el saludo personalizado con el nombre de la clienta y un botón CTA que ancla a la sección de kits.
.mi-stats
Grilla de 4 métricas (kits disponibles, bonos, descargas, garantía). En mobile se colapsa a 2 columnas. Los números son editables directamente en el HTML.
.mi-cats
Fila de pills de categorías con scroll horizontal. Al hacer clic activa la clase
.active. Actualmente es visual — el filtrado real debe implementarse vía JS..mi-feat-grid
Grilla de 2 columnas para los kits destacados. En mobile pasa a 1 columna. Cada tarjeta tiene thumb, tag, título, descripción, barra de progreso y botón de descarga.
.mi-scroll-row
Fila de scroll horizontal tipo Netflix para las categorías de invitaciones y packaging. Usa
scroll-snap para navegación táctil fluida..mi-bonus-grid
Grilla auto-fill para los 10 bonos. Cada tarjeta tiene ícono con degradado, título, descripción y link de descarga. En mobile se apila en 1 columna.
.mi-modal-bg / .mi-modal
Modal tipo drawer (desliza desde abajo). Se activa con
miOpenModal(id). Lista los archivos descargables de cada kit. Cierra al tocar el fondo o el botón X.Convención de clasesTodas las clases internas usan el prefijo
mi- (de «Mundo Infantil») para evitar colisiones con Bootstrap, Tailwind u otros frameworks que use el tema WP.04 · Funcionalidades JavaScript
Funciones disponibles
Todas las funciones JS son globales (expuestas en window) y se invocan directamente desde los atributos onclick del HTML.
| Función | Descripción | Parámetros | Estado |
|---|---|---|---|
miToggleTheme() |
Alterna entre tema dark y light. Agrega/quita la clase .mi-light en #mi-panel y cambia el ícono del botón. |
— | ✓ Funcional |
miFilterCat(el) |
Maneja el estado activo de los pills de categoría. Quita .active de todos y lo aplica al pill clicado. El filtrado visual de tarjetas debe implementarse. |
el — elemento DOM del pill |
⚡ Parcial |
miOpenModal(id) |
Abre el modal de archivos para el producto con el ID dado. Lee los datos del objeto miProducts e inyecta el HTML de los archivos en el modal. |
id — string (ej: 'fiesta', 'bono1') |
✓ Funcional |
miCloseModal() |
Cierra el modal removiendo la clase .open del contenedor del modal. |
— | ✓ Funcional |
miCloseOutside(e) |
Cierra el modal si el click ocurre sobre el fondo oscuro (fuera del drawer). Verifica que el target sea el backdrop. | e — evento click |
✓ Funcional |
Funcionalidad pendiente: filtrado por categoríaLos pills de categoría actualmente solo cambian su estado visual. Para implementar el filtrado real, hay que agregar atributos
data-category="invitaciones" a cada tarjeta y filtrar por ese valor dentro de miFilterCat().05 · Sistema de Temas
CSS Custom Properties
El sistema de colores completo está basado en CSS variables definidas en #mi-panel. Cambiar un color aquí lo actualiza en todo el panel.
| Variable | Dark | Light | Uso |
|---|---|---|---|
--mi-rose | #E8637A | #E8637A | Color de acento principal, botones, links activos |
--mi-gold | #D4965A | #D4965A | Color secundario, degradados de íconos |
--mi-bg | #141014 | #FBF7FA | Fondo principal del panel |
--mi-bg2 | #1E1720 | #F3EDF7 | Fondo del modal |
--mi-bg3 | #28212C | #EDE5F2 | Fondo de inputs, pills, fondos de código |
--mi-surf | #2E2633 | #FFFFFF | Fondo de tarjetas |
--mi-txt | #F5EFF8 | #1E1222 | Texto principal |
--mi-sub | #B09BBD | #6B4E7D | Texto secundario, descripciones |
--mi-bdr | rgba(255,255,255,.08) | rgba(0,0,0,.08) | Bordes de tarjetas y divisores |
cómo cambiar el color de acento
/* Para cambiar el rosa (#E8637A) por otro color,
solo editar estas dos líneas: */
#mi-panel {
–mi-rose: #E8637A; /* color principal */
–mi-rose-lt: #F2A0AE; /* versión clara del mismo (hover) */
}
06 · Estructura de Datos
Objeto miProducts
Todos los archivos descargables están definidos en el objeto JavaScript miProducts dentro del script. Para agregar o modificar productos, editar este objeto.
javascript — objeto miProducts
var miProducts = {
// ID del producto (debe coincidir con el onclick del HTML)
fiesta: {
title: ‘🎂 Kit Fiesta Mágica Completo’,
meta: ’12 archivos · Editable en Canva’,
files: [
{
i: ‘📄’, // ícono emoji
n: ‘Invitaciones’, // nombre del archivo
s: ‘2.4 MB’, // tamaño (informativo)
l: ‘https://…’ // ← REEMPLAZAR con URL real de descarga
},
// más archivos…
]
},
// Producto fallback (si el ID no existe)
_default: {
title: ‘🎀 Archivo listo para descargar’,
meta: ‘Editable en Canva gratuito’,
files: […]
}
};
Acción requerida: reemplazar los links de descargaActualmente todos los archivos tienen
l: '#' como placeholder. Cada l debe reemplazarse con la URL real del archivo (Google Drive, Dropbox, servidor propio, etc.).IDs de productos definidos actualmente
| ID | Nombre | Archivos | Categoría |
|---|---|---|---|
fiesta | Kit Fiesta Mágica Completo | 5 | Principal |
mesita | Kit Mesita de Dulces | 4 | Mesa dulces |
inv1–inv5 | Invitaciones (Princesa, Unicornio, Safari, Sirenita, Superhéroe) | 2 c/u | Invitaciones |
pack1–pack4 | Cajitas, Bolsitas, Etiquetas, Envoltorios | 2 c/u | Packaging |
bono1–bono10 | 10 bonos exclusivos | 1 c/u | Bonos |
07 · Integración WordPress
Cómo instalar en WordPress
El panel se instala como un bloque HTML nativo de Gutenberg. No requiere plugins adicionales.
1
Abrir la página en el editor de WordPress
Ir a Páginas → Kit Plantillas Imprimibles → Editar. Asegurarse de estar en el editor de bloques (Gutenberg), no en el editor clásico.
2
Agregar un bloque HTML personalizado
Hacer clic en el botón + para agregar bloque. Buscar «HTML personalizado» o presionar /html en una línea vacía.
3
Pegar el código completo
Pegar todo el contenido del archivo
panel_gutenberg_wp.html en el bloque. Incluye el link de Google Fonts, el bloque <style>, el HTML y el <script>.4
Verificar en Vista previa
Usar el botón Vista previa → Nueva pestaña para verificar en desktop y mobile antes de publicar.
5
Actualizar y verificar en producción
Hacer clic en Actualizar. Verificar en el sitio real tanto en desktop como en mobile (Chrome DevTools → modo responsive).
Nota sobre el fondo blanco en mobileAlgunos temas de WordPress (Astra, Hello, OceanWP, etc.) aplican
background: white al body o al contenedor de página. Si aparece fondo blanco alrededor del panel, la solución es agregar CSS personalizado en Apariencia → Personalizar → CSS adicional apuntando a los selectores del tema específico.CSS adicional para eliminar fondo blanco (Apariencia → Personalizar)
css — pegar en Apariencia → Personalizar → CSS adicional
/* Eliminar fondo blanco del tema alrededor del panel */
body,
.entry-content,
.post-content,
.page-content,
#main,
#content,
#primary {
background: #141014 !important;
padding: 0 !important;
}
/* Quitar padding interno del contenedor de Gutenberg */
.wp-block-html,
.entry-content .wp-block-html {
margin: 0 !important;
padding: 0 !important;
}
08 · Personalización
Cómo modificar el panel
Guía rápida de los cambios más comunes que puede necesitar el desarrollador o la administradora del sitio.
Cambiar el nombre
Buscar
Alejandra en el HTML y reemplazar por el nombre de la clienta. Aparece en el hero y en el avatar (inicial).Agregar links reales
En el objeto
miProducts, reemplazar cada l: '#' con la URL directa de descarga del archivo (Google Drive, Dropbox, etc.).Agregar productos
1) Agregar una nueva
.mi-mini-card o .mi-feat-card en el HTML. 2) Agregar la entrada correspondiente en miProducts. Usar un ID único.Cambiar colores
Editar las variables
--mi-rose y --mi-rose-lt en la sección de CSS variables. Afecta botones, links y acentos en todo el panel.Actualizar estadísticas
Las 4 métricas del strip de stats (kits, bonos, descargas, garantía) están hardcodeadas en el HTML. Editar directamente los valores numéricos en las tarjetas
.mi-stat.Cambiar email de soporte
Buscar
yennysirpa@gmail.com en el HTML (aparece en el footer). Reemplazar por el email oficial del negocio.09 · Checklist de Deploy
Antes de publicar
Lista de verificación completa para el desarrollador antes de entregar el panel al cliente.
| # | Tarea | Prioridad | Estado |
|---|---|---|---|
| 1 | Reemplazar todos los l: '#' con URLs de descarga reales en miProducts | 🔴 Crítico | Pendiente |
| 2 | Personalizar el nombre de la clienta en el hero y el avatar | 🔴 Crítico | Pendiente |
| 3 | Verificar que el panel carga correctamente en mobile (iOS Safari + Android Chrome) | 🔴 Crítico | Pendiente |
| 4 | Eliminar fondo blanco del tema WP vía CSS adicional | 🟡 Alto | Pendiente |
| 5 | Verificar que el modal de descarga se abre y cierra correctamente en touch | 🟡 Alto | Pendiente |
| 6 | Probar el toggle de tema oscuro/claro en mobile | 🟡 Alto | Pendiente |
| 7 | Actualizar email de soporte en el footer (yennysirpa@gmail.com) | 🔵 Medio | Pendiente |
| 8 | Actualizar las métricas de stats (cantidad real de kits y bonos) | 🔵 Medio | Pendiente |
| 9 | Implementar filtrado real por categoría en miFilterCat() | 🔵 Medio | Pendiente |
| 10 | Agregar los productos e invitaciones reales con sus thumbnails | 🔵 Medio | Pendiente |
| 11 | Verificar que Google Fonts carga correctamente (requiere conexión a internet) | 🟢 Bajo | Pendiente |
| 12 | Hacer test de rendimiento (PageSpeed Insights) con el panel activo | 🟢 Bajo | Pendiente |
Consejo de entregaPara los links de descarga, se recomienda usar Google Drive con los archivos configurados como «Cualquiera con el enlace puede ver». Luego convertir el link de visualización a link de descarga directa cambiando
/view?usp=sharing por /export?format=zip o usando un servicio como gdocs2direct.