Tutorial Avada hasta la versin 3.9.

4 Configuracin inicial
Asumo que ya tienes tu WordPress instalado y listo para funcionar. Si no es as te
recomiendo que leas este post donde te explico cmo instalar WordPress desde
cero y tambin este donde hablo de la configuracin inicial de WordPress una
vez instalado.

ndice de contenido
1 Requerimientos para instalar el tema Avada
1.1 Requisitos del servidor
1.2 Requisitos y configuracin de PHP
1.3 WordPress
1.4 Ver los requisitos de tu hosting
2 Instalar Avada en tu hosting
3 Pantalla de Bienvenida
4 Instalar los plugins
5 Instalar la traduccin de Avada al espaol
6 Cmo funciona Avada?
7 Opciones del tema (theme options)
7.1 Pestaa general
7.2 Ancho sitio web
7.3 Ajuste del contenido y los sidebars
8 Cabecera (Header)
8.1 Opciones
8.2 Imagen de fondo de la cabecera
8.3 Iconos sociales en el encabezado
9 Cabecera fija (Sticky Header)
10 Logo
10.1 Logo por defecto (Default Logo)
10.2 Logo para la cabecera fija (Sticky Header Logo)
10.3 Logo para mviles (Movil logo)
10.4 Configuracin del logo (Logo Settings)
10.5 Opciones del favicon
11 Menu
11.1 Configurando las opciones del men
11.2 Opciones para el men en mviles (Mobile men options)
12 Barra del ttulo de la pgina
12.1 Opciones
12.2 Opciones de ruta de navegacin (Breadcrumbs)
13 Sliding Bar (Barra deslizante)
14 Pie de pgina (Footer)
14.1 Generales
14.2 Footer copyright
15 Barras laterales (Sidebars)
16 Opciones de fondo (Backgrounds)
16.1 Solo Modo boxed
16.2 Modo Boxed y Wide
17 Tipografa
Requerimientos para instalar el tema Avada
Avada es una plantilla Multi-porpose. Est muy bien optimizada y te aseguro que
funcionar sin problemas, pero para un buen rendimiento necesitas que tu
alojamiento tenga unos requisitos mnimos.

Requisitos del servidor

PHP 5.4 o superior

MySQL 5
Suhosin (recomendable)
Mnimo 128 megas de RAM

Requisitos y configuracin de PHP

Max_execution_time 180 (Para las importaciones de las demos)

Memory_limit 128M
Post_max_size 32M
Upload_max_filesize 32M

WordPress
Avada es compatible desde la versin 3.1 de WordPress, pero por seguridad y
adems para sacar todo el partido al theme, te recomiendo que tengas WordPress
actualizado a la ltima versin.

Ten siempre muy presente, que en la mayora de los casos en los que aparecen las
famosas pantallas en blanco, fallos de importacin, etc., son debidos a la
configuracin PHP. Si te encuentras con estos problemas, habla con tu proveedor
para que aumenten los recursos disponibles, especialmente la RAM.

Ver los requisitos de tu hosting

Tienes varias opciones y Avada trae su propio sistema integrado para verificar los
requisitos. Por una parte puedes descargarte este plugin. Tambin podras crear
un archivo php llamado info.php que debes subir a tu carpeta principal. Aqu puedes
ver como se hace.

Pero en realidad nada de esto debera ser necesario, ya que Avada te ofrece su
propio panel de control y te va a dar una visin completa de las caractersticas de tu
hosting y si debes modificar o no la configuracin. Una vez instales Avada,
aparecer en tu men general un apartado con su nombre y debes hacer clic en
SYSTEM STATUS.

Instalar Avada en tu hosting

Una vez hayas comprado tu licencia podrs descargarte el archivo. Themeforest te
da la opcin de que descargues el archivo completo o bien directamente el de
instalacin.
El archivo completo pesa ms de 200 megas e incluye varias cosas:

Archivo para instalar el theme.

El child Theme o tema hijo

Extras: Como la documentacin de Revolution Slider o Layer Slider.

Carpeta de traducciones: Los archivos de traduccin al espaol y de otros idiomas.

Carpetas de PSD: Lo cual te permite acceder a los archivos de Photoshop para ver
o modificar los diseos.

Una vez tienes a mano el archivo de instalacin el proceso es muy simple.

Puedes subirlo a travs del propio WordPress desde la seccin Apariencia-temas-

aadir nuevo. El archivo se subir a WordPress y se instalar automticamente.

Es un archivo grande, de casi 30 megas, por lo que puede ocurrir que excedas el
tiempo configurado en PHP para subir archivos (depender un poco de la velocidad
de tu conexin) o el lmite en MB de PHP para subir archivos. En ese caso debers
hablar con tu proveedor o bien puedes subirlo a travs de FTP.

Al acceder por FTP debes seguir la ruta /wp-content/themes/ y subir ah todo el

theme. Lo mejor es que lo descomprimas en tu ordenador y arrastres la carpeta
Avada directamente a la carpeta themes.

Una vez hayas subido todo, solo nos queda activar Avada como theme principal. Ya
sabes, apariencia-temas-avada-activar.

Pantalla de Bienvenida
Desde esta pantalla tienes una vista general que te permite:

Registrar el theme

Obtener Soporte
Instalar las demos

Instalar los plugins necesarios y recomendados

Ver el estado del sistema

Instalar los plugins

Ahora toca instalar los plugins. Algunos son necesarios y otros son opcionales.

Necesario

Fusion Core es el ncleo de trabajo en Avada. Se trata del maquetador web que
incluye con todos los shortcodes y funcionalidades de diseo.

Opcionales

Revolution Slider y Layer Slider. Llegados a este punto te hago la siguiente

recomendacin:

Si vas a utilizar un slider para la web, elige uno de los dos e instala solo ese.

Si no vas a utilizar slider, no los instales.

En cualquier caso, Avada incluye su propio Slider (Fusion slider) por si quieres
algo ms sencillo.
Si tampoco lo quieres usar, podrs desactivarlo desde el panel de opciones (luego
te dir dnde). Lo que no es una buena idea, es tener instalados todos los slider,
ya que se estarn cargando multitud de archivos css y java, que no vas a utilizar.

Una vez instalados, debers activarlos, como cualquier otro plugin. Esto puedes
hacerlo directamente desde la misma pantalla de instalacin de Avada o bien desde
el apartado Plugins de WordPress.

Instalar la traduccin de Avada al espaol

Algo muy interesante con este theme es que tiene una traduccin bastante completa
al espaol. Esto te va a facilitar las cosas bastante, sobre todo si ests empezando.
Hay que decir que algunas partes no estn an traducidas, sobre todo las
novedades, pero es una parte muy pequea. En general te entenders bastante
bien, salvo en alguna parte, que puede resultar confusa porque se ve que han metido
la traduccin a calzador.

Lo primero que has de hacer es irte a tu carpeta de instalacin en tu ordenador (la

que te descargaste de Themeforest) y busca la carpeta Languages. Ah
encontrars dos subcarpetas, Avada y Fusion-core.

En la carpeta Avada estn las traducciones generales y en la carpeta Fusion-

core estn las traducciones del maquetador y los shortcodes que incorpora.
Para el idioma espaol elige en ambas carpetas los dos archivos que terminan en
es_ES.

Hay dos formas de poder instalarlo.

Si no cambias nada

Si no cambias nada en las traducciones puedes subir directamente los archivos de

traduccin de la carpeta Avada a tu servidor, dentro de la carpeta /wp-
content/themes/Avada/languages/.

En cuanto a los archivos de Fusion Core, debes subirlos a /wp-

content/plugins/fusion-core/languages/.

Necesitas personalizar las traducciones?

Si has personalizado o cambiado de alguna manera las traducciones, debes subirlo

a otra carpeta diferente.

Ser:

/wp-content/languages/themes/ para la parte de la plantilla

/wp-content/languages/plugins/para Fusion Core

(O sea, fuera de la propia carpeta del theme)

Debes renombrarlos as:

Avada-es_ES.mo y Avada-es_ES.po para la plantilla.

fusion-core-es_ES.mo y fusion-core-es_ES.po para Fusion Core

Por qu se hace esto? Muy simple, si modificas las traducciones y luego

actualizas Avada, se machacarn los archivos que has modificado y aparecer la
traduccin original. De esta manera podrs hacer todos los cambios que quieras y
actualizar Avada sin sustos.

Aun as siempre podras volver a subir los archivos que has cambiado, pero
haciendo esto, evitas estar pendiente.

Una vez los hayas subido, Avada reconocer el idioma sin problemas y deberas
estar viendo todo el theme en espaol, salvo las partes que an no estn traducidas.

Cmo funciona Avada?

Lo primero que has de entender de Avada es su funcionamiento y configuracin. Es
tremendamente flexible y prcticamente no hay nada que no sea configurable.

Digamos que hay 3 niveles de configuracin.

Las opciones del theme, que afectan a todo el funcionamiento en general.

Las opciones de cada pgina o post que le afectan exclusivamente
Las opciones de Fusion builder, que permiten la construccin y diseo de
cada pgina o post.

En pocas palabras significa que:

Puedes crear una configuracin general en la que todo el theme se comportar

de una manera concreta que t vas a definir.

Pero a su vez, tal vez existan pginas o post que necesitas que se comporten
de una forma diferente al comportamiento general y Avada te permite ajustarlo sin
afectar a toda la web.
Por ltimo puedes ajustar Fusion Builder a nivel general en su apartado
correspondiente del panel control, y tambin en cada pgina de una manera
independiente.

Esto ofrece como resultado un control total para cada tipo de necesidad.
Opciones del tema (theme options)
El aspecto de la pantalla de opciones de Avada es este. Para acceder debes ir a tu
men de administracin Avada-Opciones del tema.

Cada vez que hagas una modificacin debes guardar los cambios. Para eso tienes
un botn en la parte superior e inferior de cada men que dice Guardar todos los
cambios.

Pestaa general
Diseo Responsive: Esto est claro que debe estar marcado. Le indica al theme
que debe adaptarse a toda clase de dispositivos mviles, tablets, etc.
Activa Script to top sobre mviles: Sabes esa flechita que aparece en casi todas
las webs en la parte inferior y que nos ayuda a subir a toda velocidad? Pues esto le
dice que active o desactive la flecha en los mviles.

Use Fixed Layout for Ipad: Esta opcin desaparece en la prxima versin de Avada
y por eso ya no me paro en ella. Haca referencia al formato de plantilla en los Ipad.

Cdigo de seguimiento: Aqu debes incluir tu cdigo de Analytics y otros que

puedas usar para funcionalidades externas que necesites implementar.

Espacio antes del Head: Si una aplicacin que deseas implementar te solicita que
insertes en tu web un cdigo especfico en el Head, es aqu donde debes incluirlo.

Espacio antes del Body: lo mismo que lo anterior, pero si debe incluirse en el body.

Ancho sitio web

Bien, esta es una parte muy importante en la que debes pararte a reflexionar y
pensar en tus necesidades.
Formato: Hay dos opciones. Ancho ampliado (wide) o en formato caja (boxed)

Ancho del sitio web: Puedes indicar el ancho que tendr la web en pxeles hasta
1170 px o bien en porcentaje 100%.

Cmo elegir uno u otro?

Como consejo te dira que si usas boxed establezcas el ancho en pixeles, y si

usas el wide, lo establezcas en %.

Existen multitud de monitores con diferentes resoluciones. Cuadrados,

widescreen, etc. Hay que tratar de adaptar la web para que se vea lo mejor posible
en todos ellos. No es lo mismo para el que tiene un monitor de 19 pulgadas que para
uno de 26. Y por supuesto no es lo mismo para un mvil que para una tableta.

Cuando hablamos de un dispositivo mvil o tableta, al ser responsive, la web se

adaptar a la resolucin del dispositivo encogiendo y encajando las piezas de
tal manera que se vea de una forma cmoda.

Pero en los monitores el navegador estira la web al ancho del monitor. Cuando
creas el diseo lo haces sobre tu monitor de referencia y vas a dejar todo muy bien
encajadito, pero cuando lo veas en otro, mayor o menor, te encontrars con cosas
que se pueden descuadrar y que no se adaptan a lo que t habas pensado en
absoluto.

Por eso la eleccin del ancho es fundamental a la hora de establecer el diseo web
y juegan un papel fundamental en la velocidad de carga de la web.

Has de considerar que tipo de web vas a disear y el contenido que se va a utilizar.
Hay mucho contenido grfico y multimedia o ms bien es texto. Tambin es una
cuestin de gustos.

En modo boxed la carga de imgenes y elementos para un monitor siempre es

igual, porque se ajusta siempre al mismo tamao.

En el formato wide, se estiran y/o recortan de forma automtica por el

navegador para adaptarse al diseo establecido. Esto produce un trabajo extra al
server que contribuye a que la web tarde un poco ms en cargar.

Si usas el modo caja, lo tendrs bastante fcil. En los grandes monitores solo se
estira la parte del fondo que esta fuera de la caja del contenido respetando el ancho
de 1170 px para el interior, por lo tanto la web siempre se ver bien y respetar tu
diseo. En los mviles y tablets, no afecta, porque se adaptarn al contenido.

Si usas el modo ampliado, todo se estira y encoje en funcin de la resolucin y por

tanto has de tener en cuenta ese factor cuando hagas el diseo de los elementos
de la web. Si un monitor es muy grande, se puede estirar e incluso deformar algunas
imgenes.
La verdad es que es un quebradero de cabeza, pero por contra tienes mayores
posibilidades en el aprovechamiento de la pantalla. Digamos que en el formato
wide todo debe ir muy medido desde el inicio.

Si ya tienes conocimientos avanzados, sabrs de sobra lo que necesitas, pero si no

es as, creo que la mejor opcin es el formato Boxed.

Ajuste del contenido y los sidebars

Ancho del contenido: 80%

Ancho de la barra lateral: 20%

Si tienes pensado utilizar Sidebars, Avada te permite ajustar el ancho del contenido
web y del sidebar como mejor te venga de tal manera que se ajuste a tus
necesidades especficas. Lo mismo ocurre si usas 2 sidebars, pudiendo ajustar el
ancho de cada elemento a tu conveniencia.

Cabecera (Header)

Opciones
Avada trae predefinidos hasta 5 tipos de cabeceras que a su vez pueden ser
configurables.
Posicin de la cabecera: Puedes decidir si quieres poner la cabecera en la parte
superior o bien ponerlo a la derecha o a la izquierda.
Selecciona un diseo de cabecera: Elige la que ms te guste o se adapte a tus
necesidades.
Sombra de la cabecera: Le aade un bonito efecto de sombra debajo de la
cabecera.
Cabecera al 100% de ancho: Te permite ajustar la cabecera a todo el ancho de
pantalla o bien al mismo ancho que el contenido.
Posicin de la Presentacin (slider): Si utilizas slider en tu web, puedes decidir si
quieres que la cabecera aparezca debajo o encima del slider.

Posicin de la Presentacin (slider): Si utilizas slider en tu web, puedes decidir si

quieres que la cabecera aparezca debajo o encima del slider.
Contenido 1 y 2 de la cabecera: Puedes decidir qu elementos quieres que
aparezcan en cada parte de la cabecera (izquierda y derecha). Avada te ofrece la
posibilidad de aadir informacin de contacto, iconos sociales, un men especfico
o bien dejarlo vaco.
Telfono y email de informacin de contacto: Para que aadas esos datos a la
cabecera.
Imagen de fondo de la cabecera
Puedes aadir una imagen o un color de fondo a la cabecera. Aqu puedes subir la
imagen que quieras y aadir diferentes efectos, como por ejemplo Parallax.

Tambin puedes ajustar con el padding al pixel como colocar esa imagen de fondo.
Para eso puedes ajustar la posicin desde arriba (top) abajo (bottom), izquierda y
derecha.

Iconos sociales en el encabezado

Con estas opciones puedes ajustar la apariencia que tendrn los iconos en la
cabecera, incluido el color, aspecto y tamao.

Cabecera fija (Sticky Header)

Esto se refiere a la posibilidad de que cuando hacemos scroll hacia abajo el men
se mantenga a la vista. Es especialmente til cuando tenemos una pgina larga.

Esta opcin nos permite activar o desactivar la cabecera fija en los diferentes
dispositivos, bien sea en monitores, tablets o telfonos y tambin hacer una
diferenciacin en las cabeceras 4 y 5, que tienen algunas particularidades con
respecto a las 3 primeras. Supongo que ya te habrs dado cuenta de ese detalle!

Tambin nos permite ajustar la separacin entre los items del men y ajustar el
tamao de la fuente.

Logo
Logo por defecto (Default Logo)
Avada es muy flexible y ofrece multitud de posibilidades para ajustar la imagen de
nuestro logo.

No existen restricciones en cuanto al tamao, ms all del sentido comn y esttico.

Simplemente hemos de decirle a Avada que utilizar.

Logo por defecto: subes el logo con el tamao adecuado para verse en un monitor
normal. Vamos a suponer que mide 300px de ancho por 50 de alto.

Logo retina: Para los dispositivos que ofrecen una alta resolucin debemos subir el
logo con el doble de resolucin, es decir 600100. As el logo brillar como un
prncipe!

Default logo Wundt: Indicamos el ancho del logo por defecto. Recuerda 300 px

Default logo Height: Indicamos la altura del logo por defecto. Recuerda 50 px

En la traduccin al espaol aparece como Habilitar la altura suave. A esto me refiero

yo con hacer la traduccin con calzador. Estas cosas pueden despistar, pero
bueno

Logo para la cabecera fija (Sticky Header Logo)

Los mismos pasos pero esta vez para la cabecera fija.

Logo para mviles (Movil logo)

Lo mismo pero para las cabeceras de los mviles. En este caso, te recomiendo que
hagas el logo ms pequeo. Por ejemplo 15025 px para la resolucin normal y
30050 px para la opcin retina.

Configuracin del logo (Logo Settings)

Puedes indicar la alineacin del logo, si la quieres a la izquierda, derecha o centro y
establecer los mrgenes para colocar el logo exactamente donde quieras.

Opciones del favicon

Aqu puedes subir el archivo favicon con las medidas adecuadas segn el tipo de
dispositivos, que como podrs observar, son bastantes. Avada te indica en las
explicaciones de la derecha, cuales son las medidas para cada uno de ellos.

Menu
Avada permite incorporar hasta 4 espacios independientes para incluir un men.

El men principal, superior, el desplegable (stiky header) y para las pginas 404.
Imagina las inmensas posibilidades que nos da esta posibilidad.
Configurando las opciones del men

Side Header Menu Text Align: Indica si quieres que el men aparezca hacia la
izquierda, derecha o al centro.
Alto del men principal: Puedes establecer la altura del men que ms se ajuste
a tus necesidades.

Tamao de la barra resaltada del men principal: Cuando hay un elemento activo
o pasamos con el ratn sobre los elementos del men aparece una pequea barrita
que lo seala. Aqu puedes controlar el tamao de esa barrita.

Relleno de la opcin del men: Permite ajustar el espacio entre los items del
men. Esto es muy til cuando tenemos muchos elementos o contienen textos
largos. As podemos ajustarlos para que quepa todo en el mismo eje, si fuese
necesario.

Ancho del Men principal desplegable: Si tienes items desplegables puedes

controlar el ancho.

Men principal desplegable Tamao de fuente: Controla el tamao de la letra

para el men desplegable.

Men principal desplegable Tamao de fuente: Actvala si quieres que en los

mviles aparezca la ruta de navegacin.

Ancho del men desplegable superior: Si tienes barra superior y un men

activado, puedes indicar el ancho del desplegable (si lo hay).

Mega Menu Max-Wundt: Avada incorpora una opcin bsica para utilizar imgenes
en el men. A esto se le llama Mega Men y esta opcin permite controlar el ancho
mximo.

Mega Menu tamao del ttulo de la columna: Controla el tamao del ttulo de cada
columna del Mega men.

rea del Widget Mega Menu: Si lo marcas desactivas la opcin del Mega Menu.
Si no vas a utilizar la opcin Mega Menu, te recomiendo que lo actives.

Dropdown Menu Indicator: Aade una pequea flecha indicando que ese item del
men contiene un submen.

Display Search Icon in Main Nav: Te aade un icono con una barra de bsqueda
en el men principal.

Habilitar borde del crculo en los iconos del men: Al utilizar Woocommerce
aparece un icono de carrito en el men principal. Si marcas esta opcin quedar
resaltado con un crculo el icono del carrito y el de la bsqueda.

Opciones para el men en mviles (Mobile menu options)

Estilo de diseo del men mvil: Te permite elegir entre un diseo clsico o
moderno para el men mvil. Te recomiendo el Moderno.

Relleno de la opcin del men mvil: Controla la separacin entre los items del
men.
Mobile Menu Text Align: Alinea el texto del men a la izquierda, derecha o centro.

Mobile Menu Icons Top Margin: Controla el margen superior de los iconos sociales

Mobile Menu Navigation Height: Controla la altura del men en px

Men deslizante para mvil: Marcar para agrupar el submen a los elementos del
deslizador. Te recomiendo que lo dejes marcado.

Barra del ttulo de la pgina

Se refiere al apartado que aparece a continuacin del men en todas las pginas
con el ttulo de la misma. Segn el tipo de web yo lo activo o desactivo, pero como
siempre cuestin de gustos o necesidades.

Opciones
Barra de ttulo de la pgina: Te permite activar u ocultar esta posibilidad. Si lo
activas puedes elegir entre mostrar los breadcrumbs, el fondo de color o ambas
cosas.
Texto de la Barra de Ttulo de la pgina: Te permite mostrar el ttulo de la pgina
o post.

100% Page Title Wundt: Te permite activar el contenido al ancho completo si

utilizas el modo wide (ancho completo).

Alto de la barra del ttulo de la pgina: Especifica el alto que quieres para el
diseo.

Page Title Bar Mobile Height: Lo mismo para la versin mvil.

Alineacin del texto de la barra de ttulo: Puedes alinear el texto a la izquierda,

centro o derecha.

Fondo de barra de ttulo de la pgina: Si en vez de utilizar un color de fondo,

prefieres usar una imagen puedes cargarla aqu.

Imagen de fondo al 100%: Puedes estirar la imagen al ancho completo del

navegador si trabajas en el modo ancho completo.

Imagen de fondo Parallax: Activa el efecto parallax a la imagen de fondo.

Animacin de desvanecimiento: Si activas este efecto, el ttulo de la pgina se

desvanece con un fade a medida que va desapareciendo.

Opciones de ruta de navegacin (Breadcrumbs)

Los breadcrumbs son las rutas de navegacin que les indican a nuestros visitantes
donde se encuentran. Es muy til cuando se trata de una web con mucho contenido
y secciones. Aqu puedes configurar como aparecen en la barra del ttulo.

Breadcrumbs/Search Box: Selecciona si prefieres que aparezcan los breadcrumbs

o bien una barra de bsqueda.

Ruta de navegacin sobre dispositivos mviles: Actvalo si quieres que

aparezcan en los dispositivos mviles.

Ruta de navegacin Prefijo Men: Puedes poner un prefijo indicativo a los

Breadcrumbs.

Breadcrumb Menu Separator: Tambin aadir una barra de separacin o cualquier

otro smbolo entre los elementos de la ruta de navegacin.

Show Custom Post Type Archives on Breadcrumbs: Si creas post

personalizados, puedes indicar si quieres que aparezcan en la ruta de navegacin.

Show Post Categories on Breadcrumbs: Lo mismo con las categoras.

Sliding Bar (Barra deslizante)
Avada tiene la posibilidad incorporar una barra deslizante que se encuentra en
la parte superior de la cabecera. Se puede utilizar desde 1 hasta 6 columnas
mediante widgets. Se expande y se colapsa si le das al icono que aparece arriba a
la derecha con un +/-.

Es interesante para aadir informacin y contenido que siempre deba estar

presente, por ejemplo un formulario de contacto o un login. Lo que ocurre es que es
fcil que pase desapercibido para mucha gente y yo por eso lo tengo desactivado,
pero lo pongo para que veas de lo que se trata.

Habilitar barra deslizante: Marcar para activarlo en los monitores.

Deshabilitar barra deslizante En Mvil: Mrcalo para desactivarlo en los mviles.

Habilitar borde superior sobre la barra deslizante: Mrcalo para activar un borde,
que ayude a identificar mejor el sliding bar.

Barra deslizante abierta cuando se carga la pgina: Si lo activas, el sliding bar

aparecer abierto por defecto cuando se carga la pgina.

Nmero de columnas para el sliding bar: Puedes elegir desde 2 hasta 6 columnas
y activarlos en el rea de Widgets de WordPress.
Pie de pgina (Footer)
Generales
Con Avada es sper sencillo controlar y configurar el footer de tu pgina web.
Puedes activarlo o desactivarlo si no quieres usarlo.

Tambin se controla con widgets y puedes aadir hasta seis columnas, lo cual te
permite mxima flexibilidad. Puedes utilizar un color de fondo o bien aadir una
imagen con la que podrs jugar a tu gusto en el sentido de que podrs estirarla,
centrarla o colocarla donde quieras con el padding.

Tambin podrs aadir un efecto Parallax al footer o crear al igual que en la

cabecera, un footer fijo que no desaparezca. Las opciones son similares a las
anteriores asique no voy a repetirlas.

Footer copyright
Esta parte del footer est pensada exclusivamente para aadir el copyright o algn
texto o enlace que quieras. Igualmente puedes activarlo o desactivarlo, controlar el
relleno y el aspecto de los iconos sociales, al igual que lo hacamos en el
encabezado.

Barras laterales (Sidebars)

Desde aqu puedes configurar de forma global el comportamiento que tendr cada
tipo de pgina con los sidebars. Eso quiere decir que podrs configurar diferentes
sidebars para cada tipo de pgina. Por ejemplo, en las pginas de portfolio, podrs
tener uno diferente a las del blog o las estticas.

Pero imagina tambin que por norma general, no quieres que las pginas estticas
tengan sidebar Ok, pues desde aqu podrs indicrselo a Avada. La flexibilidad es
total y puedes manejar la configuracin global para:

Entradas del Portafolio

Pginas de archivo y categora del portafolio
Entradas del Blog y pginas de categora
Productos de Woocommerce y sus pginas de categora
BBpress/Budypress
Pgina de bsqueda
De forma predeterminada podrs indicar:

Barra lateral global activa: Si quieres que se active o no para ese tipo de pgina
la barra lateral

Barra lateral 1 activa: En caso afirmativo, le indicas que active la nmero 1 con el
widget que quieras

Barra lateral 2 activa: Lo mismo que para la anterior

Posicin global de la barra lateral: Si la activas y tienes 1, le indicas si la quieres

a la derecha o izquierda de forma predeterminada.

Opciones de fondo (Backgrounds)

Solo Modo boxed
Esta posibilidad solo funciona si has elegido el ancho de pgina en modo Caja
(Boxed). Lo que hace es insertar una imagen de fondo externa al contenido de la
web, vamos, en plan decorativo.

Puedes aadir un fondo general para toda la web, pero luego en cada pgina podrs
poner el suyo si lo necesitas.

Por supuesto puede ser una imagen de fondo o un color

Si eliges una imagen, las posibilidades son estirar la imagen completamente al
ancho del navegador o hacerla fija y que no se mueva. Tambin puedes elegir
patrones predeterminados de Avada.

Modo Boxed y Wide

En este caso aades una imagen al contenido principal de la web y si deseas que
una pgina en concreto tenga el suyo propio, podrs hacerlo desde la propia pgina.

Tipografa
Avada te permite un control absoluto sobre la tipografa y podrs configurar cada
tipo de fuente a tu conveniencia. Es tan amplio, que hara falta un post exclusivo
para ello. Pero bueno!, es muy intuitivo y fcil de entender no creo que tengas
problema, simplemente debes dedicarle un poquito de tiempo

Para empezar podras subir tus propias fuentes personalizadas. Para eso
necesitaras subir los archivos Woff, TTF, SVG y EOT.

Pero tambin puedes usar las Estndar o las fuentes de Google.

