¿Cómo utilizar la sección Quiénes somos en el Editor de bloques de Waclis?

La sección Quiénes somos del Editor de bloques de Waclis permite presentar tu empresa, marca, organización o proyecto dentro de la Página web.

Puedes utilizarla para explicar:

• quiénes son;

• qué hacen;

• a quiénes ayudan;

• cómo trabajan;

• qué los diferencia;

• cuál es su experiencia;

• cuáles son sus valores;

• cómo comenzó el proyecto;

• cuál es su propuesta actual;

• por qué un visitante debería confiar en la empresa.

Dentro del Editor de bloques encontrarás diferentes diseños en:

Secciones → Quiénes somos

Puedes elegir una composición prediseñada y luego personalizar:

• textos;

• imágenes;

• títulos;

• cifras;

• íconos;

• botones;

• enlaces;

• fondos;

• columnas;

• espacios;

• comportamiento responsive.

¿Qué es una sección Quiénes somos?

Es una sección destinada a presentar la identidad de la empresa.

Por ejemplo:

QUIÉNES SOMOS

Somos una empresa especializada en...

Trabajamos junto a empresas de diferentes sectores para...

Nuestro objetivo es...

[ CONOCER NUESTROS SERVICIOS ]

Puede estar acompañada por:

• una fotografía de la empresa;

• una imagen del equipo;

• instalaciones;

• productos;

• una composición visual;

• indicadores o cifras.

Ejemplo

┌──────────────────────┬───────────────────────────┐
│                      │                           │
│      IMAGEN          │      QUIÉNES SOMOS       │
│                      │                           │
│                      │  Trabajamos junto a...   │
│                      │                           │
│                      │  [ CONOCER MÁS ]         │
│                      │                           │
└──────────────────────┴───────────────────────────┘

¿Qué debería responder una buena sección Quiénes somos?

Idealmente debería ayudar al visitante a comprender rápidamente:

¿Quién está detrás de esta Página web?

¿A qué se dedica la empresa?

¿Qué tipo de clientes atiende?

¿Qué experiencia tiene?

¿Cómo trabaja?

¿Por qué podría confiar en ella?

No necesitas responder todas estas preguntas con grandes párrafos.

La sección debe priorizar lo realmente importante para tu público.

Quiénes somos no debería ser solamente una fecha de fundación

Por ejemplo:

Nuestra empresa fue fundada en 1998.

puede ser un dato interesante, pero por sí solo no explica:

• qué hace hoy la empresa;

• qué ofrece;

• a quién ayuda;

• qué la diferencia.

Mejor

Desde 1998 desarrollamos soluciones para empresas de diferentes sectores, combinando experiencia, atención personalizada y una propuesta adaptada a cada proyecto.

La historia se conecta con la propuesta actual.

Comienza por el presente

En muchos casos conviene explicar primero:

qué es hoy la empresa

y después desarrollar su historia.

Ejemplo

QUIÉNES SOMOS

Somos una empresa especializada en soluciones para el sector corporativo.

Trabajamos junto a organizaciones de diferentes tamaños para desarrollar propuestas adaptadas a sus necesidades.

Nuestra experiencia comenzó hace más de...

Evita comenzar con una historia demasiado extensa

Por ejemplo:

En el año 1987, en una pequeña oficina situada en...

seguido de muchos párrafos antes de explicar a qué se dedica actualmente la empresa.

Ese recorrido puede ser apropiado para una página específica de historia, pero no necesariamente para una presentación breve.

Quiénes somos vs Texto e imagen

Estas dos secciones pueden parecer similares.

Texto e imagen

Es una estructura general que puede utilizarse para cualquier tema.

Por ejemplo:

[ imagen ]

NUESTRO SERVICIO

Texto...

Quiénes somos

Tiene una intención institucional específica.

El contenido está orientado a:

• identidad;

• trayectoria;

• propósito;

• empresa.

Puedes construir Quiénes somos con una estructura parecida a Texto e imagen

Por ejemplo:

[ foto empresa ] [ Quiénes somos + texto ]

La diferencia está principalmente en qué estás comunicando.

Quiénes somos vs Equipo

También es importante distinguirlas.

Quiénes somos

Presenta a la organización.

Por ejemplo:

Somos una empresa especializada en...

Equipo o colaboradores

Presenta a las personas.

Por ejemplo:

María González
Dirección comercial

Juan Pérez
Operaciones

Puedes utilizar ambas

Por ejemplo:

QUIÉNES SOMOS
↓
presentación de empresa

NUESTRO EQUIPO
↓
personas

No es necesario intentar incluir toda la estructura del equipo dentro de la sección institucional.

Quiénes somos vs Timeline

Si quieres contar una historia cronológica extensa:

1998 → Fundación

2005 → Primera expansión

2015 → Nueva planta

2026 → Nueva etapa

la sección Timeline puede resultar más apropiada.

Quiénes somos puede resumir la trayectoria

Por ejemplo:

Contamos con más de dos décadas de experiencia acompañando proyectos...

y Timeline puede desarrollar después los hitos.

Quiénes somos vs Beneficios

Evita convertir la sección institucional en una lista de ventajas comerciales.

Por ejemplo:

Quiénes somos

✓ Envío rápido
✓ Compra segura
✓ Cuotas

Esto corresponde mejor a Beneficios.

Quiénes somos debería explicar identidad

Por ejemplo:

Somos una empresa especializada en distribución de productos para...

Después puedes complementar con Beneficios.

¿Cómo agregar una sección Quiénes somos?

