En este artículo, le daremos una visión detallada de cómo se puede utilizar el plugin Elementor para convertir elIcono de búsqueda a?adido al menú del sitio.

?Qué es el icono de búsqueda de Elementor?

El icono de búsqueda de Elementor es en realidad un archivo proporcionado por el plugin de Elementor llamado "Formulario de búsqueda". Con este widget, es posible a?adir un nuevo widget en cualquier lugar del sitio (como la secciónCabecera, pie de página o barra lateral) Crear una barra de búsqueda. Colocándola en la cabecera o el pie del sitio, los usuarios podrán acceder a ella desde cualquier página del sitio, lo que facilitará enormemente la navegación y la búsqueda.

El widget es muy flexible y puede personalizarse con su texto de marcador de posición, iconos, sombras de recuadro, bordes, posiciones de los iconos, ajustes tipográficos y mucho más. Además, puede personalizarse para distintos tama?os de pantalla (Ordenadores de sobremesa, tabletas y teléfonos móviles) están configurados de forma óptima para garantizar que en todos los equiposbuen indicador.

Cómo a?adir el icono de búsqueda de Elementor al menú de tu sitio web

En este tutorial se utilizará la versión gratuita de Elementor y la aplicaciónEdición profesionalwidgetsy demostrado a través de una página predise?ada.

Paso 1: A?adir el widget Elementor Search Form

En primer lugar, asegúrate de que aún no tienes ninguna opción de búsqueda en el menú de tu sitio web. Colocaremos el icono de búsqueda a?adiendo una nueva columna al área del menú.

1. Abra el editor de ElementorEn el panel de widgets de la izquierda, busque "Formulario de búsqueda"Widgets

2. Arrastrar y soltar widgetsArrastre y suelte el widget del formulario de búsqueda en la columna derecha del menú de navegación.

De este modo, se ha a?adido con éxito un formulario de búsqueda al menú.

Paso 2: Establecer el skin de búsqueda

Elementor permite elegir entre tres skins diferentes para dise?ar la apariencia del formulario de búsqueda:

1. escrituras: Es el dise?o más básico y suele aplicarse a dise?os limpios.
2. mínimo: Este skin enfatiza la simplicidad y la sofisticación, perfecto para sitios web modernos.
3. pantalla completa: Este skin permite ampliar el cuadro de búsqueda a pantalla completa cuando el usuario hace clic en él, lo que resulta perfecto para sitios con mucho contenido.

Dependiendo del estilo de su sitio web, elija la piel adecuada y a?ada texto de marcador de posición a la sección de contenido.

Paso 3: Gestionar el contenido del botón de búsqueda

En el área de contenido, puede elegir configurar el botón de búsqueda como icono o como texto. En este ejemplo, hemos configurado el botón como icono, con la posibilidad de personalizar el tama?o y la posición del icono.

1. Seleccione el tipo de icono: En la sección de contenido de los botones, se ha optado por los iconos como principal forma de presentación de los botones.
2. Cambiar el tama?o de los iconos: En función del dise?o del menú, los iconos cambian de tama?o para armonizar con otros elementos del menú.

Paso 4: Personalizar el estilo de los campos de entrada del formulario

Para embellecer aún más el formulario de búsqueda, vaya a "tipo"para ajustar el estilo del campo de entrada.

1. revisar el dise?oCambiar la fuente, el tama?o y el color del texto de los campos de entrada para adaptarlos al dise?o general del sitio web.
2. Configurar el fondo y el bordePuede personalizar el color de fondo, el color del borde, la sombra del recuadro, etc. del campo de entrada.
3. A?adir radio de bordeAjuste el radio del borde para redondear las esquinas del cuadro de búsqueda y mejorar el efecto visual.

Paso 5: Botones de estilo

El estilo del botón de búsqueda también puede personalizarse en la sección "Estilo".

1. Cambiar el color de los botonesPermite definir el color del texto y del fondo del botón para que destaque en la página.
2. Ajustar la posición del iconoAjustar la posición de los iconos de los botones según sea necesario para armonizarlos con el dise?o general del formulario.

Paso 6: A?adir márgenes al área de dise?o

En la configuración avanzada, puede ajustar el dise?o del widget, como a?adir márgenes o márgenes interiores, para garantizar que el formulario de búsqueda esté alineado con otros elementos del menú.

• A?adir márgenesA?adir un margen adecuado en la parte superior del widget para que el formulario de búsqueda pueda alinearse mejor con el resto del contenido del menú.

Paso 7: Hacer que el icono de búsqueda de Elementor responda a dispositivos móviles

Para asegurarte de que tu formulario de búsqueda se comporta de forma coherente en todos los dispositivos, puedes utilizar la función "modo de respuesta"Opciones.

1. Cambiar el tama?o de la pantallaEn la parte superior del panel de Elementor, cambia entre los diferentes tama?os de pantalla para optimizar el dise?o del formulario de búsqueda de forma individual.
2. Cambiar el tama?o y la posición de los widgetsAjuste el tama?o y la posición de los widgets en función del tama?o de la pantalla para garantizar una buena visualización en teléfonos móviles, tabletas y ordenadores de sobremesa.

Nota: No elimine ningún widget, ya que desaparecerá en todos los tama?os de pantalla tras su eliminación. En lugar de eliminar un widget, puede optar por ocultarlo para un tama?o de pantalla específico.

Paso 8: Vista previa de la barra de búsqueda

Previsualice el menú de navegación recién dise?ado una vez completados todos los ajustes. Asegúrate de que el formulario de búsqueda tiene el aspecto y el funcionamiento esperados en todos los dispositivos.

Preguntas frecuentes

1. ?Es gratuito el widget de formulario de búsqueda de Elementor?
   • No. El widget Formulario de búsqueda es un widget avanzado de Elementor que sólo está disponible en la secciónEdición profesionalOferta.
2. ?Cómo personalizar la barra de búsqueda en WordPress?
   • Es posible a?adir y personalizar la barra de búsqueda en su sitio web WordPress a través de Elementor u otros plugins. Consulta los tutoriales relacionados para ver los pasos detallados.
3. ?Cómo puedo crear y editar páginas de resultados de búsqueda en Elementor?
   • Las páginas de resultados de búsqueda pueden crearse y editarse fácilmente con el creador de temas de Elementor. Ir aPlantillas -> Creador de temas -> BuscarComo resultado, sólo tiene que seleccionar la plantilla ya hecha.

alcanzar un veredicto

La funcionalidad de búsqueda es una herramienta importante para mejorar la experiencia de usuario de un sitio web. Al a?adir un icono de búsqueda al menú de tu sitio web, los usuarios pueden encontrar lo que buscan más fácilmente, lo que mejora la facilidad de uso y las tasas de conversión.Elementor ofrece un potente widget de formulario de búsqueda que se puede personalizar según las necesidades específicas, garantizando que el formulario de búsqueda sea coherente con el estilo general del sitio.

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: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres