Documento de Implementación · WordPress + Elementor
Checklist Completo
Diomyn Foundation
Guía paso a paso para implementar el sitio web completo
Para: Diseñador Web · Plataforma: WordPress + Elementor · Versión: 1.0
Estado general
Progreso del Proyecto
Resumen de todo lo que está listo y lo que falta implementar en WordPress.
Calculando...
100% = sitio listo para publicar
✅
Diseño aprobado
3 páginas con prototipos HTML finales
✅
Textos finales
Español e inglés listos para copiar
✅
Guía de marca
Colores, tipografía, iconos, voz
⏳
Implementación WP
Pendiente — trabajo del diseñador
01
Configuración WordPress
Antes de tocar cualquier página, configurar estos elementos base en WordPress.
🔧 Plugins y Tema
Instalar / verificar Elementor Pro activo
El diseño requiere Elementor Pro para columnas avanzadas, sticky elements y custom CSS por sección. Verificar que la licencia esté activa.
Instalar plugin "Custom CSS & JS" o usar Elementor Custom CSS
Para aplicar los estilos globales de la guía de marca sin modificar el tema. Recomendado: Simple Custom CSS and JS (gratuito en WordPress.org).
Agregar fuentes Google en WordPress
En Elementor → Configuración → Fuentes Personalizadas, agregar:
Playfair Display — pesos 400, 700, ItalicLato — pesos 300, 400, 700Configurar colores globales en Elementor
Elementor → Configuración → Color Global. Agregar los 6 colores principales como variables para usarlos en todo el sitio sin repetir HEX manualmente.
#0D4EA6 · #39B54A · #DDF6F5 · #D4AF37 · #1E2A44 · #2A3A50
Subir logo oficial al Media Library
Archivo:
logo-diomyn.png — versión horizontal con fondo transparente. Actualizar en Apariencia → Personalizar → Identidad del Sitio.Instalar plugin de bilingüe (ES/EN)
Recomendado: Polylang (gratuito) o WPML (de pago, más robusto). Configurar español como idioma principal e inglés como secundario.
Nota para Diosmary: Antes de que el diseñador empiece, confirmar qué tema de WordPress está activo actualmente. Si es un tema pesado, considerar cambiar a Hello Elementor (tema base oficial de Elementor, completamente limpio y ligero).
02
Página de Inicio
Implementar sección por sección siguiendo el prototipo HTML aprobado. Referencia: diomyn-homepage-v3.html
🏠 Secciones en orden
HERO — Fondo + overlay + texto + botones
Fondo: foto
ayuda-1024x768.png. En Elementor: Section → Style → Background → Image. Agregar Background Overlay color #d8f5f4 opacidad 65%. Texto oscuro sobre fondo claro. Dos botones: azul (Quiero apoyar) + ghost link (Conoce nuestra historia).MISSION STRIP — Franja de misión
Fondo
#e8f1fc. Texto centrado en Playfair Display Italic. Línea dorada decorativa al fondo. Texto: "Ayudamos a las personas a recuperar su voz, sanar sus historias y descubrir su propósito."HISTORIA — Sección fundadora (versión corta)
2 columnas: foto izquierda + texto derecho. Foto:
diomyn-2-768x994.png. Incluir chip de cita con borde dorado. Botón "Conoce su historia completa" → enlaza a página Fundadora.PILARES — Tres columnas
Fondo
#DDF6F5. 3 tarjetas blancas con borde superior de color (azul / verde / dorado). Título en Playfair, texto en Lato. Iconos SVG: Apoyo, Comunidad, Recursos (ver Guía de Marca sección 06).IMPACTO — Estadísticas + testimonio
Fondo
#d6e8f7. 3 tarjetas de stats (Maryland / Familias / Bilingüe). Foto WhatsApp-Image...8.20.20-PM.jpeg junto al testimonio. Blockquote con borde dorado izquierdo.DONACIÓN — Tiers + botón Zeffy
Fondo gradiente aqua. 4 tarjetas de montos ($25/$50/$100/$250) con descripción de impacto. Botón principal →
https://www.zeffy.com/en-US/donation-form/when-everything-is-missing-your-help-arrives03
Página de la Fundadora
Referencia: diomyn-fundadora.html
👤 Secciones en orden
HERO — Nombre + título oficial + credenciales
Fondo gradiente aqua. H1: "Diosmary Reynoso". Subtítulo: "Leadership Coach | Author | Speaker". Segunda línea: "Master's Degree in Business Administration | Bachelor's Degree in Marketing". Eyebrow: "Founder & Executive Director".
LAYOUT — Sidebar sticky + cuerpo scrollable
2 columnas: izquierda sidebar (340px fijo, sticky top:6rem) + derecha contenido. En móvil: columna única, sidebar primero. Foto:
diomyn-2-768x994.png. Credenciales y tarjeta de libros debajo de la foto.LIBROS — Tarjeta con etiquetas
Fondo
#DDF6F5, borde dorado izquierdo. "Entre las Huellas de Ana" con tag verde "Bestseller". "A la Sombra del Miedo" con tag azul "Nuevo".3 BLOQUES de historia + pull quote + misión
Bloque 1: El origen. Pull quote con borde dorado. Bloque 2: Trayectoria (incluye Master's, NLP, Leadership Coach). Bloque 3: misión como puente con 4 pilares. CTA final: 2 botones.
04
Página de Donaciones
Referencia: diomyn-donaciones.html
💚 Secciones en orden
HERO — "Cuando todo falta, tu ayuda llega"
Fondo gradiente aqua igual al de inicio. H1 en Playfair con em en azul. Subtítulo explica Zeffy y 0% comisiones. Breadcrumb: Inicio → Donar.
BARRA DE IMPACTO — 4 stats en fondo azul
Fondo
#0D4EA6. 4 columnas: 100% · $0 comisiones · 501(c)(3) · Maryland. Números en Playfair dorado suave, texto en blanco.LAYOUT PRINCIPAL — 2 columnas
Izquierda: texto "por qué donar" + 4 tarjetas de impacto con iconos SVG + tabla de tiers + cita. Derecha: panel de donación sticky con botón Zeffy. En móvil: panel de donación va primero.
BOTÓN ZEFFY — Enlace directo
El botón principal de donación abre Zeffy en nueva pestaña. URL:
https://www.zeffy.com/en-US/donation-form/when-everything-is-missing-your-help-arrives. Atributo: target="_blank".ICONOS SVG — 4 tarjetas de impacto
Usar los SVG oficiales de la Guía de Marca sección 06: Recursos (libro), Apoyo (manos+corazón), Comunidad (personas), Propósito (brújula). Insertar como HTML inline en bloque Custom HTML de Elementor.
FOTO en sección "Por qué donar"
Foto
WhatsApp-Image...8.19.12-PM.jpeg sobre el texto. Border-radius: 6px, object-fit: cover.05
Elementos Globales
Elementos que aparecen en todas las páginas y deben configurarse una sola vez en Elementor Theme Builder.
🌐 Header, Footer y Global
HEADER — Nav fija con logo + toggle idioma + botón Donar
Fondo blanco puro. Logo izquierda. Derecha: toggle ES/EN + botón "Donar" azul compacto. Position: fixed, z-index: 200. Box-shadow suave. En móvil: logo + botón donar pequeño, hamburger para menú.
FOOTER — 3 columnas + tagline
Fondo
#111A26. Logo + dirección + tagline "Descubre tu valor. Vive tu propósito." Links de navegación. Redes sociales. © 2025 Diomyn Foundation · 501(c)(3).BARRA DORADA superior — en todas las páginas
Línea de 4-5px en la parte superior de cada Hero. Gradiente:
#D4AF37 → #E3C76A → #73D7DF → transparent. Se agrega como ::before en CSS global.OLAS SVG — Transición entre secciones
La ola blanca al fondo del Hero se puede insertar como Elementor Shape Divider → Wave → color blanco, apuntando hacia abajo. Altura: 70px.
TESTIMONIO REAL — Reemplazar placeholder
El testimonio actual en la sección de impacto es genérico. Diosmary debe conseguir un testimonio real (con permiso de la persona) y reemplazarlo antes del lanzamiento.
FOTO PROFESIONAL de Diosmary
Si la foto actual (diomyn-2.png) no es la imagen profesional más reciente, tomar o elegir una foto de alta calidad con buena iluminación y fondo neutro o natural para la página de la fundadora.
06
Cómo implementar en Elementor
Instrucciones específicas para el diseñador. Cada sección del prototipo HTML corresponde a una Section de Elementor.
Estructura base de cada página
1
Crear nueva página en WordPress → asignar template "Elementor Full Width" (sin header/footer del tema, se usan los de Theme Builder).
2
Cada
<section> del HTML = una Section de Elementor. El padding de cada sección en desktop: top/bottom: 80px, left/right: 48px.3
Para el fondo de cada sección: Section → Style → Background → Classic → Color. Los gradientes se hacen con Background Type: Gradient.
4
Los iconos SVG se insertan con el widget HTML de Elementor. Copiar el código SVG de la Guía de Marca y pegarlo directamente.
5
Para el layout de 2 columnas (Fundadora / Donaciones): Section → Structure → elegir 30/70 o 40/60. La columna derecha (panel sticky) usa: Advanced → CSS →
position: sticky; top: 6rem;6
El botón Donar de Zeffy: widget Button → enlace externo → URL de Zeffy → abrir en nueva ventana. Estilo: fondo
#0D4EA6, hover #0A3D85, border-radius: 4px.7
Animaciones de entrada (reveal): Elementor → Advanced → Motion Effects → Fade In Up, duración 600ms, delay escalonado por columna (0 / 100ms / 200ms).
8
Responsive: revisar cada sección en vista móvil. En móvil, toda columna doble pasa a columna única. Padding móvil:
top/bottom: 48px, left/right: 24px.
Importante: El toggle de idioma ES/EN requiere el plugin Polylang o WPML. Sin ese plugin, el diseñador puede crear versiones separadas de cada página (/es/ y /en/) y el toggle simplemente navega entre ellas.
CSS Global — pegar en Elementor → Custom CSS o Plugin Custom CSS
/* Fuentes globales */
body { font-family: 'Lato', sans-serif; color: #2A3A50; }
h1, h2, h3 { font-family: 'Playfair Display', serif; color: #1E2A44; }
/* Barra dorada en heros */
.hero-section::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #D4AF37, #E3C76A, #73D7DF, transparent);
}
/* Botón primario */
.elementor-button-primary {
background: #0D4EA6 !important;
border-radius: 4px !important;
font-family: 'Lato', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
}
.elementor-button-primary:hover { background: #0A3D85 !important; }
/* Nav fija */
.site-header { position: fixed; top: 0; z-index: 200; width: 100%; background: #fff; box-shadow: 0 2px 14px rgba(13,78,166,0.06); }
body { font-family: 'Lato', sans-serif; color: #2A3A50; }
h1, h2, h3 { font-family: 'Playfair Display', serif; color: #1E2A44; }
/* Barra dorada en heros */
.hero-section::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #D4AF37, #E3C76A, #73D7DF, transparent);
}
/* Botón primario */
.elementor-button-primary {
background: #0D4EA6 !important;
border-radius: 4px !important;
font-family: 'Lato', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
}
.elementor-button-primary:hover { background: #0A3D85 !important; }
/* Nav fija */
.site-header { position: fixed; top: 0; z-index: 200; width: 100%; background: #fff; box-shadow: 0 2px 14px rgba(13,78,166,0.06); }
07
Referencia Rápida de Colores
Para copiar y pegar directamente en Elementor. Referencia completa en la Guía de Marca.
Azul Principal
#0D4EA6
Azul Medio
#2E6DA4
Verde
#39B54A
Aqua Claro
#DDF6F5
Aqua Medio
#BFEFF2
Aqua Acento
#73D7DF
Dorado
#D4AF37
Dorado Suave
#E3C76A
Texto Oscuro
#1E2A44
Texto Cuerpo
#2A3A50
Mission Strip
#e8f1fc
Footer
#111A26
Regla de oro: Los fondos de sección van en tonos aqua y blancos. El azul
#0D4EA6 solo en botones, títulos y acentos — nunca como fondo dominante. El dorado solo como detalle decorativo.
08
Checklist de Entrega Final
Antes de publicar el sitio, verificar cada uno de estos puntos.
🚀 Pre-lanzamiento
Revisar todas las páginas en móvil (iOS + Android)
Probar en pantalla real, no solo simulador. Verificar que botones sean táctiles, texto legible y secciones no se rompan.
Verificar que el botón de Zeffy funciona y abre correctamente
Probar el flujo completo de donación en el formulario de Zeffy antes de publicar.
Verificar velocidad del sitio — Google PageSpeed
Meta: score >70 en móvil. Comprimir imágenes (usar WebP), activar caché. Plugin recomendado: WP Rocket o W3 Total Cache.
SEO básico — Títulos y meta descriptions
Plugin: Yoast SEO o Rank Math. Título inicio: "Diomyn Foundation — Recupera tu voz. Sana tu historia. Descubre tu propósito." Meta description: misión en 155 caracteres.
Actualizar perfil en Candid/GuideStar
Cargar la misión y visión aprobadas, descripción de programas actualizada y estatus 501(c)(3). Los donantes serios verifican este perfil antes de dar.
Solicitar Google Ad Grants ($10,000/mes gratuitos)
Aplicar en
nonprofit.google.com. Requiere sitio activo, 501(c)(3) verificado y perfil de Candid actualizado.Actualizar bios en redes sociales con nueva misión
Instagram, Facebook y LinkedIn deben decir: "Ayudamos a personas y familias a recuperar su voz, sanar sus historias y descubrir su propósito." + link al sitio.
Conseguir primer testimonio real para el sitio
Un testimonio real (nombre real o iniciales + con permiso) reemplaza el placeholder actual y aumenta significativamente la credibilidad con donantes.
Archivos que el diseñador necesita recibir de Diosmary: Logo en PNG con fondo transparente · Foto profesional actualizada de Diosmary · Todas las fotos del sitio actual (ya están en WordPress Media Library) · Permiso confirmado de uso de fotos de personas.