Ingresa al Editor de bloques de la página o área editable donde quieras incorporarla.

Después abre:

Secciones

y selecciona:

Quiénes somos

Paso 1: elige una composición

Waclis mostrará las alternativas disponibles.

Puedes elegir según:

• cantidad de texto;

• protagonismo de la fotografía;

• disposición en columnas;

• existencia de cifras;

• presencia de Button;

• estilo visual.

No necesitas mantener los contenidos de ejemplo.

Paso 2: agrega la sección

Selecciona la composición elegida.

Después podrás modificar:

• Heading;

• Paragraph;

• Image;

• Buttons;

• Cards;

• elementos visuales adicionales.

Paso 3: utiliza Navigator

Una sección institucional puede tener una estructura parecida a:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        │
        └── Grid Column
            ├── Heading
            ├── Paragraph
            └── Button

O una composición más compleja:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Item / cifra
        ├── Item / cifra
        └── Item / cifra

La estructura exacta dependerá del diseño.

Paso 4: modifica el título

Puedes utilizar:

Quiénes somos

o una variante más descriptiva:

Conoce nuestra empresa

Más de 20 años acompañando proyectos

Una empresa orientada a soluciones

“Quiénes somos” sigue siendo un buen título

Es:

• claro;

• reconocible;

• directo.

No es necesario reemplazarlo por una frase creativa si eso dificulta comprender la sección.

Paso 5: redacta la presentación

Una estructura sencilla puede ser:

Quiénes somos

Somos [tipo de empresa] especializada en [actividad].

Trabajamos con [tipo de clientes] ofreciendo [propuesta].

Nuestro enfoque se basa en [diferencial principal].

Ejemplo

QUIÉNES SOMOS

Somos una empresa especializada en equipamiento y soluciones para empresas.

Trabajamos junto a clientes de diferentes sectores, acompañando cada proyecto desde la selección inicial hasta la entrega.

Nuestro objetivo es ofrecer una atención cercana y una propuesta adaptada a cada necesidad.

Evita definiciones demasiado genéricas

Por ejemplo:

Somos una empresa comprometida con la excelencia, la innovación, la calidad y la satisfacción de nuestros clientes.

Podría aplicarse prácticamente a cualquier empresa.

Intenta ser más específico

Nos especializamos en desarrollar soluciones de merchandising para empresas, agencias y distribuidores, combinando producción, personalización y logística.

Esto explica mejor qué hace la empresa.

Responde “qué hacemos”

Una buena presentación suele necesitar una frase concreta.

Por ejemplo:

Diseñamos, producimos y distribuimos productos personalizados para empresas.

Responde “para quién”

Por ejemplo:

Trabajamos con empresas, agencias, instituciones y distribuidores de diferentes sectores.

Responde “cómo”

Por ejemplo:

Acompañamos cada proyecto desde la selección del producto hasta la personalización y entrega.

No es obligatorio incluir las tres respuestas literalmente

Pero son una buena guía para redactar.

Longitud del contenido

Una sección Quiénes somos no necesita contener toda la historia de la empresa.

En muchos casos bastan:

• 1 Heading;

• 2 o 3 Paragraphs breves;

• una imagen;

• un CTA opcional.

Ejemplo equilibrado

QUIÉNES SOMOS

Somos una empresa especializada en...

Desde nuestros comienzos trabajamos...

Actualmente acompañamos a...

[ CONOCER MÁS ]

Si necesitas mucho más contenido

Considera crear una página completa de:

Quiénes somos

y utilizar en Home solamente un resumen.

Home

Puede mostrar:

QUIÉNES SOMOS

Breve presentación...

[ CONOCER NUESTRA EMPRESA ]

Página institucional

Puede desarrollar:

• historia;

• valores;

• equipo;

• Timeline;

• instalaciones;

• cifras;

• clientes;

• certificaciones.

No intentes colocar todo en una única Section

Divide el contenido según su función.

Paso 6: reemplaza la imagen

Si el diseño incluye Image:

Contenido → Set Image

Selecciona una fotografía relacionada con la empresa.

¿Qué imágenes funcionan bien?

Por ejemplo:

• equipo trabajando;

• instalaciones;

• oficina;

• fábrica;

• showroom;

• proceso de trabajo;

• producto en contexto;

• fotografía institucional.

Evita imágenes genéricas cuando tengas material propio

Una fotografía real puede ayudar a transmitir:

• identidad;

• escala;

• entorno;

• autenticidad.

Pero una fotografía propia de mala calidad tampoco es obligatoriamente mejor

Utiliza imágenes:

• nítidas;

• bien iluminadas;

• correctamente encuadradas.

Imagen del edificio

Puede funcionar cuando las instalaciones son relevantes.

Por ejemplo:

[ planta industrial ]

INFRAESTRUCTURA PARA ACOMPAÑAR GRANDES PROYECTOS

Imagen del equipo

Puede ayudar a humanizar la empresa.

[ equipo ]

TRABAJAMOS JUNTO A CADA CLIENTE

Imagen del producto

Puede funcionar si el producto define fuertemente la actividad.

No utilices una imagen que comunique algo diferente

Por ejemplo:

una fotografía genérica de una oficina tecnológica para una empresa industrial puede generar una percepción equivocada.

Completa Alt

Cuando la fotografía aporta información, utiliza un Alt descriptivo.

Por ejemplo:

Equipo de la empresa trabajando en el showroom

Planta de producción de la empresa

Equipo comercial reunido

Cover o Contain

La elección depende de la imagen.

Fotografías institucionales

Por ejemplo:

• equipo;

• instalaciones;

• ambiente;

pueden funcionar muy bien con:

Cover

cuando necesitas llenar una columna o Card.

Logotipos o elementos gráficos

Si necesitas mostrar el elemento completo:

Contain

puede ser más apropiado.

No recortes personas de forma incómoda

Si utilizas Cover, revisa:

• rostro;

• manos;

• grupo;

• elementos importantes.

Especialmente en móvil.

Grid y proporción

Una composición típica puede utilizar:

[ IMAGEN ] [ TEXTO ]

pero no necesariamente debe ser:

50 / 50

Si el texto es más importante

Puedes utilizar:

40 % imagen
60 % texto

Si la fotografía tiene gran valor

Puedes invertir:

60 % imagen
40 % texto

Utiliza Grid Row

Configura las columnas desde la estructura.

No utilices Margin para “empujar” texto e imagen y simular una distribución.

Alineación vertical

Puede ser especialmente útil centrar el contenido respecto de la imagen.

Por ejemplo:

┌─────────────────────┬─────────────────────┐
│                     │                     │
│                     │   QUIÉNES SOMOS     │
│      IMAGEN         │   texto             │
│                     │   texto             │
│                     │   [ BUTTON ]        │
│                     │                     │
└─────────────────────┴─────────────────────┘

Utiliza las opciones de alineación disponibles en Grid Row.

No centres con Margin Top rígido

Evita:

margin-top: 150px;

porque puede romperse si cambia:

• el texto;

• la fotografía;

• el dispositivo.

Paso 7: CTA opcional

Puedes agregar un Button para dirigir hacia:

• Servicios;

• Contacto;

• página institucional;

• Equipo;

• otra sección.

Ejemplos

Conocer nuestros servicios

Ver nuestra historia

Contactar

Conocer al equipo

No es obligatorio incluir CTA

Si la sección ya cumple su función informativa, puede finalizar después del texto.

CTA hacia una página completa de Quiénes somos

En Home puede ser muy útil:

QUIÉNES SOMOS

Resumen...

[ CONOCER NUESTRA HISTORIA ]

CTA hacia Servicios

Puede ser adecuado cuando la sección explica quién es la empresa y el siguiente paso natural es conocer qué ofrece.

[ VER SERVICIOS ]

CTA hacia Contacto

Puede funcionar si el contenido institucional ya genera suficiente confianza.

[ CONTACTAR ]

Revisa siempre URL

Si el Button está dentro de un Link, utiliza Navigator para localizar ambos elementos.

Misión, visión y valores

Puedes incorporar estos conceptos, pero no son obligatorios para todas las empresas.

Misión

Puede explicar:

¿Qué hace la organización y con qué propósito?

Visión

Puede expresar:

¿Hacia dónde quiere avanzar?

Valores

Pueden describir:

¿Qué principios orientan la forma de trabajar?

Evita frases excesivamente abstractas

Por ejemplo:

Misión:
Transformar el mundo a través de una experiencia de excelencia integral y sostenible.

si no explica concretamente la actividad.

Mejor

Nuestra misión es ayudar a empresas a desarrollar soluciones de merchandising adaptadas a sus proyectos, combinando producto, personalización y acompañamiento comercial.

No es necesario utilizar las palabras “Misión” y “Visión”

También puedes comunicarlo naturalmente.

Por ejemplo:

NUESTRO PROPÓSITO

Ayudar a cada empresa a encontrar una solución adecuada para su proyecto.

Valores

Si realmente representan la forma de trabajar, puedes utilizar:

Atención cercana

Compromiso

Calidad

Trabajo en equipo

¿Valores dentro de Quiénes somos o Beneficios?

Depende de cómo los presentes.

Valor institucional

Transparencia

describe una forma de actuar.

Beneficio para el cliente

Seguimiento personalizado

explica algo que recibe.

No confundas ambos conceptos.

Puedes separar Valores en otra composición

Por ejemplo:

QUIÉNES SOMOS

[ imagen + texto ]

↓

NUESTROS VALORES

[ Ícono ] Cercanía
[ Ícono ] Calidad
[ Ícono ] Compromiso

Esto suele ser más claro que intentar incluir todo en el mismo párrafo.

Cifras institucionales

Algunas composiciones pueden incluir cifras o indicadores.

Por ejemplo:

+20
años de experiencia

500
proyectos

7
países

Utiliza cifras solamente si aportan información real

No inventes números para que la sección parezca más importante.

Ejemplos útiles

25 años de experiencia

Más de 1.000 proyectos realizados

Presencia en 5 países

solo cuando correspondan a datos reales y verificables.

Evita cifras sin contexto

Por ejemplo:

500+

sin explicar qué representa.

Mejor:

500+
proyectos realizados

Mantén las cifras actualizadas

Si publicas:

15 años de experiencia

y pasan varios años, puede quedar desactualizado.

Puedes utilizar una redacción menos sensible al tiempo:

Más de 15 años de experiencia

cuando corresponda.

Pero igualmente conviene revisarla periódicamente.

No conviertas la sección en un contador de logros

Tres o cuatro cifras relevantes pueden ser suficientes.

Trayectoria

Puedes resumirla en un Paragraph.

Por ejemplo:

Desde nuestros comienzos hemos acompañado proyectos de diferentes sectores, ampliando progresivamente nuestra propuesta y capacidad de atención.

Si necesitas varios hitos

Utiliza posteriormente:

Timeline

Ejemplo

Quiénes somos:

