Cómo agregar un campo de búsqueda al menú secundario de Divi

En el tutorial de Divi de hoy, le mostraremos cómo agregar un campo de búsqueda a su menú secundario. El menú secundario también se conoce como el encabezado de su página y el lugar donde intenta incluir información práctica sobre su sitio web o empresa. Agregar un campo de búsqueda puede ser una solicitud que haya recibido de un cliente o una necesidad que tenga para su propio sitio web. De cualquier manera, le mostraremos cómo puede integrar fácilmente este campo de búsqueda en su navegación secundaria cuando esté usando el tema Divi.

Resultado

Antes de sumergirnos en los diferentes pasos que tendrás que seguir para llegar allí; Puede ser interesante mostrarle el resultado por adelantado. Si sigue los pasos de la publicación y agrega cambios de apariencia de CSS, obtendrá el siguiente resultado en un menú secundario predeterminado:

Por qué agregar un campo de búsqueda a su menú secundario

Agregar una posibilidad de búsqueda a su menú secundario es una de las cosas que podría haber intentado hacer. Pero a diferencia del menú principal, el encabezado no tiene una página separada dentro de WordPress que lo ayude a agregar cosas manualmente, sin tener que agregar líneas de código PHP al archivo header.php de su sitio web.

Sin embargo, agregar una posibilidad de búsqueda en su menú secundario puede ser algo interesante. Echemos un vistazo a algunas de las razones por las que querría agregar uno.

Ofrezca a sus visitantes una posibilidad de búsqueda desde el principio

Tiene todo tipo de visitantes en su sitio web. Algunos de ellos buscan explorar cosas y tomarse su tiempo, mientras que otros quieren encontrar información específica de inmediato. Al agregar su campo de búsqueda al menú secundario, se le garantizará que los visitantes que buscan algo específico tengan la capacidad de hacerlo de inmediato. Dado que un menú secundario se ubica en la parte superior de la página, los visitantes que tienen prisa apreciarán el esfuerzo que mejora su experiencia de usuario.

Para guardar su menú principal desde el campo de búsqueda

Por supuesto, otra cosa que puede hacer es agregar el campo de búsqueda al menú principal. Pero en algunos casos, es posible que no desee hacer eso. Por ejemplo; si desea mantener el enfoque en los elementos del menú o si no desea mezclar los elementos del menú con el campo de búsqueda. Otra razón podría ser que ya tiene bastantes elementos de menú que hacen que su menú principal parezca ocupado, y no desea agregar un campo de búsqueda encima de eso.

Enfatice el campo de búsqueda sin tener un menú principal llamativo

La mayoría de las personas tienden a mantener sobrio su menú principal y hacen que su menú secundario se destaque. Principalmente, porque quieren mostrar la diferencia obvia entre los dos menús. Y secundario, porque el menú secundario a menudo tiene algunas cosas que quieren enfatizar (como los íconos de las redes sociales). Cuando decida integrar el campo de búsqueda dentro de su menú secundario, también se resaltará automáticamente y estimulará a sus visitantes a buscar y encontrar exactamente lo que están buscando.

Cómo agregar un campo de búsqueda al menú secundario de Divi

Suscríbete a nuestro canal de Youtube

Agregar campo de búsqueda al archivo PHP de encabezado

Ahora, para agregar realmente el campo de búsqueda a su encabezado como se muestra en la imagen a continuación, principalmente tendrá que agregar algo al archivo header.php de su sitio web. La línea de código que necesitará es la siguiente:

<? php get_search_form (); ?>

Continúe y copie esta línea de código PHP y vaya a su Tablero de WordPress. Dentro de su Panel de WordPress, vaya a Apariencia> Editor> header.php.

Ahora puede colocar la línea de código donde desee que aparezca la barra de búsqueda. Como queremos que aparezca justo al lado de los íconos de las redes sociales, le mostraremos dónde colocarlo exactamente en el código. Tendremos que colocarlo justo antes del menú secundario, el contenedor y el encabezado superior se cierran.

Diseñe su campo de búsqueda

De forma predeterminada, el campo de búsqueda parece un poco desactualizado. Probablemente desee cambiar algunas cosas solo para que se vea como desea y para que se adapte a la apariencia del resto de su sitio web. Estas son tres cosas que probablemente querrá cambiar: la etiqueta de búsqueda, la entrada de búsqueda y la entrada de botón.

Si no realiza ninguna modificación CSS en el campo de búsqueda, de forma predeterminada se verá así en su menú secundario:

Que obviamente no es el resultado final que queremos lograr. Afortunadamente, podemos hacer tantas modificaciones en el campo como queramos. En la siguiente parte de esta publicación, le mostraremos cómo modificar todos los elementos del campo de búsqueda y también compartiremos las líneas de código CSS para lograr el siguiente resultado:

Eliminar / modificar etiqueta de búsqueda

El primer elemento que forma parte del campo de búsqueda es la etiqueta de búsqueda. Este es el texto que aparece que explica a las personas que pueden buscar cualquier cosa en el sitio web utilizando el campo. Sin embargo, esta etiqueta no es necesaria. Todo el mundo sabe hoy en día cómo funciona un campo de búsqueda. Siempre puede hacer que la etiqueta de búsqueda desaparezca agregando 'display: none;' al CSS de esa etiqueta. O puede cambiar la apariencia de la etiqueta.

La clase que necesitará para hacer modificaciones a la etiqueta de búsqueda es ".screen-reader-text". Como se muestra en el siguiente ejemplo, puede desactivarlo para que no aparezca.

.screen-reader-text {
display: none;
}

Diseñe su entrada de búsqueda

Lo siguiente que puede querer diseñar es la entrada de búsqueda. Para realizar ajustes en esta entrada, coloque todas las líneas de código CSS entre los siguientes corchetes:

 input#s
{

}

Estilo de la entrada de su botón

Y, por último, también tenemos el estilo del botón. Para realizar modificaciones en esta parte del campo de búsqueda, coloque las líneas de código CSS entre los siguientes corchetes:

input#searchsubmit
{
}

Código CSS necesario para nuestro ejemplo

Después de haber realizado la modificación de PHP, puede lograr instantáneamente el resultado que se muestra arriba yendo a su Tablero de WordPress> Divi> Opciones de tema> General> Y agregando las siguientes líneas de código CSS al campo Personalizado:

.screen-reader-text {
display: none;
}

input#s {
border-radius: 5px;
}

input#searchsubmit {
border: 1px solid #000000;
color: #FFFFFF;
background-color: #000000;
border-radius: 5px;
}

form#searchform {
float: right;
}
@media screen and (min-width: 480px) {
#top-header .container {
padding-bottom: 5px;
}

#et-secondary-menu .et-social-icons {
margin-top: 6px;
}}

Resultado

Ahora que hemos pasado por todos los pasos, echemos otro vistazo a cómo debería verse su encabezado:

Pensamientos finales

En este tutorial, le mostramos cómo agregar un campo de búsqueda a su menú secundario. Además de eso, también le mostramos cómo modificar los elementos dentro de ese campo de búsqueda y le presentamos un ejemplo de líneas de código CSS que puede copiar y pegar para su propio uso. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de D Line / shutterstock.com