Weaver II Pro will allow you to design a completely different subthemes for the desktop and mobile views of your site.

By default, Weaver II will automatically generate a responsive version of your site that looks great on both desktops and on smaller touch devices. Sometimes, however, you might want to design the desktop view of your site to take advantage of features that are really appropriate only on a desktop, but would not look or work that great on a mobile device. This might be a dynamic header that really needs to be “big”. It might be striking use of graphic images or special buttons that just look good only on the desktop view.

One possible approach for handling such situations is to create custom CSS rules that apply only to desktops or only to mobile devices (either using .weaver-mobile-xxx classes, or using custom @media rules). You can use the [ weaver_show/hide_if_mobile ] shortcode. These techniques work well if the differences are small.

But you might want your desktop view and your mobile views to be significantly different, perhaps with totally different content in some of the HTML insertion blocks. One little known feature included with Weaver II Pro is the ability to design a totally unique subtheme to use just on mobile devices. So your site will be displayed using one Weaver II subtheme on desktops, and a different one on mobile devices. (This works only in smart mode mobile views – pure responsive does not support this feature.)

It really is quite simple to use. Given that it is likely that you’d want your site to look very similar on both the desktop and mobile views, you would typically get your desktop design perfected, and then modify it for the alternate mobile view. You are essentially creating two completely different subthemes. Each of these subthemes will use a different set of settings. Weaver II will not automatically save these settings separately – it is up to you to keep track of which is which, and to use the Weaver II Save/Restore tab to keep saved backup versions of each of these subthemes.

Here’s a summary of the steps to follow to create an alternate subtheme that will be displayed when your site is viewed from a mobile device:

1. Finalize your desktop subtheme. Be sure to select one of the two smart mobile modes from the Mobile tab – “Smart, hide sidebars” or “Smart, stacked sidebars”. Save a backup copy of the theme from the Save/Restore tab – probably as a download to your own computer. You will later restore this backup version to function as the desktop subtheme.
2. Now you will modify the design to work with mobile devices. Note that you can change any of the settings, including the Custom CSS rules and the contents of any of the global HTML insertion boxes. You can still use [weaver_show/hide_if_mobile] shortcode if you need to. Any Per Page customizations will be used on both the desktop and the alternative mobile views. You may want to use the Mobile emulator to see how the mobile view will look on the various mobile devices.
3. When you are done with the mobile subtheme, check the “Use Alternate Mobile Theme” checkbox on the Mobile Themes tab, and save a backup version of this alternative mobile subtheme from the Save/Restore tab. Saving the settings is critical as you will need that backup file if you ever need to make changes to the mobile alternative subtheme.
4. Finally, save your mobile theme to the WordPress database by clicking the “Save Settings for Mobile View” button on the Save/Restore tab. This saves the settings in the database, but you cannot retrieve those settings – this is why you must also save a backup file of the mobile settings.
5. Now it is time to restore your desktop subtheme. Use the Save/Restore tab to restore the backup file of the desktop settings you completed in Step 1.
6. Finally, activate the automatic switching by checking the “Use Alternate Mobile Theme” checkbox on the Mobile tab. Whenever your site is viewed from a mobile device, the alternate mobile theme you saved in Step 4 will be used. Otherwise, the desktop version will be used.

Once you’ve switched back to the desktop subtheme, note that the simulator will only show the simulated view of the desktop theme and not the alternative mobile subtheme. You will need to view your site on a real mobile device to see this feature work.