Desde 1998 acompañamos a empresas...

Timeline:

1998
Fundación

2006
Expansión

2018
Nueva planta

2026
...

Certificaciones, premios o reconocimientos

Pueden formar parte de la presentación si realmente son relevantes.

Puedes mostrarlos mediante:

• Image;

• logo;

• pequeño texto;

• Galería.

No agregues una lista extensa si no aporta a la decisión del visitante

Prioriza los reconocimientos más importantes.

Clientes o marcas

Si quieres mostrar empresas con las que trabajas:

[ Logo ] [ Logo ] [ Logo ]

puede ser mejor utilizar:

• Galería;

• Carrusel de marcas;

como sección independiente.

Quiénes somos no necesita contener todos los logos

Puede decir:

Trabajamos junto a empresas de diferentes sectores.

y después presentar logos aparte.

Equipo

Si quieres humanizar más:

QUIÉNES SOMOS
↓
presentación

NUESTRO EQUIPO
↓
personas

No mezcles perfiles individuales dentro de un texto institucional largo

Utiliza la sección específica de Equipo cuando quieras mostrar:

• nombres;

• cargos;

• fotografías;

• perfiles.

Historia del fundador

Puede ser valiosa si está directamente relacionada con la identidad de la marca.

Pero no es obligatorio.

Ejemplo breve

El proyecto nació a partir de la experiencia de...

Si necesitas una historia extensa

Crea:

• otra sección;

• Timeline;

• página completa.

Escribe para el visitante

Un error frecuente es redactar Quiénes somos únicamente desde la perspectiva interna.

Por ejemplo:

Nosotros somos...
Nosotros hacemos...
Nosotros creemos...
Nosotros tenemos...

durante muchos párrafos.

Conecta con el cliente

Por ejemplo:

Acompañamos a empresas que necesitan...

Nuestra experiencia nos permite ayudarte a...

Trabajamos para que cada proyecto...

La empresa sigue siendo protagonista, pero existe una relación con la necesidad del visitante.

Evita adjetivos sin evidencia

Por ejemplo:

Somos líderes, innovadores, excelentes, únicos y los mejores.

aporta menos que explicar:

Contamos con planta propia, equipo especializado y experiencia en proyectos corporativos.

cuando esos datos sean reales.

Utiliza hechos concretos

Pueden ayudar a transmitir confianza:

• años de experiencia;

• tipo de infraestructura;

• regiones atendidas;

• especialización;

• procesos;

• equipo;

• capacidad;

• certificaciones.

No es necesario utilizar todos

Selecciona los que sean relevantes para el público.

Qué evitar en un texto institucional

Evita párrafos como:

Desde nuestros inicios nos hemos caracterizado por mantener un firme compromiso con la excelencia, la innovación, la calidad, el servicio, el desarrollo, la mejora continua y la satisfacción...

si no termina explicando concretamente qué hace la empresa.

Una redacción más útil

Nos especializamos en desarrollar soluciones para empresas que necesitan centralizar su catálogo, operaciones y canales digitales.

explica directamente la actividad.

Español neutro

Si la Página web atiende diferentes países, utiliza una redacción comprensible para todos.

Evita regionalismos muy específicos cuando no sean necesarios.

Jerarquía del contenido

Una composición puede utilizar:

QUIÉNES SOMOS          ← Heading

Presentación           ← Paragraph

Dato destacado         ← texto secundario

[ CTA ]

Mantén cada nivel visualmente reconocible.

No pongas todo con el mismo tamaño

Si:

• título;

• párrafo;

• cifras;

• CTA;

tienen el mismo peso visual, se pierde jerarquía.

Typography

Utiliza:

• Font size;

• Font weight;

• Line height;

para facilitar la lectura.

Line height

Es especialmente importante si tienes varios párrafos.

Una buena separación mejora la legibilidad.

Ancho del texto

Evita líneas extremadamente largas.

Si la composición es Full y el Paragraph ocupa todo el ancho:

---------------------------------------------------------------------
texto texto texto texto texto texto texto texto texto texto texto...
---------------------------------------------------------------------

puede resultar incómodo.

Puedes trabajar con:

• Container Boxed;

• columnas;

• Max Width;

cuando corresponda.

Boxed

Puede funcionar muy bien para contenido institucional porque mantiene un ancho de lectura controlado.

Full

Puede ser apropiado para:

• imágenes amplias;

• fondos;

• composiciones visuales.

Incluso con Section Full, el contenido textual puede permanecer dentro de un Container más acotado según el diseño.

Fondo

Puedes utilizar:

• blanco;

• gris;

• color institucional;

• fotografía;

• Video cuando corresponda.

Fondo simple

Suele funcionar muy bien para contenidos con más texto.

La legibilidad debe tener prioridad.

Fondo con imagen

Puede aportar identidad, pero requiere atención a:

• contraste;

• Overlay;

• legibilidad.

No utilices una fotografía muy compleja detrás de varios párrafos

Puede hacer difícil la lectura.

En esos casos puede funcionar mejor:

[ fotografía ]
+
[ columna de texto separada ]

Overlay

Si existe texto sobre Background Image, utiliza Overlay cuando corresponda.

El objetivo es conservar contraste.

Sección de dos columnas

Es una de las composiciones más habituales:

[ IMAGEN ] [ QUIÉNES SOMOS ]

Mobile

Normalmente puede transformarse en:

[ IMAGEN ]

QUIÉNES SOMOS
Texto...

o:

QUIÉNES SOMOS
Texto...

