Mega guía tipos de header de la plantilla Avada + Vídeo

En este post veremos los diferentes tipos de headers o encabezamientos web que nos ofrece la plantilla Avada que os recuerdo es la plantilla wordpress más vendida en el market de Theme Forest.

También veremos desde donde podemos personalizar el diseño de dicho header realizado con Avada.

QUIERO LA PLANTILLA AVADA

 

 

 

 

1.- Donde se gestionan los tipos de diseños de headers de la plantilla Avada

 

Para acceder a la interface de gestión de cabeceras o headers de una web realizada con el tema Avada tendremos que acceder al “Theme Options” (Opciones del tema).

Para ello iremos a: “Avada > Theme Options”.

En la interface encontraremos un amplio menú lateral, pero solo nos centraremos en esta ocasión en las opciones:

a.- Headers

a1.- Header Content

a2.- Header Background Image

a3.- Header Styling

a4.- Sticky Header

 

 

 

2.- Tipos de headers o cabeceras de la plantilla Avada (Header content)

 

Existen dos formatos fundamentales de headers o cabeceras con la plantilla Avada. El formato de header vertical y el horizontal.

Lo cierto es que cada vez se ven menos los formatos verticales en las webs, pero en determinadas ocasiones aún se siguen viendo algunos.

La elección de un tipo de header horizontal o vertical en la plantilla Avada la realizaremos en: “Avada > Theme Options > Header > Header Content”.

Aquí veremos una opción denominada “Header Position” con tres posibles opciones:

• Top: si marcamos esta opción, Avada mostrará un header horizontal.
• Left: si elegimos esta opción, Avada mostrará un header con un menú vertical situado en el lado izquierdo de la pantalla.
• Right: si marcamos esta opción, la plantilla Avada mostrará un header de tipo vertical también, pero en este caso situado en el lateral derecho.

 

 

QUIERO LA PLANTILLA AVADA

 

 

2.1.- Header con menú horizontal Avada

 

Como he comentado en el apartado anterior, para seleccionar el menú o header horizontal de la plantilla Avada iremos a: “Avada > Theme Options > Header > Header Content” y en “Header Position” seleccionaremos “Top” y guardaremos.

 

 

2.1.1.- Seleccionar tipo de header horizontal de Avada

 

En la opción denominada: “Select a Header Layout” podremos elegir entre 7 diferentes diseños de cabeceras o header horizontales con Avada.

 

 

Dependiendo del tipo de headers seleccionado tendremos más o menos barras horizontales. En las barras complementarias podremos añadir opciones de contacto como teléfono o email, un menú o iconos de redes sociales.

Dependiendo del tipo de header seleccionado en la plantilla Avada tendremos más o menos opciones complementarias.

Concretamente con los headers 1,6 y 7 solo disponen de la barra o bloque principal.

 

 

Los headers 2 y 3 disponen de barra principal y barra superior

Con los headers 4 y 5 disponen de 3 barras o bloques (principal, superior y otra intermedia)

 

 

i.- header 1: este tipo de header solo muestra la barra o bloque principal del header, el logo lo sitúa en la parte izquierda y los elementos del menú a la derecha.

 

ii.- header 2: este tipo de header muestra 2 bloques o barras horizontales, la principal y la superior. En la barra superior se pueden mostrar elementos como email, teléfono, iconos de redes sociales y/o un menú (Top Navigation).

El logo se muestra en la parte izquierda y los elementos del menú principal en la parte derecha.

Encima de la barra superior muestra una línea gruesa.

 

iii.- header 3: este tipo de header es prácticamente igual que el anterior. Con la pequeña diferencia de que este no muestra la línea situada encima del header superior.

 

iv.- header 4: este header está formado por 3 bloques. En la barra o bloque superior podremos poner menú, elementos de contacto o redes sociales.

En el bloque intermedio el logo, barra de búsqueda y opcionalmente un texto. En el bloque principal el menú

 

 

v.- header 5: Este diseño de header de la plantilla Avada es exactamente igual al anterior con la excepción de que el bloque central solo muestra el logo centrado.

 

vi.- header 6: este tipo de header de Avada no muestra barra superior. El logo lo sitúa en la parte izquierda y en la derecha sitúa un icono tipo “hamburguesa” desde el cual se desplegarán todos los ítems del menú (imitando el formato móvil).

 

vii.- header 7: este tipo de header de la plantilla Avada tampoco muestra barra superior. El logo aparece centrado en línea con los elementos del menú.

 

VER HEADERS AVADA

 

 

2.1.2.- Elementos del header Avada

 

Dependiendo del tipo de header que selecciones podrás añadir más o menos elementos a dicho header.

• headers de 1 bloque: Es decir, los tipos 1,6 y 7 no podrás añadir ningún elemento especial al header.
• headers de 2 y 3 bloques (headers 2, 3, 4 y 5): podrás añadir información de contacto, iconos de redes sociales y menús.

 

 

 

i.- Header content 1: el contenido del header content 1 se muestra en la parte IZQUIERDA de la barra o bloque superior. Por lo tanto será válido para los headers 2,3,4 y 5

Podrás elegir entre:

