¿Cómo utilizar Servicios en el Editor de bloques de Waclis?

La sección Servicios del Editor de bloques de Waclis permite presentar de forma organizada las soluciones, prestaciones o actividades que una empresa ofrece a sus clientes.

Puedes utilizarla para mostrar:

• servicios profesionales;

• soluciones empresariales;

• instalaciones;

• consultoría;

• mantenimiento;

• implementación;

• diseño;

• producción;

• soporte;

• asesoramiento;

• capacitación;

• logística;

• desarrollo;

• servicios técnicos;

• otras prestaciones ofrecidas por tu empresa.

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

Secciones → Servicios

Según la composición elegida podrás personalizar elementos como:

• íconos;

• imágenes;

• nombres de servicios;

• descripciones;

• Cards;

• Links;

• Buttons;

• fondos;

• columnas;

• espacios;

• Hover;

• comportamiento responsive.

¿Qué es un Servicio?

Un servicio describe qué actividad, solución o prestación puede recibir o contratar un cliente.

Por ejemplo:

Diseño de Página web

Instalación

Mantenimiento preventivo

Consultoría

Capacitación

Soporte técnico

La pregunta principal es

¿Qué hacemos por el cliente?

Si el texto responde correctamente esa pregunta, probablemente estás describiendo un servicio.

Servicios, Características y Beneficios no son lo mismo

Esta distinción es fundamental para organizar correctamente el contenido.

Servicio

Responde:

¿Qué ofrecemos?

Por ejemplo:

Implementación de sistemas

Característica

Responde:

¿Qué incluye o cómo funciona?

Por ejemplo:

Configuración inicial incluida

Beneficio

Responde:

¿Qué obtiene el cliente gracias a ello?

Por ejemplo:

Reduce el tiempo necesario para comenzar a utilizar la solución.

Ejemplo completo

SERVICIO

Implementación

CARACTERÍSTICA

Configuración y puesta en marcha

BENEFICIO

Permite comenzar a trabajar con una solución adaptada al entorno del cliente.

Otro ejemplo

Una empresa de mantenimiento podría comunicar:

SERVICIO

Mantenimiento preventivo

CARACTERÍSTICA

Revisión periódica de componentes

BENEFICIO

Ayuda a detectar problemas antes de que generen interrupciones mayores.

Otro ejemplo

Una agencia podría presentar:

SERVICIO

Diseño de identidad visual

CARACTERÍSTICA

Desarrollo de logotipo y sistema gráfico

BENEFICIO

Permite mantener una identidad visual coherente en diferentes aplicaciones.

¿Por qué es importante diferenciarlos?

Porque una sección de Servicios debería permitir que el visitante entienda rápidamente:

qué puede solicitar o contratar.

Si en lugar de eso todas las Cards dicen:

Calidad
Innovación
Confianza
Tecnología

no queda claro qué servicio ofrece realmente la empresa.

Ejemplo poco claro

NUESTROS SERVICIOS

[ Calidad ]

[ Innovación ]

[ Compromiso ]

Esos conceptos pueden representar:

• valores;

• beneficios;

• cualidades;

pero no servicios.

Ejemplo más claro

NUESTROS SERVICIOS

[ Diseño ]

[ Producción ]

[ Instalación ]

Servicios vs Contenidos destacados

También pueden parecer similares porque ambos pueden utilizar Cards.

La diferencia está en la finalidad.

Servicios

Presenta:

el conjunto de soluciones que ofrece la empresa.

Contenidos destacados

Presenta:

una selección de contenidos a los que quieres dar prioridad.

Ejemplo

Servicios:

Diseño
Producción
Instalación
Logística

Contenidos destacados:

SERVICIO DESTACADO

Producción corporativa para grandes volúmenes

[ CONOCER MÁS ]

Puedes utilizar ambas secciones

Por ejemplo:

SERVICIOS

[ A ] [ B ] [ C ] [ D ]

↓

CONTENIDO DESTACADO

Solución especial para empresas

[ VER MÁS ]

Servicios vs Portafolio

Servicios

explica lo que puedes hacer.

Portafolio

muestra trabajos que ya realizaste.

Ejemplo

SERVICIO

Diseño de espacios comerciales

Después:

PORTAFOLIO

Proyecto Local A
Proyecto Local B
Proyecto Local C

Servicios vs Tabla de precios

Una sección Servicios explica la oferta.

La Tabla de precios compara alternativas comerciales.

Por ejemplo

SERVICIO

Mantenimiento

puede tener después:

PLAN BÁSICO

PLAN PROFESIONAL

PLAN EMPRESA

en una Tabla de precios.

¿Cuándo conviene utilizar Servicios?

Puede ser especialmente útil en:

• Home;

• página institucional;

• página Servicios;

• landing pages;

• páginas orientadas a un sector;

• páginas comerciales.

Home

Puedes presentar solamente los servicios principales.

Por ejemplo:

NUESTROS SERVICIOS

[ Diseño ]

[ Producción ]

[ Instalación ]

[ VER TODOS ]

Página Servicios

Puedes desarrollar un catálogo más completo.

Por ejemplo:

DISEÑO

PRODUCCIÓN

INSTALACIÓN

LOGÍSTICA

MANTENIMIENTO

ASESORAMIENTO

Landing page

Puedes presentar únicamente aquellos servicios relacionados con la campaña.

No necesitas mostrar todo en todas las páginas

El contenido debería responder al contexto.

¿Cómo agregar la sección Servicios?

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

Después abre:

Secciones

y selecciona:

Servicios

Paso 1: elige una composición

Waclis mostrará los diseños disponibles.

Puedes encontrar alternativas basadas en:

• Cards;

• iconos;

• imágenes;

• columnas;

• títulos y descripciones;

• Buttons o Links;

• diferentes distribuciones.

Elige principalmente según:

• cantidad de servicios;

• cantidad de información;

• importancia visual de las imágenes;

• necesidad de enlazar páginas específicas;

• posición de la sección.

No elijas solamente por los iconos de ejemplo

Piensa cómo funcionará con tus servicios reales.

Por ejemplo:

una composición con seis pequeñas Cards puede ser adecuada si cada servicio necesita:

Ícono
Título
Descripción breve

Pero si cada uno necesita:

• fotografía;