[ IMAGEN ]

Decide qué debe aparecer primero

Imagen primero

Puede resultar apropiado cuando:

• la imagen institucional es fuerte;

• quieres humanizar rápidamente;

• el visitante necesita contexto visual.

Texto primero

Puede resultar mejor cuando:

• la propuesta debe comprenderse inmediatamente;

• la fotografía es secundaria.

Utiliza Grid responsive

No fuerces:

[ IMG ][ TXT ]

en móvil si las columnas quedan demasiado estrechas.

Responsive en Quiénes somos

Comprueba:

• imagen;

• Heading;

• Paragraph;

• cifras;

• Button;

• Padding;

• orden de columnas.

Textos largos pueden crecer mucho en celular

Un Paragraph que ocupa cuatro líneas en desktop puede convertirse en diez o doce.

Por eso la altura de la Section debe ser flexible.

Evita Height fijo

No utilices una altura rígida solamente para igualar Image y contenido.

El texto debe poder crecer.

Min Height

Puede utilizarse cuando el diseño lo necesita, pero siempre comprobando:

• textos largos;

• móvil.

Cifras responsive

Desktop:

[ 20 años ] [ 500 proyectos ] [ 5 países ]

Mobile:

[ 20 años ]

[ 500 proyectos ]

[ 5 países ]

o dos por fila según el contenido.

No mantengas tres indicadores diminutos en móvil

Cada cifra debe seguir siendo legible.

Secciones repetidas

Puedes crear:

Quiénes somos
↓
Nuestra historia
↓
Nuestra infraestructura

utilizando distintas composiciones de Texto e imagen.

No todo debe quedar dentro de una única sección prediseñada.

Ejemplo de página institucional completa

BANNER INSTITUCIONAL

↓

QUIÉNES SOMOS

↓

CIFRAS

↓

TIMELINE

↓

EQUIPO

↓

INSTALACIONES / GALERÍA

↓

CTA

Cada sección cumple una función concreta.

Ejemplo de Home

Puede bastar:

QUIÉNES SOMOS

[ imagen ] [ resumen ]

[ CONOCER MÁS ]

No sobrecargues la Home

El objetivo puede ser introducir la empresa y permitir que quien quiera profundizar acceda a una página institucional.

Clonar una sección Quiénes somos

Puedes reutilizar una composición para crear:

• Nuestra historia;

• Infraestructura;

• Metodología.

Pero si cambia el objetivo, también puede ser apropiado usar otra categoría de sección.

Antes de clonar

Utiliza Navigator y selecciona el contenedor completo.

Después de clonar revisa

• Heading;

• Paragraph;

• Image;

• Alt;

• Button;

• URL;

• Classes;

• ID personalizado.

IDs

Si la primera Section utiliza:

id="quienes-somos"

la copia no debería mantener el mismo.

Puedes utilizar:

id="nuestra-infraestructura"

cuando corresponda.

Eliminar elementos innecesarios

Si el diseño tiene:

Heading
Paragraph
Button
3 cifras

pero tú solo necesitas:

Heading
Paragraph

puedes eliminar las unidades sobrantes.

No dejes elementos vacíos

Evita:

[      ]

para conservar la distribución original.

Reorganiza la estructura.

Eliminar Button

Si no necesitas acción, selecciónalo y elimínalo.

Eliminar una cifra

Selecciona el contenedor completo de esa unidad.

Recuerda

Waclis no solicita confirmación al eliminar.

Utiliza Deshacer si seleccionaste un nivel incorrecto.

Mover elementos

Puedes cambiar:

• posición de Image;

• orden de bloques;

• orden de cifras.

Pero identifica primero la unidad correspondiente mediante Navigator.

No muevas únicamente el texto de una cifra

Si quieres mover:

20+
Años de experiencia

mueve su unidad completa.

Linked styles

Es normal que varios:

• títulos;

• cifras;

• textos;

compartan Classes.

Waclis puede indicar:

Linked styles

Esto puede ayudar a mantener consistencia

Por ejemplo:

quienes-cifra

puede controlar el estilo de todas las cifras.

Si necesitas destacar una cifra

Mantén la Class común y agrega una excepción.

Por ejemplo:

class="quienes-cifra principal"

No elimines la Class general automáticamente

Puedes perder:

• tamaño;

• color;

• espaciado;

• responsive.

Classes para una personalización avanzada

Puedes utilizar una estructura conceptual como:

quienes-section
quienes-image
quienes-content
quienes-title
quienes-text
quienes-stats
quienes-stat
quienes-button

CSS localizado

Por ejemplo:

.quienes-section .quienes-title {
    font-size: 42px;
    font-weight: 700;
}

Imagen

.quienes-section .quienes-image {
    width: 100%;
    height: 420px;
    object-fit: cover;
}

cuando ese comportamiento sea realmente necesario.

Responsive

@media (max-width: 768px) {
    .quienes-section .quienes-title {
        font-size: 30px;
    }
}

Utiliza primero las herramientas visuales

No necesitas CSS para:

• cambiar texto;

• imagen;

• color;

• Padding;

• Grid;

si las opciones visuales permiten conseguir el resultado.

Evita CSS global

Por ejemplo:

h2 {
    font-size: 42px;
}

puede modificar otros Heading.

Utiliza scope.

Hover

Una sección Quiénes somos normalmente no necesita grandes efectos Hover.

Puede utilizarse sobre:

• Button;

• imagen enlazada;

• Cards de cifras;

si existe una interacción real.

No hagas que una fotografía institucional parezca clicable si no lo es

Un Hover muy fuerte puede generar esa expectativa.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Image;

• contenido.

Utiliza animaciones moderadas

Por ejemplo:

imagen aparece
+
contenido aparece

puede funcionar.

No necesitas animar cada párrafo individualmente.

Quiénes somos y confianza

Una buena sección puede ayudar a transmitir confianza cuando contiene información concreta.

Por ejemplo:

• experiencia;

• instalaciones;

• especialización;

• personas;

• cifras verificables;

• forma de trabajo.

Evita convertir confianza en una lista de superlativos

Es más útil mostrar:

Más de 20 años trabajando en...

si es real,

que simplemente decir:

Somos los mejores.

Propuesta de valor

Puedes incorporar una frase que resuma qué diferencia a la empresa.

Por ejemplo:

Combinamos catálogo, personalización y acompañamiento para resolver proyectos corporativos desde un único lugar.

No confundas propuesta de valor con eslogan

Un eslogan puede ser:

Ideas que conectan.

La propuesta debería explicar más concretamente qué ofrece la empresa.

Eslogan + explicación

Puede funcionar muy bien:

IDEAS QUE CONECTAN

Desarrollamos soluciones de merchandising para empresas...

Quiénes somos y SEO

Puedes explicar claramente:

• actividad;

• sector;

• ubicación o cobertura cuando sea relevante;

pero evita repetir palabras artificialmente.

Redacta primero para el visitante.

Información de ubicación

Si es relevante:

Trabajamos desde nuestra planta en...

puede aportar contexto.

Pero no necesitas incluir una dirección completa dentro de Quiénes somos si ya existe Contacto.

Cobertura

Puedes decir:

Atendemos proyectos en diferentes regiones...

si corresponde.

No inventes presencia internacional

Las afirmaciones deben corresponder a la operación real.

Llamados a la acción adecuados

Al final de la sección puedes dirigir hacia:

Ver servicios

Conocer nuestro equipo

Contactar

Ver proyectos

Elige según el contenido

Si acabas de explicar la experiencia:

[ VER PROYECTOS ]

puede ser natural.

Si acabas de explicar cómo trabajan:

[ CONOCER SERVICIOS ]

puede ser adecuado.

Ejemplo práctico: Quiénes somos en Home

Queremos:

[ FOTO EMPRESA ]

QUIÉNES SOMOS

Somos una empresa especializada en soluciones para...

Trabajamos junto a...

[ CONOCER NUESTRA EMPRESA ]

Paso 1

Abre:

Secciones → Quiénes somos

Paso 2

Selecciona una composición.

Paso 3

Utiliza Navigator para identificar:

Section
→ Container
→ Grid Row
→ Image / Content

Paso 4

Reemplaza Image.

Paso 5

Completa Alt.

Paso 6

Modifica Heading.

Paso 7

Reemplaza los Paragraphs.

Paso 8

Configura Button y Link si existe.

Paso 9

Revisa proporción de columnas.

Paso 10

Configura alineación vertical.

Paso 11

Comprueba Cover / Contain.

Paso 12

Revisa desktop.

Paso 13

Revisa tablet.

Paso 14

Revisa celular.

Comprueba especialmente:

• orden;

• longitud del texto;

• imagen;

• Button.

Paso 15

Guarda.

Paso 16

Utiliza:

Ver página

y prueba la acción.

Ejemplo práctico: sección con cifras

QUIÉNES SOMOS

Trabajamos acompañando proyectos desde...

20+
Años de experiencia

500+
Proyectos

5
Países

Utiliza solamente cifras reales.

Responsive

Desktop:

[ 20+ años ] [ 500+ proyectos ] [ 5 países ]

Mobile:

[ 20+ años ]

[ 500+ proyectos ]

[ 5 países ]

Ejemplo práctico: empresa industrial

[ FOTOGRAFÍA DE PLANTA ]

INFRAESTRUCTURA Y EXPERIENCIA

Contamos con una estructura preparada para acompañar proyectos de diferentes escalas...

[ CONOCER SERVICIOS ]

La imagen ayuda a demostrar capacidad.

Ejemplo práctico: empresa de servicios

[ EQUIPO TRABAJANDO ]

UN EQUIPO QUE ACOMPAÑA CADA PROYECTO

Trabajamos junto a nuestros clientes desde el análisis inicial hasta la implementación...

Ejemplo práctico: resumen + Timeline

QUIÉNES SOMOS

Desde nuestros comienzos hemos evolucionado...

↓

NUESTRA HISTORIA

1998
...

2008
...

2026
...

La sección institucional resume.

Timeline desarrolla.

Ejemplo práctico: resumen + Equipo

QUIÉNES SOMOS

Somos una empresa...

↓

NUESTRO EQUIPO

[ Persona ]
[ Persona ]
[ Persona ]

¿Qué hacer si el texto es demasiado largo?

Primero intenta:

1. eliminar repeticiones;

2. priorizar información actual;

3. resumir historia;

4. dividir en otras secciones;

5. agregar un CTA hacia una página completa.

No reduzcas el Font size para hacer entrar más texto

El problema es de contenido, no necesariamente de tipografía.

¿Qué hacer si la fotografía queda demasiado alta respecto del texto?

Puedes revisar:

• Height;

• proporción de columnas;

• object-fit;

• alineación.

No necesitas agregar texto solamente para “llenar” el espacio.

¿Qué hacer si el texto queda mucho más alto que la imagen?

Puedes:

• permitir alturas diferentes;

• utilizar otra fotografía;

