Adding content to the iPhone area on contact page

Posted in: ,
Tip: We recommend the following Widgets for the iPhone area: Custom Social Networks, Text.

Overview

The article describes how to add content into the iPhone (or smartphone) area on the contact page template.

  • The iPhone area is a ‘widgetized sidebar region’ and functions just like a normal sidebar region.
  • All of the content in the iPhone area is populated via widgets.

General Instructions:

  1. Log into your WordPress Dashboard
  2. Click on Appearance > Widgets
  3. Look to the right hand column and locate the sidebar region labeled Contact Sidebar (iPhone)
  4. Drag-and-drop your desired widgets into this area, save the changes, and you’re all good to go :)

Karma WordPress Theme - Contact iPhone area

(click screenshot for full-size view)


Coding Samples:

The Text widget is great for adding any type of content to your iPhone sidebar. Here are some coding samples below. Simply drag-and-drop the Text widget into your sidebar, copy-paste the code below, and save.

  • Contact Details:
    <p>
    <strong>Office:</strong> 1-800-555-6677<br />
    <strong>Mobile:</strong> 012-345-6789
    </p>
    
  • Image:
    <img src="http://www.yourwebsite.com/image-1.jpg" alt="enter alt text here" />
    
  • List of links:
    <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    </ul>
    

Further Reading:

  • Another popular item is a Google Map. Simply grab the embed code from google.com/maps and copy-paste it into the Text Widget. (adjust the height oand width of the map accordingly.)
  • Should you need to adjust the margin or padding of the iPhone area simple copy-paste the CSS code below into your theme’s Site Options Panel and adjust numbers accordingly. (Appearance > Site Options > Styling and CSS > Custom CSS)
    .smartphone-wrap {margin:70px 50px !important;}
    #main .contact_smartphone .sidebar-widget {width:218px !important;}