This article introduces HighLevel’s revamped right-hand sidebar in the Funnel & Website Builder, showcasing how its three context-aware tabs- General, Styles, and Animations- organize element controls for faster, more intuitive editing. You’ll learn what each tab offers, discover collapsible panels and persistent states that streamline your workflow, and find tips for getting the most out of the updated interface.
This feature needs to be enabled in Labs in order to be used.
TABLE OF CONTENTS
- What Is the Revamped Sidebar?
- Key Benefits of the Revamped Sidebar
- Navigating through the New Revamped Sidebar Tabs
- Understanding Collapsible Panels
- Persistent Panel & Tab State Behavior
- UI Enhancements and Styling Improvements
- Frequently Asked Questions
- Next Steps
- Related Articles
What Is the Revamped Sidebar?
The revamped sidebar is a major UI refresh for the right-hand panel in HighLevel’s Funnel & Website Builder. It reorganizes controls into three main tabs, General, Styles, and Animations, and nests related settings into collapsible panels. Together, these changes reduce visual noise, help you find the right controls more quickly, and maintain your layout preferences as you move between elements and sessions.
Key Benefits of the Revamped Sidebar
This redesign improves the editing experience and overall builder performance by making style and layout adjustments more intuitive.
Faster Access to Controls: Locate content, style, and animation settings instantly via clear, dedicated tabs.
Cleaner Workspace: Collapsible panels group related settings, so you only see what you need.
Consistent Experience: The sidebar “remembers” your last-used tab and panel states during your session.
Modern Minimal UI: Updated spacing, typography, and icons create a lighter, less overwhelming interface.
Enhanced Usability: Whether you’re new to the builder or an experienced user, intuitive organization speeds up your workflow.
Navigating through the New Revamped Sidebar Tabs
With the new right-hand sidebar, all of your element controls are now organized into three clear, context-aware tabs: General, Styles, and Animations. Switching between these tabs lets you quickly access content settings, layout and styling options, or motion controls without wading through unrelated panels.
1. General Tab
In the General tab, you’ll find everything you need to adjust an element’s core content and behavior. At the top sits the Element Name field, which you can use to rename layers (for example, changing “Headline” to “Hero Title” for clearer organization). Directly below are the Element Options, which vary by element type and include text fields for headlines, URL inputs for buttons and links, alt-text for images, and labels for form fields. You’ll also see Element Actions, where you assign interactions like On click, Navigate to URL, Submit form, or Open lightbox. Further down, the tab exposes Typography settings, choose your font family, adjust font size and weight, and set opacity, alongside controls for Line Height, Letter Spacing, text transforms (uppercase/lowercase), and even rotation or skew. Finally, a suite of Color Controls lets you pick background colors, text colors, link hues, and icon tints with either a color picker or custom hex value.
2. Styles Tab
The Styles tab is where you fine-tune an element’s layout and visual appearance across all device breakpoints. At a glance, you can adjust Margin (outer spacing) and Padding (inner spacing) to control how the element sits relative to its neighbors, and configure a Border by setting width, style (solid/dashed/dotted), corner radius, and color. Align options let you choose text alignment (left/center/right/justify) or object alignment for images and other blocks. The Visibility panel lets you independently show or hide the element on desktop, tablet, or mobile. For text elements, open the Text Shadow panel to add a drop shadow by specifying horizontal/vertical offsets, blur radius, and shadow color. At the bottom, use the Custom Class field and CSS Selector to tag the element for any custom styling or scripting you might add later.
3. Animations Tab
When you’re ready to bring elements to life, switch to the Animations tab. The Entrance Animation picker offers effects such as Fade, Slide (Up/Down/Left/Right), Bounce, and Zoom to animate elements as they scroll into view. Beneath each effect, you’ll find controls to set the Direction (e.g., slide from left) and Speed presets (light, medium, heavy). If you’d rather add ongoing motion, the Infinite Loop section lets you apply subtle or attention-grabbing effects like Glow, Rocking, or continuous Bounce. And at any time, the Clear button resets all animations back to “None,” giving you a blank slate.
IMPORTANT: These overviews cover the most common controls, but not every parameter is shown. Each element type brings its own unique panels and settings (for example, images get crop/ratio options, buttons get hover-state controls, forms show validation rules, and so on), so the exact options you see will vary depending on the element you’ve selected.Understanding Collapsible Panels
To improve focus and minimize distractions, settings within each tab are now grouped into collapsible panels.
- You can open or close individual panels as needed.
- Panels retain their state throughout your editing session.
- Advanced or less-used settings can stay collapsed for a cleaner view.
This provides a more organized workspace, especially during complex builds.
Persistent Panel & Tab State Behavior
The updated sidebar improves efficiency with smart, session-based memory for tabs and panels.
- Tab memory: The last active tab remains selected when switching between elements.
- Panel memory: Collapsed or expanded states persist as you move through elements.
- New element behavior: When adding a new element, all panels open by default to help with quick access.
These enhancements eliminate the need to repeatedly open panels or tabs, saving time during design iterations.
UI Enhancements and Styling Improvements
This revamp introduces a minimal, modern aesthetic that aligns with HighLevel’s broader interface improvements.
- Reduced visual noise with improved spacing and layout.
- Uniform styling and spacing between controls.
- Cleaner typography and simplified icons.
- Consistent design patterns across the builder
All of these changes aim to reduce mental fatigue and help users stay focused while designing funnels and web pages.
Frequently Asked Questions
Q: Will this update affect my existing funnels or website styling?
No. Your live designs remain unchanged. This update only improves the design interface.
Q. Will my previous settings be affected?
No. Only the sidebar’s UI layout changes; your element settings remain intact.
Q: Does the new sidebar impact performance?
Yes, positively. The layout is optimized for smoother navigation and faster adjustments.
Q. Are there new design controls in this update?
No. This initial release focuses on UI/UX enhancements; new controls are planned later.
Next Steps
- Begin editing elements using the new tab structure to get familiar with the flow.
- Collapse panels you use less frequently to create a cleaner workspace.
- Take advantage of persistent states to speed up your design sessions.
Related Articles
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article