No hace mucho creé y regalé nuestro primer paquete de diseño de categoría adicional gratuito . La respuesta fue excelente, por lo que comencé a trabajar en el siguiente: un diseño de categoría adicional para un blog de video. En el proceso de creación, me di cuenta de que algo que hice en el sitio de demostración podría ser algo que a la comunidad también le gustaría saber cómo hacer. Cómo agregar un logotipo al menú secundario de Extra (y ocultar el menú principal por completo).
Tuve la idea cuando buscaba sitios web de videos interesantes para inspirarme. Realmente me gustó cómo el sitio web de hulu tenía un menú mínimo realmente discreto en la parte superior de su página y luego atraía a los visitantes directamente a su contenido, ¡que es lo que todos quieren de todos modos!
Rápidamente me di cuenta de que con solo un poco de retoque podría tener un aspecto muy similar en Extra. ¡Así es cómo!
Preparando sus elementos de diseño
Para este tutorial, probablemente necesitará una versión más pequeña de su logotipo. Las dimensiones que he usado en mi ejemplo son 190 px por 25 px. Incluso puede optar por ir más pequeño dependiendo de su logotipo y de cómo se vea en diferentes escalas.
Una vez que haya creado esta versión de su logotipo, querrá cargarlo en su sitio web para poder acceder fácilmente a él más adelante.
Lo primero que querrá hacer es ocultar su menú principal. Navegue en su administrador de WordPress a Extra > Opciones de tema y desplácese hacia abajo en la pestaña general hasta llegar al panel de CSS personalizado.
Copie y pegue el siguiente css allí:
|
01
02
03
04
05
06
07
|
#main-header {display: none;}#main-header-wrapper {display: none;} |
Haga clic en el botón verde «Guardar cambios» y actualice la interfaz de su sitio web. Si todas sus otras configuraciones aún están configuradas como predeterminadas, es probable que su encabezado ahora se vea así.
A continuación, vaya a Personalizador de temas > Configuración de encabezado y navegación > Configuración de elementos de encabezado y desmarque la casilla junto a «Mostrar barra de tendencias». Haga clic en el botón azul «Guardar y publicar» antes de salir del Personalizador de temas.
Ahora es el momento de crear su menú real yendo a Apariencia > Menús . Para comenzar, haga clic en el texto del enlace azul «crear un nuevo menú».
Nombre el menú como desee y asegúrese de marcar la casilla de verificación en la parte inferior de la pantalla en «Configuración del menú» para que este menú se muestre como el menú secundario.
Ahora puede completar su menú con todos los enlaces que desea mostrar allí. En mi ejemplo, he agregado todas mis categorías allí.
Finalmente, agregue un enlace personalizado.
En el campo URL, simplemente coloque el dominio de la página de inicio de su sitio web. Esto, después de todo, se convertirá en su botón de «inicio». Luego, en el campo Etiqueta de navegación coloque la siguiente línea de HTML.
|
01
|
<span><img src="YOUR LOGO IMAGE LINK"></span> |
Reemplace el texto «EL ENLACE DE IMAGEN DE SU LOGOTIPO» con el enlace al archivo de imagen de su logotipo de la biblioteca de medios. Si no está seguro de cómo obtener ese enlace, vaya a Medios > Biblioteca y haga clic en la imagen de su logotipo.
Cuando aparezca el modal Detalles del archivo adjunto, verá la URL en el campo URL. Cópielo y péguelo en el espacio indicado en el código HTML anterior.
Cuando su enlace personalizado esté completo, guarde su menú y actualice la interfaz de su sitio web. Ahora debería tener un encabezado delgado y mínimo con su logotipo colocado dentro del menú secundario de Extra.
¿Qué otros tutoriales adicionales te interesan?
Sé que hay un montón de apasionados usuarios de Extra en nuestra comunidad con todo tipo de tutoriales extra específicos y solicitudes de obsequios. ¡Esta es su oportunidad de preguntar y agregarlos a nuestra cola de producción de contenido! Háganos saber en los comentarios a continuación lo que le gustaría que cubramos en el futuro y estaré encantado de escribirlo y luego escribirlo en una publicación futura.