Configuración personalizada en Avada (4)

Este tutorial está basado en las versiones de Avada hasta la 3.9.4. A partir de la versión 4.0 se han producido grandes cambios a nivel de configuración y por eso los usuarios de Avada 4.0 en adelante tendrán nuevos post en el blog.

Si eres usuario/a de Avada 4.0 y piensas actualizarte a la 5.0 te recomiendo los siguientes post:

Novedades de la versión 4.0

Actualizar Avada a la versión 4.0

Próximo lanzamiento de la versión Avada 5.0

El nuevo Fusion Builder en Avada 5.0

Sigo avanzando con este monográfico dedicado a Avada. En los tres primeros capítulos has podido ver como configurar Avada a nivel general y ahora vamos a ver como personalizar una página estática o de tu blog/portfolio de forma independiente si es necesario.

También repasaré de forma rápida como funciona Fusion Builder, el maquetador de Avada y corazón del trabajo de diseño en esta plantilla y por último vamos a ver como gestionar los menús y también veremos como crear un Mega-menu.

Como ya habrás observado, Avada es tremendamente flexible y permite una configuración casi total del comportamiento del theme. Sin embargo, puedes tener la necesidad de disponer de una configuración específica, para una parte de tu web o una página concreta. Los chicos de Theme-Fusion, lo tienen casi todo previsto.

avada_4_contenido

Configuración personalizada de una página con Avada

Salvo algunos pequeños detalles que diferencian una página estática de una del blog, las opciones son prácticamente las mismas. No quiero ser repetitivo, porque esto se puede alargar demasiado y tampoco quiero que pierdas la oportunidad de que explores por tu cuenta.

La información que leerás a continuación es común en su mayoría para la configuración personalizada de todos los tipos de página que tiene Avada y se controla desde cada página estática, blog o portfolio.

Imágenes destacadas

avada_imagen_destacada

Si has tenido oportunidad de trabajar con otros themes, una de las cosas que te llamarán la atención de Avada es que puedes trabajar con hasta 5 imágenes destacadas. Si lo haces así podrías formar un pequeño carrusel de presentación en cada post. La verdad es que ya cuesta trabajar con una, imagínate 5….

No obstante es posible que pueda venirte bien, en función del tipo de web que vayas a construir, esto ya depende de ti.

La imagen destacada principal la obtienes directamente de tu librería multimedia, pero las restantes puedes hacerlo desde tu librería, una url independiente o la galería de WordPress.

acceso_imagenes_destacadas
Configurar_pagina_tipo_post

También podrás elegir el tipo de post que vas a crear. Si es estándar, galería, enlace, imagen, cita, video, audio o Chat. Si seleccionas estandar, imagen o video, Avada utilizará la imagen destacada o el video que hayas insertado en la presentación de las imágenes del blog.

En el caso particular de las páginas estáticas, Avada te ofrece diferentes plantilla que pueden servirte como base o idea para crear un diseño de página.

Puedes elegir la plantilla predeterminada, una página ancha 100% de ancho, una página completamente en blanco para que hagas el diseño desde cero, una página de contacto que incorpora un sencillo formulario y un mapa de google maps, un diseño específico para las Faqs (preguntas frecuentes), un montón de plantillas con diferentes presentaciones para el portafolio y por último una página con el diseño de menú lateral.

Configurar_pagina_plantillas_pagina

Personalizar configuración en cada página de manera independiente

Una vez hemos configurado el comportamiento general para toda la web, podemos gestionar el comportamiento particular en cualquier tipo de página estática, blog o portfolio. Veamos el catálogo de opciones.

Entradas

Específicamente para las páginas del blog y por lo tanto solo aparece en las entradas.

configuracion_pagina_entrada

Desactiva Primera imagen destacada: Si lo activas aparecerá la imagen destacada al principio del post automáticamente.

Utilizar el 100% Ancho de página: Puedes establecer que esta página ocupe el 100% de ancho.

Código embebido de video: En vez de una imagen destacada, puedes incluir código embebido de un video de Youtube o Vimeo.

Ancho de la Imagen destacada: Si la activas, puedes establecer el ancho de la imagen destacada

Altura de Imagen destacada: La altura

Iconos de la Imagen volteada (Rollover): Establece para esta entrada como se mostrará en la presentación del rollover.

Enlace URL del icono: Indica un enlace diferente al de tu entrada para símbolo que aparece en el rollover.

Open Post Links In New Window: Indica si quieres que cuando hagan click en el enlace a está página, se abra en una nueva pestaña.

Mostrar Entradas Relacionadas: Configura si quieres que en este post aparezcan las entradas relacionadas.

Mostrar Caja social para compartir: Activa o desactiva que aparezca la caja de compartir en las redes sociales.

