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
ÍNDICE DEL POST
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 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.
Header Vertical y Header Horizontal con Avada
QUIERO LA PLANTILLA 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.
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)
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ú
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ú.
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 elementos al header de Avada
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
Zonas de contenido del header de 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.
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, hay alguna forma de introducir un código CSS personalizado en el header y en el footer de Avada?
Quiero que aparezca el nombre de la página y cambie cada vez que cambie de página.
Hola Carlos,
Hace ya tiempo que no toco Avada. Pero seguro que tiene algún área de texto para introducir un CSS en el header de la web. Pero seguro que no un código específico en cada página. Para eso no te valdría CSS. Necesitarías una programación de PHP o un plugin que si te lo permita. Ten en cuenta que en wordpress, no se crean páginas en sí. Sino que se generan cada vez que son solicitadas en PHP.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso DIVI, Curso actualizaciones y seguridad en WordPress, Curso diseñador web Freelance, Curso como gestionar un Blog, Curso gestión de imágenes, Curso colores para la web, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc. (más de 30 cursos)
Hola, a esta opción del header 3.
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.
Quiero saber como le añado un shortcode [elementor-template id=»1510″] con html
Gracias
Hola Andrea.
Un shortcode lo puedes introducir en cualquier campo de texto o html. Es decir, tienes que ver si en donde quieres colocar el shortcode dispones de algún campo de texto o html. Aunque no tengo curso de Avada, me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Hola, me gustaría saber si es podible hacer un stickey header con imagen en el fondo y cómo poner un texto encima de esta imagen de fondo, pues no logo hacerlo. No sé si tienes algun tutorial para esta opción, Gracias!
Buenas.
Aquí tienes la información oficial sobre el sticky header en Avada
Pero, que yo sepa, no se le puede poner una imagen de fondo
hola Joaquín, instale una demo AVADA que tiene un menú con un mensaje debajo del texto principal
https://www.dropbox.com/s/qnsvwztbwiqgyda/Captura%20de%20pantalla%202018-10-08%2020.18.24.png?dl=0
no consigo encontrar donde poder cambiarlos probé en Menús – Avada Menu Options – Menu Highlight Label pero no queda igual que en la demo se queda al lado
https://www.dropbox.com/s/0prt4ot83cpcb9m/Captura%20de%20pantalla%202018-10-08%2020.25.31.png?dl=0
https://www.dropbox.com/s/pfsj2sytuykpd93/Captura%20de%20pantalla%202018-10-08%2020.26.26.png?dl=0
ME PUEDES AYUDAR SABES DONDE SE CONTROLA, SALUDOS Luis
Hola Juan Luis,
Por defecto Avada no dispone de ese menú deslizante que tiene en la web. Por pdefecto, está la opción del menú Flyout, pero no es como el que tienes en tu web.
¿Qué diseño de header estás utilizando?
Si utilizas un tema hijo de Avada, deberían aparecerte las nuevas opciones que hayan incluido en ese tema