a.- Contact info: si elegimos esta opción se mostrará en el header content 1 el email y teléfono que asignemos en los campos “Phone Number For Contact Info” y “Email Adress For Contact Info” que aparecen un poco más abajo.

 

b.- Social Links: Aparecerán los iconos de las redes sociales en las que estamos presentes. Debes haberlas configurado de manera previa en: “Avada > Theme Options > Social Media > Social Media Icons”

 

c.- Navigation: Aparecerá el menú que tengamos asignado a la zona “Top Navigation”. En este post puedes ver cómo se crea un menú en wordpress y como se asignan las diferentes zonas con la plantilla Avada: Crear un menú con Avada

 

 

ii.- Header content 2: el contenido del header content 2 se muestra en la parte DERECHA de la barra o bloque superior. Por lo tanto será válido para los headers 2, 3,4 y 5.

Los elementos que podemos seleccionar son exactamente los mismos que hemos visto de manera pormenorizada en el apartado anterior (email, teléfono, menú e iconos redes sociales)

 

iii.- Phone number For contact info: en este campo debemos poner el número de teléfono que queremos que aparezca en el bloque o barra superior que asignaremos con el header content 1 y header content 2

 

iv.- Email address For contact info: en este campo pondremos el email que queremos que se muestre en el bloque o barra superior y que asignaremos a través del header content 1 y header content 2.

 

v.- Header content 3: éste solo se muestra con el header 4 y mostrará el contenido en la parte centro – derecha del bloque intermedio.

Podremos elegir entre:

a.- Tagline: si elegimos esta opción podremos mostrar un texto que deberemos escribir en “Tagline for content 3”

b.- Search: si elegimos esta opción se mostrará la barra de búsqueda de Avada

c.- Tagline and Search: se mostrará el texto que pongamos en “Tagline for content 3” y la barra de búsqueda de Avada

d.- Banner: si eliges esta opción podrás mostrar un banner que deberás introducir a través de su código HTML en el campo: “Banner code For content 3” que te aparecerá al final de la página.

e.- Leave Empty (dejar vacío): para NO mostrar ningún contenido.

 

vi.- Tagline for Content 3: aquí podremos el texto que mostraremos de manera opcional en el header content 3.

 

 

 

2.2.- Header con menú vertical con Avada

 

Cómo antes hemos comentado, para poder seleccionar el header vertical con la plantilla Avada debemos ir a: “Avada > Theme Options > Header > Header content”.

En el selector “Header position” elegiremos entre:

• Left: para que se muestre el header vertical de Avada en el lateral izquierdo de la página
• Right: para que se muestre el header vertical en el lateral derecho de la página.

 

Tendremos los mismos elementos del header que hemos visto en el apartado 2.1.2, aunque ahora saldrán bajo el menú vertical.

 

 

3.- Personalizar header de Avada (Header styling)

 

La personalización de colores y márgenes del header la realizaremos desde: “Avada > Theme Options > Header > Header Styling”.

 

i.- Header padding: desde aquí podremos personalizar los márgenes interiores del header. Es decir, podremos personalizar el Padding superior, inferior, derecha e izquierda el header con Avada.

 

ii.- Header Shadow: si marcamos “ON” en este selector aparecerá un sombreado justo debajo del header.

 

iii.- 100% header width: si seleccionamos “ON” en este selector haremos que todos los elementos del header se coloque en los extremos de la interface (izquierdo y derecho).

 

iv.- Header background color: aquí estableceremos el color de fondo de la barra o bloque principal del header.

 

v.- Header border color: desde aquí podremos establecer un borde de color alrededor del bloque o barra principal del header.

 

vi.- Header top background color: aquí estableceremos el color de fondo del bloque o barra superior (header top). Ya sabes que algunos tipos de header nos disponen de este bloque superior.

 

 

4.- Header pegajoso o sticky header de Avada

 

En este apartado vamos a ver las opciones que dispone la plantilla Avada para que el menú aparezca flotante cuando se hace scroll en la página (menú sticky o pegajoso).

Para ver estas opciones iremos a: “Avada > Theme Options > Header > Sticky header”.

 

i.- Sticky header: si ponemos “ON” en el selector activaremos el header o menú flotante. Por lo que este permanecerá siempre visible aunque hagamos scroll en la página. Si elegimos “OFF” desactivamos esta funcionalidad.

 

ii.- Sticky header on tablets: si ponemos este selector en “ON” activaremos también el menú o header flotante en tablets.

 

iii.- Sticky header on mobiles: si seleccionamos “ON” en este selector de la plantilla Avada activamos el menú flotante también en móviles.

 

iv.- Sticky header animation: si elegimos “ON” activaremos un efecto por el cual la altura del bloque principal del header se reducirá cuando se hace scroll en la web. Esta opción solo es válida para los headers 1, 3, 6 y 7

 

v.- Sticky header background color: desde aquí estableceremos el color de fondo del header cuando permanece flotante.

 

vi.- Sticky header menu font color: color de la fuente cuando el menú queda flotante

 

vii.- Sticky header menu item padding: espacio pixels entre los diferentes elementos o ítems de menú cuando éste queda flotante.

 

viii.- Sticky header Navigation font size: tamaño de fuente cuando el menú queda flotante.