Responsive design

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. Hide/Show Elements per Device (Visibility features)

You can hide any element, section, or row on a specific device while keeping it visible on others.

• Example: Hide a large image on mobile while keeping it visible on desktop. ⚠️ Tip: Use this sparingly. Most layouts can be built without duplicating elements.

2. Responsive Properties (NEW)

Now, every element property in Funnelish can have its own device-specific settings.

You’ll see a device toggle icon next to each property:

• All devices → The value applies to all devices.

• Desktop only (or Mobile/Tablet only) → The value is applied only to that device.

This works for all properties, including:

• Font size & style

• Alignment (text, images, containers)

• Margins and padding

• Background color

• Orientation (for containers)

• And more.

✅ Real example: Set a headline background to red on desktop and purple on mobile, without hiding/re-adding the element.

✅Other real example: Let’s say you have an image aligned to the right on desktop. On mobile, that may not look great.

1. Switch to the mobile view (top of canvas → phone icon).

2. Select the image.

3. In the side panel, change the alignment to center.

4. Save changes.

Now the image stays right-aligned on desktop but centered on mobile.

How Defaults Work

When you first set a responsive property in the desktop view, Funnelish copies that value to tablet and mobile. You can then adjust each device individually.

Creating Device-Specific Layouts (when needed)

Some components don’t support property-level responsiveness. In those cases, you can still create device-specific versions of the same element using the responsive visibility tool:

Example:

1. Add your element (e.g. Custom HTML block). The actual HTML can not be different on Desktop/Mobile without hiding & re-adding. Only its alignment and margins can have different values.

2. In the left panel → Responsive section, enable/disable which devices it appears on.

   • Example: Desktop ON, Mobile OFF.

3. Duplicate the element and set the opposite visibility.

   • Example: Mobile ON, Desktop OFF.

4. Save changes.

This way, you can create completely different layouts per device if needed.

Results

• Responsive properties = tweak settings (font, alignment, spacing, etc.) per device.

• Responsive visibility = show/hide elements per device when layouts must be different.