• ajustar Min Height;

• revisar la cantidad de contenido.

No es obligatorio que ambas columnas terminen exactamente a la misma altura.

¿Qué hacer si quiero igualarlas?

Utiliza una estructura flexible y comprueba responsive.

Evita Height fijo demasiado rígido.

¿Qué hacer si el equipo se recorta?

Revisa:

• Cover;

• posición;

• fotografía original;

• altura.

Puede ser mejor utilizar otra fotografía.

¿Qué hacer si una cifra cambia de estilo al modificar otra?

Comprueba:

Linked styles

Probablemente comparten una Class.

Si quieres todas iguales:

es correcto.

¿Qué hacer si quiero destacar una única cifra?

Agrega una Class adicional o ID específico.

¿Qué hacer si al clonar las cifras se duplica un ID?

Cambia el identificador de la copia.

¿Qué hacer si la sección ocupa demasiado en celular?

Revisa:

• longitud del texto;

• imagen;

• Padding;

• cifras;

• Button.

No ocultes información importante solamente para reducir altura.

¿Qué hacer si la imagen aparece después del texto y quiero que aparezca primero?

Revisa:

• estructura;

• Grid Row;

• orden de columnas.

Intenta resolverlo responsive antes de duplicar la sección.

¿Qué hacer si la sección parece demasiado genérica?

Revisa el contenido.

Puede que falte información concreta como:

• qué hacen;

• para quién;

• experiencia;

• diferencial;

• tipo de proyectos.

Cambiar el diseño no solucionará un texto demasiado genérico.

¿Qué hacer si tengo demasiados valores?

Prioriza 3 o 4.

Puedes crear otra sección específica si necesitas desarrollar más.

¿Qué hacer si quiero contar toda la historia?

Utiliza:

• Timeline;

• página institucional;

• varias secciones.

No conviertas un Paragraph en una cronología interminable.

¿Qué hacer si quiero mostrar todo el equipo?

Utiliza:

Equipo o colaboradores

en lugar de agregar fotografías y biografías dentro de Quiénes somos.

¿Qué hacer si necesito mostrar instalaciones?

Puedes complementar con:

Galerías de imágenes

¿Qué hacer si necesito mostrar clientes?

Puedes complementar con:

• Carrusel;

• Galería de logos;

• Contenidos destacados.

Utilizar IA para redactar Quiénes somos

ChatGPT, Claude o Gemini pueden ayudarte a organizar información real.

Por ejemplo:

Necesito redactar la sección Quiénes somos de una Página web.

Información real de la empresa:

- Actividad:
[detalle]

- Tipo de clientes:
[detalle]

- Años de experiencia:
[detalle]

- Diferenciales:
[detalle]

- Cobertura:
[detalle]

Redacta:

1. Heading.
2. Un texto de presentación de máximo 80 palabras.
3. Un CTA opcional.

Utiliza español neutro.

No inventes cifras, clientes, certificaciones ni características que no estén en la información proporcionada.

IA para reducir un texto existente

Este es nuestro texto actual de Quiénes somos:

[pegar texto]

Necesito reducirlo a un máximo de 100 palabras.

Prioriza:
- qué hacemos;
- para quién trabajamos;
- experiencia;
- diferencial.

Mantén todos los datos objetivos.

Elimina repeticiones y frases genéricas.

No inventes información.

IA para detectar texto genérico

Puedes pedir:

Revisa este texto institucional:

[pegar texto]

Señala qué frases podrían aplicarse a cualquier empresa y propón alternativas más concretas utilizando únicamente la información que ya aparece en el texto.

No agregues datos nuevos.

IA para organizar una página institucional

Tengo esta información sobre la empresa:

[pegar información]

Organízala en las siguientes secciones:

- Quiénes somos.
- Historia.
- Valores.
- Equipo.
- Cifras.
- CTA.

Indícame qué información corresponde a cada sección y qué contenido está repetido.

No inventes datos.

IA para crear CSS

Por ejemplo:

Estoy trabajando con una sección Quiénes somos en Waclis.

La sección utiliza:
.quienes-section

La imagen:
.quienes-image

El contenido:
.quienes-content

El título:
.quienes-title

Desktop funciona correctamente.

En celular necesito:
- imagen arriba;
- contenido debajo;
- título de 30 px;
- Padding lateral de 20 px;
- imagen con altura máxima de 280 px y Cover.

No modifiques otras secciones.

No agregues JavaScript.

Devuélveme solamente el CSS necesario.

IA para evaluar una fotografía

Si la herramienta admite imágenes puedes consultar:

Quiero utilizar esta fotografía en la sección Quiénes somos de una Página web.

La imagen se mostrará en una columna utilizando Cover.

Analiza si el equipo o las personas importantes podrían quedar recortados en celular y qué encuadre sería más seguro.

Buenas prácticas para Quiénes somos

Recomendamos:

• explicar primero qué es hoy la empresa;

• decir claramente qué hace;

• indicar a quién atiende cuando sea relevante;

• utilizar información concreta;

• evitar frases institucionales demasiado genéricas;

• resumir la historia cuando sea extensa;

• utilizar Timeline para hitos;

• utilizar Equipo para personas;

• utilizar imágenes reales y de buena calidad cuando sea posible;

• completar Alt;

• utilizar cifras únicamente si son reales;

• mantener cifras actualizadas;

• utilizar CTA solamente cuando exista un siguiente paso útil;

• trabajar con Grid para imagen + texto;

• revisar responsive;

• limitar CSS a la sección;

