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ú.
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;}
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í.
