El propio widget de búsqueda de Elementor necesita Elementor Pro, por lo que la mayoría de los sitios terminan atascados con cualquier cuadro de búsqueda que proporcione el tema. El gratis Buscar widget en Complementos maestros para Elementor llena ese vacío. Déjelo en cualquier lugar de una página o en un encabezado, luego elija un formulario de búsqueda clásico o una ventana emergente de íconos que se expanda al hacer clic. La entrada y el botón están diseñados desde el panel Elementor, no hay CSS involucrado.
Así es como ambos diseños del Widget de búsqueda de Elementor trabaje, configuración por configuración, además de lo que los visitantes realmente ven en la página en vivo.
Qué hace el widget de búsqueda #
El widget genera un formulario de búsqueda de WordPress como elemento Elementor. Los visitantes escriben una consulta, presionan Ingresar o hacen clic en el control de envío y acceden a la página de resultados de búsqueda estándar de su sitio, por lo que los resultados provienen de WordPress y se representan a través de su tema. Usted elige cómo se ve el formulario: un campo de entrada completo con un ícono o botón de texto, o un ícono de búsqueda solitario que se expande a una pantalla de búsqueda emergente.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Necesita ayuda? Ver el guía de instalación.
- El elemento de búsqueda habilitado en el panel de complementos maestros si previamente ha desactivado los widgets.
Cómo agregar el widget de búsqueda Elementor #
Abra el editor Elementor y busque Buscar en el panel Elementos, o desplácese hasta la sección Complementos maestros (busque la insignia MA). Arrastre el widget a su página. Inmediatamente aparece un formulario de búsqueda funcional con un icono de lupa como control de envío.
Configure la pestaña Contenido #
El Contenido tab contiene una decisión principal más algunos campos que se derivan de ella. El Tipo el menú desplegable cambia entre los dos diseños: Forma y Ventana emergente de iconos.
Tipo: Forma #
El formulario es el diseño clásico, un campo de entrada con un control de envío a la derecha. El Enviar tipo de botón dropdown decide cuál es ese control:
- Icon: muestra un botón de icono. Elija el icono de la biblioteca a continuación; La lupa predeterminada funciona para casi todos los diseños.
- Botón: en su lugar, muestra un botón de texto. A Texto del botón el campo aparece donde escribe la etiqueta, como Buscar o Presionar Enter.
Tipo: Ventana emergente de iconos #
La ventana emergente de iconos representa solo un icono de búsqueda. Cuando un visitante hace clic en él, se abre una pantalla de búsqueda sobre la página con un campo de entrada grande y un botón de cierre. Este es el diseño que se utilizará en encabezados y barras de navegación donde un campo de búsqueda completo llenaría el menú.
La ventana emergente Elegir icono revela el Configuración emergente sección con dos campos:
- Text de intrare: el marcador de posición dentro del campo de búsqueda de la ventana emergente, “Buscar ...” de forma predeterminada.
- Descripción: una línea auxiliar debajo del campo, como “Presiona enter para buscar o haz clic en X para cerrar”
Estilee el widget en la pestaña Estilo #
El Estilo la pestaña tiene dos secciones: Forma para el área de entrada y Botón para el control de envío.
Forma #
La sección Formulario diseña el contenedor y el campo de entrada:
- Antecedentes: un color detrás del formulario.
- Ancho: el ancho del formulario en píxeles. Práctico cuando el widget se encuentra en una columna ancha y desea un cuadro de búsqueda más ajustado.
- Margen de formulario y relleno de formulario: espaciado exterior y interior del envoltorio.
- Tipo de borde y radio de borde: el marco alrededor del formulario y qué tan redondeadas son sus esquinas.
- Tipografía y color: la fuente y el color del texto de la entrada.
- Color de entrada del formulario: el color de fondo del propio campo de entrada.
Botón #
La sección Botón diseña el control de envío, ya sea un ícono o un botón de texto:
- Color de fondo: el relleno detrás del botón.
- Color: el color del icono o texto.
- Relleno y margen: el espaciado interior y exterior del botón.
- Tipografía: familia de fuentes, tamaño y peso para el texto del botón.
Una nota de tamaño: la altura del botón sigue el formulario, por lo que si el texto del botón parece estrecho después de un cambio de tamaño de fuente, agregue un poco de relleno vertical en el lado del formulario en lugar de luchar solo contra el relleno del botón.
Vea el resultado en vivo #
Publique la página y pruebe el formulario. Haga clic en el campo, escriba una consulta y presione Enter o presione el botón Enviar.
WordPress toma el control a partir de ahí y muestra las publicaciones y páginas coincidentes en la plantilla de resultados de búsqueda de su tema:
Casos de uso comunes #
- Búsqueda de encabezado: utilice la ventana emergente de iconos junto al menú de navegación para que la búsqueda esté a un clic de distancia sin comer espacio en el menú.
- Barra lateral del blog o páginas de archivo: un cuadro de búsqueda tipo formulario ayuda a los lectores a explorar publicaciones más antiguas.
- 404 pagini: un formulario de búsqueda es lo más útil que puedes poner en una página que diga “no encontrado”
- Documentație și baze de cunoștințe: coloque un formulario de búsqueda amplio al frente y al centro para que los usuarios busquen antes de desplazarse.
Consejos para una mejor barra de búsqueda #
- Haga coincidir el color del botón con el color de acento de su tema. Se utiliza más un botón de búsqueda que se parece a cualquier otro botón del sitio.
- Mantenga el marcador de posición corto. “Buscar ...” supera una oración completa que se corta en el móvil.
- Utilice la ventana emergente de iconos en diseños ajustados. Un formulario de búsqueda completo comprimido en una columna de encabezado tiende a envolverse de manera incómoda en el ancho de la tableta.
- Pruebe la página de resultados. El widget entrega la consulta a WordPress, así que verifique que la plantilla de resultados de búsqueda de su tema parezca presentable antes de promocionar el cuadro de búsqueda.
Vídeotutorial #
Si desea ver el widget de búsqueda en acción, este video recorre la configuración completa, desde el primer arrastre hasta los resultados de búsqueda en la página en vivo:
Preguntas frecuentes #
¿cómo agrego una barra de búsqueda en Elementor?
Instale complementos maestros para Elementor y luego arrastre el widget de búsqueda desde el panel Elementos a su página. Representa un formulario de búsqueda de WordPress que funciona de inmediato y puede cambiar entre un formulario completo y una ventana emergente de íconos desde el menú desplegable Tipo en la pestaña Contenido.
¿Puedo abrir la búsqueda en una ventana emergente?
Sí. Establezca el tipo en la ventana emergente de iconos en la pestaña Contenido. Luego, el widget muestra solo un ícono de búsqueda y al hacer clic en él se abre una pantalla de búsqueda con un campo de entrada grande, un marcador de posición personalizado y una línea de descripción que controla desde Configuración emergente.
¿Puedo cambiar el texto del botón de búsqueda?
Sí. Con el tipo configurado en Formulario, cambie el tipo de botón Enviar a botón y escriba su etiqueta en el campo Texto del botón. También puede mantener un ícono dejando el tipo de botón Enviar en el ícono y seleccionando cualquier ícono de la biblioteca.
¿De dónde vienen los resultados de la búsqueda?
El widget se envía a la búsqueda estándar de WordPress, por lo que los resultados incluyen sus publicaciones y páginas y se muestran en la plantilla de resultados de búsqueda de su tema. No se necesita una configuración de página de resultados separada.
¿el widget de búsqueda de complementos maestros es gratuito?
Sí. El widget de búsqueda está incluido en la versión gratuita de Master Addons y funciona con Elementor gratuito. No muestra resultados en vivo mientras escribe; utiliza la búsqueda estándar de WordPress.
Envolviendo #
Los complementos maestros Buscar widget le da a Elementor la barra de búsqueda que le falta: un formulario o ícono emergente que puedes colocar en cualquier lugar y estilo para que coincida con el diseño, con resultados proporcionados por la propia WordPress. Combina bien con el Contenido fuera del lienzo widget cuando estás creando un encabezado personalizado. Explore la colección completa de Widgets y extensiones de complementos maestros, o ver el Buscar página de widget para demostraciones y una comparación con el widget Elementor Pro Search.
