Crear una galera de fotos en Avada

Hoy vamos a aprender a crear una galera de fotos en Avada. Hace unos das, Jose un visitante
de esta web, haca varias consultas en cuanto a como crear una galera de fotos. Como ahora
toca hablar de los shortcodes de Avada, me ha parecido interesante crear este tutorial, porque
as mato dos pjaros de un tiro. Explico los shortcodes y tambin resuelvo algunas dudas.

Si hay algo que me gusta de Avada, es lo bien pensado que est casi todo. Gracias a eso, la
necesidad de incorporar un montn de plugins no es vital para un proyecto. Es posible que tal
vez no te convenza la esttica o quiz necesitas profundizar ms porque quieres algo muy
especfico o especializado.

Si no es ese el caso, los shortcodes y funcionalidades de Avada cumplen sobradamente

cualquier necesidad que puedas tener.

Avada incorpora un Lightbox que permite visualizar fotos y videos de una manera muy
agradable Se llama Ilightbox y en realidad es un plugin externo que ya tienen una cierta
antigedad en Codecanyon. Desde hace un tiempo, Avada lo ha incorporado a su core
permitiendo su configuracin dentro del propio theme y logrando que el funcionamiento sea
bueno y fluido. Pero si tienes otro theme y te interesa tenerlo, tambin puedes comprarlo e
instalarlo.

Adems del Lightbox, tambin incorpora Elastic Slider. Con el que tambin podrs crear una
galera de fotos al estilo slider, pero sin ser tan pesado como otros sliders ms complejos. Por
ltimo tenemos otro shortcode, el carrusel de imgenes, que sin mostrar una galera
propiamente dicha, a travs de lightbox podremos ver las imgenes como si de una galera se
tratase.

Como este tutorial incluye un video, no me parar tanto en la parte grfica, ya que todo lo
que necesitas ver, lo tienes en el.

Configurando Ilightbox
Para acceder al panel de control debes ir a Avada-opciones del tema-Lightbox
Una vez accedes te vas a encontrar el siguiente panel
Vamos a desgranarlo por completo. Lo primero que vas a observar, es que aqu las
traducciones no han llegado aun, excepto alguna cosillas. y para eso parece que lo han metido
a calzador. Yo te lo traduzco!

Desactivar Lightbox: Si no lo vas a usar, puedes desconectarlo, para evitar que se carguen
tanto el css como el Javascript. Con eso ahorras recursos evitando llamadas innecesarias. Si
lo marcas lo desactivas y no aparecer por ningn lado.

Disable Lightbox on Single Post Page Only: Si marcas esta casilla, bsicamente lo que
ocurre es que lightbox dejar de funcionar en los post del blog, es decir, en cada pgina
independiente.

Lightbox Behavior: Esto se refiere al comportamiento de lightbox en el portfolio y en el

blog cuando se muestran los post o portfolios que tengas. Nos ofrece dos opciones, la primera
es Mostrar la imagen destacada de cada post y la segunda es para que solo se visualicen
imgenes que sean destacadas en los post. (Ya sabes que cada post en Avada tiene hasta 5
imgenes destacadas).

Lightbox Skin: Con esto le indicas si quieres que el fondo de lightbox sea negro o blanco.
T eliges!

Thumbnails Position: Le indicas si quieres que las imgenes en miniatura, aparezcan debajo
o a la derecha.
Velocidad de la animacin: Pues eso, si lo animas, puedes configurar la velocidad. Lento,
normal o rpido.

Show Arrows: Si lo marcas le indicas que muestre las flechas para permitir una navegacin
ms cmoda.

Show Gallery Start/Stop Button: Al activarlo, muestra un botn de inicio o stop en la

reproduccin de la galera.

Reproducir automticamente la galera de Lightbox: Si lo activas, la galera empieza a

funcionar sola.

Velocidad de la presentacin: A que velocidad quieres que vayan las fotos?

Opacidad el fondo: Puedes configurar la opacidad del fondo para que sea ms o menos
transparente. Desde 0 a 1, por ejemplo, 0,5

