Base Help Center

Working with the Sidebar in the Funnel and Website Builder

Introduction to the Builder Sidebar

The right-hand sidebar in the CRM's Funnel and Website Builder is your central hub for editing any element you add to your page. It consolidates all controls into a structured, intuitive layout with three primary tabs: General, Styles, and Animations. This organization helps you quickly find the settings you need, from basic content to advanced visual effects, making the design process more efficient.

The redesigned sidebar offers a cleaner, more focused editing experience. Related settings are grouped into panels you can expand or collapse, reducing clutter. The interface also remembers your preferences during your editing session, keeping the last tab you used and the state of your panels as you switch between different page elements.

General Tab

The General tab contains the fundamental properties of your selected element. Here you can:

  • Rename the Element: Use the provided field to give the layer a descriptive name for easier identification in the page structure.
  • Edit Core Content: Update text, image sources, link URLs, or form field labels. The specific options change based on whether you've selected a button, headline, image, or another element type.
  • Configure Element Actions: Define what happens when a user interacts with the element, such as navigating to a URL, opening a lightbox, or submitting a form.
  • Adjust Typography: Change the font family, size, weight, line height, letter spacing, and text transformation.
  • Set Colors: Modify the text color, background color, and icon or link colors using a color picker or by entering a hex code.

Styles Tab

The Styles tab is where you control the layout and visual presentation of the element. Key settings include:

  • Spacing: Adjust the Margin (space outside the element) and Padding (space inside the element).
  • Borders: Add a border by setting its width, style (solid, dashed, etc.), color, and corner radius.
  • Alignment: Change the text alignment or the alignment of the element itself.
  • Visibility: Choose to show or hide the element on desktop, tablet, or mobile views independently.
  • Text Shadow: Apply a drop shadow to text by configuring its offset, blur, and color.
  • Custom Class: Add a custom CSS class or view the element's CSS selector for advanced styling.

Animations Tab

Use the Animations tab to add motion and dynamic effects to elements.

  • Entrance Animations: Select an effect like Fade, Slide, Bounce, or Zoom to animate the element as it comes into the viewer's sight. You can then set the direction and speed of the chosen animation.
  • Infinite Loop Animations: Apply continuous effects, such as a subtle glow or rocking motion, that play on a loop.
  • Clear Animations: A Clear button is available to remove all applied animations from the element at once.

Note: The exact controls available in each tab will vary depending on the type of element selected (e.g., image, button, form field). The sidebar is context-aware and displays the relevant options for your current selection.

Using Collapsible Panels

Within each tab, settings are organized into labeled panels. You can click on a panel's header to collapse or expand it. This lets you hide advanced or less-frequently used options, creating a less cluttered workspace and helping you focus on the task at hand. The expanded or collapsed state of these panels is remembered as you work.

Persistent Interface Behavior

The sidebar is designed to maintain your workflow:

  • The last active tab (General, Styles, or Animations) remains selected when you click on a different page element.
  • The expanded or collapsed state of individual panels is also preserved as you switch between elements.
  • When you add a brand new element to the page, all panels within the sidebar will be expanded by default, giving you immediate access to all available settings for initial configuration.
← Getting Started: Launch a FunnelSaved Sections for Funnels, Websites, Webinars, and Stores →