Avada configuración avanzada (3)

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

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
  • Menús
  • Barra de título
  • Barra deslizante
  • Pie de pagina
  • Barras laterales
  • Fondos
  • Tipografías

Turorial 2:

  • Estilos
  • Shortcodes del blog
  • Portafolios
  • Redes y medios sociales
  • Presentaciones
  • Elastic slider
  • Lightbox
  • Contacto
  • Página de búsqueda…

En este tutorial completamos la configuración general con esos detalles que hacen de Avada un theme especial.

Hablaré de los extras, las opciones avanzadas, la configuración con Woocommerce, el trabajo con CSS personalizado y por último las copias de respaldo y restauración de la propia configuración de Avada.

opciones_avanzadas_avada_cont

Extras

Avada permite configurar el comportamiento de algunos elementos comunes en diferentes partes del theme de forma predeterminada para que se ajuste lo máximo posible a nuestras necesidades.

extras_miscelaneo_avada

Opciones Misceláneas

Comportamiento de la navegación lateral: Controla la animación de navegación lateral para páginas hijo, al hacer clic o flotar.

Image Placeholders: Decide si quieres que en los post/portfolios aparezcan las imágenes 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 resúmenes: Desactivas el típico mensaje de Leer más de cada post en el blog.

Hacer Enlace […] a una página de una sola entrada (single post): Activas la posibilidad de que el “leer más” sea un enlace directo al artículo.

Permitir comentarios en las páginas: Si lo activas será posible hacer comentarios en las páginas estáticas por defecto.

Disable Featured Images on Pages: Desactivas la aparición de la imagen destacada en las páginas estáticas por defecto.

Preguntas frecuentes sobre imágenes destacadas: Avada incorpora como post personalizados una sección específica de preguntas frecuentes. Al activar esta opción 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 (categoría) o todas a la vez.

Adiciona ‘nofollow’ a todos los enlaces sociales: Añade un atributo “nofollow” a los enlaces sociales.

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

Post y proyectos relacionados

Número 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 separación entre cada columna.

Related Posts / Projects Layout: El título aparece dentro de la imagen o debajo.

Related Posts / Projects Image Size: Define el tamaño de la imagen. Automático 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 imágenes con diferentes tamaños, parecerá un puzzle… ¡Decide!

Related Posts / Projects Autoplay: Imagínate que has puesto que se muestren artículos en 4 columnas. Lo que hace Avada es crear un carrusel para que las imágenes se deslicen. Aquí activas o desactivas que lo hagan automáticamente.

Velocidad del carrusel: La traducción aparece como Número de entradas/proyectos relacionados, pero esta mal. Se refiere a la velocidad del carrusel de imágenes, es decir, cada cuantos segundos se moverá. La medida es en milisegundos. 1000= 1 segundo

Related Posts / Projects Show Navigation: Añade unos botones derecha/izquierda para deslizar las imágenes.

Related Posts / Projects Mouse Scroll: El carrusel se desliza con el ratón o el dedo en un tablet o móvil.

Related Posts / Projects Scroll Items: ¿Cuántas imágenes quieres que se muevan de una sola vez?

Opciones de rollover

Imagen de sustitución: Activas el rollover.

Rollover Image Direction: Efecto del rollover. Hacia arriba, abajo, centro, derecha, izquierda… ¡a tu gusto!.

Rollover Image Icon Font Size: Tamaño del icono.

Desactivar el icono de enlace de la Imagen de Sustitución: Desactivas el icono de enlace que aparece en el rollover.

Desactivar imagen de icono de la Imagen de Sustitución: Desactivas el otro icono que aparece para ampliar la imagen.

Desactivar el título de la Imagen de Sustitución: El título no aparece en el rollover.

Deshabilitar las categorías de la Imagen de Sustitución: No aparece la información de las categorías.

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 utilizarás posiblemente ni la mitad de las herramientas. Un auténtico acierto…

La pregunta es muy sencilla. ¿Para qué cargarlo todo?

avanzado_avada

Disable Smooth Scrolling: Desactiva el efecto smooth en la visualización y movimiento de las páginas.

Desactiva Fusion Builder: ¡Ni se te ocurra!. Para qué usar Avada si te cargas lo mejor que tiene, su maquetador. Aun así, si prefieres usar otro, desactívalo y no tendrás conflictos.

Disable Code Block Encoding: Desactiva la opción “bloque de código” en Fusion Builder.

Desactiva Mega Menú: Si no vas a usar megamenus ¡ya sabes!

Desactivar los estilos Avada para Revolution Slider: Avada añade sus propios estilos a Revolution slider, pero si no los vas a usar, ¡fuera!

Desactiva Estilos desplegables de Avada: Para los menús. Si utilizas un plugin de menús 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 móviles: En los móviles 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 página.

Activa script To Top sobre móviles: Activa esa flechita en los móviles

Desactivar Fusion Slider: Si no vas a utilizar el slider de Avada, desactívalo

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 haría eso…!

Desactiva la presentación (slider) de la galería 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í sí, ¡has leído bien! pero si algo falla (que puede ocurrir) puedes activar esta opción para depurar y ver que ocurre. En teoría solo se usa en modo desarrollo. Si dejas esta opción activada, notarás un cambio importante a peor en el rendimiento.

Compile Dynamic css to file

Esta es algo muy técnico y si estás iniciándote no te recomiendo que lo toques, salvo si es estrictamente necesario.

Barra lateral Global activa: Para empezar, al que hizo la traducción se le fue la mano. Yo creo que se ha confundido de sección. No hagas caso a esa traducción. Lo correcto sería hablar de Css dinámico.

Te explico:

Este tipo de themes utilizan Css dinámico, ya que tienen tantas opciones diferentes de configuración que tendrían que hacer cientos de archivos Css. Al activar esta opción lo que va a ocurrir es justamente esto. Por cada post/página se creará un archivo css y se guardará en la carpeta uploads de Avada. Ya sabes cuantas más cosas tengamos que estar cargando….peor.

Advance Cache server IP: Algo muy específico 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 dinámicos.

Woocommerce

Avada cuida todos sus detalles al máximo y por supuesto no iba a dejar Woocommerce de lado. Por eso podrás personalizar muchos aspectos visuales de la tienda desde su panel de control.

woocommerce_avada

Número de productos por página: Especifica el número de productos que quieres que aparezcan por página en la tienda.

Número de columnas de productos: ¿Cuantas columnas quieres para los productos?

Número de columnas del producto: Relacionados/Subir ventas/Ventas cruzadas: Esto es similar al funcionamiento de los artículos relacionados en el blog, pero en este caso para los productos.

Archivo / Categoría Número de columnas de producto: Configura el número de columnas en las páginas de categoría de productos.

Product Tab Design: Elige el diseño de las pestañas en la página de producto. ¿Las quieres verticales u horizontales?

Utilice la página de Caja de WooCommerce: Avada tiene su propia plantilla para la página de caja de Woocommerce. Si quieres usarla marca esta opción.

Mostrar Notas de Pedido WooCommerce sobre el Pedido: Activa o desactiva el apartado notas en los pedidos.

Mostrar WooCommerce Enlace a Mi 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 Mi 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 Area de Cuenta: Puedes incluir un mensaje en el área de clientes.

Mensaje 2 de Area de Cuenta: También un segundo mensaje…

CSS personalizado

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

css_personalizado_avada

Recuerda que a través 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 situación.

Una web donde hay páginas estáticas, un blog con diferentes temáticas y la página principal. Algo muy sencillo:

Puedo definir como norma general lo siguiente:

  • Background blanco
  • Texto del cuerpo 14px
  • Los títulos h1 sean de color naranja y el tamaño de la fuente sea 32px, con un margen superior e inferior de 10 px
  • Los títulos h2 naranja, fuente 26 px y márgenes 5px
  • Los títulos h3 naranja, la fuente 20 px y márgenes 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 Tipografías, los márgenes y tamaño. El theme utilizará estas características de forma predeterminada en toda la web.

Ok ¡Todo está estupendo y maravilloso!… pero…

  1. ¿Y si quiero usar un fondo negro (u otro color) en uno o varios lugares específicos? Por ejemplo en el home.
  2. Quizá definir el estilo del blog de una forma diferente a las páginas estáticas.
  3. Tal vez tengo un blog con diferentes temáticas y me apetece definir cada temática con un estilo.

Lo habitual es utilizar el child theme o tema hijo, pero también una buena solución es el apartado de CSS personalizado.

Creamos para el blog un estilo css definido llamado blog:

  1. Tamaño de la letra en 16px, respetando el tipo de fuente de toda la web y justificados.
  2. h1 en color Marrón, tamaño 28px y márgenes de 15px y con la alineación a la izquierda.
  3. h2 en color marrón, tamaño 24 px y márgenes de 10 px y alineación izquierda.
  4. h3 en color marrón, tamaño 18 px y márgenes de 5 px y alineación 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

/* Maquetación 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 como hacemos que funcione?

Tienes dos maneras.

A la antigua usanza y válido para todos el mundo y cualquier theme.

Incluimos todo el contenido entre etiquetas div class:

etiqueta_div_class

O lo hacemos desde Fusion Builder, creando un contenedor para el post e incluyendo la regla Css

css_personalizado_fusion_builder

Respaldo

Una característica ya habitual en otras plantillas premium.

Es muy necesario disponer de una herramienta práctica que nos permita guardar y restaurar la configuración 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.

Además de los propios botones que incorpora Avada para guardar/restaurar, puedes copiar y pegar en un documento el código que te muestra. Si necesitas restaurar la configuración simplemente pega el código en el apartado del theme (que ves en la imagen inferior) y tendrás Avada igual y completamente configurado como lo tenías cuando lo guardaste.

respaldo_menu_avada

¡Bueno…pues ya ves!, han hecho falta tres capítulos para ver solamente las opciones generales de configuración para Avada. En los próximos hablaremos de la configuración de las páginas, la creación de menús, el uso de Fusion Builder y la mejor manera de optimizar Avada para que tengas una web que cargue a toda velocidad.

Tanto si ya eres usuario de Avada como si tienes pensado comprarlo para un proyecto, espero que estos tutoriales te sirvan de ayuda.

Si tienes alguna duda en especial, puedes dejar un comentario.

Nos vemos en la próxima…

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