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.

Índice de contenidos

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
Astra pro review reseña theme

Astra Pro: la plantilla perfecta para tu web en 2020

Con más de 800.000 instalaciones activas y más de 3700 valoraciones de 5 estrellas, Astra se presenta con unas muy buenas valoraciones por parte de la comunidad de usuarios de WordPress. Si la versión gratuita de esta plantilla presenta estos números, y teniendo en cuenta

Como utilizar los hooks de la plantilla Astra Wordpress

Cómo utilizar los hooks de la plantilla Astra de WordPress

Este va a ser el primero de una serie de articulos en los que trataremos en profundidad el theme de WordPress Astra. Para iniciar esta serie de artículos vamos a empezar con una de las características que nos va a ahorrar mucho tiempo, especialmente a

Cómo crear un formulario multipasos con Elementor

Cómo crear un formulario multipasos con Elementor y Piotnet

¿Tiene formularios largos en su sitio web? ¿Tu analitycs marca visitas en las páginas de formularios y no recibes conversiones?. Los formularios largos desalentan a los usuarios y aumentan el porcentaje de abandono. La alternativa pasa por segmentar los campos del formularios en varias páginas.

Suscríbete a nuestro blog

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í.

Deja 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í.
Ir arriba