Creación de páginas de resultados de búsqueda personalizadas con Elementor Pro

Una página de resultados de búsqueda bien diseñada ayuda a los visitantes a localizar rápidamente los contenidos deseados, lo que ahorra tiempo y estimula la navegación dentro del sitio.

Elementor Pro Es la herramienta principal para implementar este tipo de páginas. Admite el creador de temas, plantillas personalizadas y controles avanzados para flexibilizar toda la experiencia de búsqueda. El siguiente paso es explicar cómo hacerlo.

¿Qué es una página de resultados de búsqueda personalizada?

La página personalizada de resultados de búsqueda se utiliza para mostrar blogs, productos, artículos, servicios y otros contenidos que coincidan con las palabras clave. Usted es libre de añadir títulos, imágenes, filtros y otros módulos para hacer la página visualmente más atractiva y funcional.

Escenarios comunes de uso

• Comercio electrónico: combina búsqueda y filtros para mostrar rápidamente productos específicos
• Blog: Filtrar entradas por etiqueta, categoría o autor
• Base de conocimientos: proporciona un acceso rápido a la búsqueda de documentos
• Plataforma de servicios: filtre servicios con diferentes precios, calificaciones y regiones.
• Sitios web educativos: búsqueda de cursos, libros de texto y recursos de aprendizaje

Herramientas de preparación

Asegúrese de que el sitio web está instalado:

• Elementor
• Elementor Pro

A continuación comienza la operación de creación.

Paso 1: Abrir Elementor Pro Theme Builder

• Acceder al back office
• Vaya a "Plantillas > Creador de temas".

• Busque el módulo "Resultados de búsqueda" y haga clic en "Añadir nueva plantilla".

El sistema introducirá un lienzo en blanco para los componentes posteriores.

Paso 2: Añadir bloque de título y descripción

• Haga clic en el signo más para crear una nueva región

• Arrastre y suelte el componente "Título" en la página de entrada.leyenda

• Ajustar fuentes, colores y posiciones en Estilos

A continuación, añada el componente "Editor de texto", introduzca el texto de la descripción, también establecido en el "Estilo".tipo.

Paso 3: Añadir un cuadro de búsqueda

• Arrastre el componente "Formulario de búsqueda".

• Ajuste los márgenes izquierdo y derecho en "Avanzado > Márgenes" para controlar la anchura.

• Ajusta fuentes, fondos, bordes y esquinas redondeadas en Estilos.

Las esquinas redondeadas del botón de búsqueda y del cuadro de búsqueda pueden ajustarse por separado para lograr un estilo visual unificado.

Paso 4: ActivarBúsqueda en tiempo realfuncionalidad

• Cambiar a la pestaña "Contenido
• Abra la opción Resultados en directo en la sección Resultados.
• Establezca el número máximo de coincidencias que se mostrarán

Paso 5: Crear una plantilla de resultados en directo

• Haga clic en "Crear plantilla" para introducir el nuevo lienzo.

• Selección de estructuras de filas horizontales

• Arrastre el componente Imagen destacada, ajústelo a tamaño medio y ajuste las esquinas redondeadas.

• Arrastre el componente "Título del artículo" y defina la fuente y el color.

• Guardar plantilla

Esta plantilla determina el formato de cada contenido mostrado durante una búsqueda.

Paso 6: Aplicar plantilla a los resultados de la búsqueda

Vuelva a la página principal y seleccione la plantilla que acaba de guardar en el módulo Resultados en directo.

En este punto, puede establecer el número de elementos que se mostrarán, el método de clasificación, etc.

Paso 7: Personalizar el estilo de los resultados en tiempo real

Ajustar en Estilo > Resultado:

• contextoscolor
• Bordes y esquinas redondeadas
• margen interior
• Anchura de columna y espaciado entre proyectos

Prueba a introducir la palabra clave cuando hayas terminado y los resultados de la visualización en tiempo real aparecerán debajo del cuadro de entrada.

Paso 8: Añadir el componente Archivo de artículos

• Crear una nueva área de párrafo
• Arrastre el componente "Archivar entradas".

Este componente muestra el contenido de todos los artículos publicados en el sitio actual.

Paso 9: Configurar cómo se muestran los artículos

Ajustado en "Contenido":

• Número de columnas, posición de la imagen y resolución

• Mostrando título, resumen, meta información y "Leer más"
• Número de caracteres frente a campos de metainformación (por ejemplo, fechas, comentarios, etc.)

• establecerventana de pestañas (en un navegador web, etc.)Modo y alineación

Paso 10: Embellecer la lista de artículos

Ajustado en "Estilo":

• Espacio entre columnas y alineación

• Márgenes de imagen y esquinas redondeadas

• Fuentes y colores para títulos, resúmenes y metadatos

• El estilo del botón de paginación es el mismo que el del botónhoverefecto

Una vez completados todos los ajustes, el contenido de la página se ajustará mejor al estilo general del sitio.

Paso 11: Guardar y previsualizar

Guarde y vaya a la vista previa del frontend, introduzca una palabra clave y haga clic en buscar, verá los resultados de la búsqueda en tiempo real que aparecen arriba y una lista de los archivos completos de los artículos que aparecen abajo.

Preguntas frecuentes: ¿Páginas confusas?

A veces la página está en blanco o mal estructurada después de hacer clic en buscar porque no está configuradaPágina de archivoPlantilla.

Solución:

• Vuelva a "Plantillas > Creador de temas".
• Creación de una plantilla "archivo
• Establecer la presentación, guardar y habilitar para fijarla

resúmenes

hacer uso de Elementor Pro Es fácil crear una página de resultados de búsqueda totalmente funcional y de aspecto profesional. Ya se trate de un cuadro de búsqueda, de la visualización de resultados en tiempo real o del contenido de un archivo de artículos, es altamente personalizable para adaptarse a las necesidades de su sitio. Con proficiency, también puede ampliar los escenarios de aplicación, tales comodirectorio (en el disco duro del ordenador)Creación de páginas como Páginas, Páginas de filtro, Centro de conocimientos, etc.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres