Shortcodes en Avada (1)

Comenzamos la nueva temtica sobre la configuracin de los shortcodes en Avada. Avada,

trae todo un arsenal de shortcodes. Nada ms y nada menos que 46, que a su vez son
altamente configurables y con algunos puedes hacer autnticas virgueras.

No puedo tratarlos a todos, as que ir veremos los ms utilizados.

ndice de contenido
1 Qu son los shortcodes?
2 Trabajando con los shortcodes de Avada
3 Repaso a cada uno de los shortcodes
3.1 Bloque de texto
3.2 Blog
3.3 Botones
3.4 Image Frame
3.5 Carrusel de imgenes
3.6 Separador
3.7 Separador de Seccin
3.8 Insertar vdeo de Youtube o Vimeo
3.9 Shortcode de entradas recientes (recent post)

Qu son los shortcodes?

El shortcode no es ms que el acceso directo a travs de una serie de parmetros de
configuracin a un cdigo mucho ms amplio que ejecuta una funcin especfica. Por
ejemplo, imagnate que quieres crear una galera de fotos, escuchar un clip de msica, o crear
un formulario y adems que sea bonito, agradable y funcional. Te imaginas la cantidad de
cdigo php o html, CSS y javascript que necesitaras?

En este caso, lo que hacen los desarrolladores es crear y enlatar precisamente todo ese
enorme cdigo necesario para ejecutar la funcin, en donde se integran todos los elementos
necesarios para que sea operativo. A travs del shortcode crean un acceso directo que lo
activa y que puede ser llamado desde cualquier parte de la web para ser ejecutado.

En la medida que ese shortcode es ms o menos avanzado y/o sofisticado, permitir al usuario
personalizar en mayor o menor medida las posibilidades de personalizacin de esa
funcionalidad que deseamos utilizar.

Todas las plantillas traen shortcodes, unas ms, otras menos. Aparte puedes localizar plugins
basados ntegramente en shortcodes. Luego tienes opciones como Visual Composer, Content
Builder y otros muchos que son en si mismos autnticos editores o maquetadores con
infinidad de shortcodes. Sea como sea, hoy por hoy, si no tienes cosas chulas en la web, es
porque no quieres.

Tambin hay plantillas como Avada que incorporan su propio maquetador con sus
shortcodes, todo ello perfectamente integrado en el core, lo que favorece drsticamente la
optimizacin de carga y fluidez de trabajo.
Trabajando con los shortcodes de Avada
Los shortcodes de Avada pueden ser activados de tres maneras. Desde Fusion Builder en la
pestaa Elementos del Builder, desde el bloque de texto o escribiendo directamente el
texto del shortcode. Pueden activarse en cualquier parte del theme, en los post, pginas,
portfolio, widgets, sidebar, etc, las posibilidades de configuracin son enormes!

Avada incorpora lo que ellos llaman un generador de shortcodes, que en el fondo no es ms

que una forma ms cmoda y visual de configurar las opciones de cada uno, evitando tener
que escribirlos.

Visualizacin desde Fusion Builder

Visualizacin desde el Bloque de texto en la pestaa Visual

Visualizacin de los shortcodes en el bloque de texto, pestaa Texto

Repaso a cada uno de los shortcodes

Bloque de texto
El bloque de texto es una rplica exacta del que trae WordPress. No tiene ningn tipo de
configuracin en si mismo. Sencillamente se utiliza o no se utiliza.

Por ejemplo, en los post como norma general es ms cmodo utilizar la caja de texto de
WordPress ya que te ofrece ms libertad de movimiento si solo vas a escribir texto e insertar
alguna imagen, siendo todo ms gil.

Sin embargo en las pginas es ms conveniente utilizar Fusion Builder y el Bloque de

texto, ya que por lo general necesitamos maquetar y poner diferentes elementos en la pgina
y cada uno en su sitio. Con el bloque de texto puedes incluir pequeos textos donde quieras
y te permite las mismas funciones que la caja de WordPress.

En el caso de que necesites crear un post y necesites maquetar contenido, podrs utilizar sin
problema Fusion Builder con cualquier shortcode.
Es posible que en algn momento necesites incluir un shortcode ocasional dentro del
bloque de texto. Como puedes ver en las imgenes anteriores, puedes activarlo desde ambas
pestaas, Visual y Texto.

Blog
El blog en Avada puede ser configurado desde las opciones generales del tema. Pero si
necesitas segmentar la informacin y por ejemplo, visualizar listas de categora (por poner un
ejemplo), es necesario utilizar el shortcode del blog. Te permite una amplia configuracin y
podrs mostrar las entradas de diferentes maneras.

Configuracin visual del shortcode Blog

