Tutorial Avada hasta la versión 3.9.4 – Configuración inicial (1)

Después de un extenso repaso general a las características, voy a entrar en materia con un tutorial Avada muy completo. Espero que te ayude a entender como funciona y las posibilidades de configuración.

En realidad van a ser varios porque ya te comenté que Avada es un tema muy extenso y por eso harán falta varios post para cubrir toda la información y aprender a funcionar. Iremos poco a poco y en este post vamos a empezar por aprender a configurar Avada desde cero.

Asumo que ya tienes tu WordPress instalado y listo para funcionar. Si no es así te recomiendo que leas este post donde te explico como instalar WordPress desde cero y también este donde hablo de la configuración inicial de WordPress una vez instalado.

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 mínimos.

Requisitos del servidor

• PHP 5.4 o superior
• MySQL 5
• Suhosin (recomendable)
• Mínimo 128 megas de RAM

Requisitos y configuración 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 versión 3.1 de WordPress, pero por seguridad y además para sacar todo el partido al theme, te recomiendo que tengas WordPress actualizado a la última versión.

Ten siempre muy presente, que en la mayoría de los casos en los que aparecen las famosas pantallas en blanco, fallos de importación, etc, son debidos a la configuración 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. También podrías 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 debería ser necesario, ya que Avada te ofrece su propio panel de control y te va a dar una visión completa de las características de tu hosting y si debes modificar o no la configuración. Una vez instales Avada, aparecerá en tu menú general un apartado con su nombre y debes hacer click en SYSTEM STATUS.

Instalar Avada en tu hosting

Una vez hayas comprado tu licencia podrás descargarte el archivo. Themeforest te da la opción de que descargues el archivo completo o bien directamente el de instalación.

El archivo completo pesa más de 200 megas e incluye varias cosas:

Archivo para instalar el theme.

El child Theme o tema hijo

Extras: Como la documentación de Revolution Slider o Layer Slider.

Carpeta de traducciones: Los archivos de traducción al español y de otros idiomas.

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

Una vez tienes a mano el archivo de instalación el proceso es muy simple.

Puedes subirlo a través del propio WordPress desde la sección Apariencia-temas-añadir nuevo. El archivo se subirá a wordpress y se instalará automáticamente.

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 conexión) o el límite en MB de PHP para subir archivos. En ese caso deberás hablar con tu proveedor o bien puedes subirlo a través 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 núcleo de trabajo en Avada. Se trata del maquetador web que incluye con todos los shortcodes y funcionalidades de diseño.

Opcionales

Revolution Slider y Layer Slider. Llegados a este punto te hago la siguiente recomendación:

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 más sencillo.

Si tampoco lo quieres usar, podrás desactivarlo desde el panel de opciones (luego te diré donde). Lo que no es una buena idea, es tener instalados todos los slider, ya que se estarán cargando multitud de archivos css y java, que no vas a utilizar.

Una vez instalados, deberás activarlos, como cualquier otro plugin. Esto puedes hacerlo directamente desde la misma pantalla de instalación de Avada o bien desde el apartado Plugins de WordPress.

Instalar la traducción de Avada al español

Algo muy interesante con este theme es que tiene una traducción bastante completa al español. Esto te va a facilitar las cosas bastante, sobre todo si estás empezando. Hay que decir que algunas partes no están aun traducidas, sobre todo las novedades, pero es una parte muy pequeña. En general te entenderás bastante bien, salvo en alguna parte, que puede resultar confusa porque se ve que han metido la traducción a calzador.

Lo primero que has de hacer es irte a tu carpeta de instalación en tu ordenador (la que te descargaste de Themeforest) y busca la carpeta Languages. Ahi encontrarás dos subcarpetas, Avada  y Fusion-core.

En la carpeta Avada están las traducciones generales y en la carpeta Fusion-core están las traducciones del maquetador y los shortcodes que incorpora. Para el idioma español 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 traducción 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

(osea, 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 machacarán los archivos que has modificado y aparecerá la traducción original. De esta manera podrás hacer todos los cambios que quieras y actualizar Avada sin sustos.

Aun así siempre podrías 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 deberías estar viendo todo el theme en español, salvo las partes que aun no están traducidas.

¿Cómo funciona Avada?

Bueno, pues entrando al lío directamente…

Lo primero que has de entender de Avada es su funcionamiento y configuración. Es tremendamente flexible y prácticamente no hay nada que no sea configurable.

Digamos que hay 3 niveles de configuración.

• Las opciones del theme, que afectan a todo el funcionamiento en general.
• Las opciones de cada pagina o post que le afectan exclusivamente
• Las opciones de Fusion builder, que permiten la construcción y diseño de cada página o post.

En pocas palabras significa que:

Puedes crear una configuración 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 páginas 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 también en cada página 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 administración Avada-Opciones del tema.

¡Siiii, lo se, parece que tiene un montón de cosas! ¡Pues aun tiene muchas más! jajaja.

No te preocupes, que es más fácil de lo que parece. Vamos a ir desgranando que hace cada elemento.

Cada vez que hagas una modificación debes guardar los cambios. Para eso tienes un botón en la parte superior e inferior de cada menú que dice «Guardar todos los cambios».

Como esto es inmenso, en las partes que considero esenciales, me pararé un poco más y en las que no lo sean, o bien sean pasos repetitivos o sencillos lo pasaré por encima. ¡Tú también tendrás que currar!, ¿no?.

Pestaña general

Diseño Responsive: Esto está claro que debe estar marcado. Le indica al theme que debe adaptarse a toda clase de dispositivos móviles, tablets, etc.

Activa Script to top sobre móviles: ¿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 móviles.

Use Fixed Layout for Ipad: Esta opción desaparece en la próxima versión de Avada y por eso ya no me paro en ella. Hacía referencia al formato de plantilla en los Ipad.

Código de seguimiento: Aqui debes incluir tu código de Analytics y otros que puedas usar para funcionalidades externas que necesites implementar.

Espacio antes del Head: Si una aplicación que deseas implementar te solicita que insertes en tu web un código específico 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 píxeles hasta 1170 px o bien en porcentaje 100%.

¿Cómo elegir uno u otro?

Como consejo te diría 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 móvil que para una tableta.

Cuando hablamos de un dispositivo móvil o tableta, al ser responsive, la web se adaptará a la resolución del dispositivo encogiendo y encajando las piezas de tal manera que se vea de una forma cómoda.

Pero en los monitores el navegador estira la web al ancho del monitor. Cuando creas el diseño 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 encontrarás con cosas que se pueden descuadrar y que no se adaptan a lo que tu habías pensado en absoluto.

Por eso la elección del ancho es fundamental a la hora de establecer el diseño web y juegan un papel fundamental en la velocidad de carga de la web.

Has de considerar que tipo de web vas a diseñar y el contenido que se va a utilizar. Si hay mucho contenido gráfico y multimedia o más bien es texto… También es una cuestión de gustos… a mi me gustan más las wide, pero no siempre puedo utilizarlas… Lo importante es que te sientas cómodo al fin y al cabo.

En modo boxed la carga de imágenes y elementos para un monitor siempre es igual, porque se ajusta siempre al mismo tamaño.

En el formato wide, se estiran y/o recortan de forma automática por el navegador para adaptarse al diseño establecido. Esto produce un trabajo extra al server que contribuye a que la web tarde un poco más en cargar.

Si usas el modo caja, lo tendrás bastante fácil. 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 diseño. En los móviles y tablets, no afecta, porque se adaptarán al contenido.

Si usas el modo ampliado, todo se estira y encoje en función de la resolución y por tanto has de tener en cuenta ese factor cuando hagas el diseño de los elementos de la web. Si un monitor es muy grande, se puede estirar e incluso deformar algunas imágenes.

La verdad es que es un quedradero 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, sabrás de sobra lo que necesitas, pero si no es así, creo que la mejor opción es el formato Boxed. ¡Tu decides!

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 específicas. 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.

Posición 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 diseño de cabecera: Elige la que más te guste o se adapte a tus necesidades.

Sombra de la cabecera: Le añade 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.

Posición de la Presentación (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 que elementos quieres que aparezcan en cada parte de la cabecera (izquierda y derecha). Avada te ofrece la posibilidad de añadir información de contacto, iconos sociales, un menú específico o bien dejarlo vacío.

Teléfono y email de información de contacto: Para que añadas esos datos a la cabecera.

Imagen de fondo de la cabecera

Puedes añadir una imagen o un color de fondo a la cabecera. Aqui puedes subir la imagen que quieras y añadir diferentes efectos, como por ejemplo Parallax.

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

Iconos sociales en el encabezado

Con estas opciones puedes ajustar la apariencia que tendrán los iconos en la cabecera, incluído el color, aspecto y tamaño.

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 página larga.

Esta opción nos permite activar o desactivar la cabecera fija en los diferentes dispositivos, bien sea en monitores, tablets o teléfonos y también hacer una diferenciación en las cabeceras 4 y 5, que tienen algunas particularidades con respecto a las 3 primeras. ¡Supongo que ya te habrás dado cuenta de ese detalle!.

También nos permite ajustar la separación entre los items del menú y ajustar el tamaño 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 tamaño, más alla del sentido común y estético. Simplemente hemos de decirle a Avada que utilizar.

Logo por defecto: subes el logo con el tamaño 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 resolución debemos subir el logo con el doble de resolución, es decir 600×100. ¡Asi el logo «brillará» como un príncipe!

Default logo Width: 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 traducción al español aparece como Habilitar la altura suave. A esto me refiero yo con «hacer la traducción 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 móviles (Movil logo)

Lo mismo pero para las cabeceras de los móviles. En este caso, te recomiendo que hagas el logo más pequeño. Por ejemplo 150×25 px para la resolución normal y 300×50 px para la opción retina.

Configuración del logo (Logo Settings)

Puedes indicar la alineación del logo, si la quieres a la izquierda, derecha o centro y establecer los márgenes para colocar el logo exactamente donde quieras.

Opciones del favicon

Aqui puedes subir el archivo favicon con las medidas adecuadas según el tipo de dispositivos, que como podrás 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 páginas 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 más se ajuste a tus necesidades.

Tamaño de la barra resaltada del menú principal: Cuando hay un elemento activo o pasamos con el ratón sobre los elementos del menú aparece una pequeña barrita que lo señala. Aqui puedes controlar el tamaño de esa barrita.

Relleno de la opción del menú: Permite ajustar el espacio entre los items del menú. Esto es muy útil cuando tenemos muchos elementos o contienen textos largos. Asi 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 Tamaño de fuente: Controla el tamaño de la letra para el menú desplegable.

Menú principal desplegable Tamaño de fuente: Actívala si quieres que en los móviles aparezca la ruta de navegación.

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-Width: Avada incorpora una opción básica para utilizar imágenes en el menú. A esto se le llama Mega Menú y esta opción permite controlar el ancho máximo.

Mega Menu tamaño del título de la columna: Controla el tamaño del título de cada columna del Mega menu.

Área del Widget «Mega Menu»: Si lo marcas desactivas la opción del Mega Menu. Si no vas a utilizar la opción Mega Menu, te recomiendo que lo actives.

Dropdown Menu Indicator: Añade una pequeña flcha indicando que ese item del menú contiene un submenú.

Display Search Icon in Main Nav: Te añade una icono con una barra de búsqueda en el menú principal.

Habilitar borde del círculo en los iconos del menú: Al utilizar Woocommerce aparece un icono de carrito en el menú principal. Si marcas esta opción quedará resaltado con un circulo el icono del carrito y el de la búsqueda.

Opciones para el menú en móviles (Mobile menu options)

Estilo de diseño del menú móvil: Te permite elegir entre un diseño clásico o moderno para el menú móvil. Te recomiendo el Moderno.

Relleno de la opción del menú móvil: Controla la separación 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 móvil: Marcar para agrupar el submenú a los elementos del deslizador. Te recomiendo que lo dejes marcado.

Barra del título de la página

Se refiere al apartado que aparece a continuación del menú en todas las páginas con el título de la misma. Según el tipo de web yo lo activo o desactivo, pero como siempre cuestión de gustos o necesidades.

Opciones

Barra de título de la página: 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 Título de la página: Te permite mostrar el título de la página o post.

100% Page Title Width: Te permite activar el contenido al ancho completo si utilizas el modo wide (ancho completo).

Alto de la barra del título de la página: Especifica el alto que quieres para el diseño.

Page Title Bar Mobile Height: Lo mismo para la versión móvil.

Alineación del texto de la barra de título: Puedes alinear el texto a la izquierda, centro o derecha.

Fondo de barra de título de la página: 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.

Animación de desvanecimiento: Si activas este efecto, el título de la página se desvanece con un fade a medida que va desapareciendo.

Opciones de ruta de navegación (Breadcrumbs)

Los breadcrumbs son las rutas de navegación que le indican a nuestros visitantes donde se encuentran. Es muy útil cuando se trata de una web con mucho contenido y secciones. Aqui puedes configurar como aparecen en la barra del título.

Breadcrumbs/Search Box: Selecciona si prefieres que aparezcan los breadcrumbs o bien una barra de búsqueda.

Ruta de navegación sobre dispositivos móviles: Actívalo si quieres que aparezcan en los dispositivos móviles.

Ruta de navegación Prefijo Menú: Puedes poner un prefijo indicativo a los Breadcrumbs.

Breadcrumb Menu Separator: También añadir una barra de separación o cualquier otro símbolo entre los elementos de la ruta de navegación.

Show Custom Post Type Archives on Breadcrumbs: Si creas post personalizados, puedes indicar si quieres que aparezcan en la ruta de navegación.

Show Post Categories on Breadcrumbs: Lo mismo con las categorías.

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 añadir información y contenido que siempre deba estar presente, por ejemplo un formulario de contacto o un login. Lo que ocurre es que es fácil 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 Móvil: Márcalo para desactivarlo en los móviles.

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

Barra deslizante abierta cuando se carga la página: Si lo activas, el sliding bar aparecerá abierto por defecto cuando se carga la página.

Número de columnas para el sliding bar: Puedes elegir desde 2 hasta 6 columnas y activarlos en el área de Widgets de WordPress.

Pie de página (Footer)

Generales

Con Avada es super sencillo controlar y configurar el footer de tu página web. Puedes activarlo o desactivarlo si no quieres usarlo.

También se controla con widgets y puedes añadir hasta seis columnas, lo cual te permite máxima flexibilidad. Puedes utilizar un color de fondo o bien añadir una imagen con la que podrás jugar a tu gusto en el sentido de que podrás estirarla, centrarla o colocarla donde quieras con el padding.

También podrás añadir 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 añadir el copyright o algún texto o enlace que quieras. Igualmente puedes activarlo o desactivarlo, controlar el relleno y el aspecto de los iconos sociales, al igual que lo hacíamos en el encabezado.

Barras laterales (Sidebars)

Desde aquí puedes configurar de forma global el comportamiento que tendrá cada tipo de página con los sidebars. Eso quiere decir que podrás configurar diferentes sidebars para cada tipo de página. Por ejemplo, en las páginas de portfolio, podrás tener uno diferente a las del blog o las estáticas.

Pero imagina también que por norma general, no quieres que las páginas estáticas tengan sidebar… Ok, pues desde aquí podrás indicárselo a Avada. La flexibilidad es total y puedes manejar la configuración global para:

• Entradas del Portafolio
• Páginas de archivo y categoría del portafolio
• Entradas del Blog y paginas de categoría
• Productos de Woocommerce y sus páginas de categoría
• BBpress/Budypress
• Página de búsqueda

De forma predeterminada podrás indicar:

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

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

Barra lateral 2 activa: Lo mismo que para la anterior

Posición 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 página en modo Caja (Boxed). Lo que hace es insertar una imagen de fondo externa al contenido de la web, vamos, en plan decorativo.

Puedes añadir un fondo general para toda la web, pero luego en cada página podrás 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. También puedes elegir patrones predeterminados de Avada.

Modo Boxed y Wide

En este caso añades una imagen al contenido principal de la web y si deseas que una página en concreto tenga el suyo propio, podrás hacerlo desde la propia página.

Tipografía

Avada te permite un control absoluto sobre la tipografía y podrás configurar cada tipo de fuente a tu conveniencia. Es tan amplio, que haría falta un post exclusivo para ello. ¡Pero bueno!, es muy intuitivo y fácil de entender… no creo que tengas problema, simplemente debes dedicarle un poquito de tiempo…

Para empezar podrías subir tus propias fuentes personalizadas. Para eso necesitarías subir los archivos Woff, TTF, SVG y EOT.

Pero también puedes usar las Estándar o las fuentes de Google.

Por supuesto podrás controlar el tamaño de la fuente, de todos y cada uno de los elementos de la web. H1, h2, h3 …. cuerpo, menus, encabezados, botones, footer, widgets…en el móvil…

También podrás controlar las alturas de linea de cada fuente, el grosor, el espacio y los márgenes. ¡Vamos, que por controlar que no quede!.

En fin, hasta aquí el primer manual de Avada. Ya ves que no estamos ni en la mitad ¡y todo lo que falta!, pero supongo que estás cansado/a de leer y sinceramente yo de escribir.

En el siguiente manual de Avada voy  a tratar los estilos, colores, y el restos de las opciones generales de Avada.

Espero que esto te sirva de ayuda. ¡Si es así me ayudarías compartiendo!

Nos vemos en la próxima…