Show Title: Al marcarlo, muestra el ttulo de la foto o video que veas.

Mostrar leyenda: Si has escrito alguna explicacin en la leyenda de la imgen, al activarlo

la mostrar.

Compartir en redes sociales: Desde el propio Lighbox puedes compartir en las redes
sociales. Si lo activas, vers los botones.

Enlazando profundidad: Esto se refiere a que cuando tenemos una imagen de WordPress y
no usamos un shortcode de Avada, Lightbox capta esa imgen igualmente para mostrarla.
Para ello la imagen debe estar enlazada a Archivos multimedia.

Mostrar imgenes de la entrada en Lightbox: Pues que si tienes imgenes en los post y no
usas Fusion Builder, Lightbox las mostrar igualmente.

Velocidad de la presentacin: Aqu se han lucido con la traduccin, esto no se refiere a

ninguna velocidad. Lo que hace es establecer unas medidas de alto y ancho para los videos
que se muestren con el Lightbox.

Creando la galera directamente en WordPress

Bien, ahora que ya sabemos como configurar Lightbox, vamos a utilizar el propio shortcode
de WordPress para crear una galera de fotos.

Puedes hacerlo como t quieras, pero si ests pensando en hacer una galera de fotos, yo te
aconsejo que primero las trabajes un poquito.

Para que esto quede bien, primero intenta que todas tengan las mismas medidas o al menos
sean proporcionales.

Lo segundo es que las comprimas y optimices bien, es esencial o la pgina pesar mucho.
Sbelas con unas medidas lgicas, no ms de 19201280 y por eso de que hay pantallas
grandes por ah que te lo agradecern, pero la mayor parte de las pantallas son medianas, por
lo que con 1200px de media, tendras de sobra!

Recuerda que no es una buena idea subir fotos directamente desde la cmara. Intenta
optimizaras para que tu web no se resienta y la experiencia de tu visitante sea la mejor posible.
Y si le puedes quitar los metadatos, todava mejor.

Vamos a ello!

Voy a dar por supuesto que ya has subido las fotos. Yo lo voy a hacer con 6 imgenes:

Haz clic en Aadir objeto, que es el botn que tienes encima del rea de escritura y con esto
te aparecer la biblioteca de medios.

En las opciones de la izquierda, ves que aparece Crear galera, Imagen destacada o insertar
desde URL. Clic en crear galera

Ahora selecciona las imgenes que quieres que formen parte de la galera de fotos. Puedes
marcarlas todas de una sola vez.

Una vez marcadas, te aparece una pantalla en la que se muestran todas las fotos que has
seleccionado y a las que incluso si quieres podras poner un ttulo para la galera.

A la derecha, ves que te aparecen los ajustes de galera. Aqu es donde est el kit de la
cuestin, para que Lightbox entre en funcionamiento.

Donde pone Enlazado a, debes elegir Archivo multimedia.

En columnas, las que quieras. Yo voy a poner 3 porque son 6 fotos. Lo habitual es que sean
3, 4 o 5.

Puedes marcar si quieres que se reproduzcan aleatoriamente y como sern el tamao de las
fotos que aparecern en el post.

Ahora ya te aparecern las fotos en el post y este sera mas o menos el resultado

En el Post
Y aqu como se ve en el Lightbox

Hacer una Galera de fotos con Elastic Slider

Tal vez llamarle galera no sea lo ms adecuado, pero bueno!, podra valer como una
presentacin de fotos si no son demasiadas. Tambin es verdad que si lo quieres ms
sofisticado Avada te ofrece Revolution Slider y Layer Slider. Con estos, puedes hacer casi
una pelcula! jajaja.

Elastic Slider viene incorporado en Avada y tambin es configurable desde el panel de control
de Avada. Para acceder a l, como siempre, debes ir a Avada opciones del tema Elastic
Slider.
Asegrate de que lo tienes activado. Al contrario que el Lightbox, se activa o desactiva en la
pestaa Avanzado-Desactivar Elastic Slider

