How to Create a Free Weebly Mobile Site?

Weebly is one of the easiest ways for small business owners to build a website. Earlier days, Weebly was offering only non-responsive themes. It was difficult to use the same desktop site on mobiles as well. In order to overcome this difficulty, later Weebly introduced responsive themes. Using responsive themes make your site’s content dynamically adjust to the browser’s view port. Hence, you do not need to do any additional steps. However, if you are still using old non-responsive themes, then Weebly offers a simple and free mobile site editor to convert your desktop site into a beautiful mobile site. In this article we will explain how to use Weebly mobile site editor. You can learn more about basics of creating a mobile website.

Advantages of Weebly Mobile Editor

Following are the advantages of using Weebly mobile editor:

• Desktop and mobile editors are in the same screen helps webmasters to check the mobile page view quickly.
• Auto sync between desktop and mobile sites.
• Powerful drag and drop elements.
• Preview of iPhone and Android.
• Simple Customization options for Header and Themes.

Accessing Weebly Mobile Site Editor

When using non-responsive themes, you can access the mobile editor by clicking on the phone icon in the Weebly desktop site editor as shown in the point 1 of the below picture.

Mobile Elements

Similar to using desktop editor, you can drag and drop all the available elements to your mobile site. You can also easily switch between editors by simply clicking on the desktop or mobile icon. This makes very convenient for the users to ensure the supported elements are used in both the versions of their site.

Mobile Editor Options

Mobile editor offers the following options:

• Changing the color of the mobile theme.

• Switching off the header images if it is not fitting into the mobile screen.
• Enable or disable Search box, Social Icons and Phone Number fields.
• Menus are auto arranged to suit the mobile view.
• Pro features like Site Search Box are highlighted with star mark.
• You can directly enable or disable the elements in the editor also.

Theme Selection and Preview

• Weebly currently offers very few mobile themes.
• Click on the “Change Mobile Theme” to see the list of themes available.
• Clicking on the theme will show you the option to change the color if available.
• Select the theme and color and the editor will automatically adjust your site as per the theme you selected.
• You can change the mobile editor to iPhone or Android view.

• Adjust the elements not fitting to the mobile view and publish your mobile site.

Weebly Mobile Redirect

Setting a mobile redirect is a simple click in Weebly and you do not need to insert any HTML codes in your desktop site. Go to “Settings” tab and enable the check box “Display the mobile-optimized version of this website when someone visits from a mobile device” under “Mobile” section. This will automatically redirect visitors to your mobile site when viewed from smartphones.

Note: Weebly mobile editor does not offer access to edit or view HTML/CSS. This means you can only choose the available features from the editor and can’t customize your mobile site view. For example you can’t remove the free Weebly mobile footer from your mobile site.

Mobile Editor on Responsive Themes

As mentioned, you do not need mobile editor when using responsive themes. We recommend using responsive themes to save time and keep the layout uniform on desktop and mobile devices. When you switch to mobile view in the editor, you can see a message showing “This is a responsive theme, mobile options do not apply”.

Alternative Option

If you do not like to use responsive theme or use Weebly mobile editor, then you can try third-party solutions. There are service providers like DuDa to setup mobile site and redirect users on mobile devices. However, you may need to allocate additional budget and effort for purchasing premium plan and setup the site.