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.

Mega guía sobre Avada, la plantilla más vendida de Theme Forest: Plantilla Avada

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

 

Opciones del tema de Avada para personalizar el header de la plantilla

Opciones del header de la plantilla Avada

 

 

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.

 

diseño de header o cabecera vertical y horizontal con la plantilla Avada

Header Vertical y Header Horizontal con Avada

 

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.

 

Conoce el Fusion Builder, el potente constructor de la plantilla Avada: Fusion Builder 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.

 

partes del header de avada

Tipos de barras o bloques que pueden aparecer en los diferentes diseños de headers de Avada

 

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)

 

diseños cabeceras web de avada

Todos los diseños de headers o cabeceras de la plantilla Avada

 

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ú

 

Aprende a añadir un menú a wordpress y las diferentes zonas de ubicación de la plantilla Avada y Divi: Crear menú wordpress

 

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.

 

añadir teléfono e email a header avada