Funnelish Docs
FunnelishPricingBlogCommunity
  • Overview
  • Getting Started
    • Quick start
    • 1️⃣Creating a funnel
      • Funnel steps
      • Products
    • 2️⃣Customize design
      • General Settings
      • Layout
      • Containers
      • Compositions
      • Saving assets
      • Payment Forms
        • 2 Step Form
        • Payment Form
      • Express Checkout
      • Product List
      • Text Elements
      • Media
      • Loox Reviews
      • CTA
      • Order Bump
      • Popups
      • Form element
      • Timer
      • Progress Bar
      • Social Network Buttons
      • Order Summary
      • FAQs
    • 3️⃣Collecting payments
      • Payment Methods Supported
      • Add payment methods
      • Card payments
        • Stripe
        • NMI
        • Checkout.com
        • Airwallex
      • PayPal
      • Express Checkout (Google & Apple Pay)
      • iDEAL payments
        • iDEAL through Stripe
        • iDEAL through Airwallex
      • P24 (Poland)
      • Cash On Delivery
      • Buy Now, Pay Later
        • Klarna through merchant account
        • Klarna through Stripe
        • Klarna through Airwallex
      • Bancontact payments
        • Bancontact through Stripe
        • Bancontact through Airwallex
      • SEPA Direct Debit
      • RazorPay (India)
      • EPS (Austria)
    • 4️⃣Connect your domain
      • Introduction
      • GoDaddy
      • Namecheap
      • Shopify
      • Cloudflare
  • ADVANCED FEATURES
    • Funnel analytics
    • Send SMS
    • A/B Testing
    • Geo-funnels
    • Responsive design
    • Discounts
  • Integrations
    • Integrations Overview
    • Shopify
      • Connect Your Shopify Store
        • Shopify custom app
      • Send Orders to Shopify
      • Set Up Order Bundling
      • Set Up Dynamic Variants
      • Set Up Order Notes
    • Connect to Google Sheets
      • Connect Your Google Account
      • Send Data to a Google Sheet
    • Get Started with Klaviyo
      • Connect With Klaviyo
      • Send Data to Klaviyo
    • ShipStation
      • Connect to ShipStation
      • Send Orders to ShipStation
    • ActiveCampaign
      • Connect with ActiveCampaign
      • Create an ActiveCampaign Automation
    • Hyros
      • Connect With Hyros
      • Create a Hyros Automation
    • MailChimp
      • Connect with MailChimp
      • Automate With MailChimp
    • SendGrid
    • Mailgun
    • Zapier
  • Apps
    • Funnelish Apps Overview
    • Facebook Pixel
    • Pinterest Tag
    • Proofy
    • Google Analytics
    • TaxJar
    • TikTok Pixel
  • Automations
    • Overview
      • Set up automations
    • Triggers
    • Actions
      • Sending Emails
        • Text Only
        • Templates
      • Send a Notification
      • Delays
      • Conditions
      • Webhooks
      • Jumps
      • Integrations
  • Resources
    • Multi-Users Access
    • Send Emails From Funnelish
    • Manage Your Orders
    • Manage Your Customers
  • FAQ
    • Funnel Launch Checklist for Funnelish
    • Profile Information
    • Frequently Asked Questions
    • Troubleshooting Issues
    • Ordering Without an Address
    • How to change a page title?
    • Set a Default Landing Page
    • How to Charge a Shipping Fee
  • Connect to Click Funnels (Legacy)
    • Your First ClickFunnels Funnel
      • 1 Add Your Funnel
      • 2 Copy Your Tracking Code
      • 3 Turn On Your Apps
    • ClickFunnels Apps
      • Smart Optin
        • Facebook Client ID
        • Google Client ID
      • Smart Currency Converter
      • Programmable
      • Fancify
        • Product Variant Set Up
      • Paypal Plugin
        • Testing Purchases
      • Smart Address Plugin
    • Tracking Orders
      • Track Paypal Orders In ClickFunnels
      • Track ClickFunnels Orders In Funnelish
Powered by GitBook
On this page
  • Adding a Container widget
  • Adding boxes
  • Add widgets to boxes
  • Wrap up

Was this helpful?

  1. Getting Started
  2. Customize design

Containers

Create complex designs without code

PreviousLayoutNextCompositions

Last updated 2 years ago

Was this helpful?

The Container widget is an essential building block that can help you design responsive funnel steps. Containers, transparent by default, are fully customizable. When used in conjunction with the Box tool (), you can group elements and create intricate presentations, like a pricing table.

Adding a Container widget

The first step is to place a widget on the canvas. In this example, we place one Container widget in a row cell.

Containers are empty boxes that have many customization features such as padding, margins, background color, borders, and more. Containers can hold other widgets, like text, heading, and images.

To place a widget on a blank canvas:

  1. Go to the center of the Section and click the plus (+) icon one time.

  2. Select the number of columns for the row.

  3. Click the plus (+) icon in a row cell.

  • A blue line connects the cell to the side panel.

4. Click a widget. We select Container in this example.

  • The editor places the widget inside the cell and displays the settings panel.

Adding boxes

Boxes are a feature of the Container widget. The Box tool lets you stack (horizontally and vertically) multiple elements and provides incredible design flexibility. Add precise margins and padding, set text or image alignment, define custom widths for side-by-side boxes, and more.

Start by placing one or more boxes inside a Container widget.

  1. Click the Container widget on the canvas.

  2. On the left panel, click Add new box.

  • Funnelish creates two boxes inside the container cell. By default, the widths are equal. You can change box width on the side panel.

Inserting and deleting boxes

  • To insert another box, click the Add new box button.

  • To delete a box, click the ellipsis next to a box name and then click Delete box.

Add widgets to boxes

The next step is to add a widget to a box.

  1. Click a box cell one time.

  2. On the side panel, click a widget.

  3. Customize widget settings.

  4. Repeat for all boxes.

  5. Click Save changes.

  6. Click Preview.

In this example, we place one element in each box and then customize margins and padding. We also center-align the headline and left-align the button.

You can also control container size and location by configuring custom margin and padding settings.

Continue to add boxes, elements, and design features.

Wrap up

The screenshot below shows a price table made with containers and boxes.

2️⃣
see below
Click the plus (+) icon
A line connects with the widget panel
Container widget inside a row cell
Two boxes inside a container.
Delete a box
Add elements to boxes
Container margin and padding settings
Price table made with containers and boxes