¿Cómo crear una página institucional completa con el Editor de bloques de Waclis?

Una Página web institucional tiene como objetivo presentar claramente:

• quién es la empresa;

• qué hace;

• para quién trabaja;

• qué ofrece;

• qué la diferencia;

• qué experiencia puede demostrar;

• cómo puede continuar el visitante.

El desafío no consiste en crear muchas Sections atractivas.

El verdadero desafío es conseguir que todas formen:

UNA SOLA HISTORIA

y no:

HERO BONITO
↓
OTRA SECTION BONITA
↓
OTRA SECTION BONITA
↓
OTRA SECTION BONITA

sin relación entre ellas.

¿Qué vamos a construir?

Utilizaremos como referencia esta arquitectura:

1. HERO
↓
2. PRESENTACIÓN DE LA EMPRESA
↓
3. BENEFICIOS / DIFERENCIALES
↓
4. SERVICIOS
↓
5. TEXTO + IMAGEN
↓
6. PROYECTOS / TRABAJOS
↓
7. TESTIMONIOS
↓
8. CTA PRINCIPAL
↓
9. CONTACTO

Esta estructura no es obligatoria.

Según el negocio podrías necesitar además:

• Equipo;

• Timeline;

• FAQ;

• Clientes;

• Características;

• Galería;

• Tabla de precios;

• otras Sections.

Y también puedes eliminar cualquiera de las anteriores.

Primera regla

Una página profesional no necesita todas las Sections disponibles en el Editor. Necesita únicamente las que ayudan al visitante a comprender y avanzar.

Antes de abrir el Editor: define el objetivo de la página

Completa:

Esta página debe permitir que una persona comprenda:
____________________________________

Y:

Después de recorrerla quiero que:
____________________________________

Por ejemplo:

Comprenda qué hace la empresa,
qué servicios ofrece y pueda contactarla.

Ese será nuestro objetivo.

No comiences por el diseño

Antes de elegir:

• Background;

• Cards;

• iconos;

• imágenes;

debes construir el contenido.

Paso 1. Crea el inventario de información

Reúne únicamente información real.

Por ejemplo:

Nombre de la empresa
Descripción
Actividad
Servicios
Beneficios
Historia
Experiencia
Proyectos
Testimonios
Dirección
Teléfono
Email
WhatsApp

No inventes contenido para llenar huecos

Si todavía no tienes:

testimonios

no necesitas una Section de Testimonios.

Si no tienes:

proyectos publicables

no necesitas inventar un Portafolio.

Si no tienes:

estadísticas verificables

no agregues Counters ficticios.

Segunda regla

La arquitectura debe adaptarse al contenido real. El contenido no debe inventarse para completar una arquitectura.

Paso 2. Define qué información pertenece a esta página

Una página institucional no necesita explicar hasta el último detalle.

Por ejemplo:

HOME / INSTITUCIONAL
→ resumen de servicios

y:

PÁGINA SERVICIOS
→ desarrollo completo

Lo mismo con proyectos

Página institucional:

3 o 6 trabajos destacados

Página de proyectos:

portafolio completo

El objetivo es orientar

no duplicar todas las páginas del sitio dentro de una sola.

Paso 3. Define el recorrido

Vamos a construir:

HERO
¿Qué hace esta empresa?

↓
PRESENTACIÓN
¿Quiénes somos?

↓
BENEFICIOS
¿Por qué puede interesarme?

↓
SERVICIOS
¿Qué ofrece?

↓
DESARROLLO
¿Cómo trabaja / qué aporta?

↓
PROYECTOS
¿Qué puede demostrar?

↓
TESTIMONIOS
¿Qué dicen clientes reales?

↓
CTA
¿Qué hago ahora?

↓
CONTACTO
¿Cómo me comunico?

Cada Section responde una pregunta distinta.

Si dos Sections responden exactamente lo mismo

probablemente existe repetición.

Ejemplo de repetición

Hero:

Somos una empresa que desarrolla soluciones digitales.

Quiénes somos:

Somos una empresa que desarrolla soluciones digitales.

Beneficios:

Desarrollamos soluciones digitales.

Servicios:

Desarrollamos soluciones digitales.

La página parece extensa

pero comunica una sola idea cuatro veces.

Mejor

Hero:

Soluciones digitales para gestionar y hacer crecer tu presencia online.

Presentación:

Quién es la empresa y qué tipo de proyectos desarrolla.

Beneficios:

Qué ventajas concretas aporta su forma de trabajar.

Servicios:

Qué soluciones específicas ofrece.

Tercera regla

Cada Section debe agregar información nueva.

Paso 4. Define la jerarquía de Headings antes del diseño

Podemos planificar:

H1
Propuesta principal

    H2
    Quiénes somos

    H2
    Por qué elegirnos

    H2
    Nuestros servicios

    H2
    Nuestro trabajo

    H2
    Lo que dicen nuestros clientes

    H2
    Contacto

Dentro de Servicios:

H3
Servicio A

H3
Servicio B

H3
Servicio C

Dentro de Proyectos:

H3
Proyecto A

H3
Proyecto B

No utilices Heading según el tamaño visual

No hagas:

H1
H4
H2
H5
H1

solamente porque cada nivel tiene un tamaño diferente.

El tamaño se configura desde

Estilo → Typography

Paso 5. Decide cómo crearás la página en Waclis

Existen dos escenarios.

Escenario A: una sección nueva personalizada

Cuando creas contenido como una nueva sección desde Menúes:

puedes desarrollar la composición completa dentro del Editor de bloques.

Escenario B: una página fija de Waclis

Las páginas fijas disponen de posiciones editables determinadas.

Por ejemplo:

Debajo del menú

y:

Arriba del menú inferior

según la página.

Recuerda

Header y Footer:

NO se editan desde el Editor de bloques

Una posición:

Debajo del menú

significa que el contenido comienza después del Header.

Paso 6. No intentes construir un nuevo Header dentro del contenido

Si ya tienes:

LOGO
MENÚ PRINCIPAL

en Header,

no vuelvas a crear dentro del primer bloque:

LOGO
INICIO
NOSOTROS
SERVICIOS
CONTACTO

salvo que realmente necesites una navegación secundaria.

El contenido debe comenzar con la página

no con una copia del Header.

Paso 7. Construye primero el Hero

Nuestro Hero responderá:

¿QUÉ HACE ESTA EMPRESA?

Ejemplo conceptual

SOLUCIONES DIGITALES

Herramientas para impulsar la presencia online de tu negocio

Descripción breve...

[ CONOCER SERVICIOS ]    Contactar →

Puede tener:

TEXTO | IMAGE

o:

BACKGROUND IMAGE
+
OVERLAY
+
TEXTO

No repitas aquí toda la historia de la empresa.

El Hero necesita:

PROPUESTA
+
CONTEXTO
+
ACCIÓN

Paso 8. El H1 pertenece naturalmente al Hero

Por ejemplo:

H1:
Soluciones digitales para potenciar la presencia online de tu empresa

Evita varios H1 dentro de las Sections posteriores.

Paso 9. CTA del Hero

Una acción puede ser:

[ VER SERVICIOS ]

Y una secundaria:

Contactar →

Recuerda:

CTA
=
ACCIÓN REAL

Si dice:

VER SERVICIOS

debe llevar realmente a:

• página;

• sección;

de Servicios.

