Menú minimalista en el tema Extra

por | 0 Comentarios

Temas Elegant Themes

Tal vez buscas algo menos llamativo que un gran logo presidiendo tu sitio web, o no quieres dar tanta importancia a la marca para dar preferencia al contenido. Este tutorial te enseñará a crear un menú minimalista y elegante con el tema Extra.

Suscríbete:

 

Cómo hacer un menú minimalista con Extra

El proceso es muy sencillo, pero debemos seguir unas recomendaciones para que el resultado no sea el que no deseamos. No a todos les puede servir este tipo de menú.

 

 

Antes de elegir un menú minimalista para Extra

Tenemos que entender que el menú minimalista es para aquellos que quieren reducirlo a su mínima expresión, por lo que no podemos llenarlo de enlaces a multitud de sitios.

El logotipo que se utilizará tiene que ser pequeño, si no podemos reducir nuestro logo a un tamaño más o menos de 195×25 píxeles, es mejor no optar por esta opción (si queremos mostrar un logo).

Este menú no es de los llamados «pegajosos», se desplaza en conjunto con la página. Podríamos añadir esa función con algún plugin adicional, pero ya estaríamos dándolo más importancia de lo que merece un menú minimalista.

 

Ocultar el menú principal

Vamos que centrarnos en el menú secundario, el que contiene el buscador, los enlaces sociales y las tendencias. Por eso ocultaremos el menú principal con CSS.

Abrimos el Personalizador y escribimos en la pestaña «CSS adicional» las siguientes líneas

Menú minimalista. Código CSS

 

Nos quedará algo así.

Menú minimalista. Menú principal oculto

 

Añadir elementos del menú

Ahora nos dirigimos a la pestaña «Header & Navigation Settings > Header Elements Settings» (Opciones de cabecera y navegación > Configurar elementos de cabecera) y desactivamos la «Mostrar barra de tendencias» o «Show Trending Bar«.

Menú minimalista. Barra de tendencias

 

No os preocupéis si de rrepente deja de verse la barra del menú. Es sólo un error de la pre visualización. En cuanto vayáis a ver la web, ahí estará.

Creamos un menú con los enlaces que necesitemos y seleccionamos que se muestre en la barra secundaria. Si aún no sabéis añadir un menú, podéis ver este artículo de este mismo curso.

El enlace «Inicio» o «Home«, o como llaméis la página principal, debe ser un enlace personalizado donde pondremos los siguientes datos:

  • URL: La dirección de la página principal
  • Etiqueta de navegación: El siguiente código HTML que enlaza con la imagen del logotipo adaptado a un tamaño acorde a este menú.

Menú minimalista. Menú

 

Cuando tengamos todo configurado, pinchamos en «Guardar y publicar» y podemos ir a ver cómo queda. Para ajustar el tamaño de texto o los colores, abrimos las opciones del menú secundario y lo adaptamos a nuestro gusto.

Menú minimalista. Resultado final

 

La dirección de la imagen del logo la conseguimos desde el menú «Medios» del panel de administración.

Cuando seleccionamos la imagen, una vez subida a WordPress, se abre una ventana con la información que necesitamos poner en el enlace del menú.

Menú minimalista. url de la imagen

 

Temas Elegant Themes

 

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


El menú minimalista es una opción para dar preferencia a tu contenido sin dejar de poder acceder a las páginas principales. ¿Lo usarías en tu web?

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido