Cerrar video

Agrega un buscador AJAX en tiempo real para Divi con atajo de teclado con OV Live Search

por | Dic 12, 2025 | Tutorial premium | 0 Comentarios

Hola, ¿qué tal? Hoy quiero platicarte sobre un nuevo plugin que acabo de desarrollar y que creo que te va a encantar si trabajas con Divi y WordPress.

Un poco de historia primero

Si has seguido mis tutoriales, probablemente recuerdas que ya tenemos dos tutoriales sobre buscadores AJAX para Divi:

Esos tutoriales siguen funcionando perfectamente a día de hoy y son muy buenos. Usamos plugins premium de terceros del Marketplace de Divi que hacen un trabajo excelente.

Pero hoy les traigo algo diferente.

Ahora tenemos nuestra propia alternativa

He desarrollado OV Live Search, un plugin 100% propio, exclusivo de OV Divi, pensado y diseñado detalladamente desde cero.

¿Por qué crear uno nuevo si ya tenemos tutoriales que funcionan? Bueno, déjame platicarte las ventajas:

Primero, no tienes que preocuparte por renovaciones de licencias. El plugin ya está incluido en tu suscripción de Tutoriales Exclusivos. No hay pagos adicionales, no hay licencias que renovar cada año.

Segundo, y esto es lo que más me emociona, como es un desarrollo propio, tengo control total del código. Esto significa que puedo seguir agregando características y funcionalidades poco a poco. ¿Necesitas algo específico? Puedo agregarlo. ¿Hay alguna mejora que les gustaría ver? La puedo implementar mucho más fácilmente porque tengo acceso completo al código.

Tercero, está pensado específicamente para nuestra forma de trabajar con Divi. Cada detalle, cada función, está diseñada con base en lo que realmente necesitamos en nuestros proyectos.

Ahora, esto no significa que los tutoriales anteriores estén obsoletos o que debas cambiar. Para nada. Son opciones diferentes y cada una tiene lo suyo. Puedes elegir la que mejor se adapte a tu proyecto o a tu forma de trabajar. Lo importante es que ahora tienes más opciones para escoger.

Crea un buscador AJAX en tiempo real para Divi con atajo de teclado con OV Live Search

Entonces, ¿qué es OV Live Search?

Es un buscador en tiempo real que va a transformar completamente la experiencia de búsqueda en tus sitios web.

Primero que nada, resultados en tiempo real mientras escribes. Nada de esperar, nada de recargar páginas. Escribes «casa» y boom, ahí están los resultados.

Lo segundo, y esto me encanta, es que puedes abrir el buscador presionando Cmd+K (o Ctrl+K en Windows). ¿Has usado sitios web modernos que tienen esto? Pues ahora tus sitios también pueden tenerlo.

Y tercero, todo es personalizable. Los colores, los textos, qué mostrar, qué ocultar… todo está en tus manos.

Lo que hace especial a este buscador

Déjame platicarte sobre las funcionalidades que más me gustan.

El modal que se abre con un atajo de teclado

Esta es mi función favorita. Imagina que estás navegando en tu sitio, y de repente presionas Cmd+K. Se abre un modal elegante con el buscador, puedes escribir lo que buscas, ver los resultados al instante, y cuando terminas, presionas ESC o haces click fuera y se cierra.

Es la misma experiencia que tienen sitios como Tailwind CSS, Vercel, o cualquier documentación moderna. Tus visitantes van a decir «wow, este sitio está muy bien hecho».

Resultados súper visuales

Cada resultado muestra:

  • La imagen destacada del post o producto
  • El título con los términos que buscaste resaltados
  • Un extracto del contenido
  • Las categorías
  • La fecha de publicación
  • Un botón para ir al contenido completo

Todo esto se carga sin refrescar la página, en menos de medio segundo.

Integración perfecta con tu header

Puedes agregar un botón o icono en tu header de Divi, le pones una clase CSS (te digo cuál en el tutorial), y listo. Cuando alguien haga click, se abre el buscador en modal.

Es tan simple como agregar class=»ov-search-trigger» a cualquier elemento.

Configuración súper flexible

Todo se configura desde el panel de administración de WordPress. No necesitas tocar código (aunque si quieres, puedes).

En la parte de colores, puedes elegir:

  • El color principal (para botones y enlaces)
  • El color cuando pasas el mouse
  • Los colores de texto
  • Todo con un selector de color visual