• explicación;

• CTA;

puede ser mejor una composición con menos columnas.

Paso 2: agrega la sección

Selecciona el diseño.

Después podrás modificar cada servicio individualmente.

Paso 3: utiliza Navigator

Una estructura conceptual habitual puede ser:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Grid Column
        │   └── Service Card
        │       ├── Icon / Image
        │       ├── Heading
        │       ├── Paragraph
        │       └── Link / Button
        │
        ├── Grid Column
        │   └── Service Card
        │
        └── Grid Column
            └── Service Card

La estructura exacta dependerá del diseño seleccionado.

¿Por qué Navigator es importante?

Porque si haces clic sobre:

Instalación

probablemente selecciones solamente:

Heading

Pero si necesitas:

• clonar;

• eliminar;

• mover;

• cambiar el fondo;

• modificar el Hover;

debes localizar la unidad completa del servicio.

Conceptualmente

Service Card
├── Icon / Image
├── Heading
├── Paragraph
└── Link

Esa es la unidad que normalmente debes tratar como un solo elemento

Paso 4: define primero qué servicios ofrecerás

Antes de diseñar, haz una lista.

Por ejemplo:

Diseño
Producción
Instalación
Logística
Mantenimiento
Consultoría

Después revisa si todos pertenecen al mismo nivel

Por ejemplo:

Diseño de Página web
Mantenimiento
Calidad
Consultoría
Entrega en 24 horas

mezcla:

• servicios;

• cualidades;

• características.

Reorganiza

Servicios:

Diseño de Página web
Mantenimiento
Consultoría

Características o beneficios:

Entrega en 24 horas
Atención personalizada

si corresponden realmente a la propuesta.

Mantén un criterio

Una sección Servicios debería sentirse como un catálogo comprensible de soluciones.

Paso 5: define cuáles son principales

No todos los servicios tienen necesariamente la misma importancia.

Puedes decidir:

PRINCIPALES

Diseño
Producción
Instalación

y después:

COMPLEMENTARIOS

Logística
Mantenimiento
Asesoramiento

Esto puede ayudar cuando existen muchos

Otra posibilidad

mostrar solamente los principales en Home:

[ A ] [ B ] [ C ]

y agregar:

[ VER TODOS LOS SERVICIOS ]

No fuerces todos dentro de la Home

Paso 6: modifica el Heading general

Puedes utilizar:

Nuestros servicios

Qué hacemos

Cómo podemos ayudarte

Soluciones

Servicios profesionales

Conoce nuestros servicios

“Nuestros servicios” suele ser suficiente

Es directo y fácil de comprender.

Utiliza “Soluciones” cuando corresponda al lenguaje comercial de la empresa

Pero evita que el término vuelva demasiado abstracto el contenido.

Por ejemplo

SOLUCIONES

Innovación
Experiencia
Calidad

sigue sin explicar qué se ofrece.

Mejor

SOLUCIONES

Implementación
Capacitación
Soporte

Paso 7: agrega una introducción

Puede ayudar a contextualizar.

Por ejemplo:

Acompañamos cada proyecto mediante servicios de diseño, producción e implementación.

Otro ejemplo

Conoce las principales soluciones que ofrecemos para empresas y organizaciones.

Mantén la introducción breve

Las Cards desarrollarán el contenido.

Paso 8: redacta el nombre de cada servicio

Debe ser fácil de comprender.

Buenos ejemplos

Diseño de Página web

Implementación

Mantenimiento

Capacitación

Producción gráfica

Asesoramiento técnico

Evita nombres excesivamente comerciales

Por ejemplo:

Soluciones 360° de excelencia

puede sonar atractivo pero no explica qué servicio se presta.

Mejor

Consultoría integral

si realmente representa el servicio.

Y después explicar el alcance.

Evita nombres internos

Por ejemplo:

Programa X7

si el cliente no sabe qué significa.

Puedes utilizar el nombre comercial

si debajo agregas una explicación clara.

Por ejemplo:

PROGRAMA X7

Servicio de acompañamiento para...

Paso 9: redacta una descripción breve

La descripción debería responder:

¿Qué hacemos dentro de este servicio?

Ejemplo

DISEÑO DE PÁGINA WEB

Diseñamos y configuramos Páginas web adaptadas a la identidad y necesidades de cada proyecto.

Otro ejemplo

INSTALACIÓN

Coordinamos la instalación y puesta en funcionamiento de los elementos correspondientes al proyecto.

Otro

CAPACITACIÓN

Brindamos capacitación para que el equipo pueda utilizar correctamente las herramientas implementadas.

Evita descripciones genéricas

Por ejemplo:

Brindamos el mejor servicio con máxima calidad y compromiso.

Esto podría utilizarse prácticamente para cualquier Card.

Mejor describe qué ocurre

Realizamos el relevamiento, configuración e implementación inicial de la solución.

Después puedes explicar el beneficio

si aporta valor:

para que el equipo pueda comenzar a utilizarla de forma organizada.

Estructura útil

Qué hacemos
+
para qué sirve

Ejemplo

MANTENIMIENTO

Realizamos revisiones periódicas y tareas preventivas para mantener los equipos en condiciones adecuadas de funcionamiento.

Mantén la descripción relativamente breve

Si cada servicio necesita varios párrafos:

considera crear una página específica.

Card = resumen

Página de servicio = detalle.

Paso 10: ícono o imagen

Los Servicios pueden representarse mediante:

• Font Icon;

• Svg Icon;

• Image;

según la composición.

Íconos

Funcionan especialmente bien cuando necesitas una grilla simple.

Por ejemplo:

[ herramienta ]
Mantenimiento

[ lápiz ]
Diseño

[ personas ]
Capacitación

Utiliza iconos relacionados

Evita seleccionar símbolos únicamente porque se ven bonitos.

Mantén una misma familia visual

Por ejemplo:

• todos lineales;

• todos rellenos;

• mismo grosor;

• tamaño similar.

Evita combinar

emoji
+
SVG lineal
+
fotografía
+
ícono 3D

sin intención.

No necesitas un icono si no aporta

Una Card puede funcionar simplemente con:

NÚMERO

SERVICIO

DESCRIPCIÓN

Imágenes

Pueden ser mejores cuando el servicio es visual.

Por ejemplo:

[ fotografía de instalación ]

INSTALACIÓN

Otros casos

• arquitectura;

• construcción;

• eventos;

• fotografía;

• producción;

• diseño;

• mantenimiento.

Utiliza fotografías relacionadas con el servicio

Evita una fotografía genérica que no representa el trabajo

Paso 11: completa Alt

Si la imagen aporta información, utiliza una descripción adecuada.

Por ejemplo:

Instalación de equipamiento en un espacio comercial

Evita

servicio1

Paso 12: Cover vs Contain

Para fotografías de servicio:

Cover

puede ayudar a mantener Cards uniformes.

Para:

• diagramas;

• logotipos;

• producto completo;

Contain

puede ser más apropiado.

Revisa cada imagen

No utilices Cover automáticamente si corta el elemento principal.

Paso 13: configura el CTA

Si existe una página específica puedes utilizar:

Conocer servicio

Ver más

Conocer más

Solicitar información

Solicitar presupuesto

Elige según el siguiente paso real

Para una página informativa

Conocer servicio

Para contacto comercial

Solicitar presupuesto

puede tener sentido.

No utilices

Comprar

si el servicio requiere primero una evaluación.

Evita CTA ambiguos

Ir

Continuar

CTA específico

suele ser más claro.

Paso 14: configura la URL

Selecciona mediante Navigator el:

Link

correspondiente.

Revisa:

Contenido → Url

Cambiar el Button no cambia automáticamente la URL

Por ejemplo:

Texto:
Conocer instalación

pero Url:

/servicios/diseno

puede ocurrir después de clonar.

Por eso revisa

SERVICIO
↓
CTA
↓
URL

Los tres deben corresponder.

Prueba todos los Links

Después de guardar:

Ver página → abrir cada servicio

Servicio sin página específica

No necesitas agregar un CTA individual.

Puedes utilizar:

Icon
Nombre
Descripción

y un CTA general debajo.

Por ejemplo

¿QUIERES CONOCER QUÉ SERVICIO SE ADAPTA A TU PROYECTO?

[ CONTACTAR ]

Esto puede reducir ruido

si tienes seis Cards.

Un Button en cada Card no es obligatorio

Paso 15: páginas específicas para servicios

Cuando un servicio necesita mayor desarrollo, puedes utilizar una página independiente.

Estructura posible

NOMBRE DEL SERVICIO

↓

INTRODUCCIÓN

↓

BENEFICIOS

↓

CARACTERÍSTICAS

↓

PROCESO / TIMELINE

↓

PORTAFOLIO

↓

FAQ

↓

CTA

La Card de Servicios funciona entonces como entrada

[ Servicio ]

Descripción breve

[ CONOCER SERVICIO ]

Esto es especialmente útil cuando existen diferencias importantes entre servicios.

No intentes meter toda la explicación dentro de Home

Paso 16: cantidad de Servicios

No existe una cantidad obligatoria.

Tres

[ A ] [ B ] [ C ]

pueden funcionar muy bien.

Cuatro

[ A ] [ B ] [ C ] [ D ]

Seis

[ A ] [ B ] [ C ]

[ D ] [ E ] [ F ]

Muchos más

pueden necesitar organización adicional.

Si tienes 12 servicios

puedes agruparlos.

Por ejemplo:

DISEÑO

[ A ][ B ][ C ]

IMPLEMENTACIÓN

[ D ][ E ][ F ]

SOPORTE

[ G ][ H ]

No muestres 12 Cards idénticas sin clasificación

si el visitante tendrá dificultad para comprenderlas.

Categorías de servicios

Puedes organizar según:

• tipo;

• etapa;

• sector;

• público.

Ejemplo por etapa

ANTES DEL PROYECTO

Consultoría
Relevamiento

DURANTE

Diseño
Implementación

DESPUÉS

Capacitación
Soporte

Ejemplo por público

PARA EMPRESAS

[ servicios ]

PARA PROFESIONALES

[ servicios ]

No mezcles criterios

Por ejemplo:

Diseño
Empresas
Mantenimiento
Argentina

como categorías equivalentes.

Paso 17: orden

Coloca primero los servicios:

• principales;

• más demandados;

• más representativos;

• relacionados con el objetivo de la página.

No es obligatorio orden alfabético

Por ejemplo

Diseño
Producción
Instalación
Mantenimiento

puede seguir el recorrido del proyecto.

Orden por proceso

Puede resultar intuitivo.

Pero no conviertas la sección en Timeline

si únicamente estás enumerando servicios.

Si necesitas explicar una secuencia temporal

utiliza Timeline, que veremos en el siguiente tutorial.

Paso 18: destacar un Servicio

Puedes darle mayor protagonismo a uno cuando tenga sentido.

Por ejemplo:

SERVICIO DESTACADO

Implementación integral

Puedes utilizar

• color;

• Badge;

• mayor Card;

• posición inicial.

No destaques todos

Etiquetas útiles

NUEVO

RECOMENDADO

PARA EMPRESAS

Utilízalas solamente cuando aporten información.

“Nuevo”

requiere mantenimiento.

“Más elegido”

debería utilizarse únicamente si realmente puedes sostener esa afirmación.

“Recomendado”

puede representar una recomendación editorial de la empresa.

Cards de Servicios

Una estructura típica:

╭────────────────────────────╮
│                            │
│           ÍCONO            │
│                            │
│       MANTENIMIENTO        │
│                            │
│ Revisiones y tareas...     │
│                            │
│     [ CONOCER MÁS ]        │
│                            │
╰────────────────────────────╯

Puedes personalizar

• Background;

• Border;

• Border radius;

• Padding;

• Typography;

• sombra.

Mantén consistencia entre las Cards

Linked styles

Esta sección suele beneficiarse especialmente de estilos compartidos.

Por ejemplo:

servicio-card

puede utilizarse en todos.

Esto permite mantener

• mismo Padding;

• mismo borde;

• mismo Hover;

• misma Typography.

Si Waclis muestra Linked styles

puede ser exactamente el comportamiento deseado.

No agregues un ID distinto a cada Card solamente para evitar estilos compartidos.

Excepción

Para una Card especial:

class="servicio-card servicio-destacado"

puede conservar el diseño general y agregar una diferencia.

Clonar un Servicio

