Cómo cambiar el botón de búsqueda de Divi por un icono @ Ayuda WordPress

El módulo de búsqueda de Divi, por defecto, muestra un botón a su derecha, pero ¿no te gustaría cambiar ese – feo – botón por un icono de búsqueda? Es muy fácil, solo son 2 pasos…

Invéntate una clase CSS

El primer paso no puede ser más sencillo, solo tienes que inventarte un nombre para la clase CSS que convertirá el feo botón del buscador de Divi por algo más mono, un sencillo, pero bonito icono de búsqueda.

Solo tienes que editar el módulo de búsqueda, o añadirlo si aún no lo tenías insertado en tu página, y en la sección de ajustes avanzados, añadir una clase CSS con el nombre que prefieras, que en este ejemplo he llamado ayudawp-icono-buscador, así, a lo loco, sin pensarlo mucho.

Guardas los cambios en el módulo, guardas los cambios en el maquetador de Divi y ya has terminado el primer paso.

Y sí, verás que aún no ha cambiado nada, tu buscador sigue igual que siempre, así de soso…

El CSS personalizado

Ya solo queda añadir un poco de CSS personalizado a esa nueva clase que nos hemos inventado, para que suceda la magia, y sería así:

/* Reemplazar botón de búsqueda de Divi por un icono */
/* Primero ocultamos el botón de búsqueda */
.ayudawp-icono-buscador input.et_pb_searchsubmit,
.widget_search input#searchsubmit {
background: transparent;
color: transparent;
border: none;
width: 55px;
z-index: 2;
}
/* Ahora añadimos algo de relleno al campo de búsqueda para que quepa bien el icono */
.ayudawp-icono-buscador input.et_pb_s,
.widget_search input#s {
padding-right: 55px !important;
}
/* Terminamos añadiendo el icono */
.ayudawp-icono-buscador .et_pb_searchform:before,
.widget_search::before {
content: '\55';
position: absolute;
font-family: 'ETModules';
z-index: 1;
right: 0;
font-size: 20px;
padding: 8px 20px;
}

Lo único que tienes que hacer, aunque no sepas ni siquiera algo de CSS básico, es copiar y pegar el código anterior en la sección de CSS adicional del personalizador de WordPress, que personalmente es donde más me gusta poner estos códigos, porque así ves de inmediato el resultado; o si lo prefieres, en la caja de CSS personalizado de las opciones de Divi, el resultado es el mismo.

Así sería en el personalizador, donde puedes comprobar que ya se ven los cambios que aplicarás con el CSS a tu buscador:

Fíjate que he resaltado en el código donde debes poner TU clase CSS personalizada, por si decidiste no usar la mía de ejemplo, y prefieres una que tú te hayas inventado. Si eliges otra clase CSS y no coincide en el código no funcionará el CSS.

Lo importante es que ahora ya sí funciona la clase CSS personalizada en el módulo de búsqueda de Divi, mostrando este bonito buscador, con su icono, y sin el feo botón:

¿A que mola el CSS? Siempre digo a quienes diseñan con Divi – o cualquier otro maquetador – que con solo que aprendan CSS el diseño de webs dejará de tener límites, podrás hacer de todo, llegando con CSS a donde no llegue el maquetador, y convirtiéndote en un profesional web más completo, que sea capaz de ofrecer todo tipo de soluciones a sus clientes.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!