Saltar al contenido

Diseño de landing page y webs que filtran al cliente ideal

Este es un caso de diseño de landing page y de generación de leads para un servicio de ticket alto: un consultor en insolvencia de Bogotá. Construí solo todo el embudo, del contenido a la medición, y con 109.050 pesos de pauta trajo 5 conversaciones por WhatsApp y 2 leads calificados en 23 días.

Carlos Alberto Cardona B., quien diseñó la landing y el embudoCarlos Alberto Cardona B. · Especialista SEO

Lo esencial

  • 2leads calificados, de 5 conversaciones por WhatsAppRegistro del cliente, 6–28-oct-2026
  • 54.500pesos por lead calificado, más o menos, con 109.050 de pautaGoogle Ads, 6–28-oct-2026
  • 99/100en rendimiento móvil en las dos webs con IAPageSpeed Insights, mediana de 3 corridas, 29-oct-2026
El monto, arribaCaptura del 29-oct-2026, a 390 px de ancho.El cliente ideal se nombra antes del primer mensaje.

Lo hice sin atajos de confianza: con una sola reseña en Google y sin directorios ni testimonios. El peso lo llevó el contenido, que dice desde el primer pantallazo para quién es el servicio.

Abajo están el antes y el después de la landing, el embudo medido paso a paso y dos webs con IA que diseñé para negocios de Bogotá.

Quién hizo qué

  • Yo: la oferta y la escalera de valor, el copy, el diseño de la landing, la campaña de Google Ads, la medición en GA4 y la lectura de los datos.
  • La IA (Claude Code): generó el código que especifiqué, y lo verifiqué en producción.
  • El cliente: atiende las conversaciones y lleva el registro de quién encaja.

El problema: le escribían, pero no todos podían contratarlo

El cliente ideal de este consultor debe 20 millones de pesos o más, o tiene un negocio, un aval o bienes de por medio. Cada conversación con alguien que no encaja le cuesta una hora.

Por eso el contenido filtra desde el principio. Hay una landing por público, empresas y personas naturales, un apartado «Para quién es esta charla» y la frase «no le prometo un resultado». Un filtro no se escribe una vez: se afina cada vez que llegan datos.

Ejemplos de landing page: antes y después del ajuste

Las primeras conversaciones dijeron dónde afinar: una persona pedía un préstamo y otra debía 300.000 pesos. El 28 de octubre ajusté la landing con cuatro cambios:

  • el monto arriba y a la vista: «Deudas desde 20 millones»;

  • un botón para llamar, junto al de WhatsApp;

  • el filtro por situación: un negocio, un aval o bienes;

  • a quien debe menos, la vía gratuita que dispone la ley, antes de pagar un acompañamiento.

La versión del 17-oct frente a la del 28-oct, capturadas a 390 px.

Se suma la llamada porque parte del público prefiere hablar.

Capturas del 17 y del 29-oct-2026.

El filtro combina el monto y la situación.

El primer peldaño también filtra: la escalera de valor

La escalera tiene tres peldaños: herramientas y guías gratis, una primera charla gratis y el acompañamiento, que es el servicio de pago. La calculadora de tarifas atrae a todos, y así se gana la confianza, pero su salida cambia según la respuesta.

Con una deuda de 3 millones, sugiere la vía gratuita. Con 45 millones, invita a la primera charla. Las guías cierran con «Antes de escribirme», así que el filtro trabaja en todo el sitio, no solo en la landing de la pauta.

Capturas del 29-oct-2026.

La salida cambia según la respuesta, y el filtro también vive en el contenido orgánico.

Leads calificados: el embudo, de la impresión al contacto

Medí cada paso, y las tres fuentes cuadran entre sí. Google Ads cuenta 6 conversiones y GA4, 8 eventos, porque una persona tocó el botón varias veces.

PasoCifraFuente
Impresiones en la búsqueda de Google3.919Google Ads
Clics (CTR 6,15 %, unos 452 pesos por clic)241Google Ads
Sesiones en la landing221GA4
Personas que pulsaron WhatsApp6GA4 y Google Ads
Conversaciones por WhatsApp5Registro del cliente
Leads calificados2Registro del cliente

Campaña de búsqueda «Persona natural», del 6 al 28 de octubre de 2026, con 109.050 pesos de inversión: unos 21.800 pesos por conversación y unos 54.500 por lead calificado. El plan completo de la pauta está en el plan de SEO y Google Ads de este caso.

Google Ads, campaña de persona natural del 6 al 28 de octubre de 2026: 3.919 impresiones, 241 clics, CTR 6,15 %, 6 conversiones y 109.050 pesos

6 conversiones · 109.050 pesos

Google Ads, del 6 al 28-oct-2026.

Las conversiones de Google Ads son toques del botón de WhatsApp; las conversaciones y los leads calificados salen del registro del cliente.

Lo que dijeron los datos, y cómo los usé

Tres datos cambiaron decisiones de la campaña y del contenido. Ninguno era obvio antes de medir, y los tres valen para cualquier servicio de ticket alto que use Google Ads: qué busca la gente, desde dónde escribe y qué red de anuncios convierte.

  • Las búsquedas con volumen son de entender, no de comprar. «Desventajas de la ley de insolvencia» tiene 880 búsquedas al mes; «asesor en insolvencia», ninguna medible (DataForSEO, Colombia, 28-oct-2026). Por eso el filtro vive dentro de las páginas que explican.

  • Las 6 conversiones llegaron de fuera de Bogotá. Limitar la pauta a la ciudad del consultor, que parecía lo lógico, la habría dejado en cero.

  • Los sitios asociados de Google trajeron la mitad de las conversiones con el 8 % del gasto. Se mantienen en la campaña.

Términos de búsqueda de la campaña: «ayuda para pagar deudas» con 2 conversiones

«ayuda para pagar deudas»: 2 conversiones

Google Ads, términos de búsqueda, del 6 al 28-oct-2026.

La búsqueda que más convirtió pide ayuda, no un asesor.

La visibilidad que sostiene el embudo

El SEO pone el sitio frente a quien busca entender la ley, y la pauta lleva a quien ya quiere hablar. Las dos puertas llegan al mismo filtro. En Search Console, el sitio suma 60 clics y 6.422 impresiones desde el 11 de julio de 2026 (propiedad de dominio, leída el 29-oct-2026).

Un grupo de 6 páginas sobre insolvencia de persona natural, creado desde cero, pasó de 0 a 591 impresiones desde el 4 de octubre.

Search Console de todo el sitio desde el 11 de julio de 2026: 60 clics y 6.422 impresiones

60 clics · 6.422 impresiones

Search Console, propiedad de dominio, del 11-jul al 28-oct-2026, leída el 29-oct-2026. La posición que se ve (16,6) es una media de todo el sitio en ese periodo.

El SEO se cuenta aquí como visibilidad, no como leads.

Portafolio de diseño web: dos webs con IA, pensadas primero para el celular

Las dos son prototipos para negocios de Bogotá, con el nombre de cada uno oculto: un gimnasio y un taller de estampados. Las dos sacan 99 de 100 en rendimiento en el celular y 100 en accesibilidad (PageSpeed Insights, mediana de 3 corridas, 29-oct-2026). Abajo están las decisiones que hacen que cada página funcione en cada pantalla.

El celular y el PC no son la misma página: qué cambia en cada uno

La misma página se diseña dos veces. En el celular se lee con el pulgar y en una sola columna; en el PC, con el mouse y con espacio para comparar. Estas son las diferencias que apliqué en las dos webs:

  • El botón principal. En el celular queda fijo abajo, al alcance del pulgar. En el gimnasio son «Clase gratis por WhatsApp» y «Llamar»; en el taller, WhatsApp, Cotizar y Carrito, con Cotizar en el centro. En el PC va arriba, junto al menú.

  • El menú. En el PC se ve completo; en el celular se pliega en un botón y deja la pantalla para el titular.

  • Las columnas. En el PC, la foto y el texto van lado a lado, y los planes o los productos se comparan en varias columnas. En el celular todo baja a una sola, en el orden en que se decide: qué es, cuánto cuesta y cómo pido.

  • El titular. Es el mismo en las dos pantallas y lleva la búsqueda principal, pero en el celular cabe en la primera pantalla sin empujar el botón fuera de la vista.

Gimnasio · portada

PageSpeed Insights móvil, mediana de 3 corridas, 29-oct-2026: 99 en rendimiento y 100 en accesibilidad.

El botón principal cambia de lugar según la pantalla.

Gimnasio · clase gratis

Capturas del 26-oct-2026.

En el celular, una sola columna en el orden en que se decide.

