How to Create a Responsive Website Using ResponsivePro

Responsive Pro is CyberChimps’ most popular theme and the best WordPress theme for web designers and developers alike. It follows all the guidelines for responsive web design . Now, why do you need a responsive website ? Because it is slowly becoming an industry standard and is a crucial metric in SEO ranking .

With Responsive Pro , designing a website for mobile devices is super easy as it is a truly responsive WordPress theme and looks perfect across all devices – be it a tablet, mobile or smartphone.

What gives Responsive Pro That Extra Edge While Creating A Responsive Website ?

  • Theme Options that make customizing your website a cakewalk
  • 4 separate Menu Locations – Top, header, sub-header and footer
  • Fully customizabe front page / Homepage – Like the one seen here
  • 4 different looks for social icons
  • 3 types of site layouts – default , fullwidth and boxed
  • 9 Page Templates
  • Integration with SlideDeck3 – A comprehensive WordPress slider plugin that lets you create content sliders as well as pull your already established content from 13 dynamic sources like YouTube, Vimeo, Pinterest, Instagram and a lot more.

Here’s a quick guide on using Responsive Pro to create your responsive website

1. Installing the theme

You can add a new theme using Administration Panel, cPanel or manually ( FTP ) . This article explains it better.

2. Creating your first Blog Post

Navigate to the Posts Tab on your WordPress dashboard, click on ‘Add New’ . Fill in the blank spaces – Title and content. You can either save it as a draft or publish the post. ‘Preview’ the post before publishing it.

Add New Post - Responsive Website

3. Creating Pages

Navigate to the Pages tab -> Click on ‘Add New’ -> Fill in content and select the template in ‘Page Attributes’ -> Hit publish and you’re done !

Add New page - Responsive Website

4. Creating Sliders

Navigate to the SlideDeck3 tab on your dashboard -> Select the type of slider you want to create ( Dynamic or Custom Content )

Add New Slider - Responsive Website

Save the slidedeck created and publish it using the following three methods

Publish Slider - Responsive Website

5. Theme options

Customize your theme using the theme options unique to Responsive Pro.

Select the Appearance tab -> Click on Theme Options

Theme Options - Responsive Website

You can personalize your theme like adding a favicon ; select the site layout from 3 options, select the social icon, customize the home page, select templates, set CSS styles and scripts and add plugins

Plugins Support - Responsive Website

Responsive Pro is WooCommerce compatible, has Events calendar plugin support and you can add more plugins too.

6. Menu Settings

You can select 4 separate menu locations using Responsive Pro. Here’s how –

Under Appearance -> Click on Menu -> Select the location in Menu Settings

Menu Settings - Responsive Website

Here’s what the Menu Locations look like –

Top Menu

Top Menu Location - Responsive Website

Header Menu

Header Menu Location - Responsive Website

Sub header Menu

Sub header Menu Location - Responsive Website

Footer Menu

Footer Menu Location - Responsive Website

7. Site Layout

Resonsive Pro offers 3 different site layouts

  • Default
  • Full-width layout
  • Boxed layout

Here’s how you can select the one of your choice –

Click on Appearance -> Choose Theme Options -> Click on Layouts -> Select the layout you want

Site Layout - Responsive Website

The front-end layouts would look like this –

Default Layout

Default Layout Front-end- Responsive Website

Full-width Layout

Full-width Layout Front-end - Responsive Website

Boxed Layout

Boxed layout Front-end - Responsive Website

8. Customize Home page

You can fully customize your homepage using Responsive Pro. It has an option to override the WordPress home page. Here’s how you can choose this option –

Theme Options – > Home Page -> Check Enable Custom Front Page

Customize homepage - Responsive Website

Here’s how the customized front-end of homepage looks like –

Homepage Front-end - Responsive Website

Configuring your blog post look-and-feel –

You can configure the look-and-feel of the blog post page in the following way –

Under Appearance -> Click on Theme Options -> Select Templates -> Check the options that you wish to see on your Blog Post Page ( Featured Image, Post Byline Comments, Tags, Date etc. )

Blog Post Page Options Back-end- Responsive Website

The front-end of Blog Post page looks like this –

Blog Post Page Front-end - Responsive Website

Similarly, you can configure the look-and-feel of a Single Post Page by checking options that you want under Templates

Single Post Page Options Back -end - Responsive Website

The front-end of Single Post Page looks like this –

Single Post page Front-end - Responsive Website

 

Customizing 404 Error page –

Under Appearance -> Click on Theme Options -> Select Templates -> Edit Title and Content of 404 Error page

404 Error Page Customization - Responsive Website

 

 

9. Social Icons

You can select custom social icons from theme options

Social icons - Responsive Website

For more on Responsive Pro , check out this video.

Conclusion

Being pioneers in responsive themes, CyberChimps very well know how to develop an all-pervasive theme that fits anyone’s needs. Responsive Pro is the best example of a theme that meets all requirements – as evinced by over 1.5 million downloads of the free version of responsive .

From selecting the layout, adding custom CSS and scripts, using eye-catching social icons and a powerful plugins support , Responsive Pro has all that it takes to make a website that turns heads.

Check out the websites that have used Responsive here .

The simple steps in this guide should help you in getting started with your website. Any questions ? Shoot a comment in the section below.

 

About the Author

Neha came aboard the CyberChimps team recently. She’s the one who keeps you updated with all the happenings at CyberChimps. She responds to your queries and is the go-to person if you have any out-of-the-box ideas.

1 Comment
Leave a Reply

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