Mostrar paginación anterior/siguiente: Activa o desactiva que aparezca el navegador de entradas.

Mostrar cuadro de informaciòn del autor: Activa o desactiva el cuadro de autor.

Mostrar Meta entradas: Indica su quieres que aparezcan los metadatos.

Mostrar Comentarios: Si quieres que aparezcan o no los comentarios.

Página

Establece 4 parámetros para esta página en particular

configuracion_pagina_pagina

Contenido de la página Relleno superior: Establece el espacio de relleno entre el contenido de la página y la cabecera.

Contenido de la página Relleno inferior: Establece el espacio de relleno entre el contenido y el footer.

100% ancho relleno izquierdo/derecho relleno: Si usas el modo wide o una página 100% de ancho, estableces un relleno por la izquierda y derecha, similar a un padding. Te recomiendo que utilices porcentajes y no píxeles, para que la adaptación en dispositivos móviles sea correcta.

Desactiva Primera imagen destacada(solo en las páginas estáticas): Desactiva la imagen destacada principal.

Presentaciones Sliders

Desde este apartado puedes establecer que sliders deseas cargar para esta página.

configuracion_pagina_sliders

Posición de la Presentación (slider): Decide si quieres que el slider aparezca encima o debajo del menú principal.

Tipo de presentación (slider): De los slider que incorpora Avada, elige cual vas a utilizar.

Selecciona LayerSlider: Si usas este, aparecerán los sliders que tienes en tu biblioteca de Layer Slider.

Selecciona Fusion Slider: Lo mismo con Fusion Slider.

Selecciona Revolution Slider: Igual para Revolution Slider.

Selecciona Elastic Slider: Lo mismo para Elastic Slider.

Imagen de sustitución por si falla la presentación (slider): Si el slider falla, Avada incluirá la imagen que hayas definido en este apartado.

Desactivar los estilos Avada para Revolution Slider: Elimina los estilos propios de Avada que incorporan en Revolution Slider.

Cabecera

Define el aspecto de la cabecera que tendrá esta página.

configuracion_pagina_cabecera

 

Mostrar Cabecera: Estupendo para hacer una Landing page. Podemos quitar la cabecera en esta página.

Cabecera al 100% de ancho: Si queremos que la cabecera se estire al 100% de la página.

Imagen de fondo: Establece una imágen de fondo para la cabecera en esta página.

Background Color: Establece un color de fondo para esta página.

Opacidad del fondo: Si queremos que el fondo de la cabecera sea transparente o semitransparente. Debes indicar 0 –  0,1 – 0,2 – 0,3 … hasta 0,9 segun el grado de transparencia que necesites.

Imagen de fondo al 100%: Si quieres que la imagen de fondo se estire a pantalla completa.

Repetir fondo: Si no quieres estirarla porque es pequeña, tal vez quieras que se repita…. ‘elige!

Menú de navegación principal: Selecciona que menú quieres que se cargue en esta página. No tiene que ser el principal. Puede ser el que tu quieras de entre los que tengas creados.

Pie de página (Footer)

Define el tipo de footer para esta página

configuracion_pagina_footer

 

Mostrar Area Widget del pie de página: Define si quieres esta parte del footer en esta página.

Muestra area del copyright: Lo mismo para el área de copyright.

100% Ancho del Pie de página: Si quieres que el footer se estire al 100% de ancho.

Barras laterales (Sidebar)

Define como serán los sidebars en esta página.

configuracion_pagina_sidebars

Seleccione Barra lateral 1: De los que tengas creados, elige el que quieras.

Seleccione Barra lateral 2: Si deseas un segundo sidebar, al lado opuesto elige el que quieras de los que tengas creados.

Posición barra lateral 1: Elige la posición para el Sidebar 1. Si tienes el segundo activado, se colocará al otro lado.

Color de fondo de la barra lateral: Elige el color de fondo para el Sidebar.

Fondos

Define para está página como serán los backgrounds.

configuracion_pagina_fondos

Formato: Elige el formato para esta página, modo wide (ancho ampliado) o boxed (modo caja)

Las siguientes opciones funcionan en el modo boxed

Imagen de Fondo para el área exterior: Sube la imagen de fondo para el área exterior.

Background Color: Si prefieres un color de fondo, indícalo.

Imagen de fondo al 100%: Estira la imagen de fondo a toda pantalla.

Repetir fondo: Si es pequeña, puedes hacer que se repita.

Las opciones siguientes funcionan en ambos modos (wide & boxed)

Imagen de Fondo para la área de contenido principal: Para el fondo del contenido de la página.

Background Color: O un color de fondo.

Imagen de fondo al 100%: Si deseas estirarla al 100%.

Repetir fondo: Si que la imagen se repita.

Barra de título de la página

Desde este apartado podrás configurar al milímetro el aspecto y los elementos que deseas que aparezcan en la barra de título de la página.

configuracion_pagina_barra_titulo

Barra de título de la página: Te permite mostrar u ocultar la barra de título en la página

Texto de la Barra de Título de la página: Te permite mostrar u ocultar el texto de la barra de título

Alineación del texto de la barra de título: Define como alinear el texto. Por defecto, al centro, izquierda o derecha.

100% Page Title Width: Define si quieres estirar la barra al 100% del ancho de página.

Texto personalizado de la barra de título: Personaliza el texto de la barra de título para esta página.

Tamaño del texto de la barra de título de la pàgina: Especifica el tamaño del texto en pixeles.

Texto personalizado de la barra de Título de la subcabecera: Personaliza el texto para el subtítulo.

Tamaño del texto de la Subcabecera de la barra de Título: Especifica el tamaño del texto para el subtítulo.

Color de fuente del título de la página: Especifica un color para el título.

Alto de la barra del título de la página: Define el alto que quieres para la barra de título

Page Title Bar Mobile Height: Especifica el alto para la versión móvil.

Fondo de barra de título de la página: Especifica una imagen de fondo para la barra de título.

Fondo Retina de la barra de título: Lo mismo para el formato retina.

Color de fondo de la barra de título de la página: Especifica un color de fondo para la barra

Color de los bordes de la barra de título de la página: Define un color para los borden

Imagen de fondo al 100%: Define si quieres estirar la imagen al ancho completo.

Imagen de fondo Parallax: Si deseas un efecto parallax para la barra de título, especifica aqui la imagen que quieres usar.

Ruta de navegaciòn/Barra de búsqueda: Define si quieres que aparezcan los breadcrumbs, una barra de búsqueda, ambas cosas o ninguno.

Elementos de Fusion Builder

Fusion Builder merece un capítulo aparte. Así que en este, voy a enumerar las principales opciones para que te familiarices con su uso y en el siguiente tutorial hablaré de Fusion Builder al detalle.

¿Qué es Fusion Builder?

Es el maquetador que Avada incorpora para el diseño de las páginas. Es un constructor en toda regla similar a programas como visual composer. Se instala como un plugin e incorpora en su núcleo todos los códigos cortos que Avada trae de serie con la particularidad de que puedes definirlos a través de menús de una forma gráfica e intuitiva.

De hecho, creo que podríamos dividirlo en dos partes.

1 – Creación y amplia gestión de contenedores y columnas

2 – Uso y Gestión de los shortcodes

Hay que decir que Fusion Builder no es algo nuevo en Avada, aunque no nació tan refinado como lo es ahora. De hecho, creo que en cierto modo fue pensado en su momento de una manera y luego ha ido evolucionando hasta ahora de otra.

La consecuencia de esta evolución es que algunos shortcodes (muy pocos) mantienen un funcionamiento un tanto inflexible en comparación a otras soluciones que hay en el mercado y estoy convencido que este tema tendrán que ir mejorándolo poco a poco. El problema supongo que está en como rediseñarlos sin que afecte a las miles de instalaciones que hay de Avada actualmente.

Aun así sigue siendo una herramienta extremadamente potente que te permite hacer prácticamente lo que quieras en una web de una manera relativamente sencilla.

Los elementos de Fusion Builder funcionan arrastrando y soltando donde tu quieras (Drag & Drop) o bien haciendo click sobre ellos de tal manera que se van incorporando uno tras otro.

Gestión de columnas

Fusion_Builder_opciones_de_columna

Como puedes observar Avada permite gestionar hasta 6 columnas diferentes y todas las combinaciones posibles, pero lo interesante es la flexibilidad que permite. Puedes poner y combinar cualquier tamaño de columna dentro del contenedor.

Elementos del Builder (Shortcodes)

Fusion_builder_elementos

En este momento Avada incorpora 45 herramientas y shortcodes diferentes con multitud de posibilidades de configuración

Plantillas personalizadas

 

fusion_builder_plantillas_personalizadas

Desde aquí podrás diseñar tus propias plantillas para utilizar en las páginas estáticas, en el blog o en el portfolio. Esto implica un ahorro de tiempo considerable si debes incluir elementos recurrentes en tu web.

Plantillas predefinidas

Si no quieres perder tiempo o sencillamente partir de ideas que los diseñadores de Avada han creado, desde este apartado podrás insertar hasta 40 tipos de plantillas con un solo click.

Por ejemplo, tienes 20 plantillas diferentes para una home, una para crear una one page, 2 modelos para una tienda, 2 para un portfolio, 2 modelos home para un blog, 3 para una diseño tipo revista, 2 para la página “Sobre nosotros”, 1 para servicios…¡vamos, que por ideas que no quede!. Un click y tienes la página creada.

