Ángel Julián

Ángel Julián

Diseño y desarrollo de sitios, especialmente de comercio electrónico con WordPress y WooCommerce

Despues de introducir la semana pasada el modo de edición en linea, Hoy nos sorpenden nuevamente con un widget para crear el formulario de búsqueda, mejorando la experiencia de usuario y completando las herramientas para un mejor diseño de cabeceras con Elementor.

Un usuario que no encuentra un artículo o producto en tu sitio, es un cliente potencial perdido.  Este widget te permite añadir a tu sitio  WordPress formularios de búsqueda  en cualquier lugar, con un control sobre el diseño total como nos vienen acostumbrando. El widget de búsqueda, se une al widget de menú en la  lista de widgets responsables del diseño de tu sitio.

El widget de búsqueda da respuesta a un problema común con los plugins de búsqueda: su diseño soso y genérico. La mayoría de los widgets de búsqueda vienen con un diseño muy básico y similar, y no ofrecen posibilidades de diseño avanzado.

Aquí es donde el poder de Elementor entra en acción. El widget viene  con opciones de diseño para cada parte del formulario de búsqueda, incluyendo el campo de búsqueda, botón de enviar  y se centra en efectos como caja de sombras, bordes y mucho más. Esto te permite crear el diseño perfecto del formulario de búsqueda para que se integre a la perfección con el resto de tu diseño web.

El widget viene con tres diseños: Clásico, minimalista y a pantalla completa

Diseño clásico

Diseño clasico del widget de búsqueda

El diseño predeterminado muestra un campo de busqueda y un botón separado del mismo.

Diseño a pantalla completa

Diseño a pantalla completa del widget de búsqueda

El diseño a pantalla completa muestra un solo icono de búsqueda. Cuando los usuarios hacen clic, se abre el cuadro de búsqueda dentro de una caja de luz a pantalla completa. Este diseño es muy útil para utilizarlo junto a los menús y en los dispositivos móviles.

El color de superposición para este diseño utiliza el color predeterminado usado en las preferencias para la caja de luz, pero se puede escojer un color diferente.

Diseño minimalista

Diseño minimalista para el widget de búsqueda

Este diseño minimalista muestra un campo que también contiene el icono de búsqueda. Este diseño se puede adaptar fácilmente para adaptarse a cualquier tipo de página web.

Personalización del formulario

Más allá de la elección inicial del diseño, también puedes personalizar cada uno de los elementos del formulario  de búsqueda. Esto incluye:
  • El campo de búsqueda: cambiar el color de campo, la tipografía y el texto del marcador
  • El botón de búsqueda: Personalizar el icono del botón (2 iconos disponibles), el tamaño del icono, el color y el color de fondo, el ancho de botón, y el tamaño.

También puede agregar sombras y opciones del borde. El campo de búsqueda te permite definir diferentes opciones de estilo para cuando esta activo el campo, mientras que el botón permite una flexibilidad similar cuando pasas el cursor sobre el.

Personalización del formulario de búsqueda

Para acabar

Como hemos visto con las últimas versiones, se esta ampliando constantemente el alcance de Elementor, añadiendo widgets que se implementan en el diseño general del sitio. Proximamente añadirán  más widgets y funciones que afectan al diseño global del sitio, así como nuevas formas de implementar fácilmente estas características en tu sitio web.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on telegram
Telegram
Share on whatsapp
WhatsApp
Share on email
Email

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Cerrar menú