Configurar Avada – Tutorial de configuración inicial (2)

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

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

Novedades de la versión 4.0

Actualizar Avada a la versión 4.0

Próximo lanzamiento de la versión Avada 5.0

El nuevo Fusion Builder en Avada 5.0

Volvemos al “lio” para configurar Avada. En el primer tutorial de Avada hablé de los requisitos necesarios para instalarlo y como hacerlo. También de como incluir la traducción al español que trae y de las primeras opciones de configuración hasta las tipografías incluidas.

Supongo que a estas alturas te habré convencido de que las posibilidades son enormes y por más 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 configuración general a ver hasta donde podemos llegar.

Configurar Avada - Tutorial (2) sobre esta plantilla WordPress

Estilos de Avada

¿Qué son los estilos?. Pues ya te lo podrás imaginar. Sencillamente el aspecto que querrás darle a tu web. A través de este apartado podrás configurar los colores de fondo, los elementos, explorar las innumerables opciones de diseño, colores de las fuentes, del menú principal, el secundario y el menú móvil.

En primer lugar Avada incorpora 2 esquemas básicos (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 marrón.

Si eliges esta opción Avada configurará todo el theme y los elementos serán marrones con algunas variantes.

estilos_1

Esto en sí no es nada novedoso, cualquier theme premium trae su propio juego de diseño y todo hay que decirlo, suelen ser muy completos. Si no quieres complicarte mucho la vida en este aspecto y te valen los esquemas predefinidos, te ahorrarás mucho tiempo, ¡te lo aseguro!

Pero si eres un inconformista o quieres personalizar tu web al máximo, descubrirás que Avada te ofrece todas las herramientas precisas para ello.

Siempre debes elegir un esquema de color por defecto, que estará presente. A partir de ahí podrás:

  • Modificar exclusivamente los elementos que quieras cambiar y afinar a tu gusto.
  • Cambiar por completo los esquemas y diseñar el theme como tú quieras.

Colores de fondo

colores_de_fondo_avada_1

Color primario: Será el color predominante en la mayoría de los elementos que utilices. Por ejemplo, si creas un botón, será de color marrón, aunque por supuesto, podrás darle luego el color y aspecto que quieras. Simplemente que de entrada el te lo pone marrón.

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 configuración de avada aparece como “barra deslizante”.

Nota: Hay muchos elementos en Avada que te permitirán 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 irán asi: 0 – 0.1 – 0.2 – 0.3 …. Por ejemplo si quieres crear un elemento semi-transparente en un punto intermedio pondrías la opacidad en 0.5.

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 asi 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 menu de opciones de Avada como “Cabecera”

cabecera

 

Color de fondo de la barra de título de la página: Cambias el color de fondo de la barra de título de las páginas.

colores_de_fondo_avada_2

Color de los bordes de la barra de título de la página: Cambias el color de los bordes de la barra del título.

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

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

Color del fondo del pie de página: El color de fondo del footer principal.

Color del borde del pie de página: 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!

Bueno, como ves, al venir en español, es bastante más intuitivo y como en el panel a la derecha cada apartado tiene su explicación, no te resultará difícil en general entender de que se trata.

A partir de ahora me pararé en los elementos esenciales, porque si no, ¡esto puede alargarse muuuucho!

Colores de los elementos

Rollover

Este es un efecto que aparece cuando utilizamos el listado de artículos en el blog o el portfolio. Cuando te los muestra y pasas por encima con el ratón, aparece un efecto degradado semitransparente de color y el título del post con elementos añadidos. 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)

También puedes personalizar los elementos de la barra deslizante (Sliding bar)

Los separadores de los Widgets que se utilizan en el pie de página (footer principal)

Formularios:

Si usas Contact form 7 Avada ofrece soporte de diseño con los formularios de este plugin que ademas es gratuito y seguro que lo conoces. Podrás personalizar los elementos de los formularios, como el color de fondo, la caja de la cuadrícula…

 Woocommerce

Si tienes pensado utilizar woocommerce, en este apartado podrás personalizar el color de muchos de los elementos de tu tienda. Avada ofrece un amplio soporte y una excelente integración con este e-commerce.

bbpress

Igualmente si utilizas bbPress podrás personalizar algunos elementos.

Opciones de diseño

Este es un apartado importante, porque vas a definir el aspecto de las páginas en general

opciones_de_diseno_avada

Relleno superior e inferior

Se refiere al espacio que Avada deja entre el contenido de cada página con respecto a la cabecera y al footer. Avada incluye por defecto bastante separación, pero puedes personalizarla. Yo por ejemplo utilizo 20 px

separacion_del_relleno_superior

Aquí lo configuras a nivel general para toda la web y luego en cada página puedes cambiar estos valores,  si por ejemplo has creado un diseño específico para esa página.

opciones_de_diseño_especifico_en_la_página

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 página específica. En el modo Wide debes dejar un margen (a tu gusto) para que el texto y el contenido no se pegue al borde, porque quedaría fatal.

Con esta opción 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 perfección y proporcionalmente en cada tipo de pantalla sea cual sea la resolución.

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

Column top y bottom margin: Afecta directamente al diseño cuando utilizas el maquetador (fusion builder). Cuando creas las columnas puedes establecer un margen superior e inferior. Esto te permite diferentes estilos en el diseño, ya que podrás jugar con opciones como pegar las columnas o separarlas.

Recuerda que aquí configuramos el comportamiento general, pero luego podrás personalizarlo en cada caso. Es decir, podrás definir un comportamiento general en los márgenes de las columnas para toda la web y personalizarlo en cada página y columna por separado. Te pongo un ejemplo:

ejemplo_de_margenes_de_columnas

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

Colores de fuente

Desde aquí será muy fácil 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 prácticamente todo lo referente a las fuentes.

Se les ha escapado alguna cosilla, ¡pero vamos…..! nada que no se pueda cambiar con un poquito de CSS.  Como verás es muy amplio, pero muy sencillo, así que no creo que sea necesario ampliar la información en este punto. Si tienes dudas ¡prueba! y si no la solucionas ¡pregunta!

Colores_de_fuente_avada

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 submenus (si es que los tienes).

colores_del_menu_principal

Colores del menú secundario

Este apartado es similar al anterior, pero para el menú que aparece en la cabecera superior. Para ello habrás tenido que crear y configurar un menú específico en Apariencia-Menus de WordPress y asignarlo a para que aparezca en esa cabecera (Top menu). Esto lo haces en la pestaña 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_menu_secundario_avada

Colores del menú Móvil

Avada te permite personalizar los elementos del menú móvil ajustándolo más a tus necesidad y gusto personal

colores_menu_movil

Shortcodes

Me imagino que habrás oído hablar sobre los shortcodes. Si eres nuevo/a en WordPress te explico que son y como funcionan.

Los shortcodes son pequeños trozos de código que los programadores crean para facilitar la incorporación de elementos de forma rápida y fácil. 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 código necesario para que ese efecto pueda implementarse en la web y luego ha de decorarlo a través de CSS y muchas veces Javascript. Imagínate que tuvieses que copiar y pegar todo eso….¡sería una locura!

El programador vincula todo ese código a uno mucho más pequeño en el que incluye unos parámetros previamente establecidos en el código principal y de esa manera podemos personalizar el efecto a nuestro gusto con los parámetros que él diseñó. Así todo es mucho más fácil para todo el mundo y ademas podemos insertarlo donde queramos. Bien pensado ¿verdad?

Ante la aparición 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 gráfica y antes había que copiar el código.

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

Gráfica e intuitivamente desde el maquetador (fusion builder)

shortcodes_fusion_builder

¡A la antigua usanza!

shortcodes_manuales_avada

Al margen de como lo insertes, en Avada lo han pensado todo y en cualquier caso no tendrás que pegar código. Siempre se abrirá un menú donde podrás configurar el shortcode como quieras.

Yo me imagino que lo habrán tenido que hacer así porque el nivel de personalización es tan grande que si tuviésemos que pegar el código íbamos de lado…jajaja.

Bueno a todo esto, te he mandado el rollo porque en este apartado de las opciones de Avada podrás configurar la apariencia de cada shortcode de forma general. Si no necesitas nada en especial, casi será insertar y listo. Y si lo necesitas, podrás personalizarlo total y absolutamente en cada shortcode que utilices.

Avada incorpora la friolera de 26 shortcodes (por ahora)….

Tal vez alguien estará pensando que son pocos.

¡Déjame que me explique! Hablamos de utilidades y elementos puramente decorativos. Por si mismo el uso del maquetador con todas las opciones de diseño que incorpora, sería el equivalente a cientos de shortcodes de otros themes.

En honor a la verdad, algunos no vas a utilizarlos jamás, salvo que seas desarrollador… En ese caso podrás utilizarlos todos si usas el theme para diferentes webs y fines.

La cuestión es que siempre están ahí y podrás 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 cargarán cuando sea necesario. Es decir, no van a ralentizar la carga de la web.

Algunos de los shortcodes que tendrás disponibles son Carrusel, botones, contadores, cajas de contenido, cuadros animados, iconos, listas, testimonios, separadores, tablas de precios, cuadros de información, barras de progreso, tabs verticales y horizontales, imágenes…

Bueno, pues volviendo al panel de opciones con la configuración de los shortcodes encontrarás esto:

Shortcodes_blog

Y podrás configurar aspectos visuales como por ejemplo en los botones:

shortcode_boton_avada

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 botón ¡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 podrás configurar el comportamiento del blog en general y como se van a visualizar en la web los campos que más se utilizan.

Opciones generales del Blog

Para tener un blog, además de las entradas, tenemos que configurar una página donde incluirlas para que los visitantes puedan verlas. Por eso debes ir al apartado del menú de WordPress Páginas y crear una que por ejemplo se llame Blog (o lo que tú quieras).

Después de crearla deber ir al apartado Ajustes – Lectura y establece como página de entradas la que acabas de crear, en mi caso Blog.

 

ajustes_de_lectura_blog_avada

¡Listo, ya está! – Solo tienes que empezar a crear entradas y contenido en tu blog. Avada se encarga de todo lo demás.

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

opciones_generales_del_blog

Lo que vamos a configurar ahora afecta directamente a la visualización de la página que acabamos de crear y establecer como página principal del blog.

Título de la pagina del Blog: Inserta el título que quieras a la página del blog.

Página de subtítulos del blog: ¿Quieres un subtítulo?, pues ya sabes…

Barra de título de la página: Si marcas la casilla aparecerá una barra de título. Si no quieres que aparezca, desmárcalo.

Diseño del Blog: Aqui 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 imágenes destacadas en grande y el extracto debajo de la imagen.
  • Medium: Imagen de tamaño medio a la izquierda y extracto a la derecha.
  • Largo alternate: Igual que el Large pero le añade a la fecha un estilo decorativo.
  • Medium alternado: Igual que Medium pero con un estilo decorativo en la fecha.
  • Timeline o Cronograma: Un diseño muy chulo tipo timeline en dos columnas y el cronograma al centro.

Blog diseño Archivo/Categoría: Define el aspecto de la página cuando alguien accede haciendo click en las categorías.

Tipo de paginación: Define como será la paginación de la información. Página a página, un scroll infinito o un botón de Cargar más posts.

Diseño de cuadrícula # de columnas: Defines cuantas columnas tendrá la página del blog en el modo grid.

Diseño de cuadrícula espaciado de columna: El espacio entre cada columna para los artículos 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 máxima que aparecerá en el extracto.

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

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

Blog Formato de fecha alternativo – Mes y Año: Indicas en que formato se verá la fecha de los post.

Blog Formato de fecha alternativo – Día: El formato de la fecha cuando uses el formato alternativo, por ejemplo (large alternate).

Blog Formato de fecha y etquetas 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.

blog-single-post-avada

Foto destacada/ Video sobre páginas individuales de Entradas: Si lo marcas, aparecerá la imagen destacada o el video al inicio del post.

Desactivar paginación Anterior / Siguiente: Permite desactivar la opción de avanzar o retroceder entre los post uno a uno.

Título de la entrada: Si lo marcas, incluirá el título de la entrada en la barra de título.

Caja de información 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.

Más información que te interesa: Esto se refiere a los típicos related post, pero la traducción….Muestra abajo otros post que pueden interesar.

Comentarios: Si lo marcas permite mostrar los comentarios.

Opciones de visualización meta del blog (Blog meta options)

En esta sección definimos que campos meta del blog queremos que se visualicen

blog_meta_options_avada

Meta de la entrada: Activa o desactiva la visualización de todos los campos meta de cada post.

Desactivar autor: Elimina la información del autor.

Desactivar fecha: Elimina el campo fecha

Desactivar categorías: Elimina las categorías

Desactivar los Meta Comentarios de los Post: Elimina la información del número de comentarios

Desactivar meta mensaje del enlace Saber más: Elimina el mensaje típico de Leer más / Saber más

Desactivar Meta Etiquetas de los Post: Elimina la información 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. Están pensados fundamentalmente para mostrar los proyectos y trabajos de una empresa o un profesional.

Avada también lo incluye y básicamente es igualito que el funcionamiento del blog, pero con algunos matices propios de un portfolio. Esos matices son los campos personalizados para una actividad en concreto.

Por eso voy a obviar este apartado ya que me parece reiterativo en el sentido de que sería volver a explicar prácticamente lo mismo que expliqué en el punto anterior, y como te habrás dado cuenta ¡esto parece que nunca acaba…!

Como te digo el funcionamiento es igual que el del blog. Si aprendes a gestionar uno, gestionarás el otro sin problemas. Te dejo una captura de pantalla y te darás cuenta de lo que te digo.

portfolio_avada

 

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 auténtico problema de optimización, ya que realizan un montón de conexiones externas que inevitablemente terminan por afectar a la optimización de la web.

Yo también instalé uno específico para eso y la verdad es que luego me arrepentí, ya que Avada tiene esto bien resuelto.

El theme incorpora su propio mecanismo para compartir en redes sociales. No es tan llamativo y completo como un plugin específico, pero por contra no afecta en absoluto al rendimiento y cumple perfectamente con su misión.

Puedes configurarlo para que aparezca en cualquier página o post de la web y además 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 también por correo electrónico. Puedes configurarlo seleccionando los botones que realmente quieres que aparezcan.

Es una opción que tú debes valorar.

recuadro_compartir_redes_sociales

Medios sociales

¡Aquí no me paro mucho porque es muy sencillo!. En este apartado incluyes los enlaces a tus páginas de redes sociales e incluso te permite personalizar los iconos que trae por defecto Avada. Estos son los iconos que luego aparecerán en la cabecera, footer o en cualquier otra parte que quieras si los incluyes a través de un shortcode.

Presentaciones

Avada te permite crear mediante un shortcode presentaciones con las imágenes destacadas que tengas en tus post o portfolio. En este apartado configuras el comportamiento general.

presentaciones_avada

Elastic Slider

Es un slider propio de Avada, sencillo y flexible para presentaciones básicas. 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 también con un shortcode y desde el panel de opciones de Avada puedes configurar el funcionamiento de algunos elementos.

Elastic_slider_avada

Lightbox

Existe un plugin muy bueno llamado Ilightbox, disponible en Codecanyon. Lo que hace es mostrar imágenes y videos en un lightbox de forma muy llamativa.

Desde hace relativamente poco, Avada lo ha incorporado al núcleo del theme y tiene soporte completo, hasta el punto de poder configurarlo directamente desde su panel de control.

lightbox_avada

Contacto

Avada incorpora una página predefinida de contacto. Es tan simple como ir a las páginas, crear una y elegir la plantilla contacto. ¡Ya está!. Lo que ocurrirá es que se visualizará una página con un formulario de contacto básico (pero suficiente en la mayoría de los casos) y un mapa de Google maps. Así evitas instalar ningún plugin para ello.

Desde este apartado, puedes configurar el correo de recepción, incorporar medidas antispam como los captchas y también configurar ampliamente Google Maps.

 

contacto_avada

Página de Búsqueda

Avada tiene todo pensado, incluida la página de búsquedas.

Esta es la página que aparece cuando alguien utiliza el sistema de búsquedas en nuestro web / blog y le aparece una relación de la información relacionada. Puedes configurar la página para diseñarla a tu gusto y sea lo más útil posible para tus visitantes.

busquedas_avada

¡Bueno!.. hasta aquí este segundo tutorial sobre la configuración de Avada. ¡Ya ves que esto tiene tela! Podríamos decir que estamos aproximadamente a mitad de camino.

Dejo para el siguiente tutorial una de las partes más interesantes, que son los extras, la parte avanzada, la configuración propia con Woocommerce, el CSS personalizado y las copias de respaldo y seguridad de las opciones de Avada.

Pero no se acabará ahí la cosa. Faltan las opciones de configuración en cada página, la creación de menús y megamenús, los Widgets y por supuesto el amplísimo Fusion Builder, que seguro estarás deseando que llegue a esa parte.

¿Te está sirviendo esta información para conocer y comprender mejor Avada? ¡Espero que si…porque no veas el trabajón que da esto!

COMPRAR

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

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