Container Widget

The Container widget (also called a block) is one of the most versatile tools in your website builder. It lets you group multiple widgets together inside a single section, giving you full control over layout, structure, and design.

By using containers, you can:

Organize content into rows and columns.
Apply shared backgrounds, overlays, and styles.
Create flexible, reusable design structures.

Adding a Container

Open the Widget Panel.
Under Basic Widgets, find the Container widget.
Drag and drop it onto your page.

You now have a section ready to hold any number of widgets, from text and images to forms, videos, and buttons.

Container Settings

When you select a container, you’ll see four key configuration areas:

Container Settings → Style, resize, copy, or delete the entire container.
Column Settings → Manage individual columns inside the container.
Block Display Tab → Control visibility, animation, and responsiveness.
Add Block → Insert additional containers above or below.

Let’s look at each of these in detail.

1. Block Settings

The Block Settings control the overall look and behavior of the container.

Edit Block Settings

Background color → Solid color fills for clean sections.
Background image/video → Add immersive media as a section background.
Gradients → Blend multiple colors for a modern effect.
Overlays → Add semi-transparent layers to improve text readability.
Shape dividers → Decorative shapes between sections.
Anchor points → Assign a label so buttons or menus can link directly to this block.

Resize Container

The Resize Container options let you control the width and height of the entire container, giving you flexibility for both standard sections and hero-style blocks.

Container Width

Boxed → Content is constrained to your site’s grid width (great for readability and balance).
Full Width → The container stretches edge-to-edge across the screen. Ideal for hero banners, image sections, or backgrounds that should span the full viewport.

Container Height

Normal → The container adjusts naturally to fit its content.
Custom Height → Set the container to a fixed, full-height section (commonly used for immersive hero sections or full-screen intro blocks).

Mobile Option

Keep at full-height on mobile → Ensures that containers set to full height remain full-screen on smaller devices. Useful for impactful hero sections.

💡 Design tips

Use Boxed for text-heavy sections (easier to read), and reserve Full Width + Full Height for visual impact areas like hero headers, background videos, or promotional sections.
Be mindful of content on mobile—very tall sections can feel overwhelming. Sometimes it’s better to switch back to Normal height on small screens for readability.

Copy

Save the entire container (with all widgets and styling) to your clipboard. Paste it elsewhere on the same page or another page. Perfect for reusing designs like testimonial blocks or pricing sections. You can even copy and paste seamlessly between the Web Studio and the Circle Studio.

Delete

Remove the container entirely. Use with care—this will delete all widgets inside.

💡 Design tip

Use Copy for recurring design patterns across your site. For one-off hero or CTA sections, resize containers to Full Width with a custom height for maximum impact.
You can even copy blocks and widgets seamlessly between the Web Studio and the Circle Studio.

2. Column Settings

Containers can be divided into multiple columns, giving you flexibility to structure your content.

Split horizontally: Hover at the top of the container to split into up to 5 columns.
Add vertically: Use the + button to add new rows above or below.
Resize columns: Drag to adjust widths.
Style per column: Assign unique colors, borders, or backgrounds.

📌 Example: A container might have one row with 3 feature columns, followed by a second row with 2 columns for text and an image.

Global Columns

You can convert any column into a global column, which allows you to reuse it across multiple pages. Updates to one global column will sync everywhere it’s used.

Steps:

Select the column.
In the settings, choose This is a global column.
Name the column and save.

💡 Design tip

Use global columns for repeated structures like footers, pricing tables, or testimonials.

3. Block Display Tab

The Block Display Tab controls when and how a container is shown:

Delay: Show the container after a set time (useful for timed offers).
Hide/Draft mode: Temporarily remove the container from public view.
Responsiveness: Choose to show/hide the container on desktop, tablet, or mobile.
Animations: Add entrance effects like fade, slide, or zoom.

💡 Design tip

Use animation sparingly—fading in testimonials or sliding in CTAs can enhance engagement, but too much animation feels distracting.

4. Add Block

The Add Block option lets you quickly insert new containers above or below the current one. This makes it easy to build structured, long-form layouts.

Examples:

Add a hero banner above an existing feature section.
Insert a testimonial block below a pricing section.
Create alternating text and image blocks for visual flow.

💡 Design tip

Keep consistent spacing between blocks. It maintains rhythm and avoids clutter.

Best Practices

Structure first, style second: Build your container and column layout before adding detailed content.
Reuse wisely: Copy or globalize frequently used blocks to save time and ensure consistency.
Use full-width selectively: Great for hero banners, but don’t overdo it—boxed containers often improve readability.
Balance visuals with clarity: Overlays, gradients, and padding keep text legible against rich backgrounds.

✅ With the Container widget and its settings, you can build flexible, professional layouts—from simple one-column content blocks to advanced, reusable multi-column sections.