Paso 10. No hagas un Hero excesivamente largo

Después del Hero queremos que el visitante descubra:

contenido siguiente

No necesitas:

100vh

si el contenido funciona perfectamente con:

Auto
+
Padding

Paso 11. Segunda Section: presentación de la empresa

Ahora respondemos:

¿QUIÉNES SOMOS?

Puede utilizar:

TEXTO | IMAGE

Por ejemplo:

QUIÉNES SOMOS

Una empresa dedicada a...

Descripción...

[ CONOCER MÁS ]

Image:

• equipo;

• instalaciones;

• producto;

• fotografía institucional;

según el negocio.

Paso 12. No repitas el Hero

Hero:

qué ofrecemos

Presentación:

quiénes somos

Son funciones diferentes.

Paso 13. ¿Qué información institucional incluir?

Puedes responder:

¿Qué hace la empresa?

¿Desde qué enfoque trabaja?

¿A qué tipo de cliente atiende?

No necesitas escribir aquí toda la cronología histórica.

Si la historia es importante:

puedes utilizar después:

Timeline

Paso 14. ¿Necesito una Section “Quiénes somos” completa?

No siempre.

Si el Hero ya presenta claramente la empresa

y la página es muy comercial,

puede bastar una sección más breve.

Evita agregar contenido solamente porque existe la categoría:

Quiénes somos

Paso 15. Tercera Section: beneficios o diferenciales

Ahora respondemos:

¿POR QUÉ PUEDE INTERESARME ESTA EMPRESA?

Utiliza:

Font Icon / Svg Icon
+
H3
+
Paragraph

Por ejemplo:

[ ICONO ]

Gestión centralizada

Organiza diferentes herramientas desde un mismo entorno.

O:

[ ICONO ]

Acompañamiento

Descripción real del servicio...

Utiliza únicamente beneficios que puedan sostenerse.

No:

+300% ventas

si no existe evidencia.

Paso 16. Tres, cuatro o seis beneficios

Por ejemplo:

Desktop:

[ A ][ B ][ C ]

Tablet:

[ A ][ B ]
[ C ]

Mobile:

A
B
C

Si tienes seis:

Desktop:
3 + 3

Tablet:
2 + 2 + 2

Mobile:
1 + 1 + 1 + 1 + 1 + 1

Paso 17. Mantén esta Section más breve

Ya tendremos varias Sections.

No conviertas Beneficios en:

8 Cards
×
100 palabras

La página institucional necesita ritmo.

Paso 18. Cuarta Section: Servicios

Ahora respondemos:

¿QUÉ OFRECE LA EMPRESA?

Puedes utilizar:

• Cards;

• sección prediseñada Servicios.

Estructura:

SERVICIOS

Descripción breve

[ CARD ][ CARD ][ CARD ]

Cada Card:

Icon / Image
↓
H3
↓
Paragraph
↓
Link opcional

Paso 19. No describas todos los servicios exhaustivamente

La Card resume.

Por ejemplo:

Diseño web

Desarrollo de Páginas web adaptadas a...

Después:

Ver servicio →

si existe una página individual.

Si no:

no agregues un Link ficticio.

Paso 20. Prioriza los principales

Si tienes:

14 servicios

no necesitas mostrar los 14.

Puedes presentar:

3 principales

o:

6 destacados

y después:

[ VER TODOS LOS SERVICIOS ]

Paso 21. Quinta Section: desarrollo con texto + imagen

Aquí podemos profundizar en una idea.

Por ejemplo:

¿CÓMO TRABAJAMOS?

O:

UNA PLATAFORMA PENSADA PARA...

O:

ACOMPAÑAMOS CADA ETAPA

Utiliza:

Texto | Image

Esta Section es especialmente útil para romper la repetición de:

grilla
grilla
grilla

Paso 22. Alterna el diseño sin romper mobile

Desktop:

TEXT | IMAGE

Otra Section podría usar:

IMAGE | TEXT

Pero recuerda:

mobile debe conservar un recorrido lógico.

No termines con:

Image A
Image B
Text B

por alternar columnas solo para desktop.

Paso 23. Sexta Section: proyectos

Ahora respondemos:

¿QUÉ PUEDE DEMOSTRAR LA EMPRESA?

Utiliza:

• Portfolio;

• Cards;

• Gallery;

según contenido.

Por ejemplo:

PROYECTOS REALIZADOS

[ Proyecto ][ Proyecto ][ Proyecto ]

Cada proyecto puede contener:

Image
Categoría
H3
Descripción
Link opcional

Paso 24. Utiliza solamente trabajos reales

No inventes:

• clientes;

• marcas;

• resultados;

• proyectos.

Si solo tienes tres buenos proyectos:

utiliza tres.

Paso 25. No necesitas un Portafolio si el negocio no lo requiere

Por ejemplo

una empresa puede no tener trabajos individualmente presentables.

En ese caso

puedes reemplazar la Section por:

• Clientes;

• Características;

• Proceso;

• Equipo;

según información real.

La arquitectura es flexible.

Paso 26. Séptima Section: Testimonios

Ahora respondemos:

¿QUÉ DICEN CLIENTES REALES?

Puede utilizar:

Testimonios

Por ejemplo:

“Texto real del testimonio...”

Nombre
Empresa

Solo si:

• el testimonio es real;

• corresponde publicarlo.

No utilices IA para inventar una cita atribuida a un cliente.

Paso 27. ¿Qué pasa si no tengo testimonios?

Elimina la Section.

Puedes utilizar:

• proyectos;

• clientes;

• otra prueba verificable.

No necesitas llenar el espacio.

Paso 28. No exageres los testimonios

Si el cliente dijo:

“El proceso fue simple.”

no lo transformes en:

“Fue la mejor experiencia de nuestra historia y multiplicamos nuestros resultados.”

Respeta el contenido real.

Paso 29. Octava Section: CTA principal

Después de:

presentar
↓
explicar
↓
demostrar
↓
generar confianza

podemos preguntar:

¿QUIERES CONTINUAR?

Ejemplo:

¿Quieres conversar sobre tu proyecto?

Cuéntanos qué necesitas.

[ CONTACTAR ]

Esta es una posición muy natural para una CTA fuerte.

Paso 30. No hagas que CTA repita literalmente el Hero

Hero:

Conoce nuestras soluciones

CTA final:

puede cambiar a:

¿Quieres saber cuál puede adaptarse a tu proyecto?

[ CONTACTAR ]

El visitante ahora tiene más contexto.

Paso 31. Novena Section: contacto

Finalmente:

¿CÓMO ME COMUNICO?

Puede incluir:

Form
+
información
+
mapa

Pero solo si la página necesita el formulario completo.

Otra opción:

datos de contacto
+
CTA

y enviar a una página Contacto.

No dupliques innecesariamente un formulario complejo en todas las páginas.

Paso 32. Formulario visible no significa formulario funcional

Si decides incluir Form:

debes verificar:

envío real

No basta con:

se ve perfecto

Debes:

Guardar Cambios
↓
Ver página
↓
Completar
↓
Enviar
↓
Comprobar recepción

Paso 33. Mapa solo cuando aporta

Si la empresa:

• recibe público;

• tiene oficina;

• tiene local;

• tiene showroom;

el mapa puede ser útil.

Si el negocio es completamente online:

quizá no necesitas Map.

No agregues un mapa únicamente para llenar el final.

Paso 34. Dirección escrita siempre que corresponda

Mapa:

complemento visual

Dirección:

información

Mantén la dirección escrita.

Paso 35. ¿Necesito FAQ?

Puede ser útil antes del CTA o contacto si existen:

preguntas frecuentes reales

Por ejemplo:

¿Cuánto tarda...?
¿Cómo funciona...?
¿Puedo...?

Pero no inventes preguntas que nadie necesita

solo para agregar una Section.

FAQ debe reducir dudas reales.

Paso 36. ¿Necesito Equipo?

Puede ser útil en empresas donde:

las personas son parte importante del servicio

Por ejemplo:

• consultoría;

• estudio;

• servicios profesionales.

Puede incluir:

foto
nombre
rol

Utiliza información real.

No inventes integrantes.

Paso 37. ¿Necesito Timeline?

Puede utilizarse para:

• historia;

• evolución;

• proceso.

Por ejemplo:

2018
Inicio

2021
Nueva unidad

2026
...

Solo si las fechas son reales y aportan.

No agregues Timeline si la historia puede explicarse en:

3 líneas

Paso 38. ¿Necesito clientes/logos?

Puede ser útil para:

confianza

Pero cada logo debe representar una relación real que corresponda mostrar.

No utilices marcas famosas como decoración.

Paso 39. Ritmo visual de toda la página

Ahora que tenemos varias Sections

debemos diseñar el ritmo.

Por ejemplo:

HERO
fondo principal

QUIÉNES SOMOS
blanco

BENEFICIOS
gris suave

SERVICIOS
blanco

TEXTO + IMAGEN
color suave

PROYECTOS
blanco

TESTIMONIOS
gris suave

CTA
color de marca

CONTACTO
blanco

No es una receta obligatoria.

El principio es:

VARIEDAD CONTROLADA

No:

cada Section de un color distinto

Paso 40. Evita el “efecto arcoíris”

Por ejemplo:

Hero azul
About naranja
Benefits verde
Services violeta
Projects rojo
Testimonials amarillo
CTA rosa

sin una identidad que lo justifique.

Cada Section parece pertenecer a un sitio diferente.

Trabaja con una paleta coherente.

Paso 41. Tampoco hagas todo idéntico

Si todas las Sections tienen:

fondo blanco
H2 centrado
3 Cards

la página puede resultar monótona.

Puedes alternar:

grilla
↓
texto + imagen
↓
grilla
↓
cita
↓
CTA

El tipo de contenido ya genera ritmo.

Paso 42. Usa Background con intención

Background puede ayudar a indicar:

cambio de tema

Por ejemplo:

SERVICIOS
fondo blanco

Después:

PROYECTOS
fondo suave

No cambies Background únicamente por alternancia automática.

Paso 43. Mantén un sistema de Padding

Por ejemplo:

Sections normales:

72–96 px desktop

como referencia.

Mobile:

40–56 px

No son valores obligatorios.

Lo importante es evitar:

Section A → 20px
Section B → 160px
Section C → 45px

sin una razón.

Paso 44. No fijes el mismo Padding exacto si el contenido necesita otra cosa

Hero puede necesitar más.

CTA puede necesitar más.

Una pequeña transición:

menos.

Sistema:

consistencia

no significa:

todos los números idénticos

Paso 45. Define una Class para cada gran Section

Por ejemplo:

institutional-hero

about-section

benefits-section

services-section

portfolio-section

testimonials-section

main-cta-section

contact-section

Esto permite:

• organización;

• CSS localizado.

No necesitas agregar un ID a todas.

Paso 46. Classes vs IDs

Class:

servicios compartidos de diseño

ID:

referencia única

Por ejemplo:

id="servicios"

puede servir para un enlace interno.

Pero debe aparecer:

UNA SOLA VEZ

Paso 47. Navegación mediante anclas internas

Puedes crear Links hacia:

#servicios

#proyectos

#contacto

Por ejemplo

Hero:

[ VER SERVICIOS ]

puede apuntar a:

#servicios

si Servicios se encuentra en la misma página.

Paso 48. No agregues IDs solamente porque puedes

Si ningún Link los utiliza:

quizá no hacen falta.

Menos elementos innecesarios:

• menos mantenimiento;

• menos riesgo de duplicación.

Paso 49. Revisa los IDs después de clonar Sections

Si clonaste:

id="servicios"

puedes terminar con:

id="servicios"
id="servicios"

Eso es incorrecto.

Mantén unicidad.

Paso 50. Navegación interna no reemplaza Header

Puedes tener un pequeño índice local si la página es extensa.

Pero no recrees el menú principal.

Por ejemplo:

Quiénes somos
Servicios
Proyectos
Contacto

puede funcionar como navegación interna

solo si realmente aporta.

Paso 51. No agregues una Nav Bar sin necesidad

Una página institucional normal puede recorrerse mediante scroll.

Una segunda barra de navegación puede:

• duplicar opciones;

• ocupar espacio.

Utilízala solo si mejora la experiencia.

Paso 52. Orden de Sections

No existe una única secuencia universal.

Por ejemplo

una empresa con trabajos muy visuales puede utilizar:

Hero
↓
Projects
↓
Services
↓
About
↓
CTA

Mientras una consultora podría utilizar:

Hero
↓
About
↓
Benefits
↓
Services
↓
Team
↓
Testimonials
↓
Contact

El orden debe responder:

¿Qué necesita saber el visitante antes de estar preparado para avanzar?

Paso 53. No copies la arquitectura de otra empresa sin pensar

Puedes usarla como referencia.

Pero:

una empresa de arquitectura

no comunica igual que:

una plataforma de software

Los contenidos son diferentes.

Paso 54. Revisa transiciones entre Sections

Al final de Beneficios:

Ya sé por qué me interesa

después Servicios:

Ahora veo qué ofrecen

después Proyectos:

Ahora veo ejemplos

Esa secuencia tiene lógica.

Si el orden es:

Contacto
↓
Quiénes somos
↓
Hero
↓
Proyectos

puede sentirse extraño

salvo que exista un motivo muy concreto.

Paso 55. Utiliza textos de transición cuando hagan falta

No necesariamente entre todas las Sections.

Por ejemplo:

Conoce algunas de las soluciones que podemos desarrollar.

antes de Servicios.

Ayuda a conectar el recorrido.

Paso 56. Evita encabezados repetitivos

No utilices en todas:

Conoce...
Conoce...
Conoce...
Conoce...

Varía la redacción manteniendo consistencia.

Paso 57. Evita que todos los H2 tengan exactamente la misma estructura

Por ejemplo:

Descubre nuestros beneficios
Descubre nuestros servicios
Descubre nuestros proyectos
Descubre nuestros clientes

Puede sentirse mecánico.

El diseño puede ser consistente sin que todo el contenido sea una plantilla textual.

Paso 58. Longitud total de la página

Más Sections:

≠
mejor página

Cada bloque agrega:

• lectura;

• desplazamiento;

• peso.

Si una Section no aporta:

elimínala.

Paso 59. No escondas exceso de contenido dentro de Acordeones indiscriminadamente

Accordeon puede ayudar con:

• FAQ;

• información secundaria.

Pero no lo utilices para:

esconder media página

solo porque quedó larga.

Primero revisa qué contenido realmente debe estar.

Paso 60. Rendimiento general

Ahora que combinamos muchas Sections:

debes revisar el peso acumulado.

Especialmente:

• Images grandes;

• Videos;

• mapas;

• embeds;

• Lottie;

• múltiples Widgets externos.

Una Section individual puede funcionar perfectamente.

Pero diez recursos externos en una misma página pueden afectar:

experiencia general

Paso 61. No agregues un video en cada Section

Si tienes:

Hero video
Services video
About video
Projects video
Testimonials video

puede ser excesivo.

Selecciona los recursos que realmente aportan.

Paso 62. Mapas

Normalmente un mapa completo puede reservarse para:

Contacto

No necesitas mapas repetidos en varias Sections.

Paso 63. Embeds sociales

No conviertas la página institucional en:

una reproducción completa de redes sociales

Puedes utilizar:

• Social icons;

• una selección puntual;

según necesidad.

Las plataformas externas generan además dependencias adicionales.

Paso 64. Images

Optimiza:

cantidad
+
dimensiones
+
peso

Una captura gigante utilizada dentro de una Card pequeña

no necesita mantener una resolución desproporcionada.

Paso 65. Utiliza Image vs Background correctamente

Image:

contenido

Background:

presentación

No coloques:

• textos críticos;

• logos necesarios;

• datos;

dentro de Backgrounds que pueden recortarse.

Paso 66. Responsive global

No basta con revisar:

cada Section

individualmente.

Debes revisar:

la página completa

en cada tamaño.

Desktop:

Hero
About
Benefits
Services
Feature
Projects
Testimonials
CTA
Contact

Tablet:

misma secuencia,

pero con:

• menos columnas;

• más elementos apilados.

Mobile:

prácticamente toda la página se transforma en:

un recorrido vertical

Paso 67. Mobile no es la versión pequeña de desktop

Léela como si fuera un documento independiente.

Pregunta:

¿La información sigue apareciendo en orden lógico?

Por ejemplo

desktop:

TEXT | IMAGE

segunda Section:

IMAGE | TEXT

mobile debería evitar:

Image A
Image B
Text B

cuando esa secuencia no tenga sentido.

Paso 68. Tablet merece una revisión propia

Un error común:

desktop perfecto
mobile perfecto
tablet roto

Porque:

3 columnas

pueden resultar demasiado estrechas.

Pasa a:

2 columnas

cuando corresponda.

No reduzcas Typography como primera solución.

Paso 69. Revisa todos los H2 en mobile

Un Heading que en desktop utiliza:

2 líneas

puede ocupar:

5 líneas

en celular.

Simplifica texto o ajusta Typography.

No cambies H2 a H4 solamente para hacerlo pequeño.

Paso 70. Revisa todos los CTA

Cada acción debe:

• caber;

• ser comprensible;

• ser fácil de seleccionar.

Evita textos excesivamente largos.

Paso 71. Revisa espacios acumulados en mobile

Si cada Section tiene:

96px arriba
96px abajo

la página móvil puede sentirse interminable.

Reduce de forma coherente.

Pero no elimines todo el espacio.

Paso 72. No utilices Hide based on device para solucionar una página larga

No hagas:

mobile
→ ocultar 4 Sections

solo para reducir scroll.

Si el contenido es importante:

adáptalo.

Si no es importante:

pregunta si debería existir en cualquier dispositivo.

Paso 73. Consistencia de Buttons

Acciones principales deberían seguir un sistema.

Por ejemplo:

Button principal:
fondo sólido

Secundario:

Link

No cambies completamente su estilo en cada Section.

Paso 74. Consistencia de iconos

Si Beneficios utiliza:

Font Icon

de una familia visual,

no mezcles:

• emojis;

• 3D;

• ilustraciones;

aleatoriamente en otras Cards similares.

Paso 75. Consistencia de Cards

Services y Projects pueden utilizar Cards.

Pero no necesariamente deben ser idénticas.

Servicio:

concepto

Proyecto:

trabajo realizado

Pueden compartir:

• Border radius;

• sombra;

• Padding;

pero mantener diferencias de contenido.

Paso 76. Consistencia no significa uniformidad absoluta

Una página donde absolutamente todo sea:

Card blanca
+
icono azul
+
H3
+
Paragraph

puede parecer monótona.

Mantén un sistema,

pero permite variaciones según función.

Paso 77. Navigator como herramienta de auditoría

Al terminar:

abre Navigator.

Recorre la estructura:

BODY
├── Hero
├── About
├── Benefits
├── Services
├── Feature
├── Portfolio
├── Testimonials
├── CTA
└── Contact

Comprueba que no existan:

• Sections vacías;

• Containers innecesarios;

• bloques clonados por error.

Paso 78. Busca Sections vacías

Puede ocurrir después de:

• mover;

• eliminar.

Por ejemplo:

Section
└── Container vacío

Puede generar:

espacio vacío

en frontend.

Si no se necesita:

elimínala.

Paso 79. Revisa Select Parent antes de eliminar

Si quieres quitar:

Paragraph

no elimines accidentalmente:

Section completa

Confirma mediante Navigator.

Recuerda

Eliminar:

no solicita confirmación

Si ocurre un error:

Deshacer

Paso 80. Revisa Linked styles

En una página completa esto es especialmente importante.

Un cambio sobre:

Heading compartido

puede modificar:

• About;

• Services;

• Projects.

Pregunta:

¿Quiero realmente un estilo global compartido?

Si sí:

perfecto.

Si una Section necesita una excepción:

utiliza una Class de variante.

Paso 81. No resuelvas excepciones con IDs por toda la página

Evita:

#title1
#title2
#title3
#title4

con estilos casi iguales.

Mejor:

section-title

como base.

Y:

section-title-large

cuando realmente necesitas una variante.

Paso 82. Crea un pequeño sistema de Classes

Conceptualmente:

section-eyebrow
section-title
section-description

card-base
card-link

cta-primary
cta-secondary

No necesitas estas Classes exactas.

La idea es reutilizar estilos.

Paso 83. No conviertas la página en una hoja de estilos irrepetible

Evita:

cada componente
→ Class completamente distinta
→ CSS completamente distinto

Reutiliza patrones.

Paso 84. CSS localizado

Si necesitas modificar Servicios:

.services-section .service-card {
    /* ajustes */
}

No:

.card {
}

Para Projects:

.portfolio-section .portfolio-card {
    /* ajustes */
}

Paso 85. Evita CSS global sobre Headings

No:

h2 {
    font-size: 48px;
}

si no deseas afectar todos los H2.

Puedes tener una Class común:

section-title

Paso 86. No modifiques .row globalmente

Evita:

.row {
    align-items:center;
}

Puede modificar:

• Services;

• Form;

• Portfolio;

• otras estructuras.

Localiza.

Paso 87. No modifiques .container globalmente

Puede cambiar el ancho de todo el sitio.

Utiliza opciones de:

Section → Container width

primero.

Paso 88. No modifiques img globalmente

Puede afectar:

• proyectos;

• logo;

• productos;

• Gallery.

Utiliza Classes específicas.

Paso 89. Bootstrap

Waclis utiliza:

Bootstrap 4

No agregues:

• Bootstrap 5;

• otra versión;

• otro framework de Grid;

para crear esta página.

Podrías generar conflictos.

Paso 90. No necesitas JavaScript para construir la página básica

