Build Your Own Business Website header image

BYOB Display Content By Mobile Device for Thesis 2

The BYOB Display Content By Mobile Device for Thesis 2 is newly updated for Thesis 2.2 It creates a container that allows you determine which types of mobile devices its content should be displayed on. Now you can easily add content to your Thesis 2 template that only displays on a regular monitor or only on a mobile device. This allows you to streamline the mobile experience by either removing parts of the templates from the mobile view or substituting mobile friendly template parts.

This box creates a box in the Add Boxes menu of the Thesis HTML Skin Editor. Simply drag the box to a location on the template, place content in it and then determine which type of device should see that content. It even allows you to narrow the choices down to tablets, smart phones, older smart phones and feature phones. This way you can customize the user experience to fit the mobile device your visitors are using.

BYOB Display Content By Mobile Device for Thesis 2 from Rick Anderson on Vimeo.

With this box you can:

  • Choose content to display only to non-mobile devices
  • Choose content to display only to ALL mobile devices
  • Choose content to display on any combination desktop, mobile tablets, smart phones, dumb phones and dumber phones

Members can download the box from the link below.

Download BYOB Display Content By Mobile Device box version 2.2 for Thesis 2.2

To download this box you must be a Premium Member.

Why not join today? Click on the "Join Us!" button in the upper right corner and have full access to this and all the rest of our premium content.

Video Transcript

This is an introduction to the BYOB Display Content by Mobile Device Box for Thesis 2. This box allows you to specify what content gets displayed on which mobile devices.

Ways to Use the Box

For example, you can choose to show some mobile specific content, smartphones specific content, different kinds of advertising, different kinds of sign up forms and more depending upon the device that’s used.

Install the Box

So we start off of course by installing it. If we scroll down here there’s two different versions of it, there’s one version for use with Thesis 2 and then there’s another version for use with Thesis 2.1. They work essentially the same. We’ll download it to our computer.

Example Use: Exclude Slider from Small Mobile Devices

Then we’re going to come over to this WooCommerce site here. I have this featured product slider that I created using the BX Content Slider box and I’m going to choose not to display that on cellphones, on a small mobile devices. But we’ll show it on desktops and on laptops.

Now come over to Boxes, Manage Boxes and upload the box, choose the file. Notice that the display-content-by-device has a 1 in it like this? That means there’s another copy of that some place here in this folder and my computer has just renamed the new file by adding the 1.

Please note that if you try to install this it will fail, it will break. What you need to do is find the old one and delete it, take the new one and rename it so that it has the right name. So it’s only display-content-by-device and then just upload that. Again, make sure you do not upload it without using the correct name.

We can say okay to that and then put a check mark in the box beside it and hit Save Boxes. Let’s come over to our Skin Editor and go to the Front page. That’s the template we’re going to work on. We will find that in the Skin Editor.

We now have a new box, the BYOB Display Content By Device box. So we’ll add that box and then we’re going to drag it into the page and we’re going to drag the feature box entirely into it and just drop in there. Now the feature box has it.

Display Options

Then we’ll open up the box options and these are our choices. We can say Display ONLY on NON Mobile devices which means it’s only going to show up on a desktop, it won’t show up on any other mobile device including tablets. We can say Display ONLY on mobile devices-and to ALL mobile devices. In that case it doesn’t matter what the mobile device is however, it will not display on the desktop. We can say Display on desktop devices, Display on tablet devices, Display on modern smart phones, older smart phones and really old smart phones.

Display on Non Mobile Devices

Essentially you can pick which ones you want it to display on. I’ll show you the Display ONLY on NON Mobile devices option first. I’ll do that, save the template and refresh this template. Now you can see it shows up on our desktop but if we go to our mobile device, it does not show up here, right? So it’s not showing up on the mobile device but it is showing up on the desktop.

Display Only on Mobile Devices

We can also set it to ONLY display on mobile devices and doesn’t ever display on the desktop. Let’s save that, come back over here, there it is showing up on the desktop but if we come back over to our phone and refresh that view, it’s there on the mobile device, right?

Display on Selective Devices

And, as I said, we can also be selective about what devices it shows on. Something that’s probably going to be common is you want to display something on a desktop device and on a tablet device but not on any of the smaller devices. So just put a check box in both of those, save the template and now it shows up there. I hope you find this box to be useful.