Usar Wix: Diseños de header o cabecera y personalizar menú

En este post vamos a ver un tema fundamental en la creación de una página web, que es la creación y personalización del header o cabecera con el editor de WIX. También veremos como añadir y personalizar su elemento principal que es la barra de menú con WIX.

Las opciones de personalización del header y barra de menú con Wix son casi infinitas, además la posibilidad de incluir en dicho header casi cualquier elemento convierten al editor de Wix en una herramienta sin parangón en el mercado de herramientas de diseño web.

 

 

PRUEBA WIX GRATIS

 

 

 

 

1.- Diseños de header o cabeceras con WIX

 

Wix nos proporciona diferentes tipos de header o cabeceras para nuestro sitio web. Para ver las opciones disponibles haremos clic con botón izquierdo del ratón en una zona despejada en el interior del header o cabecera. A continuación, veremos como nos aparece una serie de iconos para la personalización de dicho header:

 

 

• i.- Botón “Cambiar diseño de tu encabezado”: esta opción mostrará una ventana emergente con diferentes diseños de header y la posibilidad de personalizarlos.
• ii.- icono de engranaje (Opciones): esta opción de Wix nos mostrará opciones de usabilidad del header o encabezado.
• iii.- icono pluma (Diseño): esta opción mostrará una ventana emergente con diferentes diseños de header y la posibilidad de personalizarlos (igual que el botón “cambiar diseño de tu encabezado”)
• iv.- icono interrogación (Ayuda): ventana de ayuda sobre los encabezados o headers en WIX.

 

 

1.1.- Header normal y header fijo o flotante en WIX

 

Wix incluye la opción de que el header o encabezado sea normal o flotante (fijo, pegajoso o sticky).

El «header normal» desaparece de la pantalla cuando hacemos scroll en la página web. Es decir, desaparece cuando nos desplazamos a la parte inferior de la página. Por el contrario, el header fijo, flotante, sticky o pegajoso permanece siempre en la parte superior de la página hagamos scroll o no

En Wix podremos controlar esta característica de la web haciendo clic con el botón izquierdo del ratón sobre el interior del header en una zona despejada, y después, en el icono con forma de engranaje que comentamos en el apartado anterior.

Al hacer clic sobre dicho icono se nos mostrará una ventana emergente titulada “Encabezado”, con un selector denominado “encabezado fijo”. Si activamos el selector, el header o cabecera permanecerá fijo o flotante. Si por el contrario, desactivamos esta opción, el header desaparecerá cuando hagamos scroll en la página.

 

NOTA: En la pantalla de edición de WIX siempre se mostrará el header normal para dejarte más espacio para la edición. Para ver el resultado real haz una previsualización de la página haciendo clic en el botón “Vista previa”.

 

 

1.2.- Cómo elegir tipo de header con WIX

 

Para elegir un tipo de diseño de header con Wix, haremos clic con el botón izquierdo del ratón sobre una zona despejada del interior del header, y después, en el icono con forma de pluma (diseño) que vimos anteriormente.

 

 

Se abrirá una ventana emergente con un montón de tipos diferentes de cabeceras o headers.

Al posar el ratón sobre cada uno de los posibles diseños verás una previsualización en tiempo real.

No es importante que te fijes en el color, ya que este lo podrás personalizar. En lo que te debes fijar es en el diseño. Verás que hay headers que utilizan varios colores, algunos que ocupan todo el ancho y otros solo la parte central, headers que tienen líneas horizontales, etc.

Para elegir un tipo de header simplemente deberás hacer clic con el botón izquierdo del ratón sobre le header que quieras utilizar.

 

 

 

1.3.- Cómo personalizar el tipo de header elegido con WIX

 

Una vez elegido un tipo de header para la web, procederemos a personalizar dicho header haciendo clic en el botón “Personalizar” con el icono en forma de gota de agua que aparece bajo los diferentes tipos de header.

 

 

En la misma ventana emergente nos aparecerán una serie de opciones, que vamos a ver a continuación.

 

 

i.- botón “Opciones de diseño”: si hacemos clic en este botón volveremos al apartado anterior en que se nos mostraban diferentes diseños de header o cabeceras.

 

 

ii.- Formas de header: justo debajo del botón “opciones de diseño” se muestran las diferentes tipologías de header. Verás que hay seleccionada una de ellas, que se corresponde con la que elegiste anteriormente, como vimos en el apartado 1.2

Si cambias la tipología de header cambiarás el tipo que elegiste anteriormente. Por lo que en principio lo recomendable sería que no cambiaras la forma de header, a no ser que realmente quieras hacerlo.

 

iii.- pestañas personalización: Estas pestañas se muestran en el lateral izquierdo, bajo las formas de header. Dependiendo del tipo de header elegido anteriormente, se mostrarán más o menos pestañas de personalización.

Si hacemos clic sobre una pestaña se mostrarán, a la derecha, las diferentes opciones de personalización del header seleccionado incluidas en dicha pestaña.

Dependiendo del tipo de header tendremos opciones de personalización de: color y opacidad, borde, esquinas, sombreado o espaciado.

QUIERO PROBAR WIX

 

 

2.- Cómo Añadir menú al header de la web con WIX

 

El elemento más importante que tendrás que añadir al header de tu página web será, sin duda, el menú.

 

 

Ahora vamos a ver cómo añadir dicho menú al header o cabecera de nuestro sitio web utilizando el editor de WIX.

Para añadir el menú al header de la web con WIX, iremos al menú lateral y haremos clic en el icono “+”. A continuación, seleccionaremos la opción “Menú” en el desplegable.

 

 

Te aparecerán un montón de diseños de menú clasificados en diferentes bloques o apartados: menús temáticos (a juego con la plantilla), menús horizontales, menús verticales y menús de anclaje.

Haz clic en el menú que quieras y arrástralo a la zona de cabecera o header de la web. Después, haz otra vez clic sobre el menú y arrástralo hasta el lugar del header donde quieras ubicar el menú.

 

NOTA: Puedes eliminar el menú en cualquier momento, como cualquier otro bloque de Wix. Es decir, haciendo clic con el botón izquierdo del ratón sobre el elemento y luego pulsar el botón “Supr”. También puedes hacerlo haciendo clic sobre el elemento con el botón derecho del ratón y seleccionando la opción: “Eliminar”.

 

 

2.1.- Personalizar el menú con WIX

 

Una vez añadido el menú al header de la web con el editor de WIX, haremos clic con el botón izquierdo del ratón sobre el menú para personalizar su diseño.

Nos aparecerán las siguientes opciones:

 

 

 

i.- Administrar menú: si hacemos clic en este elemento se mostrara la ventana de estructuración de páginas del menú. Es decir, con esta opción podremos cambiar la estructura interna del menú. Esto lo vimos ampliamente en esta entrada de blog: Crear páginas y menú con WIX

 

ii.- Navegar: esta opción nos permitirá cambiar de página mientras utilizamos el editor de WIX. Es decir, podremos cambiar de página sin tener que hacer una vista previa de la web. Hacer clic en “Navegar” es lo mismo que hacer clic en el selector que aparece en la parte superior izquierda junto al logo de “WIX”.

 

iii.- icono en forma de página web (Estilos): al hacer clic en este elemento de menú se mostrarán opciones de personalización del menú, pero en lo que se refiere a espacios y colocación de sus elementos en el contenedor. Algunas opciones son:

Alineación del texto: alinear los elementos del menú en su contenedor a la izquierda, derecha o centrado

Botones proporcionales: si activamos esta opción todos los «botones» del menú tendrán el mismo tamaño y este será el del más grande. En caso contrario, cada uno tendrá el tamaño necesario para que quepa el texto.

Justificar menú: activada esta opción, los elementos de menú se estiran para abarcar el ancho total de la caja de menú o contenedor.

Mostrar menú de: con esta opción podemos elegir si los ítems o elementos del menú se despliegan de izquierda a derecha o de derecha a izquierda.

Botones adicionales: aquí escribiremos el texto que aparecerá en el botón que solo se mostrará cuando el dispositivo de la persona que está visualizando la web no puede mostrar el menú completo por falta de espacio disponible.

 

iv.- icono en forma de pluma (diseño): al hacer clic en este icono nos aparecerá una ventana emergente dividida en dos partes.

En la superior nos aparecerán los diferentes diseños o tipos de menú disponibles. Aparecerá señalado el que elegimos inicialmente, aunque podemos cambiar de diseño haciendo clic sobre el que queramos.

En la parte inferior aparecerá un botón con el texto: “Personalizar”. Al hacer clic sobre el botón se mostrarán una serie de opciones de diseño del menú.

 

En la parte superior aparecerá el formato de menú elegido y en la parte inferior las diferentes opciones de diseño clasificadas en 3 apartados diferentes:

 

 

Normal: en este apartado aparecen las principales opciones de diseño del menú. Color y opacidad, personalizar bordes, curvado de esquinas, opciones de texto o fuentes del menú y opciones de espaciado.

Cursor: son opciones de diseño que se mostrarán solo cuando pongamos el cursor del ratón sobre algún elemento del menú. Es lo que en diseño web se conoce como opciones de diseño tipo “hover”. Es decir, podremos personalizar el diseño de los diferentes elementos del menú en el momento en que se ponga el ratón sobre ellos

Clic: son opciones de diseño que se mostrarán en el menú cuando hagamos clic sobre alguno de los elementos. Es decir, podremos definir el diseño del elemento del menú cuando se hace clic sobre él. Es decir, lo que se denomina cuando el elemento del menú está activo.

 

v.- icono en forma de rombo (animación): desde aquí podremos personalizar seleccionar y personalizar el tipo de animación que se producirá cuando se muestre el menú de la web (esto es opcional)

 

vi.- icono forma de flecha con dos puntas (estirar): si marcamos esta opción el contenedor del menú tendrá anchura completa. Además, podremos establecer unos márgenes laterales.

 

vii.- icono en forma de interrogación (ayuda): esta opción sirve para obtener ayuda sobre las opciones de diseño del menú.

 

viii.- iconos flechas hacia abajo: con estas flechas se puede estirar o encoger el contenedor de un determinado elemento de Wix, como por ejemplo el contenedor del menú.