Cómo personalizar la herramienta de buscar de la plantilla Astra Pro

Cómo personalizar la herramienta de buscar de la plantilla Astra

Pese a la cantidad de virtudes y opciones de personalización que tiene la plantilla Astra Pro, algo que no nos permite realizar desde sus ajustes es personalizar la herramienta de buscar. En este post os vamos a explicar de forma sencilla cómo personalizar la herramienta de buscar de la plantilla Astra.

Insertar la herramienta de buscar en el menu de astra pro

Una de las opciones de personalización que ofrece la plantilla Astra pro es insertar un elemento al final del menú. Entre dichas opciones nos permite insertar un botón, texto plano o HTML, un widget y el elemento que nos ocupa hoy, la herramienta de buscar.

Para tener acceso a la opción que vamos a personalizar debemos asegurarnos que tenemos activado el módulo de navegación en las opciones de Astra.

Acto seguido, nos vamos a apariencia/personalizar, y desde el personalizador nos vamos a cabecera/menú primario. 

En último elemento en el menú seleccionamos la herramienta de buscar (recuadro rojo de la imagen) y en estilo de búsqueda pantalla completa (recuadro azul de la imagen) y publicamos los cambios.

Ya tenemos añadida nuestra herramienta de buscar a nuestro menú.

añadir herramienta de buscar al menu Astra

Personalizar el formulario de búsqueda de Astra pro

La herramienta de buscar de Astra pro viene con unos estilos definidos y desde los ajustes de la plantilla no ofrece la opción de personalizarlos. Es fácil que te interese que el formulario de búsqueda se adapte visualmente a los colores corporativos de tu página web. Esto lo vamos a conseguir mediante CSS y modificando los atributos de cada una de las clases de todos los elementos que forman el formulario de búsqueda.

Esto lo podemos hacer de 2 formas. Si dispones de un child theme editaremos los estilos en el archivo style.css. Si no dispones de child theme lo editaremos en el apartado css adicional que encontrarás en apariencia/personalizar.

Una vez hayas decidido donde editarás pegas de base el siguiente código:

/* 1-personalizar color del fondo */
.ast-search-box.full-screen {background-color:#F5F1EE;}
/* 2-personalizar x para cerrar el buscador */
#close{color:#000!important;}
/* 3-personalizar el texto  */
.large-search-text{color:#000!important;}
/* 4-personalizar lupa formulario */
.search-submit{color:#000!important;}
/* 5-personalizar linea del campo de busqueda */
.ast-search-wrapper fieldset {border-bottom: 2px solid #000!important;}
/* 6-personalizar texto de la búsqueda*/
.ast-search-box.full-screen .search-field{color:#000;}

Personalizar formulario de búsqueda de Astra pro

Ahora solo nos quedará cambiar en todas las clases el color hexadecimal por el que necesitemos. El color hexadecimal es la parte del código que está marcado en rojo.

Para averiguar los códigos hexadecimales de los colores podéis visistar esta página: https://htmlcolorcodes.com/es/

En el siguiente video podrás ver todas las opciones de personalización que hemos comentado y alguna cosilla más.

Si quieres averiguar todas las opciones de personalización que ofrece Astra pro clica aquí.

Compártenos en tu red social favorita
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
¿Te ha resultado útil? ¡Puntúalo!
[Total: 1 Media: 5]

Dejar un comentario

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

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Últimos post del blog
Como publicar videos de acceso restringido con Wordpress

Cómo publicar vídeos de acceso restringido con WordPress

Si estás pensando en montar una plataforma de e-learning o un sistema de membresía, una de las condiciones esenciales que debes implementar es limitar el acceso al contenido de pago de tu página web. Si tu método de formación consiste o se refuerza con la

Crear menú vertical con Wordpress

Cómo crear un menú vertical en WordPress con Astra

En ocasiones, ya sea por una cuestión de diseño o por una necesidad estructural de la web necesitamos alternativas a la típica estructura de menú. Una de esas opciones es la de estructurar nuestro menú de forma vertical. En este post os explicaremos cómo crear

Cómo crear un menu vertical con Elementor

Cómo crear un menú vertical en WordPress con Elementor

Una de las características que caracteriza a WordPress es su gran versatilidad para llevar a cabo una tarea. Si en nuestro anterior post explicábamos la creación de un menú vertical con Astra pro y Ultimate addons for Elementor, hoy os enseñaremos cómo crear un menú

Ir arriba

Esta web utiliza cookies para que tengas la mejor experiencia. Si continúas navegando estás dando su consentimiento para la aceptación de las mencionadas cookies y de sus políticas.