Hero, Grid, Cards, CTA y contenido pueden resolverse con:

• estructura;

• CSS.

No agregues JavaScript para:

• centrar;

• responsive;

• Hover;

• alternar columnas.

Paso 91. Utiliza JavaScript solo cuando exista una función real que lo requiera

Y evita duplicar funciones ya disponibles mediante componentes.

Una página institucional simple:

no debería depender de código complejo

para existir.

Paso 92. Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

Pero define una estrategia.

Por ejemplo:

entradas suaves

en algunas Sections.

No:

Hero zoom
About rotate
Benefits bounce
Services flip
Projects shake
CTA pulse

Demasiada variedad de movimiento reduce coherencia.

Paso 93. No animes todo

La página debería ser excelente con:

0 animaciones

Después:

agrega movimiento únicamente donde aporte.

Paso 94. No retrases contenido

Evita grandes Delays.

El visitante no debería esperar para ver:

• servicios;

• proyectos;

• CTA.

Paso 95. Vista previa vs visibilidad real

Los botones superiores de dispositivo sirven para:

PREVISUALIZAR

Mientras:

Avanzado → Hide based on device

modifica:

VISIBILIDAD

No confundas ambos.

Paso 96. Revisa accesibilidad básica

La página debería mantener:

• Headings coherentes;

• Alt de Images;

• Links claros;

• contraste;

• formularios identificables;

• información que no dependa solo de color o iconos.

Paso 97. Imágenes

Completa Alt cuando corresponda.

No:

imagen1

Describe el recurso.

Paso 98. Iconos

No utilices:

solo icono

para comunicar información importante.

Utiliza:

icono
+
texto

Paso 99. Links

Evita:

Haz clic aquí

Mejor:

Ver servicios

Conocer proyecto

Contactar

Paso 100. Formularios

No dependas únicamente de Placeholder.

Mantén:

• Labels;

• estructura.

Y valida funcionalidad mediante envío real.

Paso 101. Revisa privacidad

Una página institucional puede incluir:

• formularios;

• mapas;

• embeds;

• videos externos.

Estos recursos pueden implicar conexiones con terceros.

El responsable del sitio debe evaluar:

• políticas;

• requisitos aplicables.

Este tutorial no sustituye asesoramiento legal.

Paso 102. Revisar la página sin imágenes

Haz este ejercicio.

Imagina que desaparecen todas las Images.

Lee:

H1
↓
About
↓
Benefits
↓
Services
↓
Projects
↓
Testimonials
↓
CTA
↓
Contact

¿La propuesta sigue siendo comprensible?

Si no:

la página depende demasiado del recurso visual.

Paso 103. Revisar solo los Headings

Lee:

H1:
Soluciones digitales...

H2:
Quiénes somos

H2:
Por qué elegirnos

H2:
Servicios

H2:
Nuestro trabajo

H2:
Clientes

H2:
Contacto

¿Explican el recorrido?

Si dos H2 dicen prácticamente lo mismo:

revisa contenido.

Paso 104. Revisar solo los CTA

Haz una lista:

Ver servicios
Contactar
Conocer más
Ver servicio
Ver proyecto
Contactar
Enviar consulta

Pregunta:

• ¿son demasiados?

• ¿hay una prioridad?

• ¿los destinos son claros?

Paso 105. Elimina CTA redundantes

No todo necesita un Link.

Por ejemplo

Beneficios:

puede ser totalmente informativa

Eso reduce ruido.

Paso 106. Revisa la página sin animaciones

Desactiva mentalmente:

Animate on scroll
Hover

¿Sigue funcionando?

Debe hacerlo.

Paso 107. Revisa sin JavaScript personalizado

Si quitases cualquier script agregado manualmente:

¿la estructura principal seguiría existiendo?

Idealmente:

sí.

Paso 108. Revisa duplicaciones textuales

Busca expresiones repetidas.

Por ejemplo:

soluciones innovadoras

aparece:

• Hero;

• About;

• Benefits;

• Services;

• CTA.

Puede ser señal de contenido demasiado genérico.

Cada Section debería aportar vocabulario y contexto específicos.

Paso 109. Revisa contenido demasiado abstracto

Una página llena de:

innovación
excelencia
calidad
transformación
potencia
futuro

pero sin explicar:

qué hace la empresa

no comunica correctamente.

Sustituye frases vagas por información concreta.

Paso 110. Revisa afirmaciones

No publiques:

líder
número 1
mejor
más elegido

sin fundamento.

Lo mismo con:

• métricas;

• clientes;

• resultados.

Paso 111. Revisa contenido temporal

Busca:

Nuevo
Oferta
2026
Hasta...
En desarrollo

Estos contenidos necesitan mantenimiento.

Paso 112. Revisa datos de contacto

Comprueba:

teléfono
email
WhatsApp
dirección

No dejes datos de plantilla o pruebas.

Paso 113. Revisa Links

Haz clic en:

Hero
Services
Projects
CTA
Contact
Social

No asumas que funcionan porque:

visualmente parecen Links

Paso 114. Revisa Links después de clonar

Especialmente:

• Cards;

• CTA.

Puede existir contenido correcto con:

href incorrecto

Paso 115. Revisa enlaces internos

Por ejemplo:

#servicios

debe encontrar un:

id="servicios"

único.

Paso 116. Revisa Links externos

Pueden:

• cambiar;

• desaparecer.

Especialmente:

• proyectos;

• redes;

• plataformas externas.

Paso 117. Revisa la Home como visitante nuevo

Pregunta:

¿Entiendo qué hace esta empresa en los primeros segundos?

Después:

¿Entiendo qué ofrece?

Después:

¿Encuentro evidencia?

Después:

¿Sé cómo continuar?

Esas cuatro preguntas son más importantes que:

¿tiene suficientes efectos?

Paso 118. Revisa desktop completo

No revises solo el primer viewport.

Recorre toda la página.

Observa:

• ritmo;

• backgrounds;

• espacios;

• repetición.

Paso 119. Revisa monitor grande

Comprueba que:

• Containers Boxed mantengan lectura cómoda;

• no existan textos excesivamente largos en línea.

Utiliza Max Width cuando sea necesario.

Paso 120. Revisa tablet completa

Busca especialmente:

• grillas de 3;

• texto + Image;

• formulario.

Decide dónde pasar a:

2 columnas

o:

1 columna

Paso 121. Revisa mobile completo

Haz scroll desde:

Header

hasta:

Footer

No te limites a cambiar el selector móvil del Editor.

Pregunta:

¿se entiende como una historia vertical?

Paso 122. Revisa Sections consecutivas en mobile

Puede aparecer:

Image final Section A
↓
Image inicial Section B

Si ambas quedan juntas:

revisa el orden.

Paso 123. Revisa longitud total mobile

Si la página se vuelve demasiado extensa:

no reduzcas:

• Font size;

• contenido importante.

Primero pregunta:

¿qué Sections no aportan?

Paso 124. Revisa un dispositivo real

Cuando sea posible.

Comprueba:

• Links;

• Form;

• mapa;

• scroll;

• touch.

Esto puede revelar problemas que el preview no muestra.

Paso 125. Guardar por hitos

No construyas toda la página y guardes una sola vez.

Hito 1:

estructura principal
↓
Guardar Cambios

Hito 2:

contenido real
↓
Guardar Cambios

Hito 3:

responsive
↓
Guardar Cambios