Borrar, Undo y Redo

borrar_undo_redo

Otra herramienta que encuentro fantástica es la posibilidad de borrar una plantilla completa con un solo click o la posibilidad de ir retrocediendo paso a paso por si te has equivocado o volver hacia adelante si es que te has pasado retrocediendo…. 🙂

Generador de shortcodes

Tal vez no quieres utilizar el sistema de maquetación y prefieres hacerlo a la “antigua usanza”. O sencillamente incluir un shortcode en un lugar determinado. Avada dispone de esta posibilidad a través de su generador de shortcodes. De esta manera, puedes elegir el elemento que quieres incluir y generar un shortcode con todas las opciones de personalización disponibles de una forma gráfica e intuitiva.

Además, tanto si trabajas desde la pestaña Visual o Texto, siempre podrás incluir desde ahí y sin moverte entre pestañas un shortcode de Avada.

shortcode_generator_1

shortcode_generator

shortcode_generator_3

Gestión de los menús

Avada permite incorporar hasta 4 menús independientes en diferentes partes de la web. Esto aporta muchas ventajas de diseño porque nos permite jugar según nuestras necesidades, especialmente en webs de gran contenido y con muchas secciones.

Otra de las ventajas que le veo es que puedes disponer de un menú principal para todas las páginas, con la opción de incorporar otro menú con la funcionalidad de una one page site. Esto es útil para navegar en páginas de mucho contenido.

Los 4 lugares donde puedes incluir un menú son:

  1. En el encabezado principal (Main navigation)
  2. En el subencabezado (Top navigation)
  3. En el Sticky Header (Encabezado fijo)
  4. En las páginas 404

menus_avada

La creación y gestión de los menús dependen directamente de WordPress y por lo tanto no me voy a parar aquí ya que no depende realmente de Avada, excepto la función de Mega-menu.

avada_menus_2

Como es habitual, podrás incluir en tus menús, las páginas estáticas y también entradas, categorías, faqs, enlaces personalizados, etiquetas y todos los elementos que Avada incluye como custom post types.

Crear un Mega-menu

La opción del Mega-menu se utiliza fundamentalmente cuando necesitas incluir muchas subsecciones y es importante segmentarlas para facilitar la navegabilidad de los usuarios. También permite utilizar imágenes, lo que facilita jugar con el diseño y convierte el menú en un elemento más visual y llamativo. Este proceso en Avada se hace a través de los Widgets

En primer lugar, recuerda que la opción de Mega menu no debe estar desactivada en la configuración general. Recuerda que en el tutorial 3 te hablé de como desactivar las funciones que no utilizamos para evitar el gasto de recursos innecesarios. Por eso verifica en opciones del theme, sección avanzado, el megamenu no está desactivado.

megamenu_avanzado_desactivado

Si está desactivado, desmarca la casilla y guarda las opciones. A continuación vuelve al menú principal.

Para poder habilitar el Mega Menu, siempre hay que hacerlo sobre las secciones principales, que englobarán las secciones secundarias.

gestion_megamenu

Por ejemplo abrimos el 2º item llamado Blog (en tu caso se llamará de otra manera) y activamos la casilla que dice “Habilita Fusion Mega menu (solo para el menú principal)

avada_megamenu_activar

Ahora verás que se activan dos nuevas casillas, que te permiten elegir cuantas columnas deseas para el megamenu y cual es el ancho que deseas. Avada te permite establecer un ancho completo que ocupe todo el ancho de página o establecer un ancho independiente para cada columna.

avada_mega_menu_3

Ahora vete a una de los items secundarios y ábrelo para ver las nuevas opciones disponibles. Verás que puedes establecer el ancho para este item, desactivar el título si vas a utilizar una imagen y seleccionar el Widget que quieres incluir.

Al seleccionar el Widget puedes incluir realmente lo que te apetezca en la columna. Si utilizas una imagen simplemente crea un widget de texto con el código necesario para visualizar una imagen. Guárdalo con un nombre que puedas identificar y aquí seleccionas el widget para incluirlo en el mega-menu.

avada_megamenu_4

¡Como ves es muy fácil crear un Mega-menu!

En el próximo tutorial nos meteremos de lleno en el uso de Fusion Builder y de como exprimirlo al máximo para el diseño de la web.

¿Te está siendo útil toda esta información sobre Avada?

COMPRAR

¡Si mi trabajo te ayuda, tu también puedes echarme una manita!

Si la información de este post te ha resultado útil y finalmente decides comprar este theme, puedes colaborar conmigo comprando en Themeforest a través de este botón de compra. Al hacerlo, me ayudas a obtener algunos pequeños ingresos extra que sirven para compensar todo este trabajo.
COMPRAR