Utiliza Navigator.

Procedimiento recomendado

1. Localiza la Card completa.
2. Selecciona la unidad.
3. Clona elemento.
4. Cambia ícono o Image.
5. Actualiza Alt.
6. Cambia Heading.
7. Cambia Paragraph.
8. Cambia CTA.
9. Cambia Url.
10. Revisa ID.
11. Revisa responsive.

No clones solamente Heading

No clones solamente Icon

La unidad completa debería ser algo similar a

Service Card
├── Icon
├── Heading
├── Paragraph
└── Link

Error típico

Clonas:

Diseño

para crear:

Instalación

Cambias:

• icono;

• título;

pero dejas:

Descripción:
Diseñamos...

o:

Link:
/servicio/diseno

Revisa toda la Card

IDs personalizados

Si el servicio original utiliza:

id="servicio-diseno"

la copia debe utilizar:

id="servicio-instalacion"

u otro ID único.

Eliminar un Servicio

Selecciona la unidad completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas algo incorrectamente:

Deshacer

No elimines únicamente el título

dejando:

ícono
descripción
Button

sin identificar el servicio.

Si quieres retirar la oferta

elimina o reorganiza la Card completa.

Después de eliminar

revisa Grid Row.

Ejemplo

Antes:

[ A ] [ B ] [ C ] [ D ]

Después:

[ A ] [ B ] [ C ]

Puede ser conveniente redistribuir las columnas

Mover Servicios

Puedes modificar su orden.

Selecciona la Card completa.

No muevas únicamente el ícono

Utiliza Navigator

para evitar combinar:

Ícono de Diseño
+
Título Instalación
+
Descripción Mantenimiento

Grid responsive

Servicios suele utilizar una grilla.

Tres columnas en desktop

[ A ] [ B ] [ C ]

Tablet

puede convertirse en:

[ A ] [ B ]

[ C ]

Mobile

[ A ]

[ B ]

[ C ]

Cuatro servicios

Desktop:

[ A ] [ B ] [ C ] [ D ]

Tablet:

[ A ] [ B ]

[ C ] [ D ]

Mobile:

[ A ]

[ B ]

[ C ]

[ D ]

Utiliza Grid Row

para definir la estructura según tamaños de pantalla.

Recuerda

los iconos superiores de:

• celular;

• tablet;

• desktop;

son de previsualización.

No configuran por sí solos las columnas.

No mantengas cuatro Cards estrechas en celular

Dos por fila en móvil

puede funcionar si cada Card contiene solamente:

Icon
Título

o:

Icon
Título
Descripción muy breve

Pero una Card con

• fotografía;

• descripción;

• Button;

probablemente necesite una sola columna.

Prueba el contenido real

Altura de Cards

Las descripciones pueden variar.

Evita Height fijo como primera solución

.servicio-card {
    height: 400px;
}

puede generar problemas.

Primera solución

Mantén una cantidad de contenido razonablemente similar.

Segunda

Utiliza una estructura flexible.

No agregues palabras innecesarias únicamente para igualar alturas.

Buttons alineados

Puede ser visualmente agradable que todos aparezcan a una altura similar.

Si no ocurre

revisa primero la estructura.

No agregues:

margin-top: 73px

a una Card particular para compensar.

Una estructura flexible suele ser más robusta.

Fotografías de Servicios

Si utilizas Images:

mantén una proporción coherente.

Por ejemplo

[ imagen ]

SERVICIO

en todas las Cards.

Cover puede ayudar a uniformarlas.

Pero comprueba cada recorte.

Si una fotografía necesita una altura diferente

pregúntate si otra imagen sería más adecuada.

No deformes el material.

Iconos

Si la composición utiliza iconos:

mantén un tamaño similar.

Por ejemplo

32 px
40 px
48 px

pueden ser valores razonables según el diseño.

No son una obligación.

Evita un servicio con icono enorme y otro diminuto.

Contenedor de icono

Puedes utilizar:

( ÍCONO )

mediante:

• Background;

• Border radius;

• Padding.

Esto puede ayudar a unificar iconos con proporciones diferentes.

Typography

Jerarquía habitual:

SERVICIO       ← Heading

Descripción    ← Paragraph

CTA            ← acción

No hagas la descripción tan grande como el nombre.

Heading

debe ser fácilmente escaneable.

Descripción

puede utilizar menor peso y tamaño.

CTA

debe reconocerse como acción.

Fondo de Cards

Puede ser:

• blanco;

• gris;

• color suave;

• transparente.

Fondo de Section

puede diferenciar todo el bloque del resto de la página.

No utilices demasiados colores distintos

uno por servicio sin una lógica.

Puede funcionar si existen categorías con códigos de color

pero debe ser intencional.

Hover

Puede utilizarse sobre Cards.

Si toda la Card es clicable

un Hover puede ayudar a comunicarlo.

Si solo el Button es clicable

mantén el efecto moderado para no confundir.

Ejemplo

Card
↓
Hover
↓
sombra ligeramente mayor

No ocultes la descripción hasta Hover

La información debería seguir disponible en dispositivos táctiles.

Animaciones

Puedes utilizar:

Avanzado → Animate on scroll

sobre:

• Section;

• Grid Row;

• Cards.

Una entrada suave por Card puede ser suficiente.

Evita

ícono anima
título anima
texto anima
Button anima

por separado en seis Cards.

Demasiada animación puede dificultar recorrer la oferta.

Servicios en Home

Una estructura muy efectiva puede ser:

QUÉ HACEMOS

[ Servicio A ]
[ Servicio B ]
[ Servicio C ]

[ VER TODOS LOS SERVICIOS ]

Resume

No intentes desarrollar cada servicio completamente.

Página Servicios

Puede ampliar:

SERVICIO A
descripción
CTA

SERVICIO B
descripción
CTA

Y cada servicio puede tener su propia página.

Servicios en una landing

Utiliza únicamente los relacionados con la campaña.

Ejemplo

Landing de empresas:

SERVICIOS PARA EMPRESAS

[ Consultoría ]

[ Implementación ]

[ Capacitación ]

No muestres:

Servicio particular

si no forma parte del objetivo de esa landing.

Servicios por sectores

También puedes organizar:

PARA RETAIL

[ servicios ]

PARA INDUSTRIA

[ servicios ]

Evita duplicar la misma Card varias veces

si puede explicarse de manera más clara.

Servicio general vs específico

Por ejemplo:

Marketing

puede ser demasiado amplio.

Puedes utilizar:

Gestión de redes sociales

Campañas digitales

Producción de contenido

como servicios separados si realmente se contratan o comunican de esa manera.

Pero tampoco fragmentes excesivamente

Por ejemplo:

Cambiar título
Cambiar imagen
Cambiar botón

no deberían convertirse necesariamente en tres servicios diferentes si forman parte de uno mayor.

El nivel de detalle debería corresponder a cómo compra o comprende el cliente.

Servicio principal + subservicios

Puedes estructurar:

DESARROLLO WEB

Incluye:

- Página institucional
- Landing pages
- Integraciones

En ese caso

puede ser mejor una Card principal con descripción,

en lugar de cuatro Cards equivalentes.

Acordeón para detalles

Si un servicio tiene muchos componentes:

SERVICIO

Resumen

↓

ACORDEÓN

Qué incluye
Proceso
Requisitos
Preguntas frecuentes

puede resultar más claro.

Servicios y Características

Puedes utilizar:

SERVICIO

↓

CARACTERÍSTICAS DEL SERVICIO

Ejemplo

IMPLEMENTACIÓN

↓

Incluye:

Relevamiento
Configuración
Capacitación

Servicios y Beneficios

Después:

BENEFICIOS

Acompañamiento
Centralización
Reducción de tareas manuales

si esas afirmaciones corresponden.

Servicios y Portafolio

Una combinación especialmente potente:

SERVICIO

Diseño de espacios

↓

PORTAFOLIO

[ Proyecto A ]
[ Proyecto B ]
[ Proyecto C ]

El visitante comprende:

qué haces

y después:

qué has hecho.

Servicios y Testimonios

También:

SERVICIO
↓
TESTIMONIO

puede aportar contexto.

Servicios y Tabla de precios

Cuando existen planes:

SERVICIO

↓

TABLA DE PRECIOS

Servicios y CTA

Al final:

¿NECESITAS ESTE SERVICIO?

[ SOLICITAR PRESUPUESTO ]

CTA general

Puede ser mejor que seis Buttons iguales.

Depende del recorrido.

Servicios y Timeline

Si necesitas explicar cómo se presta un servicio:

1. Relevamiento
2. Propuesta
3. Implementación
4. Entrega

la sección Timeline puede ser más apropiada para esa parte.

No utilices Cards de Servicios para simular pasos

si el visitante necesita comprender una secuencia.

Servicio estático vs contenido dinámico

Una Card de Servicio creada en el Editor de bloques es contenido editable.

Si cambian:

• alcance;

• nombre;

• condición;

• CTA;

debes actualizar la Card.

No asumas actualización automática.

Especialmente si escribes

Desde USD XX

Ese precio puede quedar desactualizado.

Si necesitas comparar precios, utiliza la sección:

Tabla de precios

y mantén los valores vigentes.

Disponibilidad temporal

Si un servicio está disponible solamente durante un período:

indícalo correctamente y actualiza cuando termine.

No dejes visible un servicio que ya no se ofrece.

Servicios nuevos

Puedes utilizar una etiqueta:

NUEVO

pero revísala después.

Servicio discontinuado

Puedes:

• eliminar la Card;

• reemplazarla;

• actualizar su contenido.

No mantengas un CTA hacia una página eliminada.

Mantenimiento

Revisa periódicamente:

• servicios vigentes;

• nombres;

• descripciones;

• imágenes;

• CTA;

• URLs;

• etiquetas.

No necesitas actualizar el diseño constantemente

Pero sí la información.

CSS personalizado

En personalizaciones avanzadas puedes utilizar Classes como:

servicios-section
servicios-grid
servicio-card
servicio-icon
servicio-image
servicio-title
servicio-text
servicio-link

Card

.servicios-section .servicio-card {
    padding: 24px;
    border-radius: 16px;
}

Imagen

