Using the New Revamped Sidebar in Funnel & Website Builders
Enable and master the revamped sidebar in GHL Customer Care’s Funnel & Website Builder. Discover tab-based controls, collapsible panels, persistent UI states, and a modern minimal design to streamline your workflow.
Assistants need to reach this page over the internet. While it is only running on your machine, these two buttons will not be able to load it.
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
This article introduces GHL Customer Care’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.
The revamped sidebar is a major UI refresh for the right-hand panel in GHL Customer Care’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.
1. General Tab (image 1 of 6)What this shows In the General tab, you’ll find everything you need to adjust an element’s core content and behavior.What this showsIllustrates the "1. General Tab" section of "Using the New Revamped Sidebar in Funnel & Website Builders".This screenshot appears in the "1. General Tab" section of "Using the New Revamped Sidebar in Funnel & Website Builders". The text alongside this image reads: 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…. Immediately after, the guide continues: 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….Image 1 of 6What to fill inIn 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.Next stepThe 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.
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.
2. Styles Tab (image 2 of 6)What this shows The Styles tab is where you fine-tune an element’s layout and visual appearance across all device breakpoints.What this showsIllustrates the "2. Styles Tab" section of "Using the New Revamped Sidebar in Funnel & Website Builders".This screenshot appears in the "2. Styles Tab" section of "Using the New Revamped Sidebar in Funnel & Website Builders". The text alongside this image reads: 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…. Immediately after, the guide continues: 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….Image 2 of 6What to chooseThe 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.Next stepWhen 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.
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.
3. Animations Tab (image 3 of 6)What this shows When you’re ready to bring elements to life, switch to the Animations tab.What this showsIllustrates the "3. Animations Tab" section of "Using the New Revamped Sidebar in Funnel & Website Builders".This animation appears in the "3. Animations Tab" section of "Using the New Revamped Sidebar in Funnel & Website Builders". The text alongside this image reads: 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…. Immediately after, the guide continues: 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….Image 3 of 6What this coversWhen 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.
Buttons and menus referencedIMPORTANT
Next stepIMPORTANT: 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.
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.
Understanding Collapsible Panels (image 4 of 6)What this shows This provides a more organized workspace, especially during complex builds.What this showsIllustrates the "Understanding Collapsible Panels" section of "Using the New Revamped Sidebar in Funnel & Website Builders".This animation appears in the "Understanding Collapsible Panels" section of "Using the New Revamped Sidebar in Funnel & Website Builders". The text alongside this image reads: This provides a more organized workspace, especially during complex builds. Immediately after, the guide continues: The updated sidebar improves efficiency with smart, session-based memory for tabs and panels.Image 4 of 6What this coversThis provides a more organized workspace, especially during complex builds.Next stepThe updated sidebar improves efficiency with smart, session-based memory for tabs and panels.All 3 steps in this procedure
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.
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.
Persistent Panel & Tab State Behavior (image 5 of 6)What this shows These enhancements eliminate the need to repeatedly open panels or tabs, saving time during design iterations.What this showsIllustrates the "Persistent Panel & Tab State Behavior" section of "Using the New Revamped Sidebar in Funnel & Website Builders".This animation appears in the "Persistent Panel & Tab State Behavior" section of "Using the New Revamped Sidebar in Funnel & Website Builders". The text alongside this image reads: These enhancements eliminate the need to repeatedly open panels or tabs, saving time during design iterations. Immediately after, the guide continues: This revamp introduces a minimal, modern aesthetic that aligns with GHL Customer Care’s broader interface improvements.Image 5 of 6What this coversThese enhancements eliminate the need to repeatedly open panels or tabs, saving time during design iterations.
Buttons and menus referencedTab memory
Next stepThis revamp introduces a minimal, modern aesthetic that aligns with GHL Customer Care’s broader interface improvements.All 3 steps in this procedure
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.
UI Enhancements and Styling Improvements
This revamp introduces a minimal, modern aesthetic that aligns with GHL Customer Care’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.
UI Enhancements and Styling Improvements (image 6 of 6)What this shows All of these changes aim to reduce mental fatigue and help users stay focused while designing funnels and web pages.What this showsIllustrates the "UI Enhancements and Styling Improvements" section of "Using the New Revamped Sidebar in Funnel & Website Builders".This animation appears in the "UI Enhancements and Styling Improvements" section of "Using the New Revamped Sidebar in Funnel & Website Builders". The text alongside this image reads: All of these changes aim to reduce mental fatigue and help users stay focused while designing funnels and web pages. This part of the guide covers 1 field, listed below. Immediately after, the guide continues: Q: Will this update affect my existing funnels or website styling?Image 6 of 6What this coversAll of these changes aim to reduce mental fatigue and help users stay focused while designing funnels and web pages.
Fields in this part of the guideConsistent design patterns across the builder
Next stepQ: Will this update affect my existing funnels or website styling?All 4 steps in this procedure
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
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.
The revamped sidebar is a major UI refresh for the right-hand panel in GHL Customer Care’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.