Hito 4:

estilos finales
↓
Guardar Cambios

No asumimos autosave.

Paso 126. No existe un segundo paso de publicación

Después:

Guardar Cambios

utiliza:

Ver página

No necesitas:

Guardar
↓
Publicar

como dos operaciones separadas.

Paso 127. Auditoría de Navigator

Antes de cerrar:

revisa:

jerarquía

Busca:

• Sections duplicadas;

• IDs repetidos;

• elementos vacíos.

Paso 128. Auditoría de estilos compartidos

Revisa cualquier aviso:

Linked styles

No realices cambios finales globales sin comprender qué elementos compartirán la regla.

Paso 129. Auditoría de CSS

Busca selectores como:

section

h2

.row

.card

img

a

Si existen reglas globales:

pregunta si realmente deben afectar toda la página.

Paso 130. No uses !important para resolver cada conflicto

Puede crear:

una cadena de sobrescrituras

difícil de mantener.

Primero:

• scope;

• selector;

• jerarquía.

Paso 131. Auditoría de rendimiento

Cuenta:

Images
Videos
Maps
Embeds
Lottie

Pregunta:

¿Todos aportan?

Elimina recursos redundantes.

Paso 132. Auditoría de contenido real

Busca:

Lorem ipsum

Proyecto 1

Empresa ejemplo

Calle Falsa

#

Ninguno debería permanecer en producción.

Paso 133. Auditoría de acciones

Comprueba:

VER SERVICIOS
→ servicios

VER PROYECTO
→ proyecto

CONTACTAR
→ contacto

WHATSAPP
→ conversación

El texto y el destino deben coincidir.

Paso 134. Auditoría de formularios

Si existe uno:

completar
↓
enviar
↓
comprobar recepción

No basta con ver el Button.

Paso 135. Auditoría de mapa

Comprueba:

Dirección escrita
=
Mapa
=
Cómo llegar

Paso 136. Auditoría de testimonios

Comprueba:

• nombre;

• empresa;

• texto.

Deben ser reales.

Paso 137. Auditoría de proyectos

Comprueba:

• Image;

• cliente;

• alcance;

• resultados.

No atribuyas más de lo realizado.

Paso 138. Auditoría de Headings

Haz una lista.

Ejemplo correcto:

H1 Página

H2 About
H2 Benefits
H2 Services
    H3 Service
    H3 Service
H2 Projects
    H3 Project
H2 Testimonials
H2 Contact

Busca:

• múltiples H1 sin necesidad;

• saltos arbitrarios.

Paso 139. Auditoría de responsive

Para cada Section:

Desktop
Tablet
Mobile

Pero luego:

PÁGINA COMPLETA
Desktop
Tablet
Mobile

Ambas revisiones son necesarias.

Paso 140. ¿Qué hacer si la página parece demasiado larga?

No reduzcas todo.

Marca cada Section:

ESENCIAL

ÚTIL

REDUNDANTE

Considera mover contenido secundario a otra página.

Paso 141. ¿Qué hacer si parece demasiado corta?

No agregues contenido ficticio.

Pregunta:

¿falta responder alguna pregunta importante?

Por ejemplo:

• servicios;

• confianza;

• contacto.

Agrega únicamente lo que ayude.

Paso 142. ¿Qué hacer si todas las Sections parecen iguales?

Varía:

• estructura;

• Background;

• alineación;

moderadamente.

Por ejemplo:

Hero
↓
Text/Image
↓
Icon Grid
↓
Cards
↓
Text/Image
↓
Portfolio
↓
Quote
↓
CTA

Ya existe suficiente variedad.

Paso 143. ¿Qué hacer si todas parecen diferentes?

Reduce:

• paletas;

• radios;

• sombras;

• iconografías.

Crea un sistema compartido.

Paso 144. ¿Qué hacer si quiero destacar una Section?

Puedes utilizar:

• Background;

• mayor Padding;

• diseño diferente.

No necesitas:

animación extrema

Paso 145. ¿Qué hacer si quiero insertar un Banner promocional?

Puede hacerse.

Pero no debe interrumpir sin razón el recorrido institucional.

Ubícalo donde tenga sentido comercial.

Paso 146. ¿Qué hacer si quiero agregar Newsletter?

Puede funcionar cerca del final.

Pero recuerda:

formulario visible:

≠ suscripción funcional

Debe existir una integración real.

Paso 147. ¿Qué hacer si quiero agregar redes sociales?

Puede estar cerca de:

• contacto;

• comunidad.

Utiliza:

Social icons

cuando solo necesitas Links.

No necesitas incrustar feeds completos.

Paso 148. ¿Qué hacer si quiero destacar un video institucional?

Puede utilizar:

Embed Video

en una Section específica.

No como Background si necesitas que:

• el visitante lo reproduzca;

• escuche;

• vea controles.

Paso 149. ¿Qué hacer si quiero mostrar historia?

Puedes utilizar:

• Text + Image;

• Timeline.

Elige según cantidad de hitos.

Paso 150. ¿Qué hacer si quiero mostrar equipo?

Utiliza:

Equipo o colaboradores

cuando las personas aportan valor al mensaje.

No inventes:

• roles;

• fotos.

Paso 151. Utilizar IA para definir arquitectura

Puedes utilizar ChatGPT, Claude o Gemini.

Prompt

Necesito estructurar una página institucional.

Empresa:
[descripción real]

Servicios:
[listar]

Beneficios reales:
[listar]

Proyectos disponibles:
[listar]

Testimonios reales:
[listar o indicar ninguno]

Objetivo final:
[acción]

Propón un orden de Sections.

Para cada Section indica:
- objetivo;
- contenido;
- componente Waclis apropiado.

No inventes información para completar Sections.
Si una Section no es necesaria, indícalo.

IA para detectar repetición

Esta es la estructura de mi página:

Hero:
[...]

Quiénes somos:
[...]

Beneficios:
[...]

Servicios:
[...]

CTA:
[...]

Detecta ideas repetidas entre Sections.

No reescribas todavía.
Señala únicamente:
- qué se repite;
- en qué Sections.

IA para revisar Headings

Estos son los Headings de una página:

[listar con H1/H2/H3]

Comprueba:
- jerarquía;
- H1 duplicados;
- niveles incoherentes;
- títulos redundantes.

No cambies el texto todavía.

IA para ordenar Sections

Tengo estas Sections:

[listar]

Objetivo:
[describir]

Público:
[describir]

Propón un orden de lectura explicando qué pregunta responde cada Section.

No agregues nuevas Sections salvo que detectes una necesidad clara.

IA para detectar contenido innecesario

Esta página institucional tiene estas Sections:

[listar y resumir]

Clasifica cada una como:
- esencial;
- útil;
- potencialmente redundante.

Explica el motivo.

No elimines nada automáticamente.

IA para revisar CTA

Página:
[resumen]

CTA existentes:
[listar texto + destino]

Analiza:
- cuál parece principal;
- cuáles se repiten;
- cuáles tienen destino poco claro;
- si alguno promete una acción distinta de la real.

No los reescribas todavía.

IA para arquitectura responsive

Tengo esta página creada en Waclis:

1. Hero 7+5
2. About 6+6
3. Benefits 3 columnas
4. Services 3 columnas
5. Projects 3 columnas
6. CTA 8+4
7. Contact 7+5

