Creating Mobile-Responsive Designs in the Funnel and Website Builder

Introduction to Mobile-Responsive Design

Creating funnels and websites that look great on both desktop computers and mobile phones is essential. The CRM's funnel and website builder provides intuitive tools to customize your design for different screen sizes. You can adjust text elements, buttons, FAQs, images with text, and social media icons independently for desktop and mobile views, ensuring a polished and professional appearance on any device.

How to Switch Between Desktop and Mobile Views

The builder features a view toggle for previewing and editing your design. In the editor toolbar, you will see a desktop icon. Clicking this icon allows you to switch the entire editing preview from the desktop view to the mobile view. Any changes you make while in the mobile view will apply only to how the page appears on mobile devices, and vice versa for the desktop view.

Customizing Text Elements for Different Devices

This functionality applies to standard text elements like headings, subheadings, paragraphs, and bullet points.

Steps to Adjust Font Size

1. In the builder, click to select the text element you wish to edit.
2. Open the element's settings panel and locate the option for font size.
3. While in the desktop view, adjust the font size. This setting will serve as the base size and will also apply to mobile by default.
4. Now, click the desktop icon in the toolbar to switch to the mobile view.
5. With the same text element selected, adjust the font size again in the settings. This new size will apply only to the mobile view and will not change the desktop setting.
6. To make further adjustments to the desktop size, switch back to the desktop view and modify the font size there.

Applying Responsive Controls to Other Elements

The same principle of separate desktop and mobile customization applies to several other components.

FAQ Elements

For FAQ sections, you can independently customize the font size for both the question titles and the answer content for desktop and mobile views.

Button Elements

For buttons, you can set different font sizes for the main button text and any sub-text separately for desktop and mobile devices.

Image Elements with Text

For images that contain overlaid text, you can customize the font size for the headline and body text independently for each view.

Social Media Icons

The social media icons element also supports responsive design. You can customize properties like Font Family, Font Size, Font Weight, and Color separately for the web (desktop) and mobile views using the same view-switching method.

Benefits of Using Responsive Controls

• Design Flexibility: Fine-tune the appearance of every element for each device type.
• Enhanced User Experience: Ensure text is always readable and buttons are easily tappable, regardless of screen size.
• Efficient Workflow: Build and adjust responsive designs in real-time without needing separate pages or complex code.