Content Area Off Canvas

In this article, we're going to show you how to use the Content Area Off Canvas element to add a sliding sidebar that displays when the toggle button is clicked.

  1. What is the Content Area Off Canvas Element Used For?
  2. Content Area Setup
  3. Toggle Settings
  4. Off Canvas Settings
  5. Customize
  6. Demo
  7. Summary

To add the Content Area Off Canvas Element, simply search "content area" and drag Content Area Off Canvas to the canvas.

Content Area Off Canvas Elements

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...

Content Area Off Canvas Example Burger

And this is the sidebar that appears when the toggle button is clicked...

Content Area Off Canvas Extracted

The "content area" of this element is similar to the Content Area Element where you can enter any piece of content, whether it's HTML, Javascript or even a shortcode. The difference is that the content area is contained in a sidebar and that it has a toggle button with it.

Content Area Setup

The Off Canvas Content field group has the following fields:

Content Area Off Canvas Content Area Setup
  • Content - This is where you can enter your custom content - HTML code, Javascript code, plain text, WordPress shortcodes, etc.
  • 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.

Toggle Settings

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...

Content Area Off Canvas Toggle

... will show to you the settings available at your disposal.

Content Area Off Canvas Advanced Setup

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.

Content Area Off Canvas Text SetupContent Area Off Canvas 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.

Content Area Off Canvas Text Setup

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.

Content Area Off Canvas Graphic Setup

Want to change the "hamburger" graphic? That's easy and you have multiple ways to do it.

  1. Go to Graphic Toggle select from the Type dropdown.
Content Area Off Canvas Graphic Toggle
  1. 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.
Content Area Off Canvas Graphic Setup

Then go to Graphic Icon and choose an icon on the Primary & Secondary field.

Content Area Off Canvas Graphic Icon
  1. 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.
Content Area Off Canvas Graphic Setup

Then go to Primary Graphic Image then click the box on Source.

Content Area Off Canvas Primary Graphic Image

Then select the image you want to use.

Particle Setup

Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:

Particle Setup
  • 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:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • 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:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

Particle Style

Particle style group contains the controls to fine tune the interaction effects. Following is the detailed information for each setting:

Particle Style
  • 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

Particle Setup Secondary

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.

Particle Style Secondary

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.

Content Area Off Canvas Off Canvas

Setup

  • 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.
Content Area Off Canvas Setup

Colors

  • 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.
Content Area Off Canvas Colors

Content Border

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 Area Off Canvas Content Border

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.
Content Area Off Canvas Content Box Shadow

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Content Area Customize
  • 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 data-x-toggle-hash HTML attribute. You can use this as a base point for your Javascript custom code.
  • 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 $el as 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.
Custom Attributes

Demo

To see a live demo of the Content Area Off Canvas Element click here.

Summary

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