Representacin de texto

Lista de opciones

Diseo del Blog: Elige que tipo de visualizacin deseas para la pgina en la que insertas el
shortcode. La traduccin no es que sea muy buena, pero bsicamente significa lo siguiente:

Grande: Presenta las entradas con fotos grandes y el texto en la parte inferior.
Mediano: Presenta las entradas con fotos medianas y texto a la derecha
 Gran alternativa: Es una variante del formato grande, donde se incluye la
visualizacin de la fecha de forma diferente.
Alternativa mediana: Lo mismo, pero para fotos medianas.
Cuadrcula: Presenta las entradas del blog en columnas, particularmente es el diseo
que ms me gusta.
Cronologa: Presenta las entradas en un bonito y agradable formato timeline.

Entradas por pgina: Te permite mostrar un nmero de post por pgina.

Post Offset: Imagnate que quieres mostrar los ltimos 6 post del blog, pero quieres que los
dos primero no se muestren. Post offset te permite saltarte tantos post como quieras evitar
que se visualicen.

Categoras: Podrs segmentar la visualizacin por categoras. Por ejemplo, imagina que
tienes 4, pero solo quieres que se muestren lo de una o dos categoras. El shortcode te permite
seleccionar las categoras por su nombre.

Excluir categoras: La operacin anterior, pero al revs. Puedes evitar que una o varias
categoras aparezcan en la visualizacin de los post.

Mostrar ttulo: Selecciona si deseas que se muestre el ttulo del post en el listado.

Ttulo del enlace a la entrada: Indicas si quieres que el ttulo funcione como un enlace al
post o simplemente sea informativo.

Mostrar miniatura: Indica si quieres que se visualice la imagen destacada del post en el
listado.

Mostrar extracto: Indica si quieres que se muestre el extracto del post.

Nmero de palabras o caracteres del extracto: Indica el nmero de palabras o caracteres,

basado en la configuracin que hayas hecho en el apartado general del blog. (Extra)

Mostrar meta info: Indica si quieres que se visualice la meta-informacin de categoras,

etiquetas, fecha, etc

Mostrar nombre del autor: Si quieres que el nombre del autor aparezca en la visualizac in.

Mostrar categoras: Si quieres que se muestren las categoras a las que pertenece el post.

Mostrar contador de comentarios: Mostrar el nmero de comentarios que hay en el post.

Mostrar enlace de leer ms: Si quieres aadir adems del ttulo un enlace de leer ms al
post.

Mostrar etiquetas: Indica si quieres que se visualicen las etiquetas asociadas al post.

Mostrar paginacin: Si eliges para mostrar muchas entradas, selecciona si quieres que haya
paginacin.
Tipo de paginacin: Puedes elegir tres tipos de paginacin. Por pgina, scroll infinito o bien
un botn de cargar ms post.

Diseo de cuadrcula y espacio entre columnas: El espacio que habr entre las columnas
de los post.

Permitir contenido HTML en el extracto: Si has incluido cdigo html en los extractos,
puedes desactivarlo al visualizar los post.

Clase CSS: Puedes cargar una clase CSS para dar la apariencia que quieras al shortcode.

CSS ID: Puedes cargar una ID CSS para dar una apariencia especfica para este shortcode.

Estos son los diseos para el blog que puedes obtener

Botones
Con este shortcode puedes incrustar un botn en cualquier parte. Pueden ser los modelos que
Avada trae por defecto o bien personalizarlos. El shortcode de los botones es posiblemente el
que ms posibilidades de configuracin ofrece.

Te permite elegir hasta 4 tamaos y 3 formas diferentes, planos o en 3D, No hay lmite de
colores, ancho de borde a tu eleccin, incluir iconos, separadores, efectos, animaciones y la
posibilidad de abrir ventanas emergentes modales.

Eso si, hay algo que a da de hoy resulta inexplicable en Avada. Resulta que no es posible
crear un botn con un enlace nofollow. Yo espero que esto lo solucionen en prximas
actualizaciones, porque no tiene ni pies ni cabeza. En fin!

Los colores para los botones pueden aceptar el formato RGB o RGBA si necesitas controlar
la opacidad. Si quieres que por ejemplo el fondo sea transparente, puedes poner directamente
TRANSPARENT.
Nota sobre transparent: A veces no lo pilla bien (no se por qu). Si es el caso, lo vuelves a
poner y se soluciona. Ya sabes que estas cosas las carga el Diablo!

Aspecto grfico del shortcode de botones

Representacin en texto

Lista de opciones

URL del botn: Pues nada, la URL a donde quieres dirigir el enlace.

Estilo del botn: Elige un botn a juego con los estilos del theme o bien personalzalo como
t quieras

