Header & Footer Elements How to Add Animated Off-Canvas in Bricks Builder Using BricksFly Estimated reading: 3 minutes 41 views Animated Off-Canvas element lets you create a slide-out panel for navigation and additional content in Bricks Builder. You can customize the open button, add menu and contact details, display social links, and configure smooth scrolling for a better user experience. Requirement Make sure you have installed: Bricks Theme BricksFly Pro Activate Animated Off-Canvas in BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Elements tab. Under Header & Footer, toggle on Animated Off-Canvas. Step 1: Configure the Off-Canvas Settings Click the Plus (+) icon and search for Animated Off-Canvas. Once it appears, drag it onto the Bricks Builder canvas. Open Button Text: Sets the text displayed on the button visitors click to open the off-canvas panel. In this example, Menu is set as the display text. Enable Icon: Displays or hides an icon with the open button. In this example, the Icon option is disabled, but you can enable it if needed. Default Close Icon (X): Enables the default “X” icon for closing the off-canvas panel. Visitors can click this icon to close the panel and return to the page. In this example, the option is enabled. Step 2: Adjust Smooth Scroll Enable Smooth Scroll: Enables smooth scrolling behavior for the off-canvas content instead of an instant or abrupt scroll. In this example, the option is toggled on. Duration: Controls how long the smooth scrolling animation takes to complete. A lower value creates a faster scroll, while a higher value makes the movement slower. For this example, the Duration value is set to 1, but you can set any value based on your preference. Ease: Controls how the scrolling animation speeds up and slows down during its movement. Different easing options create different scrolling behaviors. For this example, the Ease value is set to Power2.out. Step 3: Configure the Off-Canvas Content Show Logo Image: Displays or hides the website logo inside the off-canvas panel. Menu: Allows you to select and display a navigation menu inside the off-canvas panel. In this example, it is set to Default. Contact Info: Displays contact information, such as an email address, phone number, or other available contact details. Language Info: Displays language-related information or language options inside the off-canvas panel. In this example, English and Bengali are added. Follow Social Media: Displays social media links or icons so visitors can access your social profiles directly from the off-canvas panel. You can add as many as needed. Show Search: Displays or hides the search option inside the off-canvas panel, allowing visitors to search the website. In this example, the option is disabled. Done! You have successfully added the Animated Off-Canvas element to your website.
