How to manage the content in tab and mobile view

Facebook mobile usage continues to grow. It is a necessity to have a mobile version of a tab page to get access in mobile devices. As you have already noticed that décor tab creator offers two custom tab modes, for tab and for desktop. With an ability to create a smart mobile URL per each tab, a user from any device can get access to your Facebook tab page.

Designing an application for desktop as well as mobile using Decor tab creator is very easy. By using the modes feature in Decor, you can create two entirely different versions for a same page. For instance, you want to add some textual information in tab mode that is pretty good but lengthy and wanted to create a short version of the composed text for mobile design, you can do it using our Decor tab creator. This guide explains how to do this with the help of an easy and intuitive use-case to show how to edit the content in your app in both modes.

1. Choose template or application

Choose any template to get started with.

choose-app-template

 

2. App edit mode

A blank template is chosen. The app is in edit mode and by default it will show you the design or layout in Tab mode.

enter-tabedit-mode

 

 3. Add content

By choosing an image component and text component, logo and text fields are included in the design as shown in the figure below.

background-edit-mode-4

 

4. Mobile view

The mobile view of the design is shown here. You can observe the text component in the mobile mode, which is lengthy.

hidden-layer-background

 

5. Hiding an unwanted layer in mobile mode

If we want to ignore the existing text layer in the mobile mode you can do it. For that, choose mobile mode and hide the text layer in order to replace it with your own customized text component. You can apply this to any layers or components in both modes.

image-component

 

6. Adding a new layer

After hiding the existing layer, try to add a new text component . You can do some adjustments and changes until you are satisfied. Now with the new additional layer you can check the new look for mobile design with different components that are different from the desktop version. You can even do some changes in the rest of the layouts in mobile view which has no effect when it comes to the tab view.

edit-mobile

 

7. Hiding a layer in desktop mode

Now we added a new layer for mobile view. When you try to change the mode to the desktop, you can notice a new layer that is added in the mobile version. Now, make the layer invisible by clicking the “eye” icon that is presented in the right side layers section as shown in the figure.

image-mobile

 

When satisfied, click “Publish”. Use a smart-URL when promoting your app to make it accessable on all devices. Want to learn more about the mobile and desktop modes? Go through this tutorial.