Waclis utiliza Bootstrap 4.

Propón conceptualmente cómo debería adaptarse:
- desktop;
- tablet;
- mobile.

No generes CSS si puede resolverse desde Grid Row.

IA para detectar riesgos mobile

Este es el orden de componentes de mi página:

[estructura]

Analiza el orden que tendrá al apilarse en mobile.

Busca:
- imágenes consecutivas;
- Buttons antes del contexto;
- columnas invertidas;
- contenido que deje de tener sentido.

No generes código todavía.

IA para CSS compartido

Estoy creando una página institucional en Waclis.

Quiero un sistema de Classes reutilizables para:
- títulos de Section;
- descripciones;
- Cards;
- CTA principales;
- CTA secundarios.

No quiero:
- modificar tags globales;
- modificar Bootstrap;
- duplicar reglas en cada Section.

Propón únicamente una estrategia de Classes.
No generes CSS todavía.

IA para auditar CSS

Este CSS pertenece a una página Waclis:

[pegar]

Waclis utiliza Bootstrap 4.

Busca selectores peligrosamente globales:
section
.container
.row
.col
h1
h2
h3
p
a
img
.card
button

Indica qué partes podrían verse afectadas.

No modifiques el código.

IA para revisar rendimiento

Mi página institucional contiene:

[lista de Images, Videos, mapas y Embeds]

Analiza qué recursos externos o multimedia podrían estar generando peso innecesario.

No elimines ninguno automáticamente.
Clasifica:
- esencial;
- útil;
- prescindible.

IA para revisar contenido temporal

Revisa estos textos de mi página:

[pegar]

Busca referencias temporales como:
- Nuevo;
- promoción;
- año;
- fecha límite;
- en desarrollo;
- disponible hasta.

Indica qué elementos necesitarán mantenimiento.
No cambies nada.

IA para auditoría final

Quiero auditar una página institucional Waclis.

Estructura:
[pegar]

Contenido:
[pegar]

Links:
[listar]

Analiza:
1. claridad;
2. repetición;
3. jerarquía de Headings;
4. CTA;
5. responsive;
6. posibles Links sin destino;
7. contenido temporal;
8. afirmaciones no respaldadas.

No inventes datos.
No generes una página nueva.

Buenas prácticas

Recomendamos:

• definir objetivo antes del diseño;

• utilizar información real;

• crear una jerarquía de contenido;

• asignar una función a cada Section;

• evitar repetir el mismo mensaje;

• utilizar un único H1 principal;

• utilizar H2/H3 coherentemente;

• mantener un ritmo de Backgrounds;

• utilizar un sistema de Padding;

• compartir Classes;

• utilizar IDs solo cuando sean necesarios;

• utilizar Links reales;

• priorizar CTA;

• mantener proyectos y testimonios reales;

• probar formularios;

• optimizar recursos visuales;

• revisar tablet;

• revisar mobile como recorrido independiente;

• utilizar Navigator;

• revisar Linked styles;

• probar la página completa.

Errores frecuentes

Agregar todas las Sections disponibles

Utiliza solo las necesarias.

Diseñar antes de definir contenido

Primero estructura el mensaje.

Repetir la propuesta en todas las Sections

Cada bloque debe aportar información nueva.

Utilizar varios H1 porque se ven grandes

Mantén jerarquía.

Crear un H2 distinto solo por tamaño

Utiliza Typography.

Crear un segundo Header dentro del contenido

Header pertenece a la plantilla.

Repetir navegación principal

Evita duplicación.

Utilizar muchas Cards consecutivas

Varía estructuras según contenido.

Utilizar un color distinto por Section

Mantén identidad.

Hacer absolutamente todas las Sections iguales

Crea ritmo.

Utilizar Padding completamente irregular

Mantén un sistema.

Aplicar el mismo Padding rígido a todo

Adapta según función.

Mostrar demasiados servicios

Prioriza.

Inventar beneficios

Utiliza información real.

Inventar proyectos

No completes visualmente con casos ficticios.

Inventar testimonios

No atribuyas declaraciones inexistentes.

Mostrar logos sin una relación que corresponda presentar

Utiliza relaciones reales.

Inventar Counters o estadísticas

Solo datos verificables.

Agregar FAQ sin preguntas reales

No agregues contenido de relleno.

Agregar mapa a un negocio sin ubicación pública

No es obligatorio.

Agregar formulario y asumir que funciona

Prueba el envío.

Agregar Newsletter y asumir suscripción

Debe existir procesamiento real.

Demasiados CTA

Define prioridad.

CTA con texto engañoso

Acción visible y acción real deben coincidir.

Dejar Links #

Configura destinos reales.

Duplicar IDs

Mantén unicidad.

Clonar y no actualizar URLs

Prueba todo.

Clonar y no actualizar Alt

Revisa Images.

Mantener tres columnas en tablet aunque queden estrechas

Reduce columnas.

Mantener dos columnas en mobile sin comprobar

Apila cuando corresponda.

Ocultar contenido importante en mobile

Adapta.

Crear una versión desktop y otra mobile de toda la página

Evita duplicación.

Utilizar Position absolute para maquetación básica

Utiliza Grid.

Utilizar grandes Margins para alinear

Utiliza estructura.

Utilizar Height fija en Sections

Permite crecimiento.

Modificar .row globalmente

Puede romper múltiples bloques.

Modificar .card globalmente

Puede afectar todas las Cards.

Modificar img globalmente

Puede afectar todo el sitio.

Agregar Bootstrap adicional

Waclis utiliza Bootstrap 4.

Agregar JavaScript innecesario

Mantén la solución simple.

Animar todos los elementos

La página debe funcionar sin animación.

No utilizar Navigator al final

Puedes dejar estructuras innecesarias.

No revisar Linked styles

Un cambio puede propagarse.

No revisar la página completa

Las Sections deben funcionar juntas.

Flujo profesional recomendado

1. DEFINIR OBJETIVO
↓
2. REUNIR CONTENIDO REAL
↓
3. DEFINIR PÚBLICO
↓
4. SELECCIONAR SECTIONS
↓
5. ORDENAR EL RECORRIDO
↓
6. DEFINIR H1 / H2 / H3
↓
7. DEFINIR CTA PRINCIPAL
↓
8. CREAR HERO
↓
9. CREAR PRESENTACIÓN
↓
10. CREAR BENEFICIOS
↓
11. CREAR SERVICIOS
↓
12. CREAR TEXTO + IMAGEN
↓
13. CREAR PROYECTOS
↓
14. AGREGAR TESTIMONIOS SI EXISTEN
↓
15. CREAR CTA
↓
16. CREAR CONTACTO SI CORRESPONDE
↓
17. CONFIGURAR CLASSES
↓
18. CONFIGURAR IDS NECESARIOS
↓
19. REVISAR LINKED STYLES
↓
20. DEFINIR RITMO DE BACKGROUNDS
↓
21. DEFINIR PADDING
↓
22. REVISAR DESKTOP
↓
23. REVISAR TABLET
↓
24. REVISAR MOBILE
↓
25. REVISAR NAVIGATOR
↓
26. REVISAR CSS
↓
27. REVISAR MULTIMEDIA
↓
28. REVISAR LINKS
↓
29. PROBAR FORMULARIOS
↓
30. GUARDAR CAMBIOS
↓
31. VER PÁGINA
↓
32. RECORRER COMO VISITANTE
↓
33. CORREGIR REPETICIONES
↓
34. AUDITAR CONTENIDO FINAL

Checklist de arquitectura

• La página tiene un objetivo claro.

• Cada Section responde una pregunta distinta.

• No agregué Sections solo porque estaban disponibles.

• El orden tiene una lógica.

• El Hero presenta la propuesta.

• La presentación explica quién es la empresa.

• Beneficios explican utilidad.

• Servicios explican qué se ofrece.

• Proyectos demuestran experiencia real.

• Testimonios son reales.

• CTA indica el siguiente paso.

• Contacto permite continuar.

Checklist de contenido

• Todo el contenido es real.

• No existen textos de ejemplo.

• No existe Lorem Ipsum.

• No inventé clientes.

• No inventé resultados.

• No inventé estadísticas.

• No inventé testimonios.

• No existen afirmaciones absolutas sin fundamento.

• No repetí el mismo mensaje en varias Sections.

• Cada Section agrega información.

Checklist de Headings

• Existe un H1 principal claro.

• No utilicé H1 solo por tamaño.

• Los H2 representan Sections importantes.

• Los H3 representan elementos internos.

• La jerarquía puede comprenderse solo leyendo títulos.

• Los títulos no son innecesariamente largos.

• Mobile mantiene legibilidad.

Checklist visual

• Existe una paleta coherente.

• No utilicé un color diferente sin criterio para cada Section.

• Los Backgrounds crean ritmo.

• Los Padding mantienen un sistema.

• Las Cards tienen una línea visual común.

• Los iconos son consistentes.

• Las Images mantienen calidad.

• Los CTA tienen una jerarquía reconocible.

• La página no depende de animaciones para verse completa.

Checklist de navegación

• Header no fue duplicado dentro del contenido.

• Los Links internos apuntan a IDs existentes.

• Los IDs son únicos.

• No existen Links #.

• Los Links externos funcionan.

• Todos los CTA fueron probados.

• Los textos de CTA coinciden con el destino.

Checklist responsive

• Revisé la página completa en desktop.

• Revisé la página completa en tablet.

• Revisé la página completa en mobile.

• Las grillas reducen columnas cuando corresponde.

• Los bloques texto + Image mantienen un orden lógico.

• No quedan Images consecutivas sin contexto.

• Los CTA no desbordan.

• Los formularios siguen siendo utilizables.

• Los mapas no dificultan el scroll.

• No existe scroll horizontal.

• No oculté contenido importante como solución rápida.

Checklist técnico

• Utilicé Navigator.

• No quedan Sections vacías.

• No quedan Containers innecesarios.

• Revisé Linked styles.

• Classes compartidas tienen un propósito.

• IDs se utilizan solo cuando son necesarios.

• No modifiqué section globalmente.

• No modifiqué .container globalmente.

• No modifiqué .row globalmente.

• No modifiqué .card globalmente.

• No modifiqué img globalmente.

• No agregué Bootstrap adicional.

• No agregué JavaScript innecesario.

• El CSS adicional tiene scope.

Checklist de rendimiento

• Todas las Images aportan.

• No cargué videos innecesarios.

• No cargué múltiples mapas sin necesidad.

• No cargué Embeds sociales redundantes.

• No utilicé Lottie solamente para decorar.

• No repetí el mismo recurso varias veces.

• Revisé tamaño y calidad de Images.

• La página sigue siendo cómoda de recorrer.

Checklist funcional

• Todos los Links funcionan.

• Links internos funcionan.

• WhatsApp funciona.

• Teléfono funciona cuando es Link.

• Email funciona cuando es Link.

• Los formularios fueron enviados como prueba.

• La información del formulario llegó correctamente.

• Mapas muestran la ubicación correcta.

• Dirección y mapa coinciden.

• Los recursos externos funcionan desde Ver página.

Checklist de mantenimiento

• Identifiqué contenido temporal.

• Revisaré Badges “Nuevo”.

• Revisaré promociones.

• Revisaré fechas.

• Revisaré proyectos.

• Revisaré testimonios.

• Revisaré Links externos.

• Revisaré horarios y datos de contacto.

• Revisaré servicios cuando cambien.

Checklist final

• Guardé los cambios.

• Utilicé Ver página.

• Recorrí toda la página desde arriba.

• Se comprende qué hace la empresa en los primeros segundos.

• Se comprende qué ofrece.

• Existe información que genera confianza.

• El visitante sabe cómo continuar.

• No existen Sections redundantes.

• No existen datos ficticios.

• No existen Links rotos.

• Desktop funciona.

• Tablet funciona.

• Celular funciona.

• La página se entiende incluso sin animaciones.

• La página parece un único sistema y no una colección de diseños independientes.

En resumen

Una Página web institucional profesional no comienza preguntando:

¿QUÉ SECTIONS PUEDO AGREGAR?

Comienza preguntando:

¿QUÉ NECESITA SABER EL VISITANTE?

Después construyes un recorrido:

¿QUÉ HACEMOS?
→ HERO

¿QUIÉNES SOMOS?
→ PRESENTACIÓN

¿POR QUÉ PUEDE INTERESARTE?
→ BENEFICIOS

¿QUÉ OFRECEMOS?
→ SERVICIOS

¿CÓMO TRABAJAMOS?
→ TEXTO + IMAGEN

¿QUÉ PODEMOS DEMOSTRAR?
→ PROYECTOS

¿QUÉ DICEN CLIENTES?
→ TESTIMONIOS

¿QUÉ PUEDES HACER AHORA?
→ CTA

¿CÓMO NOS CONTACTAS?
→ CONTACTO

No todas las páginas necesitan todos los pasos

Puedes:

AGREGAR

QUITAR

REORDENAR

según el negocio.

Lo importante es que:

CADA SECTION
=
UNA FUNCIÓN

Y:

TODAS LAS SECTIONS
=
UNA HISTORIA

Respecto de Headings:

H1
→ tema principal

H2
→ grandes Sections

H3
→ elementos internos

Respecto del diseño:

MISMO SISTEMA
+
VARIACIONES CONTROLADAS

No:

10 SECTIONS
=
10 ESTILOS DIFERENTES

Respecto del responsive:

DESKTOP
→ composición

TABLET
→ adaptación

MOBILE
→ recorrido vertical lógico

Respecto del contenido:

INFORMACIÓN REAL
>
CONTENIDO DE RELLENO

Respecto del código:

GRID
+
CLASSES
+
CSS LOCALIZADO

Antes que:

POSITION ABSOLUTE
+
MÁRGENES GIGANTES
+
JAVASCRIPT INNECESARIO

Y el flujo final es:

OBJETIVO
↓
CONTENIDO
↓
ARQUITECTURA
↓
JERARQUÍA
↓
SECTIONS
↓
RESPONSIVE
↓
SISTEMA VISUAL
↓
FUNCIONALIDAD
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
AUDITAR COMO VISITANTE

Una página institucional está correctamente construida cuando una persona que nunca conoció la empresa puede recorrerla y responder:

“Entiendo quiénes son, qué hacen, qué ofrecen, por qué podría interesarme, puedo ver evidencia de su trabajo y sé cuál es el siguiente paso.”

Cuando todas las Sections contribuyen a responder esas preguntas, dejan de ser bloques individuales y pasan a formar una Página web completa, coherente y útil.