Por supuesto podrs controlar el tamao de la fuente, de todos y cada uno de
los elementos de la web. H1, h2, h3 . Cuerpo, mens, encabezados, botones,
footer, widgetsen el mvil
Tambin podrs controlar las alturas de lnea de cada fuente, el grosor, el
espacio y los mrgenes. Vamos, que por controlar que no quede!
Configurar Avada Tutorial de configuracin
inicial
Volvemos al lio para configurar Avada. En el primer tutorial de Avada habl de
los requisitos necesarios para instalarlo y cmo hacerlo. Tambin de como incluir la
traduccin al espaol que trae y de las primeras opciones de configuracin hasta las
tipografas incluidas.

Supongo que a estas alturas te habr convencido de que las posibilidades son
enormes y por ms que quiera resumir es imposible hacerlo en un solo post.
Bueno!, ni en uno, ni en dos, ni creo que en tres! Ya veremos.

Voy a seguir con el resto de las opciones de configuracin general a ver hasta dnde
podemos llegar.
 ndice de contenido
1 Estilos de Avada
1.1 Colores de fondo
1.2 Colores de los elementos
1.3 Opciones de diseo
1.4 Colores de fuente
1.5 Colores del men principal
1.6 Colores del men secundario
1.7 Colores del men Mvil
2 Shortcodes
3 Configurar las opciones del Blog
3.1 Opciones generales del Blog
3.2 Opciones individuales de cada Post (Blog single post page options)
3.3 Opciones de visualizacin meta del blog (Blog meta options)
4 Portfolio
5 Recuadro compartir en las redes sociales
6 Medios sociales
7 Presentaciones
8 Elastic Slider
9 Lightbox
10 Contacto
11 Pgina de Bsqueda

Estilos de Avada
Qu son los estilos? Pues ya te lo podrs imaginar. Sencillamente el aspecto que
querrs darle a tu web. A travs de este apartado podrs configurar los colores
de fondo, los elementos, explorar las innumerables opciones de diseo, colores de
las fuentes, del men principal, el secundario y el men mvil.

En primer lugar Avada incorpora 2 esquemas bsicos (fondo blanco o negro) y una
serie de esquemas de colores predefinidos con hasta 10 colores. Es decir,
puedes configurar por ejemplo el theme sobre un fondo blanco con un color
predominante que ser el de los esquemas de colores, por ejemplo el marrn.

Si eliges esta opcin Avada configurar todo el theme y los elementos sern
marrones con algunas variantes.

Siempre debes elegir un esquema de color por defecto, que estar presente. A partir
de ah podrs:

Modificar exclusivamente los elementos que quieras cambiar y afinar a tu

gusto.
Cambiar por completo los esquemas y disear el theme como t quieras.
Color primario: Ser el color predominante en la mayora de los elementos que
utilices. Por ejemplo, si creas un botn, ser de color marrn, aunque por supuesto,
podrs darle luego el color y aspecto que quieras. Simplemente que de entrada l
te lo pone marrn.

Barra deslizante (Sliding bar) Color de fondo y Opacidad: Controlas el color de

fondo y la transparencia de la barra deslizante. La que aparece arriba en la esquinita
de la derecha con un +/- que se abre y se cierra. Recuerda que debes tenerla
activada para poder verla. En el men de configuracin de avada aparece como
barra deslizante.

Nota: Hay muchos elementos en Avada que te permitirn controlar la Opacidad

(transparencia). Oscila siempre entre el valor 0 (transparente) y 1 (opaco). Eso
quiere decir que puedes jugar con el tipo de transparencia con hasta 11 niveles
que irn as: 0 0.1 0.2 0.3. Por ejemplo si quieres crear un elemento semi-
transparente en un punto intermedio pondras la opacidad en 0.5.
Colores de fondo

Encabezado Color de fondo y Opacidad: Controla el color y opacidad del

encabezado, donde est el logo, men principal.

Sticky Header Background Color and Opacity: Controla el color de fondo y

opacidad del men fijo, es decir, el que aparece cuando hacemos scroll hacia abajo
y se queda fijo.

Color del borde de la cabecera: Puedes cambiar el color al borde de la cabecera

si as lo deseas.
Color de fondo de la cabecera superior: Cambia el color de la cabecera superior
si la cabecera que elegiste entre las 5 disponibles la tiene. Recuerda que esto lo
tienes en el men de opciones de Avada como Cabecera

Color de fondo de la barra de ttulo de la pgina: Cambias el color de fondo de

la barra de ttulo de las pginas.
Color de los bordes de la barra de ttulo de la pgina: Cambias el color de los
bordes de la barra del ttulo.

Color del fondo del contenido: Cambias el color de fondo del contenido, es decir,
donde van los textos y contenidos que aades a tu web.

Color de fondo de la barra lateral: Donde van los sidebars.

Color del fondo del pie de pgina: El color de fondo del footer principal.

Color del borde del pie de pgina: Aqu el borde del footer principal.

Color de fondo del Copyright: Aqu el color de fondo del footer copyright.

Color del borde del Copyright: Y por supuesto el borde del footer del copyright!

Colores de los elementos

Rollover

Este es un efecto que aparece cuando utilizamos el listado de artculos en el

blog o el portfolio. Cuando te los muestra y pasas por encima con el ratn, aparece
un efecto degradado semitransparente de color y el ttulo del post con elementos
aadidos. Bueno, pues en este apartado puedes controlar los colores y
transparencias del efecto.

Puedes cambiar el color superior e inferior con su respectiva opacidad y el color de

los elementos (la lupa y el icono)

Tambin puedes personalizar los elementos de la barra deslizante (Sliding bar)

Los separadores de los Widgets que se utilizan en el pie de pgina (footer principal)

Formularios:

Si usas Contact form 7 Avada ofrece soporte de diseo con los formularios de este
plugin que adems es gratuito y seguro que lo conoces. Podrs personalizar los
elementos de los formularios, como el color de fondo, la caja de la cuadrcula

Woocommerce

Si tienes pensado utilizar woocommerce, en este apartado podrs personalizar el

color de muchos de los elementos de tu tienda. Avada ofrece un amplio soporte y
una excelente integracin con este e-commerce.

bbpress

Igualmente si utilizas bbPress podrs personalizar algunos elementos.

Opciones de diseo
Este es un apartado importante, porque vas a definir el aspecto de las pginas en
general

Relleno superior e inferior

Se refiere al espacio que Avada deja entre el contenido de cada pgina con respecto
a la cabecera y al footer. Avada incluye por defecto bastante separacin, pero
puedes personalizarla. Yo por ejemplo utilizo 20 px
Aqu lo configuras a nivel general para toda la web y luego en cada pgina puedes
cambiar estos valores, si por ejemplo has creado un diseo especfico para esa
pgina.

100% ancho relleno izquierdo/derecho relleno: En Avada puedes utilizar el modo

Boxed/Wide indistintamente, es decir, puedes por ejemplo configurar en Boxed
(modo Caja) toda la web y utilizar el modo extendido (Wide) en una pgina
especfica. En el modo Wide debes dejar un margen (a tu gusto) para que el texto y
el contenido no se peguen al borde, porque quedara fatal.

Con esta opcin puedes establecer ese margen a izquierda y derecha, de modo que
puedas centrar todo proporcionalmente. Te recomiendo que lo hagas en porcentaje
y no en pixeles. De esta manera se centrar todo a la perfeccin y
proporcionalmente en cada tipo de pantalla sea cual sea la resolucin.

Barra lateral padding: Te permite crear un espacio de relleno entre el contenido y

los Sidebars.

Column top y bottom margin: Afecta directamente al diseo cuando utilizas el

maquetador (fusion builder). Cuando creas las columnas puedes establecer un
margen superior e inferior. Esto te permite diferentes estilos en el diseo, ya que
podrs jugar con opciones como pegar las columnas o separarlas.

Recuerda que aqu configuramos el comportamiento general, pero luego podrs

personalizarlo en cada caso. Es decir, podrs definir un comportamiento general en
los mrgenes de las columnas para toda la web y personalizarlo en cada pgina y
columna por separado. Te pongo un ejemplo:

Las 3 siguientes opciones te permiten desactivar las sombras de:

El texto que va en la barra deslizante (Sliding bar)

El texto que se incluye en el Rollover
El texto que va en el pie de pgina

Colores de fuente
Desde aqu ser muy fcil configurar los colores de las fuentes a nivel general de tu
web. Eso quiere decir que si por ejemplo quieres que los H1 aparezcan en naranja
siempre, lo configuras y listo Avada te permite configurar prcticamente todo lo
referente a las fuentes.

Se les ha escapado alguna cosilla, Nada que no se pueda cambiar con un poquito
de CSS. Como vers es muy amplio, pero muy sencillo, as que no creo que sea
necesario ampliar la informacin en este punto.
Colores del men principal
Configura el color de los elementos del men principal. Donde ves primer nivel, se
refiere al men de cabecera y si habla de subniveles, se refiere al aspecto de los
submens (si es que los tienes).
Colores del men secundario
Este apartado es similar al anterior, pero para el men que aparece en la cabecera
superior. Para ello habrs tenido que crear y configurar un men especfico en
Apariencia-Mens de WordPress y asignarlo a para que aparezca en esa
cabecera (Top men). Esto lo haces en la pestaa Gestionar lugares.

Luego, en las opciones de Avada debes ir a Cabeceras y seleccionar un

encabezado que incluya una cabecera superior (son todos menos el 1).
Colores del men Mvil
Avada te permite personalizar los elementos del men mvil ajustndolo ms a tus
necesidad y gusto personal
Shortcodes
Los shortcodes son pequeos trozos de cdigo que los programadores crean
para facilitar la incorporacin de elementos de forma rpida y fcil. Dicho de
otro modo, nos facilitan la vida!

Por ejemplo, imagina que quieres insertar una imagen con una serie de efectos.

El programador desarrolla todo el cdigo necesario para que ese efecto pueda
implementarse en la web y luego ha de decorarlo a travs de CSS y muchas veces
Javascript.

El programador vincula todo ese cdigo a uno mucho ms pequeo en el que incluye
unos parmetros previamente establecidos en el cdigo principal y de esa manera
podemos personalizar el efecto a nuestro gusto con los parmetros que l dise.
As todo es mucho ms fcil para todo el mundo y adems podemos insertarlo donde
queramos. Bien pensado verdad?

Ante la aparicin de plugins como los maquetadores, los shortcodes ya no se utilizan

como antes, pero siguen estando muy presentes. La diferencia es que ahora
podemos hacerlo de una forma grfica y antes haba que copiar el cdigo.

En Avada tambin han ido modificando el uso de los shortcodes y puedes utilizarlos
de dos maneras:

Grfica e intuitivamente desde el maquetador (fusion builder)

A la antigua usanza!

Al margen de cmo lo insertes, en Avada lo han pensado todo y en cualquier caso

no tendrs que pegar cdigo. Siempre se abrir un men donde podrs configurar
el shortcode como quieras.

Si no necesitas nada en especial, casi ser insertar y listo. Y si lo necesitas, podrs

personalizarlo total y absolutamente en cada shortcode que utilices.
Avada incorpora la friolera de 26 shortcodes (por ahora).

La cuestin es que siempre estn ah y podrs cambiar tu web cuando quieras, con
diferentes elementos sin necesidad de implementar plugins. Y lo mejor de todo
es que al estar en el Core de Fusion Builder y no del propio theme, solo se cargarn
cuando sea necesario. Es decir, no van a ralentizar la carga de la web.

Algunos de los shortcodes que tendrs disponibles son Carrusel, botones,

contadores, cajas de contenido, cuadros animados, iconos, listas, testimonios,
separadores, tablas de precios, cuadros de informacin, barras de progreso, tabs
verticales y horizontales, imgenes

Bueno, pues volviendo al panel de opciones con la configuracin de los shortcodes

encontrars esto:

Y podrs configurar aspectos visuales como por ejemplo en los botones:

Avada ya lo habr configurado por ti cuando has seleccionado el esquema de color,
pero si quieres crear botones a tu gusto, puedes dejar todo preparado para que
luego solo tengas que insertar el shortcode con el enlace del botn y listo!.

Por supuesto, luego puedes personalizar todos y cada uno de los botones que
necesites crear si es tu deseo.
Configurar las opciones del Blog
Si tienes pensado incorporar a tu web un blog, Avada te permite personalizar su
aspecto de una manera muy precisa.

En este apartado podrs configurar el comportamiento del blog en general y como

se van a visualizar en la web los campos que ms se utilizan.

Opciones generales del Blog

Para tener un blog, adems de las entradas, tenemos que configurar una pgina
donde incluirlas para que los visitantes puedan verlas. Por eso debes ir al apartado
del men de WordPress Pginas y crear una que por ejemplo se llame Blog (o lo
que t quieras).

Despus de crearla deber ir al apartado Ajustes Lectura y establece como pgina

de entradas la que acabas de crear, en mi caso Blog.

Solo tienes que empezar a crear entradas y contenido en tu blog. Avada se encarga
de todo lo dems.

Vamos a configurar ahora los elementos del blog, por lo que volvemos al apartado
de opciones de Avada-Blog

Lo que vamos a configurar ahora afecta directamente a la visualizacin de la pgina

que acabamos de crear y establecer como pgina principal del blog.

Ttulo de la pgina del Blog: Inserta el ttulo que quieras a la pgina del blog.

Pgina de subttulos del blog: Quieres un subttulo?, pues ya sabes

Barra de ttulo de la pgina: Si marcas la casilla aparecer una barra de ttulo. Si

no quieres que aparezca, desmrcalo.

Diseo del Blog: Aqu estableces el tipo de aspecto que quieres para el blog. Avada
trae definidos varias posibilidades.

Grid: Tal cual como aparece en mi blog.

Large: Incluye los posts con las imgenes destacadas en grande y el extracto
debajo de la imagen.
Medium: Imagen de tamao medio a la izquierda y extracto a la derecha.
 Largo alternate: Igual que el Large pero le aade a la fecha un estilo
decorativo.
Medium alternado: Igual que Medium pero con un estilo decorativo en la
fecha.
Timeline o Cronograma: Un diseo muy chulo tipo timeline en dos columnas
y el cronograma al centro.

Blog diseo Archivo/Categora: Define el aspecto de la pgina cuando alguien

accede haciendo clic en las categoras.
Tipo de paginacin: Define como ser la paginacin de la informacin. Pgina a
pgina, un scroll infinito o un botn de Cargar ms posts.

Diseo de cuadrcula # de columnas: Defines cuantas columnas tendr la pgina

del blog en el modo grid.

Diseo de cuadrcula espaciado de columna: El espacio entre cada columna para

los artculos del blog en el modo grid.

Contenido extracto o completo del blog: Elige si lo que se mostrar ser el

contenido o el extracto del post.

Longitud del extracto: La longitud mxima que aparecer en el extracto.

Sacar el HTML del Extracto: Si has utilizado html en el extracto, al marcar esta
opcin se elimina y deja de tener efecto.

Featured Image / Video on Blog Archive Page: Activas o desactivas las imgenes
destacadas o los videos en los post.

Blog Formato de fecha alternativo Mes y Ao: Indicas en que formato se ver
la fecha de los post.

Blog Formato de fecha alternativo Da: El formato de la fecha cuando uses el

formato alternativo, por ejemplo (large alternate).

Blog Formato de fecha y etiquetas del Cronograma: El formato de la fecha si

usas el formato Timeline.

Opciones individuales de cada Post (Blog single post page

options)
Configuramos ahora las opciones disponibles cuando nuestros visitantes visualizan
un post directamente.

Foto destacada/ Video sobre pginas individuales de Entradas: Si lo marcas,

aparecer la imagen destacada o el video al inicio del post.

Desactivar paginacin Anterior / Siguiente: Permite desactivar la opcin de

avanzar o retroceder entre los post uno a uno.

Ttulo de la entrada: Si lo marcas, incluir el ttulo de la entrada en la barra de ttulo.

Caja de informacin del autor: Al marcarlo incluye la caja de autor al final del post.

Recuadro Compartir en redes sociales: Activa o desactiva el recuadro para

compartir las redes sociales.

Ms informacin que te interesa: Esto se refiere a los tpicos related post, pero la
traduccin.Muestra abajo otros post que pueden interesar.
Comentarios: Si lo marcas permite mostrar los comentarios.

Opciones de visualizacin meta del blog (Blog meta options)

En esta seccin definimos que campos meta del blog queremos que se visualicen
Meta de la entrada: Activa o desactiva la visualizacin de todos los campos meta
de cada post.

Desactivar autor: Elimina la informacin del autor.

Desactivar fecha: Elimina el campo fecha

Desactivar categoras: Elimina las categoras

Desactivar los Meta Comentarios de los Post: Elimina la informacin del nmero
de comentarios

Desactivar meta mensaje del enlace Saber ms: Elimina el mensaje tpico de Leer
ms / Saber ms
Desactivar Meta Etiquetas de los Post: Elimina la informacin de las etiquetas
asociadas al post

Formato de fecha: Selecciona el formato de la fecha de los post.

Portfolio
El portfolio es un tipo de post personalizado que suelen incluir casi todos los
themes premium. Estn pensados fundamentalmente para mostrar los proyectos y
trabajos de una empresa o un profesional.

Recuadro compartir en las redes sociales

Todos los blogs y muchas webs tienen un plugin para compartir en las redes
sociales. El problema es que en cuanto los instalas se convierten en un autntico
problema de optimizacin, ya que realizan un montn de conexiones externas que
inevitablemente terminan por afectar a la optimizacin de la web.

El theme incorpora su propio mecanismo para compartir en redes sociales. No

es tan llamativo y completo como un plugin especfico, pero por contra no afecta en
absoluto al rendimiento y cumple perfectamente con su misin.
Puedes configurarlo para que aparezca en cualquier pgina o post de la web y
adems tienes la posibilidad de insertarlo con un shortcode en donde quieras.

Te permite configurar el aspecto de la caja y el contenido e incluye botones para

compartir con las principales plataformas. Facebook, Google, Twitter, Linkedin,
Tumblr, Reddit, Pinterest, VK y tambin por correo electrnico.

Medios sociales
Aqu no me paro mucho porque es muy sencillo! En este apartado incluyes los
enlaces a tus pginas de redes sociales e incluso te permite personalizar los
iconos que trae por defecto Avada. Estos son los iconos que luego aparecern en
la cabecera, footer o en cualquier otra parte que quieras si los incluyes a travs de
un shortcode.
Presentaciones
Avada te permite crear mediante un shortcode presentaciones con las imgenes
destacadas que tengas en tus post o portfolio. En este apartado configuras el
comportamiento general.

Elastic Slider
Es un slider propio de Avada, sencillo y flexible para presentaciones bsicas. Lo
interesante es que viene incorporado en Avada y por lo tanto muy bien optimizado.
En honor a la verdad yo no lo uso nunca, pero no por nada, sencillamente utilizo el
Fusion Slider o el Revolution Slider.

Se incorpora tambin con un shortcode y desde el panel de opciones de Avada