En visualización, decides:

  • Si mostrar o no las imágenes
  • Si mostrar extractos
  • Si mostrar categorías
  • Si mostrar el botón «Ver más»
  • Qué texto quieres en ese botón («Leer más», «Ver producto», lo que sea)

En la parte del modal, configuras:

  • Si quieres que el buscador se abra en modal o inline
  • Qué clase CSS va a activar el modal
  • Si quieres el atajo de teclado Cmd+K activado

Dos formas de usarlo

La primera, y la más simple, es con un shortcode: [ov_live_search]

Lo pegas en cualquier página y ya tienes tu buscador ahí, inline, funcionando.

La segunda es como modal con un trigger. Activas el modal en los ajustes, agregas la clase a un botón en tu header, y cada vez que alguien haga click o presione Cmd+K, se abre el buscador.

Por qué esto es diferente

Mira, con este plugin:

  • No hay límite de búsquedas
  • No hay renovaciones anuales de licencia
  • El código es nuestro y lo puedo mejorar constantemente
  • Puedes modificar lo que quieras
  • Es ligero (solo 32KB)
  • Funciona con Divi 4 y Divi 5
  • Ya está incluido en tu suscripción de Academia

Casos reales donde esto funciona increíble

Este buscador lo he probado en varios tipos de sitios y funciona de maravilla en:

Blogs con mucho contenido. Cuando tienes cientos de artículos, tus visitantes necesitan una forma rápida de encontrar lo que buscan.

Tiendas WooCommerce. Búsqueda instantánea de productos con imágenes, todo ahí al momento.

Sitios de cursos o educativos. Buscar entre lecciones, módulos, recursos… todo al instante.

Bases de conocimiento. Si tienes documentación, FAQs, o recursos, este buscador hace que todo sea fácil de encontrar.

Y en general, cualquier sitio que quiera ofrecer una experiencia moderna y profesional.

Lo que aprenderás en el tutorial

En el tutorial te guío paso a paso para que implementes esto en cualquier sitio:

Primero, la instalación. Es como cualquier plugin de WordPress, súper directo.

Después, la configuración básica. Te muestro cada opción del panel y para qué sirve.

Luego viene la personalización de colores, donde ajustas todo para que coincida con tu marca.

Te enseño cómo implementar el shortcode en páginas, cómo configurar el modal para que se abra con Cmd+K, y cómo integrarlo con un icono o botón.

Y al final, optimizaciones y tips para que funcione perfecto.

Esto es parte de un proyecto más grande

Lo que más me gusta de este plugin es que no es solo un buscador. Es el resultado de todo lo que he aprendido creando funcionalidades para Divi.

Y lo mejor es que esto va a seguir creciendo. Ya estoy planeando actualizaciones como:

  • Búsqueda en custom fields
  • Integración con campos personalizados de WooCommerce
  • Sugerencias inteligentes
  • Y más cosas que irán saliendo

El valor real de esto

Siendo honesto contigo, un plugin como este en CodeCanyon se vende por $29 o $49 dólares fácilmente, más renovaciones anuales de soporte.

Aquí solo necesitas tu suscripción a los Tutoriales Exclusivos de la Academia OV Divi y tienes:

  • Este plugin completo
  • Búsquedas ilimitadas
  • Todos los demás tutoriales premium
  • Actualizaciones gratis

Accede al plugin ahora mismo

Este plugin con su tutorial completo está disponible en los Tutoriales Exclusivos de Academia OV Divi. Al suscribirte tienes acceso a:

  • OV Live Search (plugin + tutorial completo)
  • OV Card Menu v5.0 para restaurantes
  • Más de 200 tutoriales premium
  • Integraciones con WhatsApp, Google Sheets, WooCommerce
  • Todos los recursos de cada tutorial
  • Actualizaciones continuas cada mes

No tienes que esperar, no tienes que pagar más. Una sola suscripción te da todo.

👉 Únete aquí y descarga el plugin ahora mismo.

Si tienes preguntas, déjame un comentario y con gusto te respondo.


¿Ya eres parte de Academia OV Divi? Encuentra este tutorial en la sección «Tutoriales Exclusivos» de tu cuenta.

Este tutorial es premium

Accede a este y más tutoriales exclusivos de la Academia OV DIVI por tan solo $10 USD al mes y saca el máximo provecho del mejor tema y constructor visual para WordPress.

Tutoriales Relacionados

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$10 USD / mes

Pin It on Pinterest