Cómo Construir un Sitio Web con Divi 5

Módulo 1: Preparación exhaustiva y fundamentos estratégicos antes de construir en Divi 5

Bienvenido al Curso Avanzado de Divi 5. Esta es una serie de capacitación técnica y metodológica diseñada para llevarte desde una instalación de WordPress completamente limpia hasta la publicación de un ecosistema web profesional, optimizado y de alta gama.

A lo largo de este itinerario eliminaremos por completo el uso de plantillas importadas, layouts predefinidos o soluciones enlatadas. El objetivo de este curso es infundir una metodología basada en la arquitectura web sólida y el diseño paramétrico, permitiéndote dominar la lógica estructural de Divi 5 de principio a fin. Diseñarás cada elemento tú mismo, comprendiendo el comportamiento del código subyacente que el constructor visual genera en tiempo real.

Estructura completa del Curso Avanzado

Para proporcionarte una visión panorámica, este curso se compone de un despliegue secuencial de 16 publicaciones detalladas. Cada módulo se edifica estrictamente sobre las bases del anterior:

Qué debes preparar antes de crear tu sitio web con Divi 5 (Estás aquí): Planificación estratégica, arquitectura de la información, activos de marca y bases del entorno de servidor.
Explorando todos los aspectos de la interfaz de Divi 5: Análisis profundo del nuevo motor, jerarquía de capas, menús contextuales y rendimiento del nuevo núcleo en el front-end.
Creación de un sistema de diseño global para Divi 5 con variables de diseño: Configuración del motor paramétrico utilizando los nuevos tokens globales (tamaños, fuentes y colores estandarizados).
Dominando los presets de Divi 5 para un diseño web más rápido y consistente: Institucionalización de estilos por componente para garantizar la coherencia visual sin redundancia de datos.
Cómo crear una página de inicio con Divi 5 desde cero: Construcción de la Landing principal aplicando estructuras de secciones, filas y módulos nativos.
Cómo crear un encabezado y una navegación personalizados en Divi 5: Arquitectura de menús avanzados, uso de elementos interactivos y diseño del área de navegación superior.
Cómo crear un pie de página personalizado en Divi 5: Estructuración de datos corporativos, enlaces legales y áreas de conversión en el footer.
Uso del creador de temas Divi 5 para crear plantillas de sitios web globales: Configuración de la lógica condicional en el Theme Builder para posts, páginas y archivos del sistema.
Creación de las páginas internas principales de tu sitio web Divi 5: Desarrollo del ecosistema de contenidos (Acerca de, Espacios y Servicios).
Dominando Flexbox en Divi 5: Control avanzado de la alineación, dirección, distribución y flujo de los elementos dentro de las columnas.
Dominando la cuadrícula CSS (Grid) en Divi 5: Creación de composiciones bidimensionales complejas y rupturas de estructuras tradicionales mediante el nuevo motor de rejilla.
Cómo hacer que tu sitio web Divi 5 sea totalmente adaptable (Responsive): Configuración minuciosa de breakpoints personalizados, escalado fluido y pruebas de usabilidad móvil.
Creación de elementos interactivos fuera del lienzo (Off-Canvas): Desarrollo técnico de ventanas emergentes, menús laterales ocultos y drawers de interacción.
Dominando el creador de bucles (Loop Builder) de Divi 5: Maquetación dinámica de listados personalizados de entradas (Custom Post Types) mediante consultas estructuradas.
Flujo de trabajo de usuario avanzado (Power User) de Divi 5: Atajos de teclado avanzados, migraciones de estilos en lote, gestión de la biblioteca y uso avanzado de la consola de desarrollador.
Auditoría, optimización y lanzamiento de tu sitio web Divi 5: Limpieza de base de datos, compresión definitiva de activos, auditoría de Core Web Vitals (LCP, INP, CLS) y despliegue a producción.

1. Fundamentos Técnicos: La simbiosis entre WordPress y Divi 5

Para ejecutar un proyecto web de alto rendimiento, es indispensable comprender cómo interactúan las capas de software que componen la aplicación.

+-------------------------------------------------------+
|                    CAPA DE DISEÑO                     |
|           Divi 5 Builder (Interfaz Visual)            |
+-------------------------------------------------------+
|                  CAPA ESTRUCTURAL                     |
|      Divi 5 Theme (Variables del Sistema y CSS)       |
+-------------------------------------------------------+
|                    CAPA DE NÚCLEO                     |
|         WordPress CMS (Base de Datos e Inf.)          |
+-------------------------------------------------------+

