Shortcodes en Avada (1)

Comenzamos la nueva temática sobre la configuración de los shortcodes en Avada. Si ya utilizas Avada, te habrás dado cuenta de que trae todo un arsenal de shortcodes. Nada más y nada menos que 46, que a su vez son altamente configurables y con algunos puedes hacer auténticas virguerías.

No puedo tratarlos todos en un solo post, asi que iré empezando por los que más vas a utilizar de forma habitual y luego iré avanzando en sucesivos post hasta terminarlos todos.

¿Qué son los shortcodes?

WordPress es un sistema pensado en facilitar la vida a los usuario. Aparte de poder gestionar tu contenido, es necesario poder hacerlo de una forma rápida y eficaz. Para poder ejecutar ciertas funcionalidades y que a su vez el usuario pueda hacerlo de una forma cómoda y amigable, era necesario reducir y agrupar de alguna manera el código necesario para ello.

El shortcode no es más que el acceso directo a través de una serie de parámetros de configuración a un código mucho mas amplio que ejecuta una función específica. Por ejemplo, imagínate que quieres crear una galería de fotos, escuchar un clip de música, o crear un fomulario y además que sea bonito, agradable y funcional. ¿Te imaginas la cantidad de código php o html, CSS y javascript que necesitarías?.

En este caso, lo que hacen los desarrolladores es crear y «enlatar» precisamente todo ese enorme código necesario para ejecutar la función, en donde se integran todos los elementos necesarios para que sea operativo. A través 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 más o menos avanzado y/o sofisticado, permitirá al usuario personalizar en mayor o menor medida las posibilidades de personalización de esa funcionalidad que deseamos utilizar.

Todos las plantillas traen shortcodes, unas más, 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 auténticos 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.

También hay plantillas como Avada que incorporan su propio maquetador con sus shortcodes , todo ello perfectamente integrado en el core, lo que favorece drásticamente la optimización 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 pestaña 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, páginas, portfolio, widgets, sidebar…¡Las posibilidades de configuración son enormes!

Avada incorpora lo que ellos llaman un generador de shortcodes, que en el fondo no es más que una forma más cómoda y visual de configurar las opciones de cada uno, evitando tener que escribirlos.

Visualización desde Fusion Builder

Visualización desde el Bloque de texto en la pestaña Visual

Visualización de los shortcodes en el bloque de texto, pestaña Texto

Repaso a cada uno de los shortcodes

Bloque de texto

El bloque de texto es una réplica exacta del que trae WordPress. No tiene ningún tipo de configuración en si mismo. Sencillamente se utiliza o no se utiliza.

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

Sin embargo en las páginas es más conveniente utilizar Fusion Builder y el Bloque de texto, ya que por lo general necesitamos maquetar y poner diferentes elementos en la página y cada uno en su sitio. Con el bloque de texto puedes incluir pequeños 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, podrás utilizar sin problema Fusion Builder con cualquier shortcode.

Es posible que en algún momento necesites incluir un shortcode ocasional dentro del bloque de texto. Como puedes ver en las imágenes anteriores, puedes activarlo desde ambas pestañas, Visual y Texto.

Blog

El blog en Avada puede ser configurado desde las opciones generales del tema. Pero si necesitas segmentar la información y por ejemplo, visualizar listas de categoría (por poner un ejemplo), es necesario utilizar el shortcode del blog. Te permite una amplia configuración y podrás mostrar las entradas de diferentes maneras.

Configuración visual del shortcode Blog

Representación de texto

Lista de opciones

Diseño del Blog: Elige que tipo de visualización deseas para la página en la que insertas el shortcode. La traducción no es que sea muy buena, pero basicamente 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 visualización de la fecha de forma diferente.
• Alternativa mediana: Lo mismo, pero para fotos medianas.
• Cuadrícula: Presenta las entradas del blog en columnas, particularmente es el diseño que más me gusta.
• Cronología: Presenta las entradas en un bonito y agradable formato timeline.

Entradas por página: Te permite mostrar un número de post por página.

Post Offset: Imagínate 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.

Categorías: Podrás segmentar la visualización por categorías. Por ejemplo, imagina que tienes 4, pero solo quieres que se muestren lo de una o dos categorías. El shortcode te permite seleccionar las categorías por su nombre.

Excluir categorías: La operación anterior, pero al revés. Puedes evitar que una o varias categorías aparezcan en la visualización de los post.

Mostrar título: Selecciona si deseas que se muestre el título del post en el listado.

Título del enlace a la entrada: Indicas si quieres que el título 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.

Número de palabras o caracteres del extracto: Indica el número de palabras o caracteres, basado en la configuración que hayas hecho en el apartado general del blog. (Extra)

Mostrar meta info: Indica si quieres que se visualice la meta-información de categorías, etiquetas, fecha, etc

Mostrar nombre del autor: Si quieres que el nombre del autor aparezca en la visualización.

Mostrar categorías: Si quieres que se muestren las categorías a las que pertenece el post.

Mostrar contador de comentarios: Mostrar el número de comentarios que hay en el post.

Mostrar enlace de leer más: Si quieres añadir además del título un enlace de leer más al post.

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

Mostrar paginación: Si eliges para mostrar muchas entradas, selecciona si quieres que haya paginación.

Tipo de paginación: Puedes elegir tres tipos de paginación. Por página, scroll infinito o bien un botón de cargar más post.

Diseño de cuadrícula y espacio entre columnas: El espacio que habrá entre las columnas de los post.

Permitir contenido HTML en el extracto: Si has incluido código 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 específica para este shortcode.

Estos son los diseños para el blog que puedes obtener

Botones

Con este shortcode puedes incrustar un botón en cualquier parte. Pueden ser los modelos que Avada trae por defecto o bien personalizarlos. El shortcode de los botones es posiblemente el que más posibilidades de configuración ofrece.

Te permite elegir hasta 4 tamaños y 3 formas diferentes, planos o en 3D, No hay límite de colores, ancho de borde a tu elección, incluir iconos, separadores, efectos, animaciones y la posibilidad de abrir ventanas emergentes modales.

Eso si, hay algo que a día de hoy resulta inexplicable en Avada. Resulta que no es posible crear un botón con un enlace nofollow. Yo espero que esto lo solucionen en próximas 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 gráfico del shortcode de botones

Representación en texto

 Lista de opciones

URL del botón: Pues nada, la URL a donde quieres dirigir el enlace.

Estilo del botón: Elige un botón a juego con los estilos del theme o bien personalízalo como tú quieras

Tamaño del botón: Pequeño, mediano, grande o más grande.

Button Span: Al activarlo el botón ocupará el ancho del contenedor.

Tipo de botón: Elige si quieres un diseño plano o en 3D

Forma del botón: Selecciona un formato cuadrado, píldora o redondeado

Destino del botón: _Self para abrir en la misma pestaña o bien _blank, para una nueva pestaña.

Atributo del botón: Establece un título de atributo para el link, por ejemplo, HOME

Texto del botón: El texto que aparecerá en el botón.

Degradado color superior: Si utilizas degradados en el botón, 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 botón.

Degradado inferior Hover: Lo mismo en la parte inferior.

Color acentuado Hover: El acentuado funciona solo cuando el botón es personalizado. 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 botón. Lo habitual es 1 u 2 px

Seleccionar icono personalizado: Puedes incluir un icono en los botones. Elige el que más te guste…

Posición del icono: A la derecha o izquierda del botón.

Divisor del icono: Si quieres que aparezca una linea divisoria entre el icono y el texto del botón.

Ventana Modal Anchor: Si has preparado con el shortcode modal, una ventana con una función puedes activarla con el botón desde aquí.

Tipo de animación: Puedes establecer varios tipos de animaciones para el botón.

Dirección de la animación: La dirección de animación del botón.

Velocidad de la animación: La velocidad que quieres para la animación.

Offset de la animación: El tiempo que tarda en iniciarse la animación.

Alineación: Establece la alineación del botón respecto al contenedor. Si lo quieres a la izquierda, al centro o a la derecha.

Clase CSS: Si has creado una clase CSS específica para un botón, 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 imágenes  de todo tipo con el añadido de incluir diferentes efectos en la visualización.

Representación 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 ratón.

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

Tamaño del borde: Elige el tamaño en pixeles que tendrá el borde

Radio del borde: Permite hacer los bordes redondeados. Puedes establecerlo en píxeles 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 lógico es que sea más grande que la original.

Imagen:La imagen original que quieres que se visualice.

Texto alt de la imagen: Texto ALT para los motores de búsqueda.

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 animación: Elige el tipo de efecto que quieres para la animación de la imagen.

Dirección de la animación: Dirección del efecto.

Velocidad de la animación: Velocidad del efecto de animación.

Offset de animación: 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 opción permite ocultar la imagen en los dispositivos móviles.

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

CSS ID: Lo mismo pero con una ID CSS.

Algunos ejemplos