FunnelishPricingBlogCommunity

Responsive design

Customize how your funnel displays on different devices.

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.

Responsive property on the left panel.

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.

Image with a left alignment.
Image with a right alignment.

  • 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.

Text with a left alignment.
Text with a center alignment.

  • 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.

Different font sizes in the same paragraph element.

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

Comparison of boxes orientation inside containers.

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
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.

Element indicating that it is just displayed on Desktop.
Element indicating that it is just displayed on Mobile.

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.

PreviousGeo-funnelsNextDiscounts

Last updated

Was this helpful?