Configurar el diseño de la cabecera puede ser un elemento muy útil para diferenciarte de la competencia y un punto positivo para atraer estudiantes a tus productos digitales. Es la carta de presentación de tu tienda, por lo que es una excelente oportunidad para resaltar los colores y logotipo de tu marca. Recuerda que todo entra por los ojos y en el mundo digital, más aún.
A continuación te contamos, paso a paso, cómo personalizar la cabecera de tu tienda:
IMPORTANTE: Te recomendamos tener conocimientos avanzados de diseño para modificar esta sección de tu tienda.
Inicia sesión en tu cuenta
Haz clic en “Sitio Web” en el menú ubicado en la barra lateral izquierda y selecciona la opción de “Navegación”. Aparecerás en la pestaña de “Cabecera” que viene marcada por defecto
Nota: Los tabs de la cabecera se irán generando de forma automática a medida que vayas creando nuevas páginas en la tienda. Podrás elegir si estos serán accesibles o no para tus usuarios desde la barra de navegación.
En el apartado de “Personaliza la navegación” podrás vincular tu tienda con sitios o páginas externas a través de enlaces que quieras compartir con tus usuarios.
Para crear un nuevo enlace en la cabecera:
Haz clic en el botón “+ Enlace”
Agrega el nombre de tu elección, el URL al que apunta, define para qué usuarios será visible y activa la opción de “Abrir en una nueva pestaña” en caso de considerarlo necesario
La nueva opción aparecerá en la cabecera junto con las demás que ya se encuentren habilitadas:
Nota: Podrás definir el orden de las opciones haciendo clic y sosteniendo sobre el icono de 8 puntos al inicio de cada una, para ubicarla en el lugar de tu elección. Los cambios se verán reflejados automáticamente en la cabecera.
En “Personaliza la cabecera” encontrarás dos opciones:
Tabs:
Margen: Determina la distancia entre los tabs y el margen.
Paddings: Determina la distancia entre cada uno de los tabs.
Radio del borde: Determina el color de fondo del tab.
Color del tab seleccionado: Determina el color del tab, una vez seleccionado.
Color del texto del tab: Es el color de la tipografía del tab.
Color del tab en hover: Es el color del hover que aparece en los tabs cuando se posiciona el cursor sobre ellos, sin necesidad de hacer clic.
Nota: El Hover es la acción que se genera cuando se pasa el cursor sobre un elemento determinado. En este caso puede ser la aparición de un recuadro detrás del texto y/o el cambio de color de la tipografía.Color del texto del tab en hover: Es el color que toma la tipografía del tab dentro del hover cuando se posiciona el cursor sobre él.
Nota: Es importante utilizar los píxeles como unidad de medida para cualquier cambio que se quiera realizar en este apartado. Olvidar lo anterior, puede generar que ningún cambio se vea reflejado.
Cuerpo de la cabecera:
Padding a la izquierda: Determina la ubicación del logotipo desde la izquierda hacia el centro de la página.
Padding a la derecha: Determina la ubicación de la barra de navegación desde la derecha hacia el centro de la página.
Altura: Determina el ancho de la cabecera en el que se ubican tanto el logotipo como la barra de navegación.
Tamaño del logo: Determina la amplitud del logotipo.
Color de la cabecera: Personaliza el color de la cabecera
Nota: Es importante utilizar los píxeles como unidad de medida para cualquier cambio que se quiera realizar en este apartado. Olvidar esto puede generar que ningún cambio se vea reflejado.