Mobile editor

The mobile studio is our trendy, voguish thing!
It's where you can edit the mobile version of your website.
And what impact has a good mobile version of your website in today's business, we don't need to tell you.
But, we will anyway!

Read our team's blog about it. It only takes 5 minutes.

Mobile-Friendly Website: Why every small business has to have one?

To get to the mobile studio in our editor, click on the mobile icon on our main menu.

Note:

If you are working on a newly created page, the first time you enter the mobile studio you will see all widgets arranged in a single column, as well as all spacers, removed. This happens because most often the layouts in the mobile version are a single column since the screen space is limited on our phones.

However, you will be able to change this by rearranging the widgets (simply with drag and drop) any way you like, as well as adding spacers from the mobile drag and drop menu.

Your page in the mobile studio is also divided into header, body, and footer.

You can also change the appearance of the widgets independently from the desktop version and delete widgets you don’t want to have in the mobile view.

Note:

You won’t be able to add new widgets to the mobile version except for spacers and you won’t be able to change the text of any text widget without affecting the desktop version. (I.e. If you change the text to the mobile version, it will change in the desktop version as well).

After doing so, you will get an editable preview of the mobile version. If you are working on a newly created page, the first time you enter the mobile studio you will see all widgets arranged in a single column, as well as all spacers, removed. The system does this because most often the layouts in the mobile version are a single column due to the lack of sufficient screen space for layouts consisting of multiple columns. However, you will be able to change this by rearranging the widgets as well as adding spacers from the mobile drag and drop menu. You will also notice that, again, your page is divided into header, body, and footer.

Apart from rearranging the widgets in the mobile studio, you will be able to change the appearance of the widgets without affecting the appearance in the desktop version and delete widgets you don’t want to have in the mobile version.

You won’t be able to add new widgets to the mobile version (you can only add spacers) and you won’t be able to change the text of any text widget without affecting the desktop version. I.e. If you change the text to the mobile version, it will change in the desktop version as well.

The mobile menu

The mobile menu is located at the top of the mobile page.

It is an area where you can add the navigation menu and contact icons. To edit the mobile menu hover over it and click on the pencil icon. You will see a drag and drop menu and list of icons you can add to the menu including navigation menu icon, link to the home-page icon, click to call icon, click to email, and location map icon.

To add the icons simply select from the drag and drop menu and drag them to the preferred location on the menu. You can edit the size and color of the icons by selecting the icon and on the right menu clicking on the pencil icon to open the editor. Within the style tab, click the text theme icon and change the font size and color. The icons are treated as both font characters and images which is why you can change their size and color from within the Text theme editor.

Additionally, you can change the icon itself by uploading an icon of your choice.

To delete an icon, select the icon (you will see a red square around it when selected) and click the recycle bin icon on the drag and drop list on your right.

The phone, e-mail and location icons withdraw the contact information you have provided in the Website settings under the same name categories. If you haven’t provided any information, the icons will not be functional until you do.

The navigation menu icon opens up a list of other pages on your website which can be edited.

Mobile menu navigation

By clicking on the Bars icon on your mobile menu you will open a list of navigational links to the other pages of your website.

To choose the pages you want to appear on the navigational menu open the Menu Pages editor which is right below the Drag and Drop editor. You will see a list of all pages on your website. The names of the pages will appear with small opacity, indicating the pages are not activated (Added to the menu). You can activate a page by clicking on it. It will then be added to the navigational menu and its opacity will increase to show that the page has been added.

The order in which you activate the pages affects the order in which they are shown in the navigational menu. You can change the order from within the Buttons editor.

If you want to remove a page from the mobile navigational menu click on the page again to deactivate it.