.servicios-section .servicio-image {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

Hover

.servicios-section .servicio-card {
    transition: transform .2s ease;
}

.servicios-section .servicio-card:hover {
    transform: translateY(-3px);
}

Estas Classes son ejemplos

No representan necesariamente las Classes originales de todas las secciones prediseñadas.

Utiliza scope

Evita:

.card {
    padding: 24px;
}

También evita:

img {
    height: 260px;
}

Podrías afectar otros elementos de la Página web.

Utiliza primero las herramientas visuales

Antes de CSS revisa:

• Grid Row;

• Padding;

• Margin;

• Background;

• Border;

• Border radius;

• Typography;

• Width;

• Height.

CSS debería utilizarse cuando realmente necesitas un ajuste adicional.

HTML

Puedes utilizar:

Editar código HTML <>

si necesitas comprender una Card compleja.

Por ejemplo

Link
└── Service Card
    ├── Icon
    ├── Heading
    └── Paragraph

No necesitas HTML para cambiar

• título;

• descripción;

• imagen;

• color;

• Padding.

Conserva Classes estructurales

si el diseño ya funciona.

JavaScript

Una grilla estática de Servicios normalmente no necesita JavaScript personalizado.

No agregues JavaScript para:

• cambiar Hover;

• agrandar iconos;

• ajustar espacios.

Utiliza CSS o Estilo.

Si una composición posee interacción específica

conserva la estructura y pruébala.

Responsive

Después de terminar la sección revisa:

• desktop;

• tablet;

• celular.

Desktop

[ SERVICIO A ] [ SERVICIO B ] [ SERVICIO C ]

Mobile

[ SERVICIO A ]

[ SERVICIO B ]

[ SERVICIO C ]

Comprueba

• imágenes;

• títulos;

• descripciones;

• Buttons;

• iconos;

• separación.

No ocultes servicios importantes en móvil

solo porque la grilla no entra.

Corrige la distribución.

Títulos en móvil

Un servicio como:

Desarrollo de soluciones tecnológicas personalizadas

puede ocupar muchas líneas.

Puedes simplificar

Desarrollo a medida

si conserva correctamente el significado.

No reduzcas todo a un Font size demasiado pequeño.

Descripciones en móvil

Se vuelven más largas visualmente.

Por eso evita párrafos excesivos.

CTA

Debe seguir siendo cómodo de seleccionar.

Buttons muy largos

Por ejemplo:

SOLICITAR INFORMACIÓN SOBRE ESTE SERVICIO

puede simplificarse:

Solicitar información

Scroll horizontal

Si aparece:

revisa:

• Width;

• Min Width;

• Grid;

• Margin;

• imagen;

• Button.

No utilices:

body {
    overflow-x: hidden;
}

como solución sin encontrar el origen.

Ejemplo práctico: tres Servicios

Queremos:

NUESTROS SERVICIOS

[ ÍCONO ]
DISEÑO
Desarrollamos propuestas adaptadas a cada proyecto.
[ CONOCER MÁS ]

[ ÍCONO ]
PRODUCCIÓN
Coordinamos la fabricación de los elementos definidos.
[ CONOCER MÁS ]

[ ÍCONO ]
INSTALACIÓN
Realizamos la instalación y puesta en funcionamiento.
[ CONOCER MÁS ]

Paso 1

Abre:

Secciones → Servicios

Paso 2

Selecciona una composición de tres Cards.

Paso 3

Utiliza Navigator.

Paso 4

Identifica cada Card completa.

Paso 5

Modifica Heading general.

Paso 6

Reemplaza iconos o imágenes.

Paso 7

Actualiza los nombres.

Paso 8

Actualiza las descripciones.

Paso 9

Configura los CTA.

Paso 10

Configura las URLs.

Paso 11

Revisa Linked styles.

Paso 12

Personaliza:

• Padding;

• Border;

• Border radius;

• Typography;

• fondo.

Paso 13

Configura Grid responsive.

Paso 14

Revisa desktop.

Paso 15

Revisa tablet.

Paso 16

Revisa celular.

Paso 17

Guarda.

Paso 18

Utiliza:

Ver página

Paso 19

Abre los tres servicios.

Ejemplo práctico: Servicios con imágenes

[ FOTO ]

MANTENIMIENTO

Revisión y mantenimiento periódico de equipos.

[ CONOCER SERVICIO ]

Utiliza la misma lógica de imagen

en todas las Cards.

Ejemplo práctico: Servicios sin CTA individual

QUÉ HACEMOS

[ ÍCONO ]
Consultoría

[ ÍCONO ]
Implementación

[ ÍCONO ]
Capacitación

[ ÍCONO ]
Soporte

¿Quieres saber cuál se adapta a tu empresa?

[ CONTACTAR ]

Esto puede resultar muy claro.

Ejemplo práctico: servicios por etapas

PLANIFICACIÓN

Consultoría
Relevamiento

IMPLEMENTACIÓN

Configuración
Integración

ACOMPAÑAMIENTO

Capacitación
Soporte

Ejemplo práctico: Home resumida

NUESTROS PRINCIPALES SERVICIOS

[ A ] [ B ] [ C ]

[ VER TODOS LOS SERVICIOS ]

¿Qué hacer si no sé qué es un Servicio?

Pregunta:

¿El cliente puede contratar, solicitar o recibir esto como una prestación?

Si la respuesta es sí:

probablemente sea un servicio.

Si responde

¿Qué tiene?

probablemente sea una característica.

Si responde

¿Qué obtiene?

probablemente sea un beneficio.

Ejemplo

SERVICIO
Consultoría

CARACTERÍSTICA
Reunión inicial de análisis

BENEFICIO
Permite definir necesidades antes de implementar

¿Qué hacer si todos mis servicios tienen nombres genéricos?

Agrega mayor precisión.

En lugar de

Asesoramiento

puede ser:

Asesoramiento técnico

En lugar de

Diseño

puede ser:

Diseño de espacios comerciales

No agregues palabras innecesarias

Busca precisión.

¿Qué hacer si tengo un servicio muy amplio?

Puedes:

• mantenerlo como Card principal;

• explicar subservicios en su página.

Por ejemplo

MARKETING DIGITAL

y después:

Campañas
Contenido
Redes
Analítica

en el detalle.

¿Qué hacer si tengo demasiados servicios?

Agrupa por:

• categoría;

• etapa;

• sector.

O selecciona los principales en Home.

¿Qué hacer si tengo solamente un servicio?

No necesitas una grilla de Servicios.

Puede resultar mejor:

• Texto e imagen;

• Banner;

• CTA;

• página específica.

La sección Servicios aporta más valor cuando existe un conjunto de ofertas.

¿Qué hacer si tengo dos?

Puede utilizarse perfectamente:

[ A ] [ B ]

No inventes una tercera para completar la fila.

¿Qué hacer si quiero una cuarta Card?

Clona una unidad completa.

Después revisa Grid.

¿Qué hacer si al clonar queda el icono anterior?

Cámbialo.

¿Qué hacer si queda la descripción anterior?

Actualízala.

¿Qué hacer si queda el Link anterior?

Actualiza Url.

¿Qué hacer si queda el mismo ID?

Cámbialo.

¿Qué hacer si cambio el color de una Card y cambian todas?

Comprueba:

Linked styles

Si todas deben compartir diseño

es correcto.

¿Qué hacer si solo quiero cambiar una?

Agrega:

• Class adicional;

• ID único.

¿Qué hacer si una Card queda mucho más alta?

Revisa la longitud del contenido.

No agregues Height fijo inmediatamente.

¿Qué hacer si el Button queda mucho más abajo?

Puede deberse a una descripción más extensa.

Considera:

• resumir;

• layout flexible.

¿Qué hacer si el icono parece desalineado?

Revisa:

• tamaño;

• alineación;

• Padding;

• contenedor.

¿Qué hacer si una imagen se deforma?

Revisa:

• Width;

• Height;

• object-fit.

¿Qué hacer si Cover corta demasiado?

Cambia:

• encuadre;

• fotografía;

• Height;

• object-fit.

¿Qué hacer si la Card no debería enlazar?

Elimina el Link o Button correspondiente manteniendo la estructura ordenada.

No dejes un Button visual sin función.

¿Qué hacer si toda la Card parece clicable pero solo funciona el Button?

Reduce el Hover de la Card o revisa la estructura.

¿Qué hacer si quiero toda la Card clicable?

Primero comprueba si la composición ya contiene un Link envolvente.

Evita crear Links dentro de Links.

¿Qué hacer si el servicio ya no existe?

Elimina o reemplaza la Card.

¿Qué hacer si cambia de nombre?

Actualiza:

• Heading;

• descripción;

• URL si cambia el destino.

¿Qué hacer si cambia su alcance?

Actualiza la descripción y cualquier página vinculada.

¿Qué hacer si quiero destacar uno?

Utiliza una Class adicional o una composición jerárquica.

No hagas todos diferentes.

¿Qué hacer si quiero poner el precio?

Evalúa si la sección Servicios es realmente el lugar adecuado.

Si existen:

• varios planes;

• precios;

• comparaciones;

puede ser mejor utilizar:

Tabla de precios

Si solo quieres indicar

Desde USD XX

puedes hacerlo manualmente, pero deberás mantenerlo actualizado.

¿Qué hacer si quiero explicar el proceso?

Utiliza:

Timeline

cuando exista una secuencia.

Por ejemplo

SERVICIO

Implementación

después:

CÓMO TRABAJAMOS

1. Relevamiento
2. Configuración
3. Puesta en marcha
4. Capacitación

Utilizar IA para definir Servicios

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

Por ejemplo:

Nuestra empresa realiza estas actividades:

[lista]

Quiero convertirlas en una sección Servicios para la Página web.

Clasifica cada elemento como:
- Servicio.
- Característica.
- Beneficio.
- Proceso.
- Otro.

No inventes servicios nuevos.

Explica brevemente los casos ambiguos.

IA para redactar Cards

Necesito redactar una Card para este servicio:

Nombre:
[nombre real]

Qué hacemos:
[descripción]

Qué incluye:
[datos]

Redacta:
- título máximo de 5 palabras;
- descripción máxima de 28 palabras;
- CTA máximo de 4 palabras.

Utiliza español neutro.

No inventes características, beneficios, tiempos ni precios.

IA para eliminar frases genéricas

Tengo estas descripciones de Servicios:

[pegar]

Reescríbelas para eliminar expresiones vagas como:
- máxima calidad;
- soluciones integrales;
- excelencia;
- innovación;
- compromiso;

cuando no explican qué hacemos.

Mantén únicamente información que pueda derivarse del texto original.

No inventes prestaciones.

IA para organizar muchos Servicios

Tengo estos 14 servicios:

[lista]

Necesito agruparlos en un máximo de 4 categorías comprensibles para clientes.

Utiliza un único criterio de clasificación.

No elimines ni inventes servicios.

Indica si algún elemento parece una Característica o Beneficio y no un Servicio.

IA para seleccionar Servicios para Home

Tenemos estos servicios:

[lista]

La Home solo mostrará 4.

El objetivo principal de la Página web es:
[objetivo]

Selecciona cuáles mostrar priorizando:
- representatividad;
- claridad;
- relación con el objetivo.

No inventes métricas ni popularidad.

IA para revisar CTA

Tengo estos Servicios y CTA:

[lista]

Revisa si cada CTA corresponde al siguiente paso real.

Clasifica si debería utilizar:
- Conocer servicio.
- Solicitar información.
- Solicitar presupuesto.
- Contactar.

No inventes procesos de contratación.

IA para CSS

Estoy personalizando una sección Servicios en Waclis.

La sección utiliza:
.servicios-section

Las Cards:
.servicio-card

Los iconos:
.servicio-icon

Los títulos:
.servicio-title

Las imágenes:
.servicio-image

Necesito:
- 3 Cards por fila en desktop;
- 2 en tablet;
- 1 en celular;
- Padding de 24 px;
- Border radius de 16 px;
- imágenes con object-fit cover;
- Hover muy sutil;
- sin afectar otras Cards o imágenes.

No modifiques HTML.

No agregues JavaScript.

No elimines Classes existentes.

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

IA para una Card clonada

Cloné una Card de Servicio en Waclis.

La nueva debe corresponder a:
[nuevo servicio]

Este es únicamente el HTML de la Card:

[pegar]

Identifica dónde debo revisar:
- icono o imagen;
- Alt;
- Heading;
- Paragraph;
- CTA;
- URL;
- ID.

No elimines ni renombres Classes estructurales.

IA para responsive

Tengo una sección Servicios en Waclis con 6 Cards.

Cada Card incluye:
- icono;
- Heading;
- descripción de unas 20 palabras;
- Button.

Quiero:
- 3 por fila en desktop;
- 2 en tablet;
- 1 en celular.

Explícame primero cómo resolverlo mediante Grid Row y tamaños de columnas.

No generes CSS salvo que sea necesario.

Buenas prácticas para Servicios

Recomendamos:

• explicar servicios reales;

• diferenciar Servicios de Características y Beneficios;

• utilizar nombres comprensibles;

• eliminar frases comerciales vacías;

• describir qué hace la empresa;

• mantener textos breves;

• priorizar los principales;

• agrupar cuando existan muchos;

• utilizar iconos o imágenes relevantes;

• completar Alt;

• utilizar CTA coherentes;

• probar todas las URLs;

• utilizar Navigator;

• clonar Cards completas;

• revisar cada contenido después de clonar;

• mantener IDs únicos;

• aprovechar Linked styles;

• adaptar Grid responsive;

• utilizar páginas específicas para servicios complejos;

• mantener la información actualizada;

• limitar CSS a la sección;

• comprobar el resultado mediante Ver página.

Errores frecuentes

Confundir Servicios con Beneficios

Servicio:

qué hacemos.

Beneficio:

qué obtiene el cliente.

Confundir Servicios con Características

Característica:

qué incluye o cómo funciona.

Utilizar valores como Servicios

Por ejemplo:

Compromiso
Calidad
Innovación

no describen necesariamente prestaciones.

Utilizar nombres demasiado genéricos

Sé más específico.

Utilizar terminología interna

Escribe para el cliente.

Utilizar frases vacías

Evita depender de:

máxima calidad
soluciones integrales
innovación
excelencia

sin explicar qué se ofrece.

Inventar un servicio para completar una fila

Adapta Grid.

Mostrar demasiados en Home

Selecciona principales.

No organizar una lista muy extensa

Agrupa.

Mezclar categorías con servicios

Mantén una lógica.

Utilizar iconos que no representan el servicio

Selecciona símbolos comprensibles.

Mezclar diferentes estilos de iconos

Mantén coherencia.

Deformar imágenes

Respeta proporciones.

Utilizar Cover sin revisar el recorte

Comprueba cada imagen.

Dejar imágenes o textos de ejemplo

Revisa la Section completa.

Clonar solo el Heading

Clona la unidad completa.

Clonar y dejar descripción anterior

Actualiza todo.

Dejar URL anterior

Prueba cada Link.

Duplicar IDs

Mantén IDs únicos.

Eliminar solo el título

Elimina la Card si retiras el servicio.

Mover solo el icono

Mueve la unidad completa.

Mantener cuatro Cards estrechas en celular

Adapta Grid.

Utilizar Height fijo con textos variables

Prefiere layout flexible.

Hacer que una Card no clicable parezca clicable

Modera Hover.

Ocultar información hasta Hover

Comprueba móvil.

Mostrar precios manuales y no actualizarlos

Mantén la información vigente.

Mantener Servicios discontinuados

Actualiza la Página web.

Aplicar CSS global a .card

Limita el scope.

Aplicar CSS global a imágenes o Headings

Puede afectar otras secciones.

Agregar JavaScript para cambios visuales

Utiliza Estilo o CSS.

No probar Links

Utiliza Ver página.

Flujo recomendado

1. DEFINIR LOS SERVICIOS REALES
↓
2. DIFERENCIAR SERVICIOS / CARACTERÍSTICAS / BENEFICIOS
↓
3. PRIORIZAR LOS PRINCIPALES
↓
4. AGRUPAR SI EXISTEN MUCHOS
↓
5. ELEGIR DISEÑO
↓
6. AGREGAR SERVICIOS
↓
7. REVISAR NAVIGATOR
↓
8. MODIFICAR HEADING GENERAL
↓
9. REEMPLAZAR ÍCONOS / IMÁGENES
↓
10. COMPLETAR ALT
↓
11. MODIFICAR NOMBRES
↓
12. MODIFICAR DESCRIPCIONES
↓
13. CONFIGURAR CTA
↓
14. CONFIGURAR URL
↓
15. REVISAR COVER / CONTAIN
↓
16. PERSONALIZAR CARDS
↓
17. REVISAR LINKED STYLES
↓
18. CONFIGURAR GRID RESPONSIVE
↓
19. GUARDAR CAMBIOS
↓
20. VER PÁGINA
↓
21. PROBAR TODOS LOS SERVICIOS

Checklist antes de publicar Servicios

• Todos los elementos representan realmente Servicios.

• No confundí Servicios con Beneficios.

• No confundí Servicios con Características.

• No confundí Servicios con etapas de un proceso.

• Los nombres son comprensibles para el cliente.

• No utilicé terminología interna innecesaria.

• Cada descripción explica qué hacemos.

• Eliminé frases comerciales que no aportaban información.

• No inventé Servicios para completar la grilla.

• Los Servicios principales aparecen primero.

• Si existen muchos, están correctamente agrupados.

• La cantidad mostrada en Home es razonable.

• Los iconos representan cada Servicio.

• Los iconos mantienen un estilo coherente.

• Las imágenes son adecuadas.

• No quedan imágenes de ejemplo.

• Completé Alt.

• Revisé Cover / Contain.

• Las imágenes no están deformadas.

• Los CTA corresponden a la acción real.

• Cada URL lleva al Servicio correcto.

• Probé todos los Links.

• No quedan URLs de ejemplo.

• Utilicé Navigator.

• Al clonar seleccioné la Card completa.

• Al clonar actualicé ícono o Image.

• Al clonar actualicé Alt.

• Al clonar actualicé Heading.

• Al clonar actualicé Paragraph.

• Al clonar actualicé CTA.

• Al clonar actualicé Url.

• Los IDs personalizados son únicos.

• Linked styles tiene el alcance esperado.

• Las Cards mantienen una apariencia coherente.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• Grid se reorganiza correctamente.

• Las Cards no quedan demasiado estrechas.

• Los textos no se cortan.

• Los Buttons no desbordan.

• No existe scroll horizontal inesperado.

• La información esencial no depende del Hover.

• Las animaciones son moderadas.

• Los Servicios publicados siguen vigentes.

• Las condiciones o precios manuales están actualizados si existen.

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

• No agregué JavaScript innecesario.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

La sección Servicios permite comunicar de manera clara:

qué hace tu empresa por sus clientes.

La diferencia principal es:

SERVICIO
¿Qué ofrecemos?

CARACTERÍSTICA
¿Qué incluye o cómo funciona?

BENEFICIO
¿Qué obtiene el cliente?

Por ejemplo:

SERVICIO

Implementación

CARACTERÍSTICA

Configuración inicial

BENEFICIO

Permite comenzar a utilizar la solución con una configuración preparada para el proyecto.

Una Card de Servicio puede tener:

ÍCONO / IMAGEN

NOMBRE

DESCRIPCIÓN

CTA

Por ejemplo:

[ ÍCONO ]

MANTENIMIENTO

Realizamos revisiones periódicas y tareas preventivas sobre los equipos.

[ CONOCER SERVICIO ]

Si el Servicio necesita mucha explicación:

utiliza la Card como resumen y enlázala hacia una página específica.

Cuando clones una Card mediante Navigator, revisa siempre:

ÍCONO / IMAGEN
ALT
TÍTULO
DESCRIPCIÓN
CTA
URL
ID

En responsive:

Desktop

[ A ] [ B ] [ C ]

puede transformarse en:

Mobile

[ A ]

[ B ]

[ C ]

Utiliza Grid Row para definir la distribución real.

No reduzcas todas las Cards solamente para intentar mantener una fila.

Y recuerda:

una sección Servicios no debería estar llena de frases como “calidad”, “innovación” o “excelencia” si el visitante sigue sin comprender qué puede contratar.

La claridad tiene prioridad.

Finalmente:

Guardar Cambios → Ver página → revisar cada Servicio → probar todos los CTA → comprobar celular.

Una buena sección Servicios debería permitir que, después de unos pocos segundos, el visitante pueda responder:

“Entiendo qué hace esta empresa y qué solución puedo solicitar.”