{"id":5555,"date":"2018-03-20T06:50:11","date_gmt":"2018-03-20T06:50:11","guid":{"rendered":"http:\/\/wpthemego.com\/document\/?p=5555"},"modified":"2025-02-26T02:14:42","modified_gmt":"2025-02-26T02:14:42","slug":"how-to-use-mobile-layout-in-wordpress-themes","status":"publish","type":"post","link":"https:\/\/wpthemego.com\/document\/how-to-use-mobile-layout-in-wordpress-themes\/","title":{"rendered":"How to Use Mobile Layout in WordPress Themes?"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Up to 90% of us go shopping on bed with our mobile today, that’s why building a website responsive is essential point. However, we can do more than that! Mobile Layout has been developed and your website now works like an app on mobile now.<\/p>\n

Mobile Layout<\/a>\u00a0<\/b>is a new and unique design by our team for our WordPress themes in 2017. With this new development, it can help your website to be more convenience for customers and convert more sale every day.<\/p>\n

Today, we will share you some tips on how to use mobile layout in your website.<\/p>\n

\"SW<\/a><\/p>\n

What is Mobile Layout?<\/span><\/h3>\n

Do you want to have a professional online store on mobile devices?<\/em><\/p>\n

Unlike other themes which support responsive layouts only, our theme is built with both\u00a0responsive layouts<\/strong>\u00a0and\u00a0mobile-specific web designs<\/strong>\u00a0with full of shop features, specifically designed and developed for mobile devices. This is the trend of online store 2018 \u2013 when using and shopping via smartphones is increasing rapidly!<\/p>\n

By using mobile layouts,<\/em>\u00a0you can build a mobile-friendly website and bring your customers a great mobile shopping experience. You\u2019re able to enable these layouts in theme option based on your market strategies.<\/p>\n

If you don’t want the mobile layout, you can disable it and the responsive layout will be applied automatically.<\/p>\n

\"SW<\/a>

Mobile Layout of BosMarket – Trending Flexible Multivendor WooCommerce Theme<\/a><\/p><\/div>\n

Home Mobile<\/strong><\/p>\n

When entering into a website, this will be the one that can attract your customers’ love at the first sight. Using mobile layout, you can configure your home page on mobile to be much more user-friendly and high user experience with slider, images, products, countdown deals and other information.<\/p>\n

Mobile Menu<\/strong><\/p>\n

Mobile layout provide you with vertical menu at the header and other menu at the mobile footer.<\/p>\n

Mobile Header<\/strong><\/p>\n

Mobile header contains logo, vertical menu, cart, search box and other elements. You can configure mobile header style easily in the Theme Options.<\/p>\n

Mobile Footer<\/strong><\/p>\n

Mobile Footer is fixed at the end of page with Home, Search, Cart, My Account and More button for more items of the page.<\/p>\n

Mobile Logo<\/strong><\/p>\n

If you want to have your logo look more beautifully on mobile, you can use different mobile logo by uploading it in the Theme Options easily.<\/p>\n

Beside, there are much more elements those are designed only for mobile layout. You can try it with mobile demo for eMarket\u00a0– Best-selling eCommerce & MarketPlace WordPress Theme<\/a> as an example.<\/p>\n

\"SW<\/a>

Mobile Layout of eMarket –\u00a0 Best Selling Multipurpose MarketPlace WordPress Theme<\/a><\/p><\/div>\n

How to Use Mobile Layout in WordPress Website?<\/span><\/h3>\n

After installing WordPress themes with mobile layout ready<\/a>, you can easily enable and use mobile layout for your website. Below are some steps for you to follow.<\/p>\n

1. Configure Mobile Menu<\/h4>\n

To have menu on mobile, we need to create menus for mobile in both header and footer. Usually, we need 02 menus. They are Vertical Menu (or Mobile Menu\u00a0 1 in some case) and Mobile Menu (or Mobile Menu 2 in some case).<\/p>\n

To have Mobile Menu, please go to\u00a0\u00a0Appearance > Menus<\/strong> and create Mobile Menus assigned to Mobile Menu Display Location<\/strong> Vertical Menu (or Mobile Menu\u00a0 1 in some case) and Mobile Menu (or Mobile Menu 2 in some case).<\/p>\n

\"SW<\/a>

Mobile Menu of Shop4U – Modern MarketPlace WordPress Theme<\/a><\/p><\/div>\n

2. Configure Home Mobile<\/h4>\n

Now, you need to go to Pages > All Pages<\/strong> and choose your page Home Mobile <\/strong>to configure your site’s data. This will be your home page on mobile layout.<\/p>\n

This mobile page is available when you install and import our themes with mobile layout ready. Also, you can easily edit the page elements with Visual Composer.<\/p>\n

\"SW<\/a>

Home Mobile of Shop4U – Modern MarketPlace WordPress Theme<\/a><\/p><\/div>\n

Also, in some theme, we provide you with page on mobile layout like Contact Us, About Us. You can also configure it with page builder normally like Home mobile.<\/p>\n

3. Set Mobile Layout Options in Theme Options<\/h4>\n

Firstly, to have Mobile Layout for your website, you need to activate it by going to Appearance > Theme Options > Mobile Layout<\/strong> and check option Enable Mobile Layout<\/strong>. If this option is not enable, the responsive mode will be automatically applied.<\/p>\n

Moreover, in this tab, you can also upload the mobile logo image, active sticky mobile for header, choose mobile layout content for home page, and choose header and footer stye for mobile layout as you want.<\/p>\n

\"SW<\/a>

Theme Options of Shop4U – Modern MarketPlace WordPress Theme<\/a><\/p><\/div>\n

4. Configure Mobile Filter<\/h4>\n

Mobile Filter is the one you see in Product Listing page. You can add it by going to Appearance > Widget<\/strong> and add filter widget for WooCommerce products into the Filter Mobile<\/strong> section.<\/p>\n

\"SW<\/a>

Mobile Filter of Shop4U – Modern MarketPlace WordPress Theme<\/a><\/p><\/div>\n

In the end, you can use mobile to check and see the mobile layout of your website now.<\/p>\n

\n

See Our Best-selling WordPress\u00a0Themes 2020:<\/h3>\n