puedes configurar el funcionamiento de algunos elementos.
Lightbox
Existe un plugin muy bueno llamado Ilightbox, disponible en Codecanyon. Lo que
hace es mostrar imgenes y videos en un lightbox de forma muy llamativa.

Desde hace relativamente poco, Avada lo ha incorporado al ncleo del theme y tiene
soporte completo, hasta el punto de poder configurarlo directamente desde su panel
de control.
Contacto
Avada incorpora una pgina predefinida de contacto. Es tan simple como ir a las
pginas, crear una y elegir la plantilla contacto. Lo que ocurrir es que se visualizar
una pgina con un formulario de contacto bsico (pero suficiente en la mayora de
los casos) y un mapa de Google maps. As evitas instalar ningn plugin para ello.

Desde este apartado, puedes configurar el correo de recepcin, incorporar medidas

anti spam como los captchas y tambin configurar ampliamente Google Maps.

Pgina de Bsqueda
Avada tiene todo pensado, incluida la pgina de bsquedas.

Esta es la pgina que aparece cuando alguien utiliza el sistema de bsquedas en

nuestro web / blog y le aparece una relacin de la informacin relacionada. Puedes
configurar la pgina para disearla a tu gusto y sea lo ms til posible para tus
visitantes.
Avada configuracin avanzada
Seguimos aprendiendo a configurar las opciones generales en Avada. Para
ayudarte a encontrar lo que buscas te explico lo que hemos repasado hasta ahora:

Tutorial 1:

General
Ancho del sitio web
Cabeceras
Logo
Mens
Barra de ttulo
Barra deslizante
Pie de pagina
Barras laterales
Fondos
Tipografas

Tutorial 2:

Estilos
Shortcodes del blog
Portafolios
Redes y medios sociales
Presentaciones
Elastic slider
Lightbox
Contacto
Pgina de bsqueda

Hablar de los extras, las opciones avanzadas, la configuracin con Woocommerce,

el trabajo con CSS personalizado y por ltimo las copias de respaldo y restauracin
de la propia configuracin de Avada.

ndice de contenido
1 Extras
1.1 Opciones Miscelneas
1.2 Post y proyectos relacionados
1.3 Opciones de rollover
2 Avanzado
2.1 Compile Dynamic css to file
3 Woocommerce
4 CSS personalizado
5 Respaldo

Extras
Avada permite configurar el comportamiento de algunos elementos comunes en
diferentes partes del theme de forma predeterminada para que se ajuste lo mximo
posible a nuestras necesidades.
Opciones Miscelneas
Comportamiento de la navegacin lateral: Controla la animacin de navegacin
lateral para pginas hijo, al hacer clic o flotar.

Image Placeholders: Decide si quieres que en los post/portfolios aparezcan las

imgenes destacadas por defecto.

Bases para longitud de resumen: Configura si la longitud del extracto de un post

que se visualiza en el blog sea por caracteres o por palabras.

Desactivar [] en resmenes: Desactivas el tpico mensaje de Leer ms de cada

post en el blog.

Hacer Enlace [] a una pgina de una sola entrada (single post): Activas la
posibilidad de que el leer ms sea un enlace directo al artculo.
Permitir comentarios en las pginas: Si lo activas ser posible hacer comentarios
en las pginas estticas por defecto.

Disable Featured Images on Pages: Desactivas la aparicin de la imagen

destacada en las pginas estticas por defecto.

Preguntas frecuentes sobre imgenes destacadas: Avada incorpora como post

personalizados una seccin especfica de preguntas frecuentes. Al activar esta
opcin es posible mostrar por defecto la imagen destacada de cada faq.

FAQ Filters: Las Faqs pueden comportarse como el portfolio. Decide si quieres que
al mostrarlas aparezcan segmentadas por tipo (categora) o todas a la vez.

Adiciona nofollow a todos los enlaces sociales: Aade un atributo nofollow a

los enlaces sociales.

Abre iconos sociales en una nueva ventana: Los enlaces a redes sociales se
abren en una nueva pestaa.

Post y proyectos relacionados

Nmero de Entradas / Proyectos relacionados: En cada post o portfolio siempre
aparecen al final otros que pueden ser interesantes para el visitante. Cuantos
quieres que aparezcan?

Related Posts / Projects Maximum Columns: Las columnas en el blog/portfolio.

Related Posts / Projects Column Spacing: La separacin entre cada columna.

Related Posts / Projects Layout: El ttulo aparece dentro de la imagen o debajo.

Related Posts / Projects Image Size: Define el tamao de la imagen. Automtico

o fijo.

Si utilizas el modo fijo el theme recortar la imagen para que cuadre las dimensiones
y todas se vean igual. Si usas auto, el theme las redimensiona proporcionalmente.
Si tienes imgenes con diferentes tamaos, parecer un puzles.

Related Posts / Projects Autoplay: Imagnate que has puesto que se muestren
artculos en 4 columnas. Lo que hace Avada es crear un carrusel para que las
imgenes se deslicen. Aqu activas o desactivas que lo hagan automticamente.

Velocidad del carrusel: La traduccin aparece como Nmero de

entradas/proyectos relacionados, pero est mal. Se refiere a la velocidad del
carrusel de imgenes, es decir, cada cuantos segundos se mover. La medida es
en milisegundos. 1000= 1 segundo

Related Posts / Projects Show Navigation: Aade unos botones

derecha/izquierda para deslizar las imgenes.
Related Posts / Projects Mouse Scroll: El carrusel se desliza con el ratn o el dedo
en un tablet o mvil.

Related Posts / Projects Scroll Items: Cuntas imgenes quieres que se muevan
de una sola vez?

Opciones de rollover
Imagen de sustitucin: Activas el rollover.

Rollover Image Direction: Efecto del rollover. Hacia arriba, abajo, centro, derecha,
izquierda.

Rollover Image Icon Font Size: Tamao del icono.

Desactivar el icono de enlace de la Imagen de Sustitucin: Desactivas el icono

de enlace que aparece en el rollover.

Desactivar imagen de icono de la Imagen de Sustitucin: Desactivas el otro

icono que aparece para ampliar la imagen.

Desactivar el ttulo de la Imagen de Sustitucin: El ttulo no aparece en el rollover.

Deshabilitar las categoras de la Imagen de Sustitucin: No aparece la

informacin de las categoras.

Disable Icon Circle From Image Rollover: No aparece el icono en el rollover.

Avanzado
Permite desactivar o activar aquellas opciones que no vas a utilizar. Algo
fundamental para un theme que lo ofrece todo, pero del que no utilizars
posiblemente ni la mitad de las herramientas. Un autntico acierto

La pregunta es muy sencilla. Para qu cargarlo todo?

Disable Smooth Scrolling: Desactiva el efecto smooth en la visualizacin y

movimiento de las pginas.

Desactiva Fusion Builder: No lo hagas. Para qu usar Avada si te cargas lo mejor

que tiene, su maquetador. Aun as, si prefieres usar otro, desactvalo y no tendrs
conflictos.

Disable Code Block Encoding: Desactiva la opcin bloque de cdigo en Fusion

Builder.

Desactiva Mega Men: Si no vas a usar mega mens ya sabes!

Desactivar los estilos Avada para Revolution Slider: Avada aade sus propios
estilos a Revolution slider, pero si no los vas a usar, fuera!
Desactiva Estilos desplegables de Avada: Para los mens. Si utilizas un plugin
de mens con sus propios efectos, desactiva los de Avada para evitar que se lleven
mal!

Desactiva animaciones CSS: No quieres utilizar animaciones Css de Avada?

Desactiva animaciones CSS solo sobre mviles: En los mviles igual si es

interesante desactivarlos. Prueba y decide!

Desactiva scripts API de Youtube: Desactiva la api propia que conecta con
Youtube.

Desactiva scripts API de Vimeo: Lo mismo para Vimeo.

Desactiva Script Google Map: Idem para Google Maps

Desactiva Script ToTop: Desactivas la flechita que nos lleva a toda velocidad a la
parte superior de la pgina.

Activa script To Top sobre mviles: Activa esa flechita en los mviles

Desactivar Fusion Slider: Si no vas a utilizar el slider de Avada, desactvalo

Desactivar Elastic Slider: Lo mismo

Desactiva FontAwesome: Si no quieres utilizar Fontawesome

Desactiva Open Graph Meta Tags: Desactiva el Open Graph de Avada para
Facebook

Desactiva fragmentos enriquecidos en todo el sito: Yo que t no hara eso!

Desactiva la presentacin (slider) de la galera de productos de Woocommerce

de Avada: Si no usas Woocommerce, para qu lo quieres?

Activate Developers Mode: Por defecto Avada incluye todos sus CSS y archivos
Javascript minificados y combinados. S, has ledo bien! pero si algo falla (que
puede ocurrir) puedes activar esta opcin para depurar y ver qu ocurre. En teora
solo se usa en modo desarrollo. Si dejas esta opcin activada, notars un cambio
importante a peor en el rendimiento.

Compile Dynamic css to file

Esta es algo muy tcnico y si ests inicindote no te recomiendo que lo toques, salvo
si es estrictamente necesario.

Barra lateral Global activa: Para empezar, al que hizo la traduccin se le fue la
mano. Yo creo que se ha confundido de seccin. No hagas caso a esa traduccin. Lo
correcto sera hablar de Css dinmico.

Te explico:

Este tipo de themes utilizan Css dinmico, ya que tienen tantas opciones diferentes
de configuracin que tendran que hacer cientos de archivos Css. Al activar esta
opcin lo que va a ocurrir es justamente esto. Por cada post/pgina se crear un
archivo css y se guardar en la carpeta uploads de Avada. Ya sabes cuantas ms
cosas tengamos que estar cargando.peor.

