To add the Content Area Off Canvas Element, simply search "content area" and drag Content Area Off Canvas to the canvas.
What is the Content Area Off Canvas Element Used For?
The Content Area Off Canvas Element lets you display custom content on a sidebar that slides into the page when a button is clicked. Here is an example of the toggle button...
And this is the sidebar that appears when the toggle button is clicked...
Content Area Setup
The Off Canvas Content field group has the following fields:
- Dynamic Rendering - If you enable the Load / reset on element toggle option, it will refresh the content each time the off canvas is displayed. Below is one case where you would want to use this option:
Let's say you embed a Youtube video as the content of the off canvas. Now, imagine the user intracting with the off canvas on the website. He clicks the toggle button, making the off canvas appear where he sees the Youtube video. Then he clicks the Youtube video play button to play the video.
Now, imagine that he closed the off canvas while the video is still playing. If the Load / reset on element toggle option of the Dynamic Rendering field is not enabled, the video will continue to play even when it's no longer visible (because the off canvas is no longer visible). But if this option is enabled, when the user closes the off canvas, the video will also stop playing.
And when he clicks on the toggle button again, the video will display again as though it wasn't ever played.
The button that triggers that showing of the off canvas content is what we call the Toggle button. This button can be configured to your liking.
Clicking the Toggle tab as shown below...
... will show to you the settings available at your disposal.
In the Setup field group shown above, you'll be able to set the actual height and width of the toggle button, it's minimum and maximum dimensions, its background color when not hovered upon and when it is. The Base Font Size field dictates the size of the toggle button. If you increase it, the entire button will increase in size.
The Content Flex Layout field group allows you to configure the flexbox settings of the toggle button. If you're not familiar with Flexbox, this guide will help you.
Now by default, the toggle button has a "hamburger" graphic inside it. You have the option to remove the icon and use text instead. To do that, you need to turn On the Text Setup and turn Off the Graphic Setup.
When you turn On the Text Setup, other fields/settings will appear which will allow you to set the primary text, secondary text, the spacing & order as well as how to handle interactions and overflows.
You'll also notice that several groups of options now become available to you as well such as:
- Text Margin
- Primary Text Format
- Primary Text Style
- Primary Text Shadow
- Secondary Text Format
- Secondary Text Style
- Secondary Text Shadow
All of these allow you to customize how the texts, both primary and secondary, will look like. What if you want to have both the icon and the text? Is it possible? A resounding YES! Simply enable (or turn On) both the Text Setup and Graphic Setup and you'll have both of them appear on the toggle button.
Want to change the "hamburger" graphic? That's easy and you have multiple ways to do it.
- Go to Graphic Toggle select from the Type dropdown.
- If none of the Graphic Toggle types fit your need, go back to Graphic Setup, then click on the flag icon on the Type field.
Then go to Graphic Icon and choose an icon on the Primary & Secondary field.
- Lastly, you may want to use your own image. To do that, go back to Graphic Setup and click on the middle button on Type.
Then go to Primary Graphic Image then click the box on Source.
Then select the image you want to use.
Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:
- Enable - Use this option to enable the interaction particle.
- Location - Use this option to set the position of the particle in respect with the element that it is applied to. Available options are:
- Top Left
- Top Right
- Bottom Left
- Bottom Right
- Placement - Use this option to decide if you want to have the particles overlap with the element or limited inside the element.
- Scale - The scale option will determine how the particle will expand or shrink in transition. The available options are:
- None - Use this option if you do not want the particle to scale in transition.
- Scale All - Use this option to scale the particle both vertically and horizontally in transition.
- Scale X - Use this option to scale the particle horizontally in transition.
- Scale Y - Use this option to scale the particle vertically in transition.
- Delay - The delay option will determine how long will it take the transition to complete. The value of this option in seconds or milliseconds depends on the selection of the value unit.
- Transform Starts From - Use this option to set where the transition of the particle should start. Available options are:
- Top Left
- Top Right
- Bottom Left
- Bottom Right
Particle style group contains the controls to fine tune the interaction effects. Following is the detailed information for each setting:
- Width & Height - Use this option to set the width and the height of the particle. The value unit can be Calc, PX, REM, EM, and %.
- Radius - Use this option to set the radius of the particle. The same units can be used for this option values as the width/height options.
- Color - Use this option to set the color of the particle.
- Inline CSS - Use this option to add custom CSS which will be applied to the article. This option is for the advanced users that want an extra layer of customization which they can not find in the styling options of the particles.
Primary and Secondary Particles
The same setup and style options which we described are available for primary and secondary particles. You basically have two sets of particle options to get innovative and create stylish interactions.
Off Canvas Settings
The Off Canvas options are a set of control groups used to fine tune the off-canvas feature of elements such as the Navigation Collapse. We are going to delve into details and explain each option functionality. Click on the Off Canvas tab.
- Base Font Size - Use this option to set the base font size for the off canvas.
- Location - Use this option to set the location of the off canvas. The options are Left or Right.
- Close Size & Dimensions - Use this option to set the size and dimension of the off canvas.
- Content Max Width - Use this option to set the maximum width of the off canvas.
- Overlay Background - Use this option to set the overlay color outside of the off-canvas box covering the rest of the screen.
- Close Button - Use this option to set the color of the close button in the off canvas.
- Content Background - Use this option to set the background color of the off canvas.
Use this option to set the border of the off-canvas. You can set the style, width and color of the border on all sides or each side individually.
Content Box Shadow
- X-Offset - Use this option to set the X offset of the shadow in the off canvas.
- Y-Offset - Use this option to set the Y offset of the shadow in the off canvas.
- Blur - Use this option to set the intensity of the blur effect in the off-canvas shadow.
- Spread & Position - Use this option to set the spread amount of the off-canvas shadow and decide if you want the shadow to sit inside or outside of the box.
- Color - Use this option to set the color of the off-canvas shadow.
- Toggle Hash - Use this option to add a custom hash to the toggle section of the Content Area element. Whatever you add here will be added as the value of
- ID - Use this option to set an HTML ID for the the Content Area element. The ID should be unique on the page.
- Class - Use this option to set an HTML Class for the the Content Area element. You can use the class for your custom CSS code.
- Element CSS - Use this option to have better control over the the Content Area element to access the inner tags of the element using
$elas the CSS selection. Click here for more detailed information.
- Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
- Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as
data-info=123. You can use the option to inject custom information into the element to use on your customization code.
To see a live demo of the Content Area Off Canvas Element click here.
In this article, you've learned enough of the settings available to you on the Content Area Off Canvas element. While we didn't dive in great detail to every option, you know enough to get started using this element and to customize it to your liking.
See something inaccurate? Let us know