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
Mantenimiento de páginas web Vilanova i la Geltrú

Mantenimiento de páginas web, porque es necesario

Arrancas tu web y el susto es importante, te duele el bolsillo: comprar dominio, hosting, plantillas y plugins de pago, quizás algún servicio externo, las horas del diseñador, el trabajo del creador de contenido. Finaliza tu proyecto y tras todo esto ¿mantenimiento de  página web?

Como crear una web para inmobiliaria con wordpress

Cómo crear una web para inmobiliarias con WordPress

Si estas buscando cómo crear una web para inmobiliarias con WordPress en este post te vamos a explicar como llevarlo a cabo con el plugin Estatik. ¿Por qué con un plugin cuando hay plantillas diseñadas especialmente para esta función? Pues por tres motivos: 1º- Por

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