Cambiar el botón del módulo buscar de Divi por un icono

por | 10 Oct, 2018 | css, Diseño Divi, Módulos

El módulo buscar de Divi

El módulo buscar de Divi es uno de los pocos elementos de Divi que no ha sufrido una transformación importante en los últimos años. Por supuesto, ha incorporado las mejoras de diseño que se han ido sumando en las sucesivas actualizaciones del tema. Y no son pocas.

Pero se echan algunas cosas de menos. Por ejemplo, la posibilidad de sustituir el botón de buscar que incorpora por defecto. Y eso es lo que vamos a hacer en este tutorial. Aprenderemos cómo sustituir el botón del módulo buscar de Divi por un icono. Lo haremos con un poco de CSS. La inspiración viene de la excelente página Divi Soup.

La imagen destacada que ilustra este post, arriba del todo, muestra el resultado final de nuestro tutorial.

Dividiremos este tutorial en dos partes. Primero, iremos explicando paso a paso los distintos bloques de código CSS que aplicaremos al módulo buscar de Divi. Después, haremos algunos ajustes en el diseño para adaptar la apariencia del módulo buscar de Divi a nuestro gusto.

Creamos el módulo

Inserta un nuevo módulo en tu entrada o página. Elije búsqueda en el tipo de módulo

modulo-buscar-Divi

En la pestaña Avanzado de los ajustes del módulo que acabas de crear, escribe la clase icono-buscar en el campo Clase CSS. Puedes ver unan captura de imagen bajo estas líneas.

clase-buscar.Divi

A partir de aquí, si no lo has hecho ya, te recomiendo que actives el constructor visual. Esto va a permitirnos comprobar nuestros ajustes según vamos aplicándolos.

Como todavía no hemos incluido el código CSS en nuestra página, el módulo tendrá su apariencia por defecto. Abajo puedes verlo.

buscador-Divi-por-defecto

El código CSS

Ahora vamos a añadir el código CSS a la página. Puedes hacerlo en tu tema hijo si estas usando uno. Otra opción es ponerlo en el panel CSS de las opciones de tema (Tambien puedes acceder a este panel desde el personalizador de Temas). Si quieres que el efecto se aplique en cualquier módulo que tenga la clase icono-buscar de cualquier parte de tu sitio ponlo en uno de estos sitios. Sin embargo, yo sólo quiero que se ejecute en una entrada determinada, así que para este ejercicio lo haremos en las opciones de página.

Aquí tienes el código que debes copiar…

/*---------------------------------------------------------------*/
/*------Reemplazar el botón buscar por un icono------*/
/*---------------------------------------------------------------*/
/*BLOQUE 1. Oculta el botón por defecto/*/
.icono-buscar input.et_pb_searchsubmit,
.widget_search input#searchsubmit {
    background: transparent;
    color: transparent;
    border: none;
    width: 55px;
    z-index: 2;
}
/*BLOQUE 2. Añade espacio al campo de texto del buscador*/
.icono-buscar input.et_pb_s,
.widget_search input#s {
    padding-right: 55px !important;
}
/*bloque 3. Añade el icono*/
.icono-buscar .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;
}

…Y pegar en la pestaña avanzada de los ajustes de la página/entrada, dentro de CSS personalizado.

css-pagina-constructor-visual

He dividido el código por comentarios en tres bloques para explicar brevemente qué hace cada parte del CSS. Veamos.

BLOQUE 1. Oculta el botón por defecto

Primero hacemos que el fondo del botón y el color del texto sean transparentes. Hacemos esto en lugar de eliminarlo para que podamos seguir usando su función de clic. También eliminamos el borde, establecemos un ancho y agregamos un índice z para que nuestro botón ‘invisible’ se coloque encima de nuestro icono.

BLOQUE 2. Añade espacio al campo de texto del buscador

A continuación, agregamos algo de relleno derecho al campo de entrada de búsqueda para que cualquier texto que escribamos no se solape sobre nuestro nuevo icono.

BLOQUE 3. Añade el icono

Finalmente, añadimos el icono como un pseudo elemento, estableciendo el tamaño de fuente, el relleno y también el índice z para que quede debajo de nuestro botón invisible. Así parece que estamos haciendo clic directamente en el icono. La fuente que se ha usado es la de Elegant Themes, pero si has integrado cualquier otra puedes también usarla.

Así tenemos nuestros buscadores (en la entrada y sidebar) después de añadir el código CSS.

buscador-Divi-con-icono

Y ahora vamos a configurar un poquito el diseño.

Algunos retoques de diseño

Y ahora que ya tenemos el icono integrado, abrimos los ajustes del módulo y realizamos unos mínimos ajustes para personalizar nuestro buscador.

En la pestaña contenido sólo hay que poner un texto de marcador de posición. Esto es lo que leerá el usuario cuando vea el módulo antes de interactuar con él. Puede ser un texto tipo “Buscar en el blog” o similar. Asegúrte de que en elementos, la opción show button está activada, de lo contrario no se podrá hacer click en el icono.

Pasamos a la pestaña Diseño. En el panel Tamaño, ajustamos al 45% y ponemos la alineación al centro.

Ahora, en Borde, esquinas redondeadas (Rounded Corners), desactivamos la opción de restringir proporcionalmente. Si lo tenemos activado, cada vez que cambiemos un valor, cambiará proporcionalmente en todos los lados (izquierda, derecha, superior e inferior), Así que una vez desactivado, introducimos 24 px en los campos superior izquierda e inferior derecha.

bordes-redondeados-Divi

Seguimos en el panel borde de la pestaña diseño, pero ahora ajustamos cada borde de la siguiente manera, en border styles, como ves en la captura de imagen.

bordes-buscador-Divi

1.- Borde superior: grosor 4 píxeles. En color elije un azul o el que te guste y ajusta su opacidad al 35% aproximadamente.

2.- Borde derecho: grosor 3 píxeles. En color elije el mismo color que has elegido para el borde superior, pero esta vez no apliques transparencia.

3.- Borde inferior: grosor 6 píxeles. Mismo color sin transparencia.

4.- Borde izquierdo: grosor 2 píxeles. Mismo color 35% opacidad.

Si has seguido el tutorial como te he explicado, el resultado debe ser parecido a este:

módulo buscar de Divi final

Por supuesto, haz pruebas para encontrar el efecto perfecto para tu opacidad. Como siempre, si te apetece ver el proceso en vídeo, justo abajo lo tienes.