• probar el resultado mediante Ver página.

Errores frecuentes

Comenzar con una historia interminable

Explica primero qué hace actualmente la empresa.

Utilizar frases que podrían corresponder a cualquier negocio

Sé específico.

Decir solamente “somos líderes”

Aporta datos o hechos concretos cuando existan.

Convertir Quiénes somos en Beneficios

Mantén el foco institucional.

Mostrar todo el equipo dentro de la misma sección

Utiliza Equipo cuando corresponda.

Crear una cronología completa dentro de un Paragraph

Utiliza Timeline.

Agregar diez valores diferentes

Prioriza.

Inventar cifras para completar el diseño

Utiliza únicamente datos reales.

Dejar cifras desactualizadas

Revísalas periódicamente.

Utilizar una fotografía genérica que no representa la empresa

Selecciona una imagen coherente.

Recortar rostros o personas en móvil

Comprueba Cover y encuadre.

No completar Alt

Describe las fotografías relevantes.

Mantener demasiado texto en Home

Resume y enlaza a una página institucional.

Usar Height fijo para igualar imagen y contenido

Puede generar problemas con textos largos.

Centrar contenido con Margin Top

Utiliza alineación de Grid.

Mantener dos columnas muy estrechas en celular

Apila responsive.

Duplicar versión desktop/mobile sin necesidad

Intenta mantener una sola estructura.

Clonar y repetir IDs

Actualiza identificadores.

Cambiar texto del Button pero olvidar URL

Prueba el Link.

Utilizar CSS global

Limita el scope.

Animar excesivamente una sección institucional

La claridad debe ser prioritaria.

No comprobar Ver página

Revisa el frontend.

Flujo recomendado

1. DEFINIR QUÉ QUEREMOS CONTAR
↓
2. PRIORIZAR INFORMACIÓN ACTUAL
↓
3. RESUMIR HISTORIA
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR QUIÉNES SOMOS
↓
6. REVISAR NAVIGATOR
↓
7. REEMPLAZAR IMAGE
↓
8. COMPLETAR ALT
↓
9. MODIFICAR HEADING
↓
10. REDACTAR PRESENTACIÓN
↓
11. AGREGAR CIFRAS / VALORES SI CORRESPONDE
↓
12. CONFIGURAR CTA SI EXISTE
↓
13. REVISAR GRID Y ALINEACIÓN
↓
14. CONFIGURAR COVER / CONTAIN
↓
15. REVISAR RESPONSIVE
↓
16. GUARDAR CAMBIOS
↓
17. VER PÁGINA

Checklist antes de publicar Quiénes somos

• La sección explica claramente qué hace la empresa.

• El visitante puede comprender a quién está dirigida la propuesta.

• La información principal corresponde a la empresa actual.

• La historia está resumida cuando corresponde.

• No hay frases excesivamente genéricas.

• No utilizo superlativos sin información que los respalde.

• Las cifras son reales.

• Las cifras están actualizadas.

• Los valores publicados representan realmente la forma de trabajo.

• La fotografía fue reemplazada.

• La imagen representa correctamente a la empresa.

• La fotografía tiene buena calidad.

• Completé Alt cuando corresponde.

• Revisé Cover / Contain.

• Las personas importantes no quedan recortadas.

• El Heading es claro.

• Los Paragraphs tienen una extensión razonable.

• El CTA aporta un siguiente paso útil.

• El Button tiene un texto claro.

• La URL es correcta.

• Utilicé Grid para la distribución.

• La alineación vertical funciona correctamente.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Las columnas se reorganizan correctamente.

• El texto sigue siendo cómodo de leer en móvil.

• No existe scroll horizontal inesperado.

• Revisé Navigator.

• Los IDs personalizados son únicos.

• Revisé elementos clonados.

• Linked styles tiene el alcance esperado.

• El CSS personalizado está limitado a esta sección.

• Las animaciones son moderadas.

• Guardé los cambios.

• Probé los Links.

• Revisé el resultado mediante Ver página.

En resumen

La sección Quiénes somos permite presentar la identidad de tu empresa dentro de la Página web.

Una buena presentación debería ayudar al visitante a comprender principalmente:

quiénes son + qué hacen + para quién trabajan + cómo lo hacen + qué experiencia tienen.

No necesitas contar toda la historia dentro de una única Section.

Puedes utilizar:

Quiénes somos → presentación general.

Timeline → historia e hitos.

Equipo o colaboradores → personas.

Galería → instalaciones o imágenes institucionales.

Beneficios → ventajas para el cliente.

CTA → siguiente acción.

Una estructura sencilla puede ser suficiente:

[ IMAGEN ]

QUIÉNES SOMOS

Presentación breve.

Experiencia / diferencial.

[ CONOCER MÁS ]

Si necesitas una distribución horizontal:

[ IMAGEN ] [ TEXTO ]

utiliza:

Grid Row + Grid Columns

y permite que en celular se transforme correctamente en una estructura vertical.

También recuerda:

Cover puede ser apropiado para fotografías institucionales, pero debes comprobar que personas y elementos importantes no queden recortados.

Finalmente, evita textos institucionales construidos únicamente con palabras como:

excelencia, innovación, liderazgo y calidad

si no explican qué hace realmente la empresa.

Una sección Quiénes somos funciona mejor cuando es:

• concreta;

• creíble;

• humana;

• visual;

• fácil de leer;

• relevante para el visitante.

Después:

Guardar Cambios → Ver página → revisar desktop, tablet y celular → probar el CTA si existe.