Mobile Theme: Automatic Optimization for Mobile with Newspaper Theme

The Mobile Theme is a feature specially designed to maximize the theme performance on mobile devices.

Mobile devices are evolving at the speed of light, becoming smaller and faster each day. The key to the digital user experience is in your hands as visitors are searching for information and expect fast page loading speed & fresh content. This is the ultimate challenge: making the mobile experiences as fast and rewarding as the desktop ones. We took all these aspects back to the design board and solved them by creating the new Mobile Theme feature.

The philosophy

The mobile browsing experience is often frustrating. The causes are multiple: slow page loading speed, a small text which is hard to read, low-quality images, banners blocking the content, buttons which are too close to each other making it impossible to tap on the desired one, and so on. We decided to put an end to this mess and, for this, we built the “Mobile theme.”

How does it work?

The Mobile Theme is a lighter, performance optimized template included in the Newspaper package and it loads ONLY on mobile devices. The Mobile theme comes with its own templates for pages, posts, categories, and more.

We have carefully tuned each template to offer optimal performance and excellent user experience. The posts come in a predefined, clean format including all the features available on the main theme. On the homepage, for example, it automatically renders a grid which contains featured posts and a latest posts section.

The theme doesn’t require any other plugin and ensures maximum performance. Once activated, a new administration panel becomes available in the Theme Panel area to allow you to customize various parameters for the “Mobile theme.”

mobile theme

Caching: The Mobile Theme works fine with WP Super Cache plugin. For more details on how to set the plugin visit the Cache plugin – install and configure page.

Installation:

You can find the plugin in the theme’s folder using this path:

Newspaper-tf\plugins\td-mobile-plugin.zip

Go to your WordPress admin panel and open the Plugins > Add New section. Click on the Upload Plugin button and browse your local computer to find the Newspaper-tf > Plugins folder. Select the td-mobile-plugin.zip file and click the Install Now button.

Page customization:

For Homepage, the “Mobile Theme” comes with a single predefined page template that includes two sections:

  • top grid – displays 3 featured posts (posts included in the Featured Category)
  • latest articles – shows the latest articles

This template appears only if a Static Page is used. You can check out the page settings in the WordPress Admin panel Settings->Reading section.

How to add images, custom HTML or text?

You can bring these elements inside the Mobile Editor by editing the page.

tagdiv mobile theme

On the front-end, the custom elements appear between the Top Grid and the Latest Articles section.

mobile theme

Important note:

Regular pages – The content of custom pages (ex. Contact Us page), present on the desktop version of Newspaper theme, does not appear on the “Mobile theme.” The mobile version comes with an editor and gives you the possibility to add content that’s specially designed for mobiles. This offers you the opportunity to display the same content in two different ways, one optimized for desktops and another for mobiles.

Page builder elements – For optimal performance, we removed the page builder dependency. You cannot use the page builder elements for the “Mobile theme” pages. If you want to display the same elements on both mobile and desktop, don’t use the mobile theme. Your website built on Newspaper theme will still look awesome on mobiles due to its responsive design. The Mobile Theme enhances the small screen user experience, but it is optional.

The Mobile Theme Settings:

Once the plugin is installed a new tab called “Mobile Theme” shows up in the Newspaper -> Theme Panel area. The options allow you to customize the look and functionality of the mobile theme.

mobile theme

Mobile settings:

  • The main menu – select the main menu
  • Footer menu – select the sub-footer menu
  • Show sign in / join – choose if you want to display or hide the user register/login area, it will appear in the main menu panel

mobile theme

Theme colors:

  • Accent color – theme main color which applies to various elements
  • Color settings for the main menu, footer, and sub-footer areas

mobile theme

Mobile ads:

  • Ad title – set a title, this appears on top of each ad (optional – by default no title is displayed)
  • General ads – general predefined ad spots, just add the code to the section
  • Article ads – predefined article/single ad spots, add the code to the desired area

mobile theme

Excerpts:

  • Title length – set the title excerpt length for modules used by the theme (1 and 2)

mobile theme

Custom code:

  • CSS – use this panel to add custom CSS modifications
  • HTML – add custom HTML elements, they will appear at the page bottom
  • JavaScript – add custom JavaScript

mobile theme

Wrapping up

The Mobile Theme is an optional functionality you can activate to enhance the small screen user experience on your website. This feature gives you the possibility to customize the mobile appearance while optimizing the performance. What makes the Mobile Theme so hot is that it’s automatically optimizing your website. Easy to install and use with stunning results. If you haven’t tried it yet, now it’s a perfect time!

Subscribe For More!

If you want to be the first to find out more about our themes
please subscribe to our newsletter

Bogdan B.
Bogdan B.
Passionate for gaming, mountain biking and travelling. I face every task as a new challenge to bring my skills to the next level.

7 COMMENTS

  1. Love the Newspaper Theme and it’s mobile version! 🙂

    But there are two things I want to mention:
    First is the mobile theme on my site still a bit slow. Maybe I doing something wrong (I know you improved that with the last update), but I tried a lot…
    Second, there are a few elements of TD composer that are not correctly shown on mobile theme, when in the sidebar. For example the image box element. There is just a small part of the image visible…

    But I’m complaining on a high level – Newspaper is a great theme to work with!

    • Hi Niels,

      Thank you for your kind appreciation! Can you please be more specific about this? Please provide all the details by opening a new topic on forum.tagdiv.com, or via email at contact@tagdiv.com. Our Support Team is ready to assist you! Unfortunately, the Blog is not assigned to the Customer Support Center. Thank you for understanding!

  2. Como agregar Código personalizado:
    CSS : use este panel para agregar modificaciones de CSS personalizadas
    HTML : agregue elementos HTML personalizados, aparecerán en la parte inferior de la página
    JavaScript – agregar JavaScript personalizado

    • Hi Joel,

      Thank you for your message. Bellow the custom code explanations there’s an image that shows you where to insert your own CSS, HTML, and JavaScript modifications. Please take a closer look here – https://www.screencast.com/t/fdTWg70j. If you need technical assistance using our Newspaper theme, please open a new topic on forum.tagdiv.com or send an email at contact@tagdiv.com. Unfortunately, the Blog isn’t assigned to the Customer Support section. Thank you for understanding!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our latest

Stories