How to Create a Dynamic Off Canvas for Post Cards
Last Update: November 21, 2025
The ability to trigger an Avada Off-Canvas inside of an Avada Post Card is a fantastic feature. As the options descriptions state: “Select an Off-Canvas you want to link to your Post Cards Element. This allows you to fill the Off Canvas dynamic data endpoints with the data of the single Post Cards.”
So, the basic scenario for this feature is when you want to display additional info that would be too large for an Avada Post Card, but you want to keep the user on the same page. Enter an Avada Off-Canvas, triggered by the Avada Post Card Element, and pulling dynamic data into the Off-Canvas as it opens. Let’s have a look.
The classic scenario for this feature would perhaps be a QuickView for WooCommerce, but in principle, all scenarios use the same method, and this could be used for any quick view of posts. Read on for more details.
Step 1: Create Your Dynamic Avada Off-Canvas
The first step is to create your Off Canvas. For this document, we will use the example of adding Portfolio content into an Off Canvas by way of Dynamic Data. See the How To Use The Avada off Canvas Builder document for more basic information on how to create an Off Canvas.
Your Off Canvas should primarily be populated with dynamic content, pulling the data endpoints from the post type your Post Cards are displaying. So in this instance, we want to pull the Project information, which is a diverse collection of Titles, Terms, and ACF Fields and Repeaters. For a WooCommerce QuickView, this would likely be the Product Title, the Description, the Featured image, the Price, and probably an Add to Cart button etc.
As can be seen in the screenshot below, for this example, the Off Canvas has a static background image and is pulling Terms, a dynamic Title, a Featured Image, a few Static Titles, an Excerpt / Archive Description, an ACF Repeater, and some ACF Repeater Single Values.
Step 2: Link Your Off-Canvas to the Post Card
Once you have completed your Off Canvas, the next step is to link to your Off Canvas from the Post Cards Element. This is done from the Link Off Canvas option, found on the General tab. Just choose your Off Canvas from the list.
Step 3: Trigger Off-Canvas inside an Avada Post Card
You also have to edit your Post Card to establish a trigger for the off Canvas. The easiest way to do this is by using a Button Element with the Open Off Canvas dynamic content. Again, just choose your Off Canas.
Open Off-Canvas
So now, when you are on the front end and click on your trigger button on any Post Card, the Post Card will open the Off Canvas, which in turn will pull the dynamic data for the post in question. All the while, the user stay on the same page. Brilliant.