Advance Cache server IP: Algo muy especfico para casos donde se utilizan
sistemas de cache en el servidor, por ejemplo, Varnish o Cloudflare. Lo que ocurre
es que si usas este tipo de cache debemos indicar la IP correspondiente para que
Avada sepa que es all donde tiene que poner y limpiar los CSS dinmicos.
Woocommerce
Avada cuida todos sus detalles al mximo y por supuesto no iba a dejar
Woocommerce de lado. Por eso podrs personalizar muchos aspectos visuales de
la tienda desde su panel de control.

Nmero de productos por pgina: Especifica el nmero de productos que quieres

que aparezcan por pgina en la tienda.

Nmero de columnas de productos: Cuantas columnas quieres para los

productos?

Nmero de columnas del producto: Relacionados/Subir ventas/Ventas cruzadas:

Esto es similar al funcionamiento de los artculos relacionados en el blog, pero en
este caso para los productos.
Archivo / Categora Nmero de columnas de producto: Configura el nmero de
columnas en las pginas de categora de productos.

Product Tab Design: Elige el diseo de las pestaas en la pgina de producto.

Las quieres verticales u horizontales?

Utilice la pgina de Caja de WooCommerce: Avada tiene su propia plantilla para

la pgina de caja de Woocommerce. Si quieres usarla marca esta opcin.

Mostrar Notas de Pedido WooCommerce sobre el Pedido: Activa o desactiva el

apartado notas en los pedidos.

Mostrar WooCommerce Enlace a M Cuenta en Men Secundario: Incluye en el

men secundario un enlace a la cuenta del cliente.

Mostrar Icono del carrito de WooCommerce en el Men Secundario: Muestra

un icono del carrito en el men secundario.

Mostrar Link a M cuenta de Woocommerce en el Men Principal: Muestra un

enlace a la cuenta del cliente en el men principal.

Show Woocommerce Cart Icon in Main Menu: Muestra el icono del carrito en el
men principal.

Muestra iconos sociales en Woocommerce: Muestra los iconos sociales en el

men de Woocommerce.

Product Grid / List View: Muestra los productos en formato grid o como un listado.

Mensaje 1 de rea de Cuenta: Puedes incluir un mensaje en el rea de clientes.

Mensaje 2 de rea de Cuenta: Tambin un segundo mensaje

CSS personalizado
Una de las partes que ms me gusta de Avada y de algunos otros themes es
esta. Un lugar donde personalizar tu theme a travs de CSS sin tener que
recurrir al child theme (tema hijo). Esto es muy interesante porque te permite
afinar a la perfeccin cada parte de tu web por separado y sin que le afecten
las actualizaciones.

Recuerda que a travs de las opciones generales de Avada podemos configurar el

comportamiento general, por ejemplo, los colores.

Hay miles de situaciones en las que tenemos necesidad de hacer personalizaciones.

Imaginemos una posible situacin.

Una web donde hay pginas estticas, un blog con diferentes temticas y la pgina
principal. Algo muy sencillo:
Puedo definir como norma general lo siguiente:

Background blanco
Texto del cuerpo 14px
Los ttulos h1 sean de color naranja y el tamao de la fuente sea 32px, con
un margen superior e inferior de 10 px
Los ttulos h2 naranja, fuente 26 px y mrgenes 5px
Los ttulos h3 naranja, la fuente 20 px y mrgenes 5px
Enlaces de color naranja (para que destaque sobre el texto)

Bien! Esto lo has visto en el tutorial 2, donde bamos a Estilos y configuramos estos
apartados en: Fondos, colores de fuente, y en Tipografas, los mrgenes y tamao.
El theme utilizar estas caractersticas de forma predeterminada en toda la web.

1. Y si quiero usar un fondo negro (u otro color) en uno o varios lugares

especficos? Por ejemplo en el home.
2. Quiz definir el estilo del blog de una forma diferente a las pginas
estticas.
 3. Tal vez tengo un blog con diferentes temticas y me apetece definir cada
temtica con un estilo.

Lo habitual es utilizar el child theme o tema hijo, pero tambin una buena
solucin es el apartado de CSS personalizado.

Creamos para el blog un estilo css definido llamado blog:

1. Tamao de la letra en 16px, respetando el tipo de fuente de toda la web y

justificados.
2. h1 en color Marrn, tamao 28px y mrgenes de 15px y con la alineacin a
la izquierda.
3. h2 en color marrn, tamao 24 px y mrgenes de 10 px y alineacin izquierda.
4. h3 en color marrn, tamao 18 px y mrgenes de 5 px y alineacin izquierda.
5. Enlaces en color naranja, pero si pasamos por encima que se vea en color
verde.

Manos a la obra!

Creamos el estilo CSS

/* Maquetacin Blog */
.blog {
font-size: 16px;
text-align: justify;
}

.blog h1 {
font-size: 28px;
color: #AB8B65;
text-align: left;
}

.blog h2 {
font-size: 24px;
color: #AB8B65 !important;
text-align: left;
}

.blog h3 {
font-size: 18px;
color: #AB8B65;
text-align: left;
}

.blog a {
color: #09717Ez;
font-weight: bold;
}
.blog a:hover {
color: #09717E;
font-weight: bold;
}

Bueno, pues de esta forma tan sencilla podemos personalizar el estilo del blog. El
theme respeta el resto de los estilos definidos para la toda la web, cambiando
solamente estos para el blog (o en las secciones que queramos).

Y cmo hacemos que funcione?

Tienes dos maneras.

A la antigua usanza y vlido para todos el mundo y cualquier theme.

Incluimos todo el contenido entre etiquetas div class:

O lo hacemos desde Fusion Builder, creando un contenedor para el post e

incluyendo la regla Css
Respaldo
Una caracterstica ya habitual en otras plantillas premium.

Es muy necesario disponer de una herramienta prctica que nos permita guardar y
restaurar la configuracin para que en caso de desastre o incluso como base en
posteriores trabajos, no tengamos que invertir horas en volver a configurar
nuevamente la plantilla.

Adems de los propios botones que incorpora Avada para guardar/restaurar, puedes
copiar y pegar en un documento el cdigo que te muestra. Si necesitas restaurar la
configuracin simplemente pega el cdigo en el apartado del theme (que ves en la
imagen inferior) y tendrs Avada igual y completamente configurado como lo tenas
cuando lo guardaste.

Configuracin personalizada en Avada

Sigo avanzando con este monogrfico dedicado a Avada. En los tres primeros
captulos has podido ver como configurar Avada a nivel general y ahora vamos
a ver como personalizar una pgina esttica o de tu blog/portfolio de forma
independiente si es necesario.
Tambin repasar de forma rpida como funciona Fusion Builder, el
maquetador de Avada y corazn del trabajo de diseo en esta plantilla y por ltimo
vamos a ver como gestionar los mens y tambin veremos cmo crear un
Mega-men.

Como ya habrs observado, Avada es tremendamente flexible y permite una

configuracin casi total del comportamiento del theme. Sin embargo, puedes tener
la necesidad de disponer de una configuracin especfica, para una parte de tu web
o una pgina concreta. Los chicos de Theme-Fusion, lo tienen casi todo previsto.

ndice de contenido
1 Configuracin personalizada de una pgina con Avada
2 Imgenes destacadas
3 Personalizar configuracin en cada pgina de manera independiente
3.1 Entradas
3.2 Pgina
3.3 Presentaciones Sliders
3.4 Cabecera
3.5 Pie de pgina (Footer)
3.6 Barras laterales (Sidebar)
3.7 Fondos
3.8 Barra de ttulo de la pgina
4 Elementos de Fusion Builder
4.1 Qu es Fusion Builder?
4.2 Gestin de columnas
4.3 Elementos del Builder (Shortcodes)
4.4 Plantillas personalizadas
4.5 Plantillas predefinidas
4.6 Borrar, Undo y Redo
4.7 Generador de shortcodes
5 Gestin de los mens
5.1 Crear un Mega-men

Configuracin personalizada de una pgina

con Avada
Salvo algunos pequeos detalles que diferencian una pgina esttica de una del
blog, las opciones son prcticamente 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 informacin que leers a continuacin es comn en su mayora para la

configuracin personalizada de todos los tipos de pgina que tiene Avada y se
controla desde cada pgina esttica, blog o portfolio.
Imgenes destacadas
Si has tenido oportunidad de trabajar con
otros themes, una de las cosas que te
llamarn la atencin de Avada es
que puedes trabajar con hasta 5
imgenes destacadas. Si lo haces as
podras formar un pequeo carrusel de
presentacin en cada post. La verdad es
que ya cuesta trabajar con una, imagnate
5.

No obstante es posible que pueda venirte

bien, en funcin del tipo de web que vayas
a construir, esto ya depende de ti.

La imagen destacada principal la obtienes

directamente de tu librera multimedia, pero
las restantes puedes hacerlo desde tu
librera, una url independiente o la galera de
WordPress.

Tambin podrs elegir el tipo de post que

vas a crear. Si es estndar, galera, enlace,
imagen, cita, video, audio o Chat. Si
seleccionas estndar, imagen o video,
Avada utilizar la imagen destacada o el
video que hayas insertado en la
presentacin de las imgenes del blog.

En el caso particular de las pginas estticas, Avada te ofrece diferentes plantilla

que pueden servirte como base o idea para crear un diseo de pgina.

