Mobile Editor

Fabl automatically creates a mobile-friendly version of your story for you. From your desktop, you can edit your mobile story settings using the mobile editor.

Mobile Editor

Fabl’s Mobile Editor allows us to further the user experience of your stories on mobile devices. This feature enables you to have control over both content and layout and to style the view on desktop and mobile devices independently.

1. Switching between desktop and mobile view

When creating a story in the Story Editor, switching the view between desktop and mobile is quickly done from the mobile/desktop toggle option which is always visible on the top side of your viewport.

Desktop View selected

Mobile View selected

2. Content & Design Synchronization

Before you start adding mobile styles to your story components, you have to make sure that the “Design” checkbox under the “Content & Design Synchronization” tab is unchecked. From this point onwards, any style edits you do to that specific component will no longer be synced between desktop and mobile.

If you want to display different content between mobile and desktop in the same component, you will have to uncheck the “Content” checkbox from the “Content & Design Synchronization” tab.

Both “Content” and “Design” synchronization options can be found individually for each component under Options/Settings/Content & Design Synchronization.

Note: Structural components such as Sections and Grids only have the “Design” synchronization option available.

3. Desktop & Mobile Display Settings

The Desktop & Mobile Display Settings tab is very handy in situations where you might want to hide on Desktop or Mobile specific components (text, images, videos, slideshows etc.) or structural elements like sections and grids.

Depending on which of the options you select (Desktop or Mobile) you can set all of the story elements as visible or hidden.

This feature is also useful when you have more complicated layouts on desktop that are easier to be built from scratch or mobile and vice-versa.