> For the complete documentation index, see [llms.txt](https://help.tryfreedesk.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.tryfreedesk.com/platform/builder/containers.md). # Containers The Container is the foundational building block of any page, a flexible section you drop onto the canvas to hold your content (text, images, buttons, videos, widgets, etc.). Beyond just holding content, it comes with its own set of background and layout styling options, letting you turn a plain content block into a fully designed section. To add a container, select the add widget icon on the left side taskbar - Then select the Container widget:
#### **Why use it:** * **The starting point for every section**: headers, hero sections, feature blocks, footers, and everything in between are built inside containers. * **Full creative control over backgrounds**: rather than plain white space, containers can carry images, videos, gradients, patterns, or overlays, letting each section of your page feel distinct. * **Structural flexibility**: containers can be turned into sliders, given visibility rules, or anchored for navigation, making them useful for more than just static content blocks. Once you add the container to your builder canvas, to the top of the container, you will see a visual button that is labelled '**Block**' this button is where to start editing your container styling and behavior.
### **Block Settings** When selecting the block settings, the settings panel will display:
### **Background settings:** * **Background Image**: upload an image as the section's background * **Background color**: solid color fill * **Add Video Background**: use a video as the background instead of a static image * **Add Gradient**: apply a gradient fill, with full **Gradient Settings** * **Add Overlay**: layer a color/tint over the background (useful for improving text readability over images) * **Background pattern**: add a decorative pattern (e.g., Dots) over the background * **Pattern color & Pattern spacing**: customize the pattern's appearance and density ### **Layout & structure settings:** * **Add Shape Divider**: add a decorative shape (wave, angle, etc.) at the edge of the container to break up section transitions * **Add Anchor Point**: set a jump-link target so navigation menus or buttons can scroll directly to this section * **Slider Mode**: turn the container into a slider, letting you stack multiple slides within it * **Block visibility**: control who sees this section on the published page (e.g., hide from certain Countries, membership levels, or add custom rules), with support for stacking multiple rules together ### **Block Visibility** Choose who can see this block on published pages. Stack multiple rules and combine them. First select who can see this container:
Once you select a visibility option, you can optionally create a rule:
**For example**: I want to only display a container to a specific member group. First I'd select the visibility option: Then select the member groups I want to allow to see this block/container.
### **Slider Mode** This effect when applied changes the entire content within it's container/block. **First - turn on the slider mode**
Now at the bottom of the container you will see a new tab display. Within this tab you can create as many slide variations as required, duplicate existing container content, create new content, and configure the styling and display of the slider.
The numbers 1 & 2 in this example, denote we have created 2 different slide displays for this container. 'by clicking the numbers you can switch back and forth to edit'. ### **Slider Styling** The slider settings let you fine-tune how visitors navigate between slides and how the slider behaves automatically. You can toggle **Show arrows** for left/right navigation controls and set their **Arrows position**, or enable **Show bullets** for dot-style slide indicators. The **Animation** setting controls how slides transition (e.g., Slide), while **Transition easing** governs the feel of that animation (e.g., Smooth). For hands-free browsing, **Auto-slide** advances slides automatically at a speed you set with **Auto-slide speed**, in a direction controlled by **Autoplay direction**. You can also choose to **Show autoplay progress** as a visual timer, **Disable autoplay on mobile** if it's not suitable for smaller screens, and enable **Pause when tab is hidden or focused** so the slider doesn't keep cycling through slides a visitor isn't actively viewing. Additional options include **Parallax slide content** for added depth as slides move, and **Keyboard navigation** so visitors can move between slides using their arrow keys.
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.tryfreedesk.com/platform/builder/containers.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.