Tamao del botn: Pequeo, mediano, grande o ms grande.

Button Span: Al activarlo el botn ocupar el ancho del contenedor.

Tipo de botn: Elige si quieres un diseo plano o en 3D

Forma del botn: Selecciona un formato cuadrado, pldora o redondeado

Destino del botn: _Self para abrir en la misma pestaa o bien _blank, para una nueva
pestaa.

Atributo del botn: Establece un ttulo de atributo para el link, por ejemplo, HOME

Texto del botn: El texto que aparecer en el botn.

Degradado color superior: Si utilizas degradados en el botn, aqui puedes configurar la

parte superior.

Degradado color inferior: Aqu la inferior

Degradado superior Hover: Lo mismo para la parte superior pero se activa cuando el
usuario pasa por encima del botn.

Degradado inferior Hover: Lo mismo en la parte inferior.

Color acentuado Hover: El acentuado funciona solo cuando el botn es personaliza do.
Controla el color de borde, divisor, texto e icono.

Color del Bisel (3D): Solo para el bisel de los botones 3D

Ancho del borde: Indica en pixeles el ancho del borde del botn. Lo habitual es 1 u 2 px

Seleccionar icono personalizado: Puedes incluir un icono en los botones. Elige el que ms
te guste

Posicin del icono: A la derecha o izquierda del botn.

Divisor del icono: Si quieres que aparezca una lnea divisoria entre el icono y el texto del
botn.

Ventana Modal Anchor: Si has preparado con el shortcode modal, una ventana con una
funcin puedes activarla con el botn desde aqu.

Tipo de animacin: Puedes establecer varios tipos de animaciones para el botn.

Direccin de la animacin: La direccin de animacin del botn.

Velocidad de la animacin: La velocidad que quieres para la animacin.

Offset de la animacin: El tiempo que tarda en iniciarse la animacin.

Alineacin: Establece la alineacin del botn respecto al contenedor. Si lo quieres a la

izquierda, al centro o a la derecha.

Clase CSS: Si has creado una clase CSS especfica para un botn, puedes llamarla desde
aqu.

ID CSS: Lo mismo pero con una ID CSS.

 Aspectos y estilos de los botones

Image Frame
Este shortcode nos permite incluir imgenes de todo tipo con el aadido de incluir diferentes
efectos en la visualizacin.
Representacin en texto

Lista de opciones

Estilo de marco: Te permite incluir 3 tipos de efecto a la imagen, como si de un marco se

tratase.

Hover Type: Selecciona el efecto que quieres cuando un usuario pase por encima de la
imagen con el ratn.

Color del borde: Si estableces un borde, puedes elegir el color.

Tamao del borde: Elige el tamao en pixeles que tendr el borde

Radio del borde: Permite hacer los bordes redondeados. Puedes establecerlo en pxeles o
poner directamente round para crear un aspecto circular.

Estilo de color: Establece el color para todos los estilos, excepto para el borde.

Alinear: Alinea la imagen respecto al contenedor. Izquierda, centro, derecha.

Imagen Lightbox: Si quieres que la imagen se abra en el lightbox. Lo lgico es que sea
ms grande que la original.

Imagen: La imagen original que quieres que se visualice.

Texto alt de la imagen: Texto ALT para los motores de bsqueda.

Enlace URL de la imagen: Si la imagen enlaza a una URL, lo har en la misma ventana o
en una nueva.

Enlace destino: URL a la que enlaza la imagen (si lo necesitas)

Tipo de animacin: Elige el tipo de efecto que quieres para la animacin de la imagen.

Direccin de la animacin: Direccin del efecto.

Velocidad de la animacin: Velocidad del efecto de animacin.

Offset de animacin: Permite establecer cuando se produce el efecto. Hay tres valores.
Cuando se ve desde arriba, de arriba al centro o desde abajo.

Hide on mobile: Esta opcin permite ocultar la imagen en los dispositivos mviles.

Clase CSS: Si quieres establecer una clase CSS para esta imagen.

CSS ID: Lo mismo pero con una ID CSS.

 Algunos ejemplos

Si pasamos el ratn sobre la primera imagen, nada, sobre la segunda, hace un zoom.

Sobre la tercera, la imagen retrocede y sobre la cuarta amplia toda la ventana.

Carrusel de imgenes
Separador
El separador es un shortcode que nos permite establecer separaciones en altura entre
elementos. Puede ser sencillamente una separacin de espacio o bien incluir algunos
pequeos efectos para aadir un toque elegante, si es que es necesario.

Representacin en texto

Lista de opciones

Estilo: Puedes establecer diferentes tipos de bordes en el separador o dejarlo sin estilo, en
cuyo caso solo se fija un espacio en blanco.

Margen superior: Espacio desde el separador hacia arriba. Puedes establecerlo en px o

porcentaje.

Margen inferior: Espacio desde el separador hacia abajo. Puedes establecerlo en px o

porcentaje.

Color del separador: Si has elegido un estilo, puedes aplicar un color.

Tamao del borde: Amplia o disminuye en pixeles el grosor del separador.

Seleccionar icono: Incluye un icono en el separador.
Circled Icon: Puedes establecer un fondo de crculo para el icono.
Color del crculo: Puedes establecer el color de fondo del crculo.
Ancho del separador: Indica el ancho en pixeles o porcentaje del separador.
Alineacin: Establece respecto al contenedor la posicin del separador.
Clase CSS: Establece un estilo definido por ti con una clase CSS.
CSS ID: Lo mismo para una ID CSS.
Algunos ejemplos

Separador de Seccin
Es muy til cuando queremos separar secciones estableciendo un tipo de marcado o
diferenciacin. Por ejemplo:

Aspecto grfico del shortcode

Representacin en texto

Repaso a las opciones

Posicin del divisor candy: Se refiere al triangulo. Puedes ponerlo arriba o abajo.
Seleccionar icono: Si quieres incluir un icono en el tringulo.
Color del icono: Aplica un color al icono.
Borde: Establece un grosor para el borde en pixeles.
Color del borde: Aplica el mismo color que al tringulo u otro diferente.
Color de fondo del divisor Candy: Aplica un color de fondo al tringulo.
Clase CSS: Aplica tu propia personalizacin al shortcode si has creado una clase en CSS.
CSS ID: Lo mismo si tienes una ID CSS.

Insertar vdeo de Youtube o Vimeo

Avada dispone de 2 shortcodes conectados a la API de Youtube y Vimeo. Esto permite incluir
de una forma gil y responsive cualquier video alojado en ambos sitios.

Los shortcodes tienen los mismos parmetros son la nica diferencia del tipo de url. No es
necesario incluirla completa, bastar con el ID.
Representacin en texto

Listado de opciones
Id de video: La direccin habitual de un video en Youtube puede ser
https://youtu.be/0XrLf7DPC3w. En este caso el ID es oXrLf7DPC3w. En el caso de
Vimeo una url suele ser https://vimeo.com/153666397 y el id sera el nmero 153666397

Ancho: Estableces el ancho del vdeo.

Alto: Estableces el alto del vdeo
Reproduccin automtica: Indica si quieres que se inicie la reproduccin de manera
automtica.

Parmetro API adicional: Aqu puedes indicar algn parmetro que la API de Youtube o
Vimeo permita. Por ejemplo, si quieres deshabilitar la opcin de video relacionados en
Youtube, podras poner &rel=0.

Clase CSS: Si tienes una configuracin especfica en CSS para los vdeos, puedes llamarla
desde aqu.

Shortcode de entradas recientes (recent post)

Con este shortcode podrs incluir en cualquier pgina los ltimos post de tu blog. Para ello
dispones de varias configuraciones a efecto de que puedas acomodarlo como quieras.
Representacin en texto

Listado de opciones

Diseo: Selecciona un diseo para el Shortcode. Puede ser un diseo con miniaturas y bien
con fechas.

Hover Type: Efecto en las imgenes cuando se pasa el ratn por encima.

Columnas: Nmero de columnas a mostrar.

Nmero de entradas: Selecciona el nmero de posts que quieres mostrar.

Post offset: Cuantas entradas deseas saltarte en la visualizacin.

Categoras: Selecciona una o varias categoras para visualizar. Si lo dejas en blanco las coge
todas.

Excluir categoras: Excluye las categoras que no quieres que aparezcan.

Mostrar miniatura: Indica si quieres que aparezcan las miniaturas de la imagen destacada
del post.

Mostrar ttulo: Mostrar ttulo del post.

Mostrar meta: Indica si deseas mostrar la meta-informacin de los post.

Mostrar extracto: Indica si quieres mostrar el extracto del post.

Longitud de extracto: Elige el nmero de letras o palabras del post (en funcin de cmo est
configurado en las opciones generales.

Sacar HTML: Desactivar el HTML en los extractos si lo has incluido.

Tipo de animacin: Selecciona los efectos de animacin (si deseas aplicarlos) al shortcode.

Direccin de animacin: Direccin de los efectos

Velocidad de animacin: Establece la velocidad de la animacin

Offset de animacin: Establece el retraso en el inicio de la animacin con tres posibilidades.

Clase CSS: Si quieres aplicar un estilo personalizado en CSS que hayas hecho.

CSS ID: Lo mismo con un ID CSS.