Taller de estampados · portada

PageSpeed Insights móvil, mediana de 3 corridas, 29-oct-2026: 99 en rendimiento y 100 en accesibilidad.

Cotizar va al centro de la barra, al alcance del pulgar.

Taller de estampados · ficha de producto

Precios de ejemplo del prototipo.

El precio, a la vista antes de pedir.

Antes de elegir colores y letra, piense en quien ve mal

Al menos 2.200 millones de personas tienen algún deterioro de la visión, de cerca o de lejos (OMS, 2026). Si usted crea webs, ese también es su público: el dueño de negocio que lee sin gafas en el celular, o quien abre su página a pleno sol.

Por eso, antes del color de marca, decido tres cosas:

  • El tamaño de la letra. En el gimnasio, el texto va a 18 px o más en el celular, porque parte de su público ve mal.

  • El contraste. Cada texto debe llegar a 4,5 a 1 contra su fondo, o a 3 a 1 si es grande (WCAG 2.2, criterio 1.4.3).

  • El tamaño de los botones. Unos 48 píxeles, con 8 de separación, para no tocar el de al lado por error (Google, web.dev).

Un 100 de PageSpeed en accesibilidad no basta. Medí cada texto contra el fondo que tiene debajo, en el PC y en el celular: 806 textos en las dos webs. La herramienta marcó 11 por debajo del mínimo, y revisé cada uno en el navegador. El problema real era un enlace rojo oscuro sobre negro, y lo corregí. Los demás eran errores de la medición: un gris que no supo leer y una barra fija que tapaba el texto.

Texto de 18 px o más en el celular; contraste medido texto por texto con Cayu (audit_rendered_contrast), 29-oct-2026.

Prototipo con el nombre del negocio oculto y fotos ilustrativas.

Un gimnasio: una página por búsqueda, y la clase gratis siempre a mano

Construí la web desde 253 búsquedas medidas: una URL por intención y dos puertas de entrada, la clase gratis y la sesión de diagnóstico. La escalera de acompañamiento tiene una página por nivel, y el blog responde antes de vender. La velocidad de carga de la página web también vende: nadie espera a un sitio lento.

Capturas del 26-oct-2026.

Prototipo con el nombre del negocio oculto y fotos ilustrativas.

Gimnasio · una guía del blog

Capturas del 26-oct-2026.

El blog responde antes de vender.

Un taller de estampados: un catálogo que se compra desde el celular

61 páginas con cuatro departamentos, 35 fichas de producto y un cotizador con precio por cantidad. Cada categoría responde una búsqueda local medida, y los kits se ordenan como una escalera: de un producto a la imagen completa del negocio. El pedido se explica en cuatro pasos, para que nadie tenga que preguntar cómo comprar.

Precios de ejemplo del prototipo.

Prototipo con el nombre del negocio oculto y fotos ilustrativas.

El pedido en cuatro pasos: elige, personaliza, paga o cotiza, y recibe

El pedido, en cuatro pasos

Captura del 26-oct-2026.

Nadie tiene que preguntar cómo comprar.

El método, siempre en el mismo orden

  1. La oferta primero: a quién se le vende, qué no se le promete y cuál es el siguiente peldaño.

  2. Las búsquedas reales: qué escribe la gente y qué intención tiene cada búsqueda.

  3. La arquitectura: una URL por intención, sin páginas de relleno.

  4. El diseño para el celular: el botón principal al alcance del pulgar y la página rápida.

  5. La medición hasta el contacto, y el ajuste con lo que digan los datos.

Las webs las construyo con IA: lo especifico, lo genero con Claude Code y lo verifico en producción. Así cuento cómo creo una página web con IA.

¿Le sirve alguno de estos procesos? Pregúnteme por ese

Si le escriben personas que no pueden contratarlo, o su página se ve bien en el PC y mal en el celular, escríbame por el proceso que le interesa. Le respondo con lo que haría en su caso, sin compromiso.

Se abre WhatsApp con el mensaje ya escrito.

O vea el precio y lo que incluye en diseño de páginas web con SEO.

Preguntas frecuentes

Fuentes

¿Su página atrae curiosos o clientes? Escríbame y lo revisamos

Le digo qué cambiaría para que el contenido filtre antes del primer mensaje.

Escríbame

Carlos Alberto Cardona B., quien le respondeCarlos Alberto Cardona B. · Especialista SEO