How to Add Sidebars in X or Pro
To add sidebars, first go to Appearance > Sidebars.
Enter the name of the sidebar on Add New Sidebar then click the Add Sidebar button.
After you've successfully added a sidebar, you'll see options available to you. You don't need to touch any of them but if you do, make sure to click the Update Sidebar button.
How to Assign Widgets to Sidebars
To add widgets to your sidebar, simply go to Appearance > Widgets.
On the Widgets page, you'll see the sidebar you have created.
On the left side of the page, you'll see Available Widgets. To add a widget to the sidebar you created or to any sidebar for that matter, you have two ways:
- Drag the widget and drop it to the sidebar
- Click the widget. You'll see a list of sidebars. Click the sidebar from the list, then click Add Widget.
Now, to add the Widget Area element in Cornerstone and Pro Builders, search for "widget" and drag "Widget Area" to the canvas.
Widget Area Setup
On the Sidebar dropdown, select the sidebar you want to display. You can change the base font size of the texts in the widget as well as change the background color of the entire widget as well.
Widget Area Design Settings
You can customize how the sidebar looks.
Use this option to set the margin of the sidebar. You can change the settings for all the sides of the sidebar or modify them individually.
Use this option to set the padding of the sidebar. You can change the settings for all the sides of the sidebar or modify them individually.
Use this option to set the border of the sidebar. You can set the style, width and color of the border on all sides or each side individually.
Use this option to set a border radius for the sidebar. You can set the curve on all sides or set them individually.
You can set a shadow over the sidebar using the box-shadow control group.
- X-Offset - Use this option to set the X offset of the shadow in the sidebar.
- Y-Offset - Use this option to set the Y offset of the shadow in the sidebar.
- Blur - Use this option to set the intensity of the blur effect in the sidebar.
- Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the sidebar.
- Color - Use this option to set the color of the sidebar shadow.
- ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
- Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
- Element CSS - Use this option to have better control over the 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 Widget Area Element click here.
Now you know how to add widgets to a sidebar and add how to use the Widget Area element in Cornerstone / Pro Builders.
See something inaccurate? Let us know