Puedes elegir la plantilla predeterminada, una pgina ancha 100% de ancho, una
pgina completamente en blanco para que hagas el diseo desde cero, una pgina
de contacto que incorpora un sencillo formulario y un mapa de google maps, un
diseo especfico para las Faqs (preguntas frecuentes), un montn de plantillas con
diferentes presentaciones para el portafolio y por ltimo una pgina con el diseo de
men lateral.

Personalizar configuracin en cada pgina de

manera independiente
Una vez hemos configurado el comportamiento general para toda la web, podemos
gestionar el comportamiento particular en cualquier tipo de pgina esttica, blog o
portfolio. Veamos el catlogo de opciones.

Entradas
Especficamente para las pginas del blog y por lo tanto solo aparece en las
entradas.

Desactiva Primera imagen destacada: Si lo activas aparecer la imagen

destacada al principio del post automticamente.
Utilizar el 100% Ancho de pgina: Puedes establecer que esta pgina ocupe el
100% de ancho.

Cdigo embebido de video: En vez de una imagen destacada, puedes incluir

cdigo 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 presentacin del rollover.

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

Open Post Links In New Window: Indica si quieres que cuando hagan clic en el
enlace a esta pgina, se abra en una nueva pestaa.

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 paginacin anterior/siguiente: Activa o desactiva que aparezca el
navegador de entradas.

Mostrar cuadro de informacin 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.

Pgina
Establece 4 parmetros para esta pgina en particular

Contenido de la pgina Relleno superior: Establece el espacio de relleno entre el

contenido de la pgina y la cabecera.

Contenido de la pgina 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

pgina 100% de ancho, estableces un relleno por la izquierda y derecha, similar a
un padding. Te recomiendo que utilices porcentajes y no pxeles, para que la
adaptacin en dispositivos mviles sea correcta.

Desactiva Primera imagen destacada (solo en las pginas estticas): Desactiva

la imagen destacada principal.

Presentaciones Sliders
Desde este apartado puedes establecer que sliders deseas cargar para esta pgina.

Posicin de la Presentacin (slider): Decide si quieres que el slider aparezca

encima o debajo del men principal.

Tipo de presentacin (slider): De los slider que incorpora Avada, elige cual vas a
utilizar.
Selecciona LayerSlider: Si usas este, aparecern 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 sustitucin por si falla la presentacin (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 pgina.

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

Cabecera al 100% de ancho: Si queremos que la cabecera se estire al 100% de la

pgina.

Imagen de fondo: Establece una imagen de fondo para la cabecera en esta pgina.

Background Color: Establece un color de fondo para esta pgina.

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 segn 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 pequea, tal vez quieras que se
repita.

Men de navegacin principal: Selecciona que men quieres que se cargue en

esta pgina. No tiene que ser el principal. Puede ser el que t quieras de entre los
que tengas creados.

Pie de pgina (Footer)

Define el tipo de footer para esta pgina
Mostrar rea Widget del pie de pgina: Define si quieres esta parte del footer en
esta pgina.

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

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

Barras laterales (Sidebar)

Define como sern los sidebars en esta pgina.

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.

Posicin barra lateral 1: Elige la posicin 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 esta pgina como sern los backgrounds.

Formato: Elige el formato para esta pgina, 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, indcalo.

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

Repetir fondo: Si es pequea, puedes hacer que se repita.

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

Imagen de Fondo para el rea de contenido principal: Para el fondo del

contenido de la pgina.

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 ttulo de la pgina

Desde este apartado podrs configurar al milmetro el aspecto y los elementos que
deseas que aparezcan en la barra de ttulo de la pgina.

Barra de ttulo de la pgina: Te permite mostrar u ocultar la barra de ttulo en la

pgina

Texto de la Barra de Ttulo de la pgina: Te permite mostrar u ocultar el texto de

la barra de ttulo
Alineacin del texto de la barra de ttulo: Define como alinear el texto. Por
defecto, al centro, izquierda o derecha.

100% Page Title Wundt: Define si quieres estirar la barra al 100% del ancho de
pgina.

Texto personalizado de la barra de ttulo: Personaliza el texto de la barra de ttulo

para esta pgina.

Tamao del texto de la barra de ttulo de la pgina: Especifica el tamao del texto
en pixeles.

Texto personalizado de la barra de Ttulo de la subcabecera: Personaliza el texto

para el subttulo.

Tamao del texto de la Subcabecera de la barra de Ttulo: Especifica el tamao

del texto para el subttulo.

Color de fuente del ttulo de la pgina: Especifica un color para el ttulo.

Alto de la barra del ttulo de la pgina: Define el alto que quieres para la barra de
ttulo

Page Title Bar Mobile Height: Especifica el alto para la versin mvil.
Fondo de barra de ttulo de la pgina: Especifica una imagen de fondo para la
barra de ttulo.

Fondo Retina de la barra de ttulo: Lo mismo para el formato retina.

Color de fondo de la barra de ttulo de la pgina: Especifica un color de fondo

para la barra

Color de los bordes de la barra de ttulo de la pgina: 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 ttulo,

especifica aqu la imagen que quieres usar.

Ruta de navegacin/Barra de bsqueda: Define si quieres que aparezcan los

breadcrumbs, una barra de bsqueda, ambas cosas o ninguno.

Elementos de Fusion Builder

Fusion Builder merece un captulo 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 diseo de las pginas. Es un
constructor en toda regla similar a programas como visual composer. Se instala
como un plugin e incorpora en su ncleo todos los cdigos cortos que Avada
trae de serie con la particularidad de que puedes definirlos a travs de mens de
una forma grfica e intuitiva.

De hecho, creo que podramos dividirlo en dos partes.

1 Creacin y amplia gestin de contenedores y columnas

2 Uso y Gestin 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 evolucin es que algunos shortcodes (muy pocos)

mantienen un funcionamiento un tanto inflexible en comparacin a otras soluciones
que hay en el mercado y estoy convencido que este tema tendrn que ir mejorndolo
poco a poco. El problema supongo que est en cmo redisearlos 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 prcticamente lo que quieras en una web de una manera relativamente
sencilla.

Los elementos de Fusion Builder funcionan arrastrando y soltando donde t quieras

(Drag & Drop) o bien haciendo clic sobre ellos de tal manera que se van
incorporando uno tras otro.

Gestin de columnas
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 tamao de columna dentro del
contenedor.

Elementos del Builder (Shortcodes)

En este momento Avada incorpora 45 herramientas y shortcodes diferentes con
multitud de posibilidades de configuracin

Plantillas personalizadas
Desde aqu podrs disear tus propias plantillas para utilizar en las pginas
estticas, 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 diseadores de
Avada han creado, desde este apartado podrs insertar hasta 40 tipos de
plantillas con un solo clic.

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 diseo tipo revista, 2 para la pgina Sobre nosotros, 1 para servicios
vamos, que por ideas que no quede! Un clic y tienes la pgina creada.

Borrar, Undo y Redo

Otra herramienta que encuentro fantstica es la posibilidad de borrar una plantilla

completa con un solo clic 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 maquetacin y prefieres hacerlo a la antigua
usanza. O sencillamente incluir un shortcode en un lugar determinado. Avada
dispone de esta posibilidad a travs de su generador de shortcodes. De esta
manera, puedes elegir el elemento que quieres incluir y generar un shortcode con
todas las opciones de personalizacin disponibles de una forma grfica e intuitiva.

Adems, tanto si trabajas desde la pestaa Visual o Texto, siempre podrs incluir
desde ah y sin moverte entre pestaas un shortcode de Avada.
Gestin de los mens
Avada permite incorporar hasta 4 mens independientes en diferentes partes
de la web. Esto aporta muchas ventajas de diseo porque nos permite jugar segn
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 pginas, con la opcin de incorporar otro men con la funcionalidad de una
one page site. Esto es til para navegar en pginas 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 pginas 404

La creacin y gestin de los mens dependen directamente de WordPress y por lo

tanto no me voy a parar aqu ya que no depende realmente de Avada, excepto la
funcin de Mega-men.

Como es habitual, podrs incluir en tus mens, las pginas estticas y tambin
entradas, categoras, faqs, enlaces personalizados, etiquetas y todos los elementos,
que Avada incluye como custom post types.
Crear un Mega-men
La opcin del Mega-men se utiliza fundamentalmente cuando necesitas incluir
muchas subsecciones y es importante segmentarlas para facilitar la navegabilidad
de los usuarios. Tambin permite utilizar imgenes, lo que facilita jugar con el diseo
y convierte el men en un elemento ms visual y llamativo. Este proceso en Avada
se hace a travs de los Widgets

En primer lugar, recuerda que la opcin de Mega men no debe estar desactivada
en la configuracin 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, seccin avanzado, el mega
men no est desactivado.

Si est desactivado, desmarca la casilla y guarda las opciones. A continuacin

vuelve al men principal.
Para poder habilitar el Mega Menu, siempre hay que hacerlo sobre las secciones
principales, que englobarn las secciones secundarias.

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 men (solo para
el men principal)
Ahora vers que se activan dos nuevas casillas, que te permiten elegir cuantas
columnas deseas para el mega men y cul es el ancho que deseas. Avada te
permite establecer un ancho completo que ocupe todo el ancho de pgina o
establecer un ancho independiente para cada columna.

Ahora vete a una de los items secundarios y brelo para ver las nuevas opciones
disponibles. Vers que puedes establecer el ancho para este item, desactivar el
ttulo 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 cdigo necesario
para visualizar una imagen. Gurdalo con un nombre que puedas identificar y aqu
seleccionas el widget para incluirlo en el mega-men.