Fifth Avenue WordPress theme comes with a set of custom made shortcodes in addition to the WPbakery Page Builder default shortcodes.

You can find Fifth Avenue shortcode in Theme tab when adding new page element.

Switch to Backend mode when editing page, click Add Element and switch to Theme tab.

Carousel Product Shortcodes

We have added carousel version of WooCommerce product shortcodes. You can set how many products to add in carousel and how many columns to show for different screen resolutions. Additionally you can adjust space between products by setting column margin, enable autorotate and set delay in milliseconds.

Carousel Shortcode

Besides Product carousels Fifth Avenue theme comes with carousel for any content. You can add images, text or other shortcodes and create as many slides as you need.

You can set amount of carousel columns and space between them. If you enable autorotate then you will need to enable loop carousel option otherwise it only scroll carousel once and stop on the last product.

You can enable arrows and dots or counter. Counter will show number of current slide and total amount of slides.

Carousel Offset center is designed for 3 slides (you need to set 3 columns for desktop). It will show one in the middle and part of the two other slides on the left and right sides. Offset will be removed on mobile so we suggest to set mobile columns as 1.

Carousel Offset right designed for 2 columns (you need to set 2 columns for desktop). It will show one full slide on the left and part of second slide on the right.

Social Icons

You can choose what icons to show on the page and set their color, hover color and alignment. They will use links to the account you set in Social Section of 5th Avenue Options Panel.

Animated text

A simple element that will animate text symbol by symbol when scrolled in view by the user. Choose from different headings size or set custom font size, letter spacing and line height. Adjust text color and animation delay.

Dropcap

A simple shortcode that adds a drop cap. Add it before the text block. Choose between small and big drop cap size, adjust color and select from what heading to inherit the font.

Blog

Add selected blog posts anywhere in site content. Fifth Avenue WordPress Theme comes with 3 blog shortcode variations: 2 and 3 posts per row. Three columns comes in two version: cropped and uncropped images to make unique look for each website. See examples here.

Text with Icon

You can easily add a block of text next to the font or image icon. Upload you custom image or choose from list of various font icons.  You can add animations & delay, adjust padding and margins, set font icon color and size. Choose from various font icons like Font Awesome, Line Icons, Entypo, Material, etc. Adjust icon color and size. See example here.

Buttons

We have added our custom shortcode for button to Page Builder. Choose between various button styles and sizes. You can set colors from global settings or adjust colors for each button separately. Add custom animations and delays. See examples here

Table

Fifth Avenue theme comes with 3 table styles: minimal, retro and with border hover. To set table style yo need to wrap your table in div with specific class style as on example below.

<div class="av5-table">
... your table goes here ...
</div>

List of classes:

Simple minimal Table – av5-table-simple
“Retro” Table – av5-table av5-table-retro
Table with Row Hover – av5-table
You can also align last colum to right by adding following class- last-column-to-right

Tabs

Page Builder comes with flexible tabs which allows you to adjust their look from rounded to square with custom color and sizes, alignment, etc. Additionally you can add our custom class av5-tab-underlined to make tabs with bold underline as on examples here.

Progress bars

We have added a thin style for Page Builder default  progress bar shortcode. To add thin style add following style to progress bar shortcode Extra class name filed: av5-progress-thin.

Video Lightbox

Video Lightbox button offers various styles and custom color option so you can easily adjust it to fit your design. Simply add your youtube or vimeo video url and it will be opened in fancy fullscreen lightbox on click. See examples here.

List

To add lines on the left of the list add av5-list__style--lines class to ul tag.

Example:

<ul class="av5-list__style--lines">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Result

  • List item
  • List item
  • List item

You can also add line-top class to place line at the top of the text instead of vertically centered. Useful if your text is multi-line.

<ul class="av5-list__style--lines line-top">
...
</ul>

Result:

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius mauris id dui semper semper. Morbi congue erat eros, id pharetra sapien elementum eu. Donec bibendum dui nulla, sit amet semper lectus volutpat quis. Sed id egestas mauris. Nullam vel sodales nunc.
  • Donec bibendum dui nulla, sit amet semper lectus volutpat quis. Sed id egestas mauris. Nullam vel sodales nunc. Nullam a libero aliquam justo pellentesque efficitur vitae vel purus.
Dividers

Besides standard Visual Composer separator you can add vertical and horizontal lines. Vertical line comes as shortcode with animated version. You can adjust color and height for simple vertical line.

To add horizontal line you need to add following classes to your element: av5-horizontal-line-after or av5-horizontal-line-before. The line will use color of the element and align vertically so it is intended to be used on one line elements.

Example:

<h5 class="av5-horizontal-line-before">Horizontal line left</h5>

Result:

Horizontal line left
Multi-layer parallax

We’ve created a powerful shortcode that allows you to add any amount of additional content layers above the main image with simple hotspost area and adjust their movement speed so you can create amazing effects!

You set starting and ending points so elements can move in any direction

Add any content, make it boxed and set max width. Choose between different motion types and hide elements on small screens.

See it in action on F-ave demo

Banners

Fifth Avenue comes with custom Banner shortcode which has different layout and style options. You can set title, subtitle, button style, hover style, colors, image and background overlay, custom font size and banner height. Banner comes with minimal height option what means it can be used in full height row.