WordPress como Sistema de Gestión de Contenidos (CMS)

WordPress actúa como el motor central, el núcleo lógico y el gestor de la base de datos relacional (MySQL/MariaDB). Se encarga de procesar las consultas de las URL, administrar la autenticación de usuarios, gestionar la taxonomía de las entradas y almacenar el contenido crudo dentro de las tablas del sistema.

Por sí solo, WordPress carece de capacidades avanzadas de maquetación visual en el front-end sin recurrir a código nativo o al editor de bloques estándar (Gutenberg).

El rol del Tema clásico versus el Tema de bloques

En el ecosistema tradicional de WordPress, un tema determina la envoltura global del sitio: las hojas de estilo (style.css), las funciones del lado del servidor (functions.php) y la jerarquía de plantillas en PHP.

Mientras que los temas de bloques modernos delegan la estructura al archivo theme.json de WordPress, Divi 5 opera como un ecosistema unificado de software: es un tema arquitectónico maduro y, simultáneamente, un constructor visual de última generación.

Divi 5: Un ecosistema unificado

A diferencia de los constructores que se instalan como un plugin independiente sobre un tema de terceros (lo que suele generar conflictos de especificidad en las hojas de estilo y sobrecarga de peticiones HTTP), Divi 5 unifica el control. El tema gestiona los hooks de WordPress, el rendimiento global y la carga de scripts esenciales, mientras que el constructor visual reescribe el procesamiento del diseño.

La gran evolución de Divi 5 radica en la eliminación completa del antiguo sistema de shortcodes heredados, reemplazándolo por una arquitectura basada en estructuras de datos limpias y un motor de renderizado ultra veloz. Esto reduce drásticamente el DOM nesting (la profundidad de las etiquetas HTML anidadas), logrando que la velocidad de carga cumpla de forma nativa con los estándares web más rigurosos.

2. Protocolo de Instalación, Servidor y Entorno Técnico

El rendimiento y la estabilidad de Divi 5 en producción dependen directamente de la configuración del entorno donde se aloja.

Requisitos imperativos del servidor (PHP e Infraestructura)

Antes de proceder con la instalación de los archivos de Divi 5, debes verificar y ajustar las directivas de configuración de PHP en el archivo php.ini o a través del gestor MultiPHP de tu panel de control (cPanel, Plesk o SSH). Los valores mínimos obligatorios para garantizar la estabilidad del constructor visual son:

Versión de PHP: 8.1 o superior (Se recomienda PHP 8.2 para optimizar la recolección de basura de memoria).
memory_limit: 256M (Se recomiendan 512M para el procesamiento holgado de imágenes pesadas y la ejecución del Theme Builder).
max_execution_time: 120 (Evita el bloqueo de scripts de procesamiento durante el guardado de layouts complejos).
max_input_time: 60
post_max_size: 64M
upload_max_filesize: 64M
max_input_vars: 3000 (Crucial para permitir el guardado de menús extensos o configuraciones masivas en las opciones del tema).

Despliegue paso a paso de Divi 5

Descarga del paquete nativo: Accede a tu área privada de miembros en Elegant Themes. Ve a la sección de descargas y obtén el archivo comprimido .zip correspondiente a la versión limpia de Divi 5. Guarda el archivo localmente sin descomprimirlo.
Carga en el repositorio de WordPress: Dirígete al panel de administración de WordPress. Navega a Apariencia > Temas > Añadir nuevo tema. Haz clic en el botón superior Subir tema. Selecciona el archivo .zip descargado y ejecuta el proceso mediante Instalar ahora.
Activación del entorno: Una vez finalizada la subida y descompresión automática en el servidor, haz clic en el enlace Activar. El instalador redirigirá el flujo de trabajo, haciendo visible la nueva sección dedicada a Divi en la barra lateral del panel de control.
Validación de la Licencia y API Key: Para dotar al sistema de actualizaciones automatizadas en tiempo real y parches de seguridad críticos, navega a Divi > Opciones del tema > Actualizaciones. Introduce tu nombre de usuario exacto de Elegant Themes y tu clave de API generada en tu panel de miembro. Haz clic en Guardar cambios.

3. Configuración Inicial Estratégica: Opciones del Tema

Una vez instalado, es vital configurar el centro de mando de Divi antes de maquetar cualquier sección visual.

Divi > Opciones del tema
├── Pestaña General
│   ├── Logotipo corporativo
│   └── Perfiles de Redes Sociales
├── Pestaña Rendimiento (Optimización de Carga)
│   ├── CSS Dinámico (Habilitado)
│   ├── Módulos Dinámicos (Habilitado)
│   └── CSS Crítico (Habilitado)
└── Pestaña Integración
    └── Inyección de scripts en <head>

Pestaña General

Logotipo: Sube el archivo maestro que representará la identidad visual del sitio. Este elemento actuará como recurso predeterminado en las llamadas del sistema y layouts globales si no se define un encabezado personalizado específico.
Perfiles de Redes Sociales: Introduce las URL absolutas de los canales corporativos. Almacenar estos datos a nivel de base de datos aquí permite que cualquier módulo de seguimiento social posterior los herede de forma automatizada, evitando la edición manual canal por canal en el futuro.

Pestaña Rendimiento: Configuración Avanzada del Núcleo

La arquitectura de rendimiento de Divi 5 es altamente modular. Para exprimir al máximo su velocidad, debes activar los siguientes interruptores:

CSS Dinámico: Al activarse, Divi analiza la estructura de la página y genera un archivo de estilos que contiene exclusivamente las reglas necesarias para los módulos presentes en esa URL específica. Elimina por completo la carga de hojas de estilo innecesarias de módulos que no se están utilizando.
Marco de Módulos Dinámicos (Dynamic Module Framework): Esta directiva asegura que las funciones lógicas de procesamiento del lado del servidor (PHP) se carguen en memoria solo si el módulo correspondiente está renderizado en la página actual.
CSS Crítico (Critical CSS): Separa y prioriza los estilos necesarios para pintar la sección superior de la pantalla (Above the Fold), inyectándolos directamente en línea (<style>) en el encabezado HTML. Los estilos restantes se relegan a una carga diferida no bloqueante, lo que reduce sustancialmente el indicador de tiempo de interacción inicial del navegador.

Pestaña Integración

Este apartado gestiona la inyección controlada de fragmentos de código de seguimiento y optimización de terceros sin necesidad de instalar plugins de inserción de cabeceras.

Añadir código al campo <head> de su blog: El espacio idóneo para situar scripts analíticos de carga temprana, como etiquetas de Google Analytics, píxeles de Meta, scripts de mapas de calor (Hotjar) y códigos de verificación de consolas de búsqueda (Google Search Console).

4. Auditoría Estructural: El Creador de Temas (Theme Builder)

El Creador de Temas es el verdadero cerebro de la arquitectura del sitio web en Divi 5. Representa un cambio de paradigma total: pasamos de diseñar páginas individuales a diseñar sistemas lógicos condicionales.

A través de esta interfaz, se definen las reglas que le indican a WordPress qué envoltorio estructural debe aplicar a cada tipo de contenido. Puedes crear una «Plantilla Global» que se aplique de forma universal a todo el sitio web, o desarrollar plantillas ultra específicas basadas en condicionales lógicas complejas (por ejemplo, asignar un diseño exclusivo a las entradas pertenecientes a una categoría de blog concreta o un layout único para páginas de autor).

Cada bloque de plantilla se subdivide en tres áreas de responsabilidad técnica:

Encabezado global (Global Header): Reemplaza por completo el menú superior nativo del tema, permitiendo la maquetación libre de sistemas de navegación complejos utilizando cualquier combinación de módulos de Divi.
Cuerpo global (Global Body): Define la zona destinada a renderizar el contenido dinámico de la página. En el caso de plantillas de posts de blog o fichas de producto, es el contenedor donde se inyectan los campos de texto, títulos dinámicos y metadatos de forma automatizada mediante la etiqueta de contenido de publicación.
Pie de página global (Global Footer): Anula la barra inferior clásica del tema, centralizando el diseño de los bloques de cierre institucionales, avisos legales y navegación complementaria.

Nota de flujo de trabajo: Durante los primeros módulos del curso, las plantillas predeterminadas del tema procesarán las páginas de manera básica. Será en las fases avanzadas (Módulos 6, 7 y 8) cuando tomaremos el control absoluto del Theme Builder para estructurar el sistema global.

5. El Ecosistema de Construcción Visual

La interacción directa con el diseño ocurre en la capa frontal a través del Creador Visual de Divi 5. Se puede inicializar de dos maneras:

Desde el Backend: Creando una entidad en Páginas > Añadir nueva, asignando un título inicial y haciendo clic en el botón principal Editar con Divi.
Desde el Frontend: Navegando por el sitio con la sesión de administrador activa y haciendo clic sobre la opción Habilitar el Constructor Visual dispuesta en la barra superior de herramientas de WordPress.

El constructor visual de Divi 5 opera mediante una estructura jerárquica de contenedores identificados por códigos de color de alta visibilidad:

+-------------------------------------------------------------+
| SECCIÓN (Azul) - El contenedor maestro de ancho completo     |
|   +-------------------------------------------------------+ |
|   | FILA (Verde) - El contenedor de rejilla / Flexbox     | |
|   |   +-------------------+  +-------------------+        | |
|   |   | COLUMNA (Estruct) |  | COLUMNA (Estruct) |        | |
|   |   |   [MÓDULO (Gris)] |  |   [MÓDULO (Gris)] |        | |
|   |   +-------------------+  +-------------------+        | |
|   +-------------------------------------------------------+ |
+-------------------------------------------------------------+

Secciones (Línea de color Azul): Representan los bloques de construcción de mayor jerarquía a nivel de marcado HTML (normalmente mapeadas como etiquetas <section>). Abarcan horizontalmente toda la extensión de la pantalla y definen las divisiones estructurales macro de la página. Controlan los fondos principales (imágenes, degradados complejos, videos), los anclajes de ID para menús de navegación one-page y los márgenes de separación verticales más grandes.
Filas (Línea de color Verde): Son los contenedores internos que se ubican dentro de las secciones. Su función es establecer la disposición del espacio horizontal mediante la subdivisión en columnas. Con el nuevo motor de Divi 5, las filas actúan como envoltorios de diseño que aprovechan de forma nativa las capacidades de alineación de Flexbox y CSS Grid. Aquí se define el ancho máximo del contenido y los canales de separación (gutter width).
Columnas: Subdivisiones directas de la fila que determinan el espacio asignado a los componentes. No contienen elementos visuales de contenido por sí mismas, pero gestionan las propiedades de alineación vertical, distribución del flujo y rellenos internos individuales de cada segmento del bloque.
Módulos (Línea de color Gris): Los componentes atómicos finales del diseño. Son los elementos encargados de procesar funciones específicas de cara al usuario: bloques de texto (<p>), encabezados (<h1>–<h6>), imágenes (<img>), botones de llamada a la acción (<a>), formularios de contacto o galerías multimedia. Cada módulo expone su propio conjunto de parámetros estilísticos manteniendo un código HTML semántico y limpio.

6. Cuadro de Mando del Proyecto: Activos, Identidad y Planificación

Para asegurar un desarrollo continuo y fluido, es fundamental estructurar los activos del proyecto antes de encender el maquetador visual. En este curso desarrollaremos un sitio web avanzado para un Espacio de Coworking de Alta Gama.

A continuación se detalla la documentación exhaustiva de los materiales que utilizaremos:

Dirección de Marca y Sistema Paramétrico Pre-visual

Paleta de Colores Corporativa (Black & Gold Premium)

El proyecto se ceñirá estrictamente a una combinación cromática sofisticada y de alta fidelidad, minimizando el ruido visual para potenciar la elegancia institucional. Los valores hexadecimales exactos son:

Tipo de Color	Propósito Técnico	Código Hexadecimal
Color Primario Dominante	Fondos oscuros profundos, secciones de alto contraste	`#0D0D0D`
Color Secundario / Acento	Botones de conversión, enlaces activos, elementos clave	`#D4AF37` (Oro Premium)
Tono Neutro Oscuro	Color base para la tipografía de lectura sobre fondo claro	`#1A1A1A`
Tono Neutro Claro	Fondos limpios de secciones secundarias, tarjetas	`#F9F9F9`
Gris de Borde / Soporte	Líneas divisorias sutiles, estados de interacción desactivados	`#E0E0E0`

Arquitectura Tipográfica Global

Para mantener una consistencia visual perfecta, limitaremos la familia tipográfica a dos fuentes complementarias distribuidas de forma nativa a través de Google Fonts:

Fuente para Encabezados (Títulos H1 a H6): Playfair Display. Una tipografía serif con proporciones elegantes basadas en la tradición editorial clásica, idónea para transmitir exclusividad y profesionalismo.
Fuente para Cuerpo de Texto (Párrafos, Listas, Metadatos): Inter. Una tipografía sans-serif diseñada meticulosamente para pantallas digitales, que ofrece una legibilidad impecable en tamaños reducidos y una excelente variedad de pesos tipográficos.

El Logotipo Corporativo

El activo de marca se ha preparado en dos variantes vectoriales en formato SVG con fondo transparente, optimizado para la web con pesos inferiores a 15 KB:

Variante Principal (Light Logo): En color #D4AF37 y blanco, estructurado para destacar sobre el fondo primario #0D0D0D.
Variante Alternativa (Dark Logo): En color #1A1A1A, desarrollado específicamente para ser utilizado sobre fondos claros #F9F9F9.
Favicon: Una versión simplificada del isotipo escalada a 512x512 píxeles para su correcta visualización en pestañas de navegación y marcadores de dispositivos móviles.

Estrategia de Medios e Imágenes de Archivo Optimizadas

Los recursos visuales deben evocar productividad, lujo y comunidad. Se utilizará un banco de imágenes seleccionadas en alta definición, procesadas previamente mediante compresión sin pérdida (reduciendo las dimensiones a un ancho máximo de 1920px para imágenes de fondo completo y 800px para elementos internos, convertidas al formato moderno .webp):

Fotografías de Espacios Comunes: Tomas de áreas de trabajo abiertas de diseño limpio, con iluminación natural abundante y mobiliario ergonómico.
Fotografías de Entornos Privados: Oficinas de cristal templado, salas de juntas equipadas con tecnología de videoconferencia y escritorios dedicados listos para su uso.
Fotografías de Interacción Humana: Profesionales colaborando con naturalidad, reuniones de negocios estratégicas y momentos de descanso en la zona de cafetería.
Fotografías de Detalles y Servicios: Primeros planos de terminales de café premium, accesos automatizados por tarjeta inteligente y zonas de descanso confortables.

7. Arquitectura de la Información: El Mapa del Sitio (Sitemap)

El esqueleto estructural de este proyecto consta de 5 páginas principales bien diferenciadas, organizadas jerárquicamente para guiar al usuario a través de un embudo de conversión claro:

[Inicio (Landing Central)]
   ├── [Acerca de (Misión y Equipo)]
   ├── [Espacios y Membresías (Catálogo de Planes)]
   ├── [Blog (Artículos y Comunidad)]
   └── [Contacto (Formulario e Información Física)]

1. Página de Inicio (Home)

La página de aterrizaje principal encargada de retener el tráfico y sintetizar la propuesta de valor. Albergará un bloque tipo Hero de alto impacto, una sección de características clave del espacio de coworking, un resumen visual de las modalidades de membresía, un bloque de prueba social (testimonios con efectos de interacción estáticos sobre tarjetas estables) y llamadas a la acción (CTA) estratégicamente distribuidas.

2. Acerca de (About)

Página corporativa enfocada en la narrativa institucional (Storytelling). Detalla el origen del espacio, el equipo de gestión que coordina la comunidad, los valores fundacionales y los hitos alcanzados por el ecosistema de miembros.

3. Espacios y Membresías (Spaces)

El catálogo de servicios comerciales del proyecto. Mostrará de forma detallada las características técnicas, tarifas y disponibilidad de las distintas modalidades:

Escritorios compartidos (Hot Desks).
Escritorios dedicados permanentes.
Oficinas privadas para equipos corporativos.
Salas de conferencias y eventos bajo demanda.

4. Blog / Actualidades de la Comunidad

Un archivo dinámico concebido para potenciar el posicionamiento orgánico en buscadores (SEO) y mantener conectada a la comunidad. Recopilará artículos de interés sobre emprendimiento, eventos locales que tendrán lugar en las instalaciones y guías prácticas de desarrollo profesional.

5. Contacto (Contact)

La terminal final de conversión. Integrará un formulario de contacto directo con validación de campos, datos estructurados de localización física (dirección postal completa, coordenadas de mapas), horarios detallados de apertura y enlaces directos a canales de mensajería instantánea.

8. Desarrollo de Copys y Contenidos Estructurados

Para evitar el uso del texto genérico Lorem Ipsum, disponemos del contenido escrito inicial que poblará el proyecto desde las fases tempranas de maquetación:

Bloque de Titulares Principales (Hero Section)

Titular Principal (H1): «El epicentro del trabajo inteligente para mentes brillantes.»
Subtitular (H2): «Un entorno arquitectónico de alta gama diseñado para potenciar tu productividad, expandir tu red profesional y ofrecerte el confort corporativo que mereces. Descubre un nuevo estándar de coworking.»

Propuestas de Valor (Módulos de Anuncio / Blurbs)

Conectividad de Nivel Empresarial: Acceso a internet de fibra óptica simétrica dedicada con canales de respaldo automatizados para garantizar cero interrupciones en tus operaciones.
Infraestructura de Confort Premium: Mobiliario ergonómico de marcas líderes en diseño industrial, climatización inteligente y aislamiento acústico de grado arquitectónico.
Comunidad de Alto Perfil: Un ecosistema integrado por consultores, desarrolladores senior, creativos de vanguardia y fundadores de empresas emergentes listos para colaborar.
Acceso Flex Total: Sistemas de seguridad digital y credenciales móviles que te permiten operar con absoluta libertad de horarios de acuerdo a tu ritmo de vida.

Texto Institucional (Sección Acerca de)

«Nacimos bajo la firme premisa de que el espacio físico ejerce una influencia directa en la calidad del pensamiento y la ejecución profesional. Hemos transformado un edificio histórico en un templo de innovación tecnológica y diseño paramétrico. Aquí, cada línea, cada material y cada servicio han sido proyectados minuciosamente para eliminar los roces cotidianos de la gestión de oficinas, permitiéndote concentrar el cien por cien de tu energía en lo que verdaderamente impulsa tu negocio.»

Matriz de Datos Comerciales (Membresías)

Plan Principiante (Hot Desk): Acceso flexible a las zonas comunes de trabajo compartido, acceso de lunes a viernes en horario comercial, café premium ilimitado y créditos mensuales básicos para reservar salas de reuniones. Tarifa: $150 / mes.
Plan Profesional (Dedicated Desk): Escritorio reservado de uso exclusivo en zona de silencio con archivador de seguridad individual, acceso total e ininterrumpido al espacio las 24 horas del día, los 7 días de la semana, dirección fiscal corporativa y un paquete ampliado de créditos para salas de juntas. Tarifa: $290 / mes.
Plan Corporativo (Private Office): Despacho cerrado con llave para equipos de 4 a 12 personas, configuraciones de red personalizadas, acceso completo a todas las amenidades globales del espacio y prioridad absoluta en la reserva de salas de conferencias para eventos. Tarifa: Desde $850 / mes.

Mensajes de Conversión (Call to Action)

Botón de Conversión Primario: «Reserva un recorrido personalizado»
Botón de Conversión Secundario: «Ver disponibilidad de oficinas»
Etiqueta de Cierre: «Sin contratos de permanencia a largo plazo. Comienza mañana mismo.»

Información de Contacto Oficial

Dirección Física: Avenida Central de la Innovación, Edificio Prisma Suite 500, San Sebastián, Puerto Rico.
Canal Telefónico Corporativo: +1 (787) 555-0190
Correo de Atención Comercial: contacto@universoespacios.com
Horarios de Atención Personalizada: Lunes a Viernes de 8:00 AM a 6:00 PM.

9. Organización Metódica de Recursos en Local

Para mitigar la sobrecarga cognitiva y evitar la pérdida de tiempo buscando archivos durante la fase de maquetación visual activa, debes replicar la siguiente estructura de carpetas organizativa en tu equipo local de desarrollo:

[Proyecto Coworking Divi 5]
   ├── [01_Marca]
   │     ├── Logo_Light_Master.svg
   │     ├── Logo_Dark_Master.svg
   │     └── Paleta_Tokens_Hex.txt
   ├── [02_Imagenes_Optimizadas]
   │     ├── Hero_Fondo_Workspace.webp
   │     ├── Oficinas_Privadas.webp
   │     └── Comunidad_Meeting.webp
   ├── [03_Contenidos_Copy]
   │     ├── Home_Estructura_Texto.docx
   │     └── Legales_Terminos.txt
   └── [04_Inspiracion_Referencias]
         ├── Captura_Layout_Hero.png
         └── Nota_Comportamiento_Hover.txt

Mantener este orden estricto de los materiales te permitirá afrontar el siguiente paso con total control sobre el proyecto.