Support & Knowledgebase

Oct 5, 2017
Posted by Adam Winchester

We’re big fans of mobile first at Wisdomtree, so this instructional post is close to our hearts.​​

In this post, I show you how to add mobile only buttons for “Call Now” using a tel: link and “Find Us” using a Google Maps short URL.​

Now, keep in mind that the id’s used in this post are specifically related to the example site that I am using, so you will need to locate and find your specific ID’s using the instructions.​

In the video below, I have used Google Chrome as the browser.​

  1. ​Login to upfront editor​
  2. Select the buttons from the draggable elements on the left hand side of the screen​
  3. Place the buttons on your page​
  4. Open Google Chrome, and right click on the first button​
  5. Find the top-most element and select the ID (if you are unsure of what I mean, watch the video)​
  6. Jump back across to the Upfront editor and select Edit Global CSS​
  7. Copy the element name into the Global CSS and copy the code below
.desktop-breakpoint #wrapperidwithnumbers { display:none; }
​.tablet-breakpoint #wrapperidwithnumbers { display:block; }
​.mobile-breakpoint #wrapperidwithnumbers { display:block; }

8.  Repeat the steps 4 through 7 for the second button.
9. Now your buttons only appear on Tablet and Mobile!

For the full step by step, watch the video. This includes adding the tel: and find us links.

Got a question? Post it below and we’ll help out.

Display a widget or element only on mobile devices in Upfront for Wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *