All ConvertFlow campaigns are mobile responsive, so they will adapt to different screen sizes without the need to create separate campaigns.
An example of mobile responsiveness at work is when using a row with side-by-side elements in columns, the elements will be stacked in the mobile view. So disabling the mobile responsiveness feature will allow having side-by-side elements in the mobile view:
Should the mobile view not always align with the smaller mobile screen, using the padding handles while in the mobile view will allow editing the mobile version of the campaign without affecting the desktop version.
Nevertheless, there may be situations in which the mobile view may need to be edited separately to provide a better experience, specific targeting, or separate tracking.
There are four ways to create separate mobile and desktop versions of a campaign or element:
Separate Elements
Separate Elements
Creating separate elements may come in handy when needing to change copy for a specific device or when mobile responsiveness isn't translating well to the different devices.
In this case, the specific element will need to be duplicated:
Once duplicated, both elements will be visible in the desktop and mobile views. Selecting each one individually and in its "Design" options set one to "Hide on mobile" and the other to "Hide on desktop":
Now each element can be edited independently in the mobile and desktop views:
NOTE: This option is available for all ConvertFlow plans
Separate Sections
Separate Sections
Creating separate versions of a section is useful when needing to make more edits in each device version. Maybe not only the copy and style need to be different but also the background images, colors, etc.
Similarly, as with the elements, the entire section would need to be duplicated:
When the sections have been duplicated, each element will need to be hidden on a device type. Select one section at a time and enable the "Hide on mobile" or "Hide on desktop" toggle for each section:
Now each section can be edited separately in each device view:
NOTE: This option is available for all ConvertFlow plans
Separate Steps
Separate Steps
Using separate steps is helpful when guiding visitors to different versions of the same campaign, without needing to create separate campaigns altogether.
This setup works best for a single-step campaign, keeping in mind that the campaign stats may be skewed as using skip logic will still track conversions on step 1 even if the visitor is skipping straight to step 2.
Start by duplicating the campaign in step 1 and making sure that step 1 is the desktop version and step 2 is the mobile version:
Select all the sections in step 1 and enable the "Hide on mobile" toggle:
Finally, use the skip logic feature in step 1 and create the condition "If device type is - Mobile" set to jump to step 2:
NOTE: This option is available for the Pro Plan and above. To check the features available per plan, please head to our pricing page β
Separate Campaigns
Separate Campaigns
This option is perfect when needing to create completely separate versions of a campaign for each device type. It will provide separate performance stats and independent editing for each device version.
We recommend creating the desktop version of the campaign first if both versions have similar styles and copy, if they don't, the campaigns can be created independently.
Once the first version is created, duplicate the campaign and name them accordingly to avoid confusion. Make sure to edit the mobile version of the campaign in the mobile view of the builder to ensure all elements align with the mobile screen:
When the campaign is ready to activate, head to the launch page of each version, use the condition "If device type is" and select "desktop" or "mobile" for each campaign version:
NOTE: This option is available for all ConvertFlow plans