¿Cómo utilizar Citas o frases en el Editor de bloques de Waclis?

La sección Citas o frases del Editor de bloques de Waclis permite destacar una idea, declaración, concepto o fragmento breve dentro de tu Página web.

Puedes utilizarla para presentar:

• una frase institucional;

• una idea central de la marca;

• una declaración destacada;

• una cita atribuida;

• una frase de un fundador o integrante de la empresa;

• una idea relacionada con el contenido de la página;

• una conclusión;

• un mensaje inspirador;

• una definición importante;

• un concepto que quieras separar visualmente del resto del contenido.

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

Secciones → Citas o frases

Además, dentro de:

Componentes

puedes utilizar el componente:

Blockquote

para construir una cita personalizada dentro de una sección creada desde cero.

¿Qué es una sección Citas o frases?

Es una composición diseñada para darle un protagonismo especial a un texto breve.

Por ejemplo:

“Cada proyecto comienza entendiendo qué necesita realmente el cliente.”

— Nombre / Empresa

O una frase propia de marca:

CREAMOS SOLUCIONES PENSADAS PARA ACOMPAÑAR CADA ETAPA DEL PROYECTO.

¿Para qué sirve?

Una frase destacada puede:

• interrumpir visualmente una página extensa;

• reforzar una idea;

• resumir una sección anterior;

• introducir una nueva parte del contenido;

• comunicar una filosofía;

• destacar una declaración importante;

• generar ritmo visual.

No debería utilizarse solamente como decoración

Por ejemplo:

“Todo es posible.”

puede ocupar mucho espacio visual, pero aportar muy poco si no existe relación con:

• empresa;

• producto;

• servicio;

• contenido.

La frase debería tener una función

Pregunta:

¿Qué idea quiero que el visitante recuerde después de leer esta sección?

Esa respuesta puede ayudarte a decidir qué destacar.

Cita, frase de marca y Testimonio no son lo mismo

Esta distinción es fundamental.

1. Frase de marca

Es una declaración creada por la propia empresa.

Por ejemplo:

Diseñamos cada solución pensando en cómo será utilizada en el mundo real.

No necesita atribuirse a una persona si representa un mensaje institucional.

2. Cita atribuida

Es una frase que se presenta como pronunciada o escrita por una persona determinada.

Por ejemplo:

“Una buena implementación comienza con una buena planificación.”

— Nombre Apellido

Si atribuyes una frase a una persona real:

comprueba que la autoría sea correcta.

3. Testimonio

Describe una experiencia real de un cliente.

Por ejemplo:

“El equipo nos acompañó durante todo el proceso y pudimos implementar la solución dentro del plazo previsto.”

— Cliente

Esto debería utilizarse preferentemente dentro de:

Testimonios

porque su función es aportar experiencia y validación.

Comparación rápida

Ejemplo de frase de marca

LA TECNOLOGÍA DEBE SIMPLIFICAR EL TRABAJO, NO COMPLICARLO.

Puede utilizarse para separar dos partes de una landing.

Ejemplo de cita atribuida

“Escuchar al cliente es el primer paso para construir una solución adecuada.”

— Nombre Apellido
Cargo

Ejemplo de Testimonio

“Pudimos centralizar nuestro trabajo y reducir tareas que antes realizábamos manualmente.”

— Cliente

Aunque visualmente pueda parecer una cita, su finalidad es testimonial.

Utiliza:

Secciones → Testimonios

cuando quieras mostrar experiencias de clientes.

Citas o frases vs Banner

Un Banner suele combinar:

• gran composición visual;

• mensaje;

• CTA.

Una frase puede ser mucho más simple.

Por ejemplo:

────────────────────────────────

“Las mejores soluciones comienzan
con preguntas correctas.”

────────────────────────────────

No necesita:

• imagen;

• Button;

• campaña.

Citas o frases vs CTA

Un CTA busca una acción.

Por ejemplo:

¿LISTO PARA COMENZAR?

[ CONTACTAR ]

Una frase busca principalmente:

destacar una idea.

Puede existir un CTA debajo de una frase

Por ejemplo:

“Cada proyecto merece una solución adaptada a su contexto.”

¿Quieres contarnos qué necesitas?

[ CONTACTAR ]

pero no es obligatorio.

¿Cómo agregar Citas o frases?

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

Después abre:

Secciones

y selecciona:

Citas o frases

Paso 1: elige una composición

Waclis mostrará los diseños disponibles.

Puedes encontrar alternativas con:

• texto centrado;

• gran Typography;

• autor;

• fotografía;

• Background;

• decoración;

• diferentes alineaciones.

Elige según:

• longitud de la frase;

• importancia;

• contexto;

• existencia o no de autor;

• estilo visual de tu Página web.

No elijas solamente por la frase de ejemplo

Todos los textos pueden reemplazarse.

Lo importante es analizar:

• estructura;

• tamaño;

• disposición;

• relación entre frase y autor.

Paso 2: agrega la sección

Selecciona la composición deseada.

Después podrás personalizar los elementos individuales.

Paso 3: utiliza Navigator

Una estructura conceptual sencilla puede ser:

Section
└── Container
    ├── Blockquote / Text
    └── Author

Otra puede utilizar:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        └── Grid Column
            ├── Blockquote
            ├── Author
            └── Role

O:

Section
├── Background Image
├── Overlay
└── Content
    ├── Quote
    └── Author

La estructura exacta dependerá del diseño.

Navigator es especialmente útil cuando existen varios textos

Por ejemplo:

Frase
Autor
Cargo
Empresa

Puedes identificar exactamente cuál quieres modificar.

Paso 4: define qué tipo de frase utilizarás

Antes de editar visualmente decide:

¿Es una frase propia de la empresa?

¿Es una cita real de una persona?

¿Es una experiencia de cliente?

¿Es un mensaje puramente decorativo?

La respuesta afecta cómo deberías presentarla.

Si es una frase de marca

Puedes utilizar:

CONSTRUIMOS EXPERIENCIAS PENSADAS PARA LAS PERSONAS QUE REALMENTE LAS UTILIZAN.

sin autor.

También puedes atribuirla institucionalmente

Por ejemplo:

“Cada proyecto comienza escuchando.”

— Equipo de Nombre de empresa

si esa frase realmente representa una declaración propia.

Si es una cita de una persona

Utiliza una atribución correcta.

Por ejemplo:

“Texto de la cita.”

— Nombre Apellido

Puedes agregar cargo

“Texto de la cita.”

— Nombre Apellido
Director de...

cuando sea relevante.

No inventes cargos

Si utilizas:

CEO
Fundador
Director
Especialista

deben corresponder a información real.

No inventes autoría

Este es uno de los errores más importantes.

No publiques:

“Una frase que encontramos en internet.”

— Persona famosa

sin comprobar que realmente le pertenece.

Las frases famosas suelen atribuirse incorrectamente

Si quieres utilizar una cita conocida:

verifica la autoría antes de publicarla.

Si no puedes verificarla

Es preferible:

• no atribuirla;

• utilizar otra frase;

• redactar un mensaje propio.

No atribuyas una frase propia a una persona conocida para darle más autoridad

Además de ser incorrecto, puede afectar la credibilidad de la Página web.

También verifica la redacción exacta cuando sea importante

Una frase puede circular:

• modificada;

• resumida;

• traducida;

• parafraseada.

Si vas a presentarla entre comillas como cita literal, deberías tener suficiente certeza sobre el texto.

Si estás parafraseando

Puede ser mejor no presentarla como una cita literal.

Frase propia de la marca

Esta suele ser la alternativa más flexible.

Puedes redactarla específicamente para la página.

Por ejemplo:

Las mejores decisiones nacen de información clara.

Otro ejemplo

Una buena experiencia digital debe sentirse simple incluso cuando detrás existe mucha tecnología.

Otro ejemplo

No se trata de agregar más herramientas, sino de conectar correctamente las que realmente necesitas.

Estos textos pueden adaptarse al contenido

sin depender de una atribución externa.

Paso 5: modifica la frase

Selecciona el texto correspondiente.

Puede tratarse de:

• Paragraph;

• Heading;

• Blockquote;

• otro elemento de texto;

según el diseño utilizado.

Mantén la frase relativamente breve

Una frase destacada debe poder leerse rápidamente.

Por ejemplo:

Un buen diseño no debería obligar al usuario a pensar cómo utilizarlo.

funciona como frase.

En cambio

Creemos firmemente que cada uno de los diferentes proyectos en los que participamos requiere una consideración integral que tenga en cuenta...

durante 150 palabras deja de comportarse como una frase destacada.

Para contenido extenso

utiliza:

• Paragraph;

• Texto e imagen;

• otra sección.

No existe un límite rígido

Pero visualmente una cita suele funcionar mejor con:

• una oración;

• dos oraciones breves;

• una idea principal.

Prioriza una sola idea

Evita:

Creemos en la calidad, la innovación, el trabajo en equipo, la atención, la velocidad, la seguridad, la responsabilidad, el compromiso y el futuro.

Hay demasiados conceptos.

Mejor

La calidad comienza prestando atención a los detalles que el cliente realmente percibe.

Paso 6: define si utilizarás comillas

Puedes presentar:

“Cada proyecto comienza escuchando.”

o:

Cada proyecto comienza escuchando.

Ambas alternativas pueden funcionar visualmente.

Las comillas son especialmente apropiadas

cuando se trata de una cita atribuida.

En frases institucionales

pueden utilizarse o no.

No agregues varias capas de comillas

Evita:

“"Cada proyecto..."”

Mantén un criterio tipográfico consistente

Paso 7: configura la autoría

Si corresponde, utiliza una jerarquía clara.

Por ejemplo:

“Una buena implementación necesita objetivos claros.”

Nombre Apellido
Director de Operaciones

Autor principal

Debe ser más visible que:

• cargo;

• empresa;

• información secundaria.

Ejemplo visual

“LA FRASE PRINCIPAL”

Nombre Apellido
Cargo · Empresa

No hagas el cargo más grande que la cita

El protagonismo debe estar en la frase.

Si no existe autor

elimina ese elemento si el diseño lo incluye como ejemplo.

No dejes

John Doe
CEO Company

de la plantilla original.

Revisa todos los textos de ejemplo

Antes de publicar.

Paso 8: utiliza Blockquote cuando construyas desde cero

Dentro de los componentes básicos del Editor de bloques encontrarás:

Blockquote

Puede utilizarse para representar una cita.

Estructura conceptual

Blockquote
└── Texto de la cita

Después puedes agregar debajo:

Paragraph
→ Autor

Paragraph
→ Cargo

Ejemplo

Section
└── Container
    ├── Blockquote
    │   └── “Texto de la cita”
    ├── Paragraph
    │   └── Nombre Apellido
    └── Paragraph
        └── Cargo

Ventaja

Te permite construir una composición totalmente personalizada.

Blockquote no significa Testimonio automáticamente

El componente define una estructura de cita.

Su significado depende del contenido.

Puedes utilizar Blockquote para

• cita atribuida;

• frase editorial;

• fragmento destacado.

No utilices Blockquote simplemente para hacer un texto más grande

Si solo quieres aumentar Typography:

utiliza las opciones de Estilo correspondientes.

Semántica y diseño son conceptos diferentes

Paso 9: Typography

La frase puede tener mayor protagonismo mediante:

• Font size;

• Font weight;

• Font family;

• Line height;

• alineación.

Tamaño

Una frase importante puede ser:

grande

pero no debería ocupar media pantalla únicamente porque tiene pocas palabras.

Ejemplo desktop

Conceptualmente:

36–48 px

puede ser adecuado en determinadas composiciones.

Mobile

Puede reducirse.

Por ejemplo:

26–32 px

según el diseño.

No tomes estos valores como una obligación

La Typography debe corresponder a:

• diseño;

• longitud;

• fuente;

• ancho.

Una frase más larga necesita generalmente menor tamaño

Por ejemplo:

“Las mejores soluciones aparecen cuando comprendemos primero el problema que necesitamos resolver.”

puede necesitar menos tamaño que:

“Menos, pero mejor.”

No fuerces una frase larga con Font size enorme

Puede generar:

12 líneas

en celular.

Line height

Es especialmente importante.

Un texto grande con líneas demasiado juntas puede ser difícil de leer.

También evita Line height excesivo

que desconecte las líneas visualmente.

Font weight

No todas las frases necesitan:

font-weight: 900

Una Typography más ligera puede resultar elegante.

Italic

Las citas se presentan a veces en cursiva.

Puedes utilizarlo si corresponde al estilo, pero no es obligatorio.

No dependas únicamente de cursiva para distinguir la cita

La jerarquía completa puede incluir:

• tamaño;

• espacio;

• posición;

• comillas.

Alineación

Puede utilizarse:

• izquierda;

• centro;

• derecha.

Centrada

Funciona bien para frases cortas:

             “FRASE”

          Nombre Autor

Izquierda

Puede funcionar mejor con textos algo más extensos:

“Una frase más larga que necesita
varias líneas para desarrollarse.”

Nombre Apellido

Mantén la lectura cómoda

No elijas alineación solamente por estética.

Ancho máximo

Una frase puede resultar más legible si no ocupa todo el ancho de una pantalla grande.

Por ejemplo:

          ┌──────────────────────┐
          │                      │
          │        FRASE         │
          │                      │
          └──────────────────────┘

Evita líneas excesivamente largas

Especialmente en desktop.

Puedes utilizar:

• Container Boxed;

• Grid Column;

• Max Width;

cuando corresponda.

Espacio alrededor

Las frases destacadas suelen necesitar aire.

Por ejemplo:

        espacio

“FRASE DESTACADA”

Nombre

        espacio

Padding

Puede utilizarse para separar la sección del contenido anterior y posterior.

Pero no exageres

Una frase de 8 palabras no necesita necesariamente:

800 px de altura

Fondo

Puedes utilizar:

• blanco;

• gris;

• color de marca;

• imagen;

• degradado mediante CSS;

• otro fondo.

Fondo simple

Puede ser muy efectivo.

Por ejemplo:

████████████████████████████████

“LA SIMPLICIDAD TAMBIÉN SE DISEÑA.”

████████████████████████████████

Fondo de color de marca

Puede ayudar a crear una pausa visual.

Contraste

Si utilizas fondo oscuro:

• frase clara;

• autor claro;

• suficiente contraste.

Si utilizas fondo claro:

• texto oscuro.

No utilices colores con poco contraste solamente por seguir una estética

La frase debe poder leerse.

Background Image

También puedes colocar una fotografía como fondo.

Ejemplo

[ fotografía ]

“Cada proyecto cuenta una historia.”

Autor

En ese caso revisa

• Overlay;

• contraste;

• recorte;

• legibilidad.

Overlay

Puede resultar necesario cuando el texto se coloca sobre una fotografía.

Conceptualmente:

IMAGEN
↓
OVERLAY
↓
CITA

No oscurezcas la imagen más de lo necesario

Fotografía del autor

Algunas composiciones pueden incluir una imagen.

Por ejemplo:

[ FOTO ]

“Frase”

Nombre Apellido
Cargo

Si utilizas una fotografía de una persona

comprueba:

• autorización;

• calidad;

• encuadre;

• Alt.

No utilices una fotografía de stock como si correspondiera al autor real

Esto puede ser especialmente engañoso.

Si la persona citada no tiene fotografía disponible

puedes utilizar una composición sin imagen.

No es obligatorio mostrar rostro

Frase de fundador

Puede utilizarse, por ejemplo:

“Desde el comienzo tuvimos claro que la atención debía ser tan importante como el producto.”

— Nombre Apellido
Fundador

si corresponde a una declaración real de esa persona.

Frase institucional sin autor

CRECEMOS CUANDO LAS HERRAMIENTAS SE ADAPTAN A LAS PERSONAS Y NO AL REVÉS.

Puede ser incluso más apropiada

si buscas transmitir un posicionamiento de la marca y no una opinión personal.

Citas de terceros

Pueden utilizarse con precaución.

Si citas:

• autores;

• especialistas;

• investigadores;

• figuras públicas;

comprueba:

• autoría;

• texto;

• contexto.

Evita sacar una frase de contexto

Una afirmación puede significar algo distinto dentro del texto original.

No necesitas utilizar una persona famosa

Una frase propia relacionada específicamente con tu empresa puede ser mucho más relevante.

Uso de citas extensas

Mantén las citas relativamente breves.

Además de ser visualmente más adecuadas, esto evita convertir la sección en una reproducción extensa de material de terceros.

Si quieres desarrollar una idea ajena

puedes:

• parafrasearla;

• explicar el concepto con tus propias palabras;

• citar únicamente el fragmento realmente necesario.

Paso 10: frase dentro del recorrido de la página

Una cita puede funcionar como transición.

Ejemplo

QUIÉNES SOMOS

[ contenido ]

↓

“Cada proyecto comienza entendiendo a las personas.”

↓

NUESTRA METODOLOGÍA

La frase conecta las dos partes.

Otra posibilidad

CARACTERÍSTICAS

↓

“LA TECNOLOGÍA SOLO ES ÚTIL CUANDO RESUELVE UN PROBLEMA REAL.”

↓

BENEFICIOS

Esto genera ritmo

sin agregar una sección compleja.

Frase después de Testimonios

Puede utilizarse, pero evita repetir la misma función.

Ejemplo innecesario

TESTIMONIOS
↓
frases de clientes

CITA
↓
otra frase de cliente

En ese caso probablemente debería permanecer dentro de Testimonios.

Frase antes de CTA

Puede funcionar muy bien.

“Las mejores ideas comienzan con una conversación.”

↓

¿HABLAMOS?

[ CONTACTAR ]

La frase prepara la acción

Frase en Home

Puede utilizarse:

• entre secciones;

• después de Quiénes somos;

• antes de Servicios;

• antes del CTA.

No agregues demasiadas frases

Una Home con:

frase
contenido
frase
contenido
frase
contenido
frase

puede perder fluidez.

Una frase destacada funciona precisamente porque es una excepción

Frase en página institucional

Puede utilizarse para reforzar:

• propósito;

• cultura;

• visión;

• filosofía.

Frase en Servicios

Puede introducir una idea relacionada con la metodología.

Frase en Portafolio

Puede resumir una filosofía de trabajo.

Por ejemplo:

“Cada proyecto debe resolver una necesidad antes de buscar llamar la atención.”

Frase en Blog

Puede utilizarse dentro de contenido editorial para destacar una idea central.

Frase en una landing

Puede funcionar como pausa entre:

• problema;

• solución;

• beneficios.

Citas con ícono de comillas

Una composición puede utilizar un:

• SVG Icon;

• Font Icon;

para representar comillas.

Por ejemplo

❝

Una frase destacada...

Nombre

El icono debe ser decorativo

No necesita convertirse en el elemento principal.

Evita un símbolo enorme

que ocupe más espacio que el texto.

No utilices comillas visuales + caracteres de comillas excesivos

Por ejemplo:

❝ “FRASE” ❞

puede resultar redundante dependiendo del diseño.

Elige una solución consistente

Líneas decorativas

Puedes utilizar:

────────────

FRASE

────────────

o Border.

Mantén la decoración subordinada al contenido

Cards de cita

También puede presentarse como:

╭────────────────────────────╮
│                            │
│ “Frase...”                 │
│                            │
│ Nombre                     │
│                            │
╰────────────────────────────╯

Esto puede ser útil si tienes varias

Pero si vas a mostrar muchas citas de clientes:

considera nuevamente Testimonios.

Más de una frase

La sección puede contener varias unidades en determinados diseños.

Por ejemplo:

[ FRASE A ]

[ FRASE B ]

[ FRASE C ]

Pregunta si realmente necesitas tres

Puede resultar más efectivo destacar una única idea.

Si las tres pertenecen a autores diferentes

puede existir una composición tipo Cards.

Si son opiniones de clientes

utiliza Testimonios.

Si son frases editoriales

pueden organizarse en Citas.

Clonar una cita

Si necesitas otra unidad:

1. utiliza Navigator;

2. selecciona el contenedor completo;

3. utiliza Clonar elemento;

4. reemplaza:

   • frase;

   • autor;

   • cargo;

   • imagen;

   • Alt;

   • ID si existe.

No clones solamente el texto

Si la estructura es:

Quote Card
├── Blockquote
├── Author
└── Role

clona la Card completa.

Después de clonar

comprueba que no quede:

Frase nueva
+
Autor anterior

Revisa todos los campos

IDs

Si la unidad original utiliza:

id="cita-fundador"

la copia necesita otro identificador.

Eliminar una cita

Selecciona la unidad completa cuando quieras quitarla.

Recuerda:

Waclis no solicita confirmación.

Si eliminas incorrectamente:

Deshacer

No elimines solamente la frase

dejando:

— Nombre Apellido
Cargo

sin ningún contenido.

Reorganiza la estructura

si ya no necesitas esa unidad.

Mover una cita

Puedes cambiarla de posición respecto de otras secciones.

Por ejemplo:

Antes:

Servicios
CTA
Cita

Después:

Servicios
Cita
CTA

si la frase prepara mejor la acción.

Selecciona la Section completa

cuando quieras cambiar su posición general.

Linked styles

Varias frases o autores pueden compartir Classes.

Por ejemplo:

quote-text
quote-author

Esto puede ser útil

para mantener:

• Typography;

• color;

• espacios.

Si Waclis muestra Linked styles

no significa necesariamente que exista un error.

Ejemplo

Tres autores pueden compartir:

quote-author

y verse de forma consistente.

Si necesitas una excepción

agrega:

• Class adicional;

• ID único.

No elimines la Class base automáticamente

Classes personalizadas

En una composición avanzada puedes utilizar:

cita-section
cita-text
cita-author
cita-role
cita-image

CSS localizado

Por ejemplo:

.cita-section .cita-text {
    font-size: 42px;
    line-height: 1.25;
}

Autor

.cita-section .cita-author {
    margin-top: 20px;
    font-weight: 600;
}

Responsive

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

Estas Classes son ejemplos

No representan necesariamente las Classes originales de todos los diseños de Waclis.

Evita CSS global

No utilices:

blockquote {
    font-size: 42px;
}

si solo quieres modificar esta sección.

Podría afectar

otros Blockquote de la Página web.

Mejor

.cita-section blockquote {
    font-size: 42px;
}

si corresponde a tu estructura.

Tampoco utilices

p {
    font-style: italic;
}

para convertir todos los Paragraphs del sitio en citas.

Scope

es especialmente importante.

Estados Hover

Una cita normalmente no necesita Hover.

No hagas que una frase parezca clicable

si no contiene una acción.

Si el autor o la cita llevan Link

entonces puede existir una interacción.

Pero debe ser clara.

No conviertas toda la cita en un enlace si el usuario no puede anticipar el destino

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre la Section.

Una aparición suave puede funcionar bien

porque la frase tiene protagonismo.

No necesitas animar palabra por palabra

Evita delays excesivos

El visitante debe poder continuar leyendo.

Responsive

Las citas suelen utilizar Typography grande, por lo que el móvil requiere especial atención.

Desktop

“UNA FRASE DESTACADA QUE OCUPA
DOS LÍNEAS EN PANTALLA GRANDE.”

Mobile

Podría convertirse en:

“UNA FRASE
DESTACADA QUE
OCUPA CINCO
LÍNEAS EN
CELULAR.”

Esto no es necesariamente un problema

pero debes revisar:

• Font size;

• Line height;

• Padding.

No reduzcas tanto la Typography que deje de parecer una frase destacada

Tampoco mantengas un tamaño de desktop enorme

si obliga a desplazar demasiado.

Autor en mobile

Debe permanecer cerca de la frase.

Evita:

FRASE

[ gran espacio ]

AUTOR

porque puede perderse la asociación.

Fotografía en responsive

Si existe:

[ FOTO ][ CITA ]

en desktop,

puede transformarse en:

[ FOTO ]

[ CITA ]

en móvil.

Utiliza Grid Row

cuando la composición dependa de dos columnas.

No mantengas

[ foto pequeña ][ texto comprimido ]

en celular.

Cover vs Contain en imagen del autor

Para una fotografía de persona:

Cover

puede ser apropiado.

Comprueba que no recorte

• rostro;

• cabeza;

• elementos relevantes.

Para un logotipo

Contain

puede ser más adecuado.

Frase sobre imagen en celular

Un Background Image puede recortarse significativamente.

Comprueba que:

• el texto conserve contraste;

• no quede sobre una zona visual problemática.

Overlay puede necesitar ajuste

No posiciones el texto con valores rígidos

Evita:

left: 500px;
top: 200px;

si no es estrictamente necesario.

Utiliza

• Container;

• Grid;

• alineación;

• Padding.

Ejemplo práctico: frase institucional

Queremos:

“LAS MEJORES SOLUCIONES COMIENZAN ENTENDIENDO EL PROBLEMA CORRECTO.”

sin autor.

Paso 1

Abre:

Secciones → Citas o frases

Paso 2

Selecciona una composición sencilla.

Paso 3

Utiliza Navigator.

Paso 4

Reemplaza el texto de ejemplo.

Paso 5

Elimina autor y cargo si no corresponden.

Paso 6

Personaliza:

• Font size;

• Font weight;

• Line height;

• color;

• alineación.

Paso 7

Configura:

• Background;

• Padding.

Paso 8

Revisa desktop.

Paso 9

Revisa tablet.

Paso 10

Revisa celular.

Paso 11

Guarda.

Paso 12

Utiliza:

Ver página

Ejemplo práctico: cita atribuida

“Cada proyecto comienza con una conversación.”

Nombre Apellido
Fundador

Antes de publicar

comprueba:

• frase;

• autor;

• cargo.

Después

configura jerarquía:

FRASE
↓
AUTOR
↓
CARGO

Ejemplo práctico: frase con imagen

Desktop:

[ FOTO ] [ “FRASE...” ]
         [ Nombre ]

Mobile:

[ FOTO ]

“FRASE...”

Nombre

Ejemplo práctico: frase como transición

CARACTERÍSTICAS

[ contenido ]

↓

“NO SE TRATA DE TENER MÁS HERRAMIENTAS,
SINO DE USAR LAS ADECUADAS.”

↓

BENEFICIOS

Ejemplo práctico: frase + CTA

“TODO PROYECTO COMIENZA CON UNA BUENA CONVERSACIÓN.”

¿Hablamos sobre el tuyo?

[ CONTACTAR ]

En este caso la frase prepara el CTA.

¿Qué hacer si la frase es demasiado larga?

Primero:

• elimina repeticiones;

• identifica la idea principal;

• resume.

No reduzcas únicamente Font size

para hacer entrar 150 palabras.

Ejemplo

Texto original:

Creemos que la innovación consiste en comprender cada uno de los diferentes desafíos...

Puede resumirse:

Innovar comienza comprendiendo el problema que realmente necesitamos resolver.

si conserva la idea original.

¿Qué hacer si no sé si usar Citas o Testimonios?

Pregunta:

¿La frase describe la experiencia de un cliente?

Sí:

Testimonios

¿Es una idea o declaración?

Entonces:

Citas o frases

puede ser adecuada.

¿Qué hacer si la frase pertenece al fundador?

Puede utilizar Citas.

Asegúrate de que:

• realmente sea su declaración;

• cargo y nombre sean correctos.

¿Qué hacer si encontré una frase en redes sociales?

No la atribuyas inmediatamente.

Busca una fuente confiable antes de publicarla como cita.

Si no puedes verificarla:

no la presentes como una cita textual de esa persona.

¿Qué hacer si la frase está traducida?

Asegúrate de no presentar una traducción libre como si fuera necesariamente el texto literal original.

Puedes utilizar una formulación propia o una atribución adecuada según el caso.

¿Qué hacer si no conozco al autor?

No escribas:

— Anónimo

automáticamente.

Puedes considerar simplemente utilizar una frase propia o elegir otra cita verificable.

¿Qué hacer si quiero una frase inspiradora sin autor?

Puede presentarse como una frase editorial de marca si realmente forma parte de tu contenido.

No hagas parecer que es de otra persona

¿Qué hacer si el autor queda demasiado lejos?

Revisa:

• Margin;

• Padding;

• estructura.

Debe mantenerse visualmente relacionado con la cita.

¿Qué hacer si el cargo tiene demasiado protagonismo?

Reduce:

• Font size;

• Font weight;

• color;

según corresponda.

¿Qué hacer si la frase ocupa toda la pantalla móvil?

Revisa:

• Font size;

• Padding;

• longitud.

¿Qué hacer si una palabra muy larga genera overflow?

Revisa:

• Width;

• Typography;

• contenido.

Evita valores rígidos que impidan el salto de línea.

¿Qué hacer si aparece scroll horizontal?

Comprueba:

• Width;

• Min Width;

• Position;

• elementos decorativos;

• comillas SVG;

• imagen.

No ocultes el overflow globalmente sin identificar el elemento.

¿Qué hacer si la imagen de fondo hace ilegible la frase?

Utiliza:

• Overlay;

• otra imagen;

• otro color de texto;

• una zona visual diferente.

¿Qué hacer si el Overlay tapa demasiado?

Reduce su intensidad o utiliza otra fotografía.

¿Qué hacer si al cambiar la frase cambia otra?

Si estás modificando:

Contenido

cada texto debería ser independiente.

Si estás modificando:

Estilo

puede existir:

Linked styles

Si varias citas deben tener el mismo diseño

es correcto.

Si quieres una excepción

utiliza:

• Class adicional;

• ID.

¿Qué hacer si cloné una cita y conserva al autor anterior?

Actualiza todos los elementos internos.

¿Qué hacer si conserva el mismo ID?

Cámbialo.

¿Qué hacer si eliminé la frase pero quedó el autor?

Utiliza Navigator para eliminar o reorganizar la unidad correspondiente.

¿Qué hacer si quiero convertir una cita en una frase de marca?

Puedes:

1. cambiar el texto;

2. eliminar autor y cargo;

3. ajustar la composición;

4. revisar Typography.

No necesitas reconstruir toda la Section.

¿Qué hacer si quiero convertirla en Testimonio?

Puede ser mejor utilizar:

Secciones → Testimonios

porque esa categoría está orientada específicamente a experiencias de clientes.

¿Qué hacer si quiero agregar un Link al autor?

Puedes utilizar el componente Link cuando exista un destino relevante.

Por ejemplo:

• perfil institucional;

• página del equipo.

Pero no necesitas enlazar todos los nombres

Si es una cita de un tercero

no agregues un Link arbitrario que pueda parecer una fuente si no lo es.

Citas y fuentes

Si el contexto requiere indicar fuente, puedes agregar un texto secundario.

Por ejemplo:

“Texto de la cita.”

Nombre Apellido
Fuente o publicación

cuando tengas información correcta.

No inventes una fuente

Citas legales, científicas o técnicas

Si una frase tiene importancia técnica o normativa:

es preferible utilizar información precisa y una fuente verificable en lugar de convertir una interpretación en una frase decorativa.

Citas de estadísticas

No utilices:

“90 % de los clientes prefieren...”

como una frase llamativa si no puedes respaldar ese dato.

Una cifra necesita contexto

Utilizar IA para redactar una frase de marca

ChatGPT, Claude o Gemini pueden ayudarte.

Por ejemplo:

Necesito una frase destacada para una Página web de [sector].

La idea que quiero comunicar es:

[explicar idea real]

Necesito:
- una sola frase;
- máximo 18 palabras;
- tono profesional;
- español neutro.

Debe parecer una declaración propia de la marca.

No cites ni atribuyas la frase a ninguna persona.
No inventes datos.

IA para reducir una frase

Tengo este texto:

[pegar texto]

Quiero convertirlo en una frase destacada de máximo 20 palabras.

Mantén la idea principal.

No agregues conceptos nuevos.

IA para diferenciar cita y Testimonio

Tengo estos textos:

[lista]

Clasifica cada uno como:
- frase de marca;
- cita atribuida;
- testimonio;
- texto explicativo.

Explica brevemente el motivo.

No inventes autores.

IA para revisar atribuciones

Puedes utilizar IA para ayudarte a detectar que una atribución necesita verificación, pero no debes confiar únicamente en una respuesta generada para publicar una cita real.

Si necesitas confirmar autoría:

verifica la fuente correspondiente antes de publicarla.

Prompt útil

Tengo esta frase atribuida a [persona]:

“[frase]”

No quiero que asumas que la atribución es correcta.

Indícame qué información debería verificar antes de publicarla:
- autoría;
- texto;
- contexto;
- fuente.

No inventes una fuente.

IA para crear variantes

Esta es nuestra frase institucional actual:

[frase]

Crea 5 alternativas que mantengan exactamente la misma idea.

Máximo 16 palabras.

Utiliza español neutro.

No introduzcas promesas, cifras ni beneficios adicionales.

IA para CSS

Por ejemplo:

Estoy personalizando una sección Citas o frases en Waclis.

La sección utiliza:
.cita-section

La frase:
.cita-text

El autor:
.cita-author

El cargo:
.cita-role

Necesito:
- frase de 44 px en desktop;
- 30 px en celular;
- ancho máximo de 850 px;
- centrada;
- Line height cómodo;
- autor separado 20 px;
- Padding vertical de 72 px en desktop y 40 px en celular.

No modifiques otras citas de la Página web.

No cambies HTML.

No agregues JavaScript.

Devuélveme solamente CSS limitado a .cita-section.

IA para revisar una composición

Tengo esta sección:

Frase:
[texto]

Autor:
[nombre]

Cargo:
[cargo]

Contexto:
[dónde aparecerá]

Revisa:
- si la frase es demasiado larga;
- si la atribución visual está clara;
- si parece un Testimonio en lugar de una cita;
- qué información podría eliminarse.

No cambies datos objetivos.

IA para una frase como transición

Tengo estas dos secciones:

Sección anterior:
[resumen]

Sección siguiente:
[resumen]

Necesito una frase de marca de máximo 16 palabras que funcione como transición entre ambas.

No atribuyas la frase a ninguna persona.
No inventes datos.

Buenas prácticas para Citas o frases

Recomendamos:

• utilizar una idea clara;

• mantener la frase relativamente breve;

• diferenciar citas de Testimonios;

• utilizar frases propias cuando sea apropiado;

• verificar autoría si atribuyes una frase;

• no inventar autores;

• no inventar cargos;

• utilizar Blockquote cuando corresponda;

• mantener jerarquía entre frase, autor y cargo;

• utilizar suficiente contraste;

• adaptar Typography a celular;

• no depender únicamente de una imagen;

• utilizar Navigator;

• mantener Linked styles cuando sean útiles;

• limitar CSS a la sección;

• utilizar animaciones moderadas;

• comprobar el resultado mediante Ver página.

Errores frecuentes

Confundir una cita con un Testimonio

Las experiencias de clientes deberían utilizar Testimonios.

Utilizar una frase sin relación con el contenido

Debe reforzar una idea relevante.

Copiar cualquier frase famosa de Internet

Comprueba autoría.

Atribuir incorrectamente una frase

No publiques hasta verificarla.

Inventar un autor

Utiliza una frase propia.

Inventar cargo o empresa

Los datos deben ser correctos.

Presentar una paráfrasis como cita literal

Diferencia ambos conceptos.

Utilizar una cita excesivamente larga

Resume o utiliza otro tipo de sección.

Utilizar demasiado Font size en móvil

Adapta Typography.

Reducir demasiado Font size solo para hacer entrar un texto largo

Revisa primero el contenido.

Utilizar una fotografía de stock como si fuera el autor

Puede resultar engañoso.

No completar Alt en una imagen relevante

Descríbela cuando corresponda.

Colocar texto sobre una fotografía sin suficiente contraste

Utiliza Overlay o cambia la composición.

Oscurecer demasiado la imagen

La fotografía también debe aportar valor.

Utilizar demasiadas frases consecutivas

Pierden protagonismo.

Utilizar Blockquote solamente para agrandar un texto

Utiliza Estilo para el diseño.

Clonar solo la frase

Clona la unidad completa si necesitas otra cita.

Clonar y dejar el autor anterior

Revisa toda la copia.

Repetir IDs personalizados

Mantén IDs únicos.

Eliminar la frase y dejar el autor

Reorganiza la unidad completa.

Eliminar Classes compartidas para evitar Linked styles

Puede ser innecesario.

Aplicar CSS global a blockquote

Limita el scope.

Aplicar CSS global a todos los Paragraphs

Puede afectar toda la Página web.

Utilizar Hover sobre una cita no interactiva

Puede sugerir una acción inexistente.

Depender de Hover para mostrar autor

Comprueba celular.

Animar palabra por palabra

Puede dificultar la lectura.

No revisar Ver página

Comprueba el frontend final.

Flujo recomendado

1. DEFINIR LA IDEA
↓
2. DECIDIR SI ES CITA, FRASE DE MARCA O TESTIMONIO
↓
3. VERIFICAR AUTORÍA SI CORRESPONDE
↓
4. ELEGIR DISEÑO
↓
5. AGREGAR CITA O FRASE
↓
6. REVISAR NAVIGATOR
↓
7. REEMPLAZAR TEXTO
↓
8. CONFIGURAR AUTOR / CARGO SI EXISTEN
↓
9. ELIMINAR ELEMENTOS DE EJEMPLO
↓
10. REEMPLAZAR IMAGEN SI EXISTE
↓
11. COMPLETAR ALT
↓
12. PERSONALIZAR TYPOGRAPHY
↓
13. CONFIGURAR BACKGROUND / OVERLAY
↓
14. REVISAR LINKED STYLES
↓
15. ADAPTAR RESPONSIVE
↓
16. GUARDAR CAMBIOS
↓
17. VER PÁGINA

Checklist antes de publicar una Cita o frase

• La frase tiene una función clara dentro de la página.

• Está relacionada con el contenido.

• Sé si es frase de marca, cita o Testimonio.

• Si es Testimonio, evalué utilizar la sección específica.

• Si es una cita atribuida, verifiqué quién la dijo o escribió.

• No inventé la autoría.

• El texto citado es correcto cuando se presenta como literal.

• El cargo del autor es correcto.

• La empresa del autor es correcta, si se muestra.

• No quedan nombres de ejemplo.

• No quedan cargos de ejemplo.

• La frase tiene una longitud adecuada.

• La frase expresa una idea principal.

• Las comillas están utilizadas de forma consistente.

• El autor está visualmente relacionado con la frase.

• El cargo tiene menor jerarquía.

• La fotografía corresponde realmente al autor si se utiliza.

• Tengo autorización para utilizar la fotografía cuando corresponde.

• Completé Alt si la imagen aporta información.

• La Typography es legible.

• El Line height es cómodo.

• Existe suficiente contraste.

• Overlay está correctamente configurado si corresponde.

• La Section tiene Padding adecuado.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• La frase no ocupa una cantidad desproporcionada de pantalla.

• El autor no queda demasiado separado.

• No existe scroll horizontal.

• Revisé Navigator.

• Los IDs personalizados son únicos.

• Linked styles tiene el alcance esperado.

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

• No dependo únicamente de Hover.

• Las animaciones son moderadas.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

La sección Citas o frases permite destacar una idea dentro de tu Página web.

Puede utilizarse para:

FRASE DE MARCA

CITA ATRIBUIDA

DECLARACIÓN DESTACADA

pero no debe confundirse automáticamente con:

TESTIMONIO DE CLIENTE

La diferencia principal es:

Cita o frase → destaca una idea.

Testimonio → comunica una experiencia real de un cliente.

Dentro del Editor de bloques puedes utilizar:

Secciones → Citas o frases

o construir tu propia composición mediante:

Componentes → Blockquote

Una estructura sencilla puede ser:

Blockquote
↓
Frase

Author
↓
Nombre

Role
↓
Cargo

Pero no todas las frases necesitan autor.

Una declaración propia puede presentarse simplemente como:

LAS MEJORES SOLUCIONES COMIENZAN ENTENDIENDO QUÉ PROBLEMA NECESITAMOS RESOLVER.

El punto más importante cuando utilizas una cita atribuida es:

no publiques una frase como si perteneciera a una persona sin verificar su autoría.

Si no puedes confirmarla, considera:

• utilizar otra;

• parafrasear la idea;

• crear una frase propia de la marca.

También recuerda que una frase destacada funciona mejor cuando es relativamente breve.

No utilices Typography cada vez más pequeña para hacer entrar un texto que realmente debería ser un Paragraph.

En responsive:

Desktop
“FRASE EN DOS LÍNEAS”

puede transformarse en:

Mobile
“FRASE
EN CUATRO
O CINCO
LÍNEAS”

Por eso revisa:

• Font size;

• Line height;

• Padding;

• ancho.

Finalmente:

Guardar Cambios → Ver página → revisar desktop, tablet y celular.

Una buena sección de Citas o frases debe conseguir que el visitante se detenga unos segundos y retenga una idea importante.

No necesita ser compleja.

Necesita ser:

• relevante;

• legible;

• correctamente atribuida cuando corresponda;

• coherente con el resto del contenido.