Today we will explore how to install the Mobile Theme and Amp, create Mobile Pages or Templates, and install a pre-built website with Newspaper Theme. Once you install Newspaper Theme and activate it on your website, you will get the option to import one of the dozens of prebuilt website designs crafted carefully for you. Once you import a prebuilt website, you can see as the layout stretches and conversely shrinks to fit the device it is displayed on.
You can always choose a different website design at any point, just go to your Admin Dashboard > Newspaper Theme > Prebuilt Websites and choose to install one with Design Only. No matter what device this website is displayed on, it fits the screen perfectly! That is the power of the Newspaper Theme. Let’s move on to the Mobile Theme & AMP plugins. Coded to make your website’s design on mobiles to be fast and simple.
Go to your Admin Dashboard > Newspaper Theme > Plugins. Here you can find the Mobile Theme and AMP plugin. Proceed with installing both of them. When you’re done, you need to activate them, just go to your Plugins > Installed Plugins to activate them. Once you’re done, go to Newspaper Theme > Theme Panel then to the Mobile Theme tab. From here you can select to use only Mobile Theme, only AMP, or Mobile Theme & Amp. Choose to use both.
Now let’s test to see if the amp functionality works. All you need to do to test that is to go to your website and type in the URL bar /?amp. If the page loads perfectly, you’re good to go! Keep in mind that the Mobile Theme adjusts the aspect of your website. It also makes it so you can’t use the tagDiv Composer to adjust the layout. If you want pages to load faster on mobile devices and tablets, but retain their customizability through the tagDiv Composer, you can create Mobile Templates and Pages. To do that, you first need to uninstall Mobile Theme & Amp.
Go to your Admin Dashboard. Now deactivate the plugins and delete them. Great! Now let’s explore how to create a mobile Template or Page. Open your Homepage and look at the top of your admin bar. You should see a “Mobile Page” button. Right next there is a plus icon and an import icon. The import icon lets you import a mobile page straight from the Cloud Library. The Plus button creates a new mobile page. Click it. In the window that appears, give the Mobile Page a name to find it in your Templates list easier.
Right below this, you can see a checkbox with the words “Copy Content.” If you want to create the page from scratch using the tagDiv Composer elements, you don’t have to enable it. But for the purpose of this tutorial, let’s check it to copy the page’s content for desktop into the Mobile Page. Now hit the “Create” button. Click on the new Mobile Page at the top of your Admin bar and hover over it. You should see a new icon appear in the form of a pencil. Hit it to bring up the tagDiv Composer and begin editing the page’s content.
The first thing you should do now is to click the Manager button from the tagDiv Composer to bring up the footer and header menu options. Click on the Global Template and choose the current header from the list that appears. Now click on Convert Template to transform it into a mobile header. Give it a name, and click on the Copy Content box. To apply it globally, for the rest of your website on mobile pages and templates, just click on the Global box.
Let’s repeat these steps for your footer. Great, now before we move on, let’s save our current settings. The next step to adjusting the Mobile Page across devices is to click on the Tablet Device in the tagDiv Composer. Now on the first row of the page and then go to the “Layout” tab. Click on the columns option to enable splitting the row into columns on the Tablet device. Go to the mobile viewport now and choose the row split icon in the Layout tab. Save and do this for the rest of the rows on the page.
Amazing! Your mobile page is now ready to be explored by all of your viewers. How does this work for Mobile Templates? The same steps apply, however, you now need to go to the Templates bar to create, delete, and add a Mobile Template. Let’s open up an article. Click on the name of the currently applied Single Post Template right next to the Global column, you have a Mobile column. Hit the plus button to create a new Mobile template and repeat the previous steps just as you did with the Mobile Page.
Now you can do this for Category, 404 Page, Date, Tag, and Author templates to get unique and fast mobile templates.