Menú y cabecera con The 7
The 7 es un template que recomendamos y usamos muchas veces para nuestros trabajos. Es muy completo, viene con una serie de plugins interesantes y sobre todo permite personalizar bastante sin tener que usar CSS. Aquí te explicamos cómo modificar el aspecto de nuestro menú y cabecera en general con el template The 7.
- Cómo acceder
Para ello, primero deberán dirigirse a la barra superior en WordPress y en “Opciones del Tema” seleccionar “Barra superior y Cabecera”. Nos encontraremos con una serie de opciones, siendo la primera “Diseño”, la cual nos permitirá retocar el aspecto general de nuestra cabecera.
2. Diseño de la cabecera y microwidgets
En ella, podremos seleccionar la disposición de los elementos de nuestra cabecera y modificar los márgenes. En “Inline header layout settings”, “Header height” se refiere a la altura de nuestra cabecera, “header paddings” los márgenes internos de izquierda y derecha, “mobile breakpoint” dónde indicaremos la altura en píxeles dónde empezará esta cabecera y “mobile paddings” los márgenes internos izquierda y derecha en la versión móbil. Finalmente, podremos elegir la posición del menú y si queremos que sea de ancho completo o en caja (con márgenes en cada lado).
En la segunda pestaña llamada “Microwidgets”, podremos añadir o quitar elementos de texto o interactivos de nuestra cabecera. Para ello, simplemente tendremos que activar los microwidgets y arrastrarlos a la zona dónde queremos colocarlos. “Top bar” sería la barra superior que aparecería encima del menú y “navigation area” significa que aparecerían al lado del menú. Para editar estos elementos, solo tendremos que darle al pincel al lado del nombre.
Más abajo, tenemos una serie de cajas que nos permiten editar los colores, márgenes y tipografías de los elementos tanto de la barra superior, como del área de navegación o de nuestra cabecera en la versión móvil.
3. Barra superior y cabecera
La tercera pestaña “Barra superior” nos permite cambiar los colores de fondo, los márgenes y las decoraciones de toda la barra superior. Lo mismo para la siguiente pestaña “Cabecera” pero esta vez para el área de navegación.
Bien, ahora llega la parte que más nos interesa, el aspecto de nuestro menú. Para ello nos dirigimos a la quinta pestaña “Menú”.
Aquí podremos editar la tipografía de los elementos del menú, su estilo y su tamaño. Lo mismo haremos con las descripciones debajo de los elementos del menú, en caso de tenerlos.
Luego tendremos la opción de elegir los colores de fuentes de estos elementos, tanto en modo normal, activo o al pasar el curso. Esto permitirá a los usuarios ubicarse en la web y darle un toque de interactividad a nuestro menú. A continuación, podremos editar los márgenes externos e internos de los elementos del menú, disminuyendo o aumentando en función de la cantidad de elementos que tenemos para que todo quepa en una sola línea. Finalmente, podremos añadirles divisores o estilos decorativos para darle un toque más estético e interactivo. La siguiente pestaña va más o menos de lo mismo, solo que nos servirá para editar el estilo de los elementos del submenú.
En la séptima pestaña llamada “Cabecera flotante”, podrás editar los ajustes de tu cabecera flotante si la tienes activada, pudiendo añadir sombras, efectos o cambiar los colores de los microwidgets en comparación con la cabecera normal.
Por último, las dos últimas pestañas servirán para cambiar los ajustes y el estilo de la cabecera y el menú de la versión móvil.