Ya no pongo la imagen porque es muy similar a Lightbox (con algn aadido) y para eso
tienes el video si tienes dudas.

Si ya lo tienes activado, lo vers en el men principal de WordPress. Ah tendrs un apartado

con su nombre.

Haz clic en Aadir nuevo slide (igual te aparece adicionar).

Esto es muy sencillo:

Como si de un post se tratase, pon un ttulo, y en el apartado de Elastic Slide Options, vuelve
a aadir el ttulo y una leyenda. En la imagen destacada incluye la foto que quieres que
aparezca.

El apartado group sirve para que el slider sepa que fotos estn relacionadas y cuales debe
mostrar en cada presentacin. Asi que, para tu galera incluye las imgenes que quiera con un
nombre de grupo. Para otras galeras utiliza el mismo criterio.

Ahora que ya lo tienes, publica.

Aade tantos post como imgenes quieras mostrar siguiendo los mismos parmetros.

Una vez los tengas, vamos al post donde queremos mostrar la galera.

La nica pega de Elastic Slider es que no se puede colocar donde queramos mediante un
shortcode. Siempre aparecer en la parte superior de la pgina como un slider. Tendremos
que configurarlo desde las opciones personalizadas de cada pgina o post.
Incluyendo el Slider en la pgina
Tanto si quieres colocarlo en un post o pgina, el procedimiento es el mismo. Lo nico que
cambia es el men (solo un poco), pero no para los sliders, que es muy similar. Para eso, en
la parte inferior de cada pgina, tienes el men que te permite configurar esa pgina en
especial de una forma diferente a la general.
Y este es el resultado

Utilizando el Carrusel de imgenes

Bueno! el carrusel de imgenes, tampoco es exactamente una galera de imgenes, sin
embargo, todas la imgenes que aadas al carrusel se vern como una galera con el Lightbox.
La diferencia est en que las imgenes que aparecen en el post, iran pasando de izquierda a
derecha y para verlas ampliadas, tienes que ser pulsar en ellas, pero solo pueden ocupar una
fila. Mira el video y entenders lo que te digo!

Vamos al tajo!

Lo haremos a travs de Fusion Builder. As que conecta (si es que no lo tienes aun), crea un
ancho de contenedor especfico para el carrusel y aade el shortcode al contenedor. Ya sabes
puedes arrastrar o hacer clic. Si haces clic se colocar debajo del contenedor y de ah lo
arrastras un poquito hasta que quede dentro.
Vemos ahora las opciones que nos presenta el shortcode de carrusel de imgenes. Ya
sabes,para abrirlo, clic en la esquina superior derecha, encima del lpiz.
Tamao de la imagen: Nos da dos opciones. Auto y Fijo. Yo te recomiendo fijo. Si quieres
saber por qu mralo en el video. por aqu sera un poco extenso de explicar.

Hover Type: Estos son tres efectos que aparecen al pasar con el ratn por encima de la
imagen. Elije el que quieras o ningn efecto.

Reproduccin automtica: Si quieres que el carrusel arranque automticamente.

Maximum columns: Las columnas que tendr el carrusel. De 1 hasta 6

Espacio entre columnas: Te permite fijar en px un espacio entre las columnas.

Scroll items: Esta opcin te permite elegir cuantas imgenes salta el carrusel cada vez que se
mueve.

Show navigation: Si lo activas, mostrar unas flechas de navegacin.

Mouse Scroll: Te permite usar el ratn como si fuese un dedo en una tableta y puedes
arrastrar las imgenes con el.

Borde: Puedes incluir un borde en las imgenes si lo deseas.

Imagen Lightbox: Lo que nos interesa. Para poder ver las imgenes en el Lightbox como
una galera, debe estar activado.

Clase CSS: Si quieres asociarle una clase css

CSS ID: Si quieres asociar un ID css

Items: Cada imagen que incluyes al carrusel.

Aadir nueva imagen: Pues eso, para que aadas cuantas imgenes quieras.

Este es el resultado!
Y con el Lightbox!