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
  • Responsive features
  • Use case
  • Create a desktop display
  • Create a phone display
  • Results

Was this helpful?

  1. ADVANCED FEATURES

Responsive design

Customize how your funnel displays on different devices.

PreviousGeo-funnelsNextDiscounts

Last updated 2 years ago

Was this helpful?

The Funnelish page editor allows you to build responsive web pages for your eCommerce. We offer multiple features that make responsiveness easier to use without complicating the page builder.

Responsive features

1. Responsive property

This feature allows you to hide any block (element, section, or row) on a specific device while remaining visible on others.

We recommend not abusing it often, as most designs can be built without resorting to it.

2. Responsive properties

Some elements offer unique properties that allow you to set different values for a given property in each different device.

  • Alignment Allows to change the position (center or sides) of an object inside the element boundaries.

  • Text alignment This property allows you to center the text or move it to either side. Remember to select ALL the text when modifying it to make it responsive.

  • Font size This property allows you to change the size of the text. You can even have different-sized text on the same paragraph element. Remember to select ALL the text when modifying it to make it responsive.

  • Orientation This property is currently only available on Container elements, it allows changing the orientation of the boxes inside it.

The first time you set a responsive property on the desktop view, it will apply the same settings to the other views. You will need to edit them individually to change settings.

Use case

The screenshots below show a simple step layout designed for a desktop display and how it would look on a mobile display without any responsive adjustments.

Desktop view
Mobile view

1. Image (align to right)

1. Image not centered.

2. Header text (centered, 36px)

2. The header takes two lines, not optimal for mobile scrolling.

3. Body text (align to left, 18px)

3. The text is aligned to the left and looks odd.

4. Button (align to center)

4. The button is not optimal for mobile (too small).

5. Customer review (Custom HTML component, left margin 11px)

5. Social proof should be closer to the product image.

To adjust the responsive properties of an element in mobile, we need to adjust those elements' settings in the proprietary mobile/tablet view.

  1. Go to the top of the canvas and click the phone icon.

  2. Select the element you want to edit once.

  1. In the side panel, make the changes to fit your needs.

In this example, we change the image alignment on the phone from right justified to centered.

4. Click the Save changes button at the top right of your page.

The result is two different display settings. On desktops, the image is right justified, and on mobile, the image is centered.

Follow the same steps to customize other elements' responsive properties.

All the changes to the responsive properties described above now appear on mobile, as shown in the screenshot below.

Many components do not have responsive properties like the ones described above. To create a mobile-specific or desktop-specific layout, you need to use the Responsive properties on the left panel.

The workflow is straightforward:

You need to create different instances of the same element and activate/deactivate them using the Responsive tool icons.

In the following example, we create two instances of the CUSTOM HTML component: One for a desktop display and one for a mobile display. The same steps would apply if you also want to add a tablet display.

Create a desktop display

Here, you will be using the first instance of an element.

  1. Go to the top of the page and click the desktop icon.

  2. Click the component one time.

  3. Go to the Responsive heading in the left panel, select the desktop icon, and disable the phone and tablet icons.

  4. Click Save changes.

Create a phone display

The next step is to customize the display of the component on the phone layout. To accomplish this task, we cannot reuse the component that sits on the desktop display. Instead, we need to place a new instance of the same component on the phone canvas.

  1. On the top of the page, click the phone icon.

  2. In the left panel, drag and drop the component into the correct location on the canvas.

  1. Click the component one time.

  2. In the Responsive section of the options panel, disable the Desktop and Tablet icons.

  3. Click the Save changes button in the top right corner of the page.

Check the display status

The components now will show an icon to indicate their display status.

Results

All changes, including the mobile-specific location of the CUSTOM HTML component, are displayed correctly on a mobile device, as shown in the screenshot below.

Responsive property on the left panel.
Image with a left alignment.
Image with a right alignment.
Text with a left alignment.
Text with a center alignment.
Different font sizes in the same paragraph element.
Comparison of boxes orientation inside containers.
Desktop view
Mobile view
Element indicating that it is just displayed on Desktop.
Element indicating that it is just displayed on Mobile.