El Despertar de PRISMA Final

Bienvenida: De Corazón a Corazón

«¡Bienvenidos a Universo Divi! Te saludan el calculista y el profesor, pero sobre todo, te saluda alguien que, como tú, estuvo sentado frente a una pantalla en blanco con el corazón lleno de dudas.

No creas que nacimos con todas las respuestas. Nosotros también sentimos ese temor a ‘romper’ el diseño, a que la web se viera mal en un teléfono, o a no saber qué medida era la correcta. Superamos esos temores a base de batalla, de prueba y error, y de entender que la tecnología debe ser nuestra aliada, no nuestra enemiga. Hoy, te entregamos el fruto de ese camino: PRISMA. Estás en casa, y aquí, el miedo se queda fuera.»

¿Qué es PRISMA? La Evolución de la Web

«La web ya no es lo que era hace cinco años. Hoy la web es líquida. Un diseño debe ser tan elegante en un monitor gigante como en la palma de tu mano.

PRISMA es nuestra respuesta a esa evolución. No es una simple plantilla; es un motor de inteligencia visual. PRISMA se nutre de los cambios constantes de la tecnología para que tú no tengas que preocuparte por ellos. Lo mejor de todo es que nosotros hemos tomado las decisiones críticas por ti: los espacios, las jerarquías y las proporciones están matemáticamente afinados.

¿Quieres cambiar algo? ¡Adelante! PRISMA te da la libertad total. Solo tienes que ir a la variable, ajustar un número, y verás cómo todo tu universo se reconfigura al instante sin perder la armonía.»

El Escenario: Elementor y el Salto a «One»

«Para darle vida a PRISMA, usamos el mejor lienzo del mundo: Elementor. Hemos visto a Elementor crecer, desde sus humildes comienzos hasta convertirse en el estándar de la industria.

Y como la web no se detiene, hoy ya escuchamos el eco de Elementor One. La herramienta evoluciona hacia una integración total, y PRISMA está listo para ese salto. Estamos trabajando con lo último, con la vanguardia, para que tu aprendizaje nunca quede obsoleto.»

¿Por qué elegimos el papel (digital) sobre el video?

En un mundo lleno de tutoriales de YouTube que corren a mil por hora, en Universo Elementor hemos tomado una decisión consciente: preferimos el tutorial técnico paso a paso con capturas de pantalla.

No es que menospreciemos el video; el video es una herramienta maravillosa para el entretenimiento. Sin embargo, para el aprendizaje profundo y la arquitectura web, el tutorial impreso o en Ebook ofrece ventajas que un video nunca podrá igualar:

• Tu propio ritmo: No tienes que estar pausando, retrocediendo o lidiando con anuncios. Tú decides cuánto tiempo pasas analizando cada imagen y cada variable.
• Precisión Quirúrgica: En una captura de pantalla, puedes ver el nombre exacto de la pestaña y el valor de la variable sin que la mano del tutor se mueva o el enfoque se pierda.
• La «Hoja de Ruta» a mano: Un Ebook se convierte en una guía de consulta rápida que puedes tener abierta en una segunda pantalla o impresa en tu escritorio mientras construyes. Es, literalmente, tener al profesor señalando con el dedo exactamente dónde debes hacer clic.

Como dice el profesor: «El video se esfuma, pero el manual permanece». Queremos que tengas una referencia sólida que no dependa de una conexión a internet para ser consultada una y otra vez.

Paso 0: Afinando el Instrumento (El «La» a 440)

«Antes de empezar a crear, vamos a afinar nuestra orquesta. Como un piano que se ajusta a 440Hz para sonar perfecto, nuestra web debe ajustarse a 1440px para brillar.

Sigue mis pasos para dejar esto ‘planchado’:

Inyectando el ADN de PRISMA -El Custom CSS-

Ahora que tenemos nuestro escenario a 1440px, es momento de darle la inteligencia al sistema. Vamos a introducir las Variables Maestras. Estas son las que decidirán, por ti, cuánto espacio hay entre elementos y qué tamaño tendrán tus textos en cada dispositivo.

La Ruta Exacta:

Dentro de Ajustes del Sitio (donde acabas de cambiar el ancho), vuelves a los Ajustes del Sitio.

1. Verás un cuadro negro,
2. Aquí es donde ocurre la magia. Baja hasta la última opción: CSS personalizado -Custom CSS.
3. Copia y Pega el bloque de código que te proporcionamos a continuación.

Panel de CSS con el código ya pegado. Es vital que veas que el código empieza con :root { y termina con }.

El Código Maestro -Para copiar y pegar-

«Aquí tienes el código que debes Copiar y Pegar. No necesitas entender cada línea, solo necesitas saber que aquí están las órdenes que obedecerá tu diseño».

:root {
    /* -- ESCALADO DE TIPOGRAFÍA (CLAMPS) -- */
    --t-xxl: clamp(2.5rem, 5vw, 5rem);    /* Títulos Monumentales */
    --t-m: clamp(1.25rem, 2vw, 2rem);     /* Texto de Lectura */
    --t-s: clamp(1rem, 1.25vw, 1.25rem);  /* Notas y Detalles */

    /* -- ARQUITECTURA DE ESPACIOS (PADDINGS) -- */
    --p-xxxxl: clamp(1.875rem, 6vw, 6rem); /* Aire arriba y abajo */
    --p-xxxl: clamp(1.5rem, 5vw, 5rem);    /* Margen lateral de seguridad */

    /* -- EL RITMO DEL DISEÑO (GAPS) -- */
    --g-prisma: clamp(1rem, 2vw, 2rem);    /* Espacio entre elementos */
}

Nota del Calculista: Al pegar este código, acabas de afinar tu sitio web. A partir de ahora, no tendrás que adivinar tamaños. Solo tendrás que llamar a estos nombres (variables) y PRISMA hará el trabajo sucio de calcular los píxeles por ti. Después de pegar el código, deben darle al botón azul de Actualizar. Si no lo hacen, el ADN no se guarda y el cuerpo del diseño nacerá vacío.

Entendiendo el «Cerebro» de PRISMA: Variables y Clamps

Antes de seguir, hagamos una pausa necesaria. No queremos que seas un robot que copia y pega; queremos que entiendas el poder que acabas de instalar en tu web.

¿Qué es una Variable?

Imagina que en tu casa tienes un frasco con una etiqueta que dice «SAL». No importa si cambias el frasco de sitio o si compras una marca de sal diferente; siempre que busques «SAL», sabrás qué hay dentro.

En PRISMA, una Variable es ese frasco. En lugar de escribir «96 píxeles» en cada rincón de tu web, escribimos --p-xxxxl. Si mañana decides que ese espacio debe ser más pequeño, solo cambias el valor dentro del «frasco» –en el código que pegamos arriba– y toda tu web se ajustará automáticamente. ¡Eso es eficiencia!

¿Qué es un Clamp -El acordeón invisible-

La palabra clamp en inglés significa «abrazadera». En diseño web, es lo que permite que tu tipografía o tus espacios se comporten como un acordeón.

Un clamp tiene tres valores:

1. El Mínimo: Lo más pequeño que se verá en un móvil -ej. 30px.
2. El Ideal: El valor que va cambiando según el tamaño de la pantalla -el «ritmo» de la web.
3. El Máximo: Lo más grande que se verá en un monitor de escritorio -ej. 96px.

Gracias al clamp, no tienes que crear un diseño para móvil y otro para PC. El diseño «fluye» y se adapta solo.

¿Cómo preparamos un Clamp? El Gestor Maestro

Para no volvernos locos con las matemáticas, los profesionales usamos calculadoras de Tipografía Fluida. Mi favorita para trabajar con PRISMA es -Modern Fluid Typography Editor.

Cómo usarlo para PRISMA:

• Paso A: Defines tu ancho mínimo (320px para móviles) y tu ancho máximo (1440px, nuestra medida de afinación).
• Paso B: Defines cuánto quieres que mida tu texto en el móvil y cuánto en el monitor.
• Paso C: El gestor te entrega una línea de código mágica. Esa es la que nosotros ya hemos pre-configurado en tu código de PRISMA para que no tengas que calcular nada.

La Prueba de Fuego: Tu primer título inteligente

Ahora vamos a comprobar que tu orquesta está bien afinada. No vamos a diseñar todavía; vamos a invocar el poder de las variables por primera vez.

Sigue estos pasos con cuidado:

• Sal de los Ajustes del Sitio y regresa al editor de Elementor.
• Arrastra un widget de Encabezado (Heading) a tu lienzo.
• Escribe lo que quieras, por ejemplo: “PRISMA: La arquitectura es la verdad”.
• Ve a la pestaña de Estilo del widget y busca el apartado Tipografía.
• Haz clic en el icono del Lápiz para editarla.
• Busca el campo Tamaño (Size). Aquí es donde ocurre el cambio: en lugar de mover la barra o escribir un número, haz clic en el icono de “Etiquetas Dinámicas” (un pequeño icono de base de datos) o simplemente escribe directamente en el campo de valor la siguiente instrucción:
• var(–t-xxl) La Prueba de Fuego: Tu primer título inteligente

Ahora vamos a comprobar que tu orquesta está bien afinada. No vamos a diseñar todavía; vamos a invocar el poder de las variables por primera vez.

Sigue estos pasos con cuidado:

• Sal de los Ajustes del Sitio y regresa al editor de Elementor.
• Arrastra un widget de Encabezado (Heading) a tu lienzo.
• Escribe lo que quieras, por ejemplo: “PRISMA: La arquitectura es la verdad”.
• Ve a la pestaña de Estilo del widget y busca el apartado Tipografía.
• Haz clic en el icono del Lápiz para editarla.
• Busca el campo Tamaño (Size). Aquí es donde ocurre el cambio: en lugar de mover la barra o escribir un número, haz clic en el icono de “Etiquetas Dinámicas” (un pequeño icono de base de datos) o simplemente escribe directamente en el campo de valor la siguiente instrucción: var(–t-xxl)

Al momento de escribir eso, verás que tu título adquiere un tamaño majestuoso y equilibrado. Pero lo más importante no es cómo se ve ahora, sino lo que acabas de garantizar:

• Si duplicas este título: Siempre medirá lo mismo.
• Si cambias de pantalla: Si pasas a la vista de móvil (Tablet o Celular), notarás que el título se encoge solo, sin que tú tengas que ajustar nada. El clamp está trabajando por ti en segundo plano.

Figura 1.3: La Variable --t-xxl en acción. Explicación: Acabas de «llamar» a la variable de Título Monumental. A partir de este momento, cada vez que uses este código en cualquier titular de tu web, obtendrás exactamente el mismo resultado armónico. Has eliminado el error humano y has abrazado la precisión del sistema.

A continuación te presentamos las instrucciones en Tomas de Pantalla para que no te equivoques:

Conclusión del Primer Encuentro

¡Felicidades! Ya tienes el escenario a 1440px, el ADN inyectado en el CSS y has aprendido a invocar tu primera Variable.

Has dejado de ser un usuario que «mueve cosas a ojo» para convertirte en un diseñador que construye con estructura. En la próxima entrega de este tutorial, empezaremos a levantar las 90 secciones que harán de tu web una obra maestra.

¡Planchado! Nos vemos en el próximo paso.