How to Create a Responsive WordPress Website Using Responsive Pro

How to create a responsive WordPress Website

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.

Things to Consider for a Responsive WordPress Website

Things to Consider for a Responsive WordPress Website

What gives Responsive Pro that extra edge while creating a responsive website ?

  • Theme Options that make customizing your website a cakewalk
  • Responsive design – Adapts any device or screen sizes.
  • 2 separate Menu Locations – Header and footer menu
  • Fully customizable front page / Homepage
  • Social icons
  • 3 types of site layouts – Boxed, Content Boxed and Flat
  • Responsive Pro comes with other 35+ ready-to-use website templatesblock editor

Learn how to set up a yoga blog using Responsive Pro.

Create a stunning and user-friendly website with the power of the Responsive theme

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

1. Installing and activating the theme

Follow the below steps to install the Responsive theme manually from the WordPress admin dashboard:

Responsive theme
  • Login to your WordPress Dashboard
  • From your WordPress dashboard, go to Appearance > Themes > Add New
Add new theme
  • Upload the downloaded theme zip file
Upload theme
  • Install the Responsive theme
  • Activate it

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 posts

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 !

Page attributes

4. Menu Settings

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

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

go to appearances > Menus

Here’s what the Menu Locations look like –

Header Menu

Header

Footer Menu

footer menu

5. Site Layout

Responsive Pro offers 3 different site layouts

  • Boxed
  • Content Boxed
  • Flat

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

  • From the WordPress dashboard navigate to Appearance > Customize
  • On the next page, select Theme Options
theme options
  • Next, click on Layout option
Layout
  • On the next page, select the layout style you want for your website.

6. How to add & style the navigation menu?

To add a navigation menu, follow the steps below:

  1. From the WordPress dashboard navigate to Appearance > Menus
  2. Now, you need to click on Pages and View All. Select all the pages that you want to appear in your menu (use the checkboxes next to the pages’ names) and click on the Add to Menu button.
view all menus
  1. If you want to edit the name of the added Menu, look below the Menu Structure and click on the name of the page you just added. Let’s say we want to edit the name of the Resources and rename it to Media and to do it, we will click on Resources to rename it to Media (Refer the picture below).
menu structure
  1. Next, click on the Save Menu button to save the changes.

To change the style and look of the Navigation menu, follow the steps below:

  1. From the WordPress dashboard navigate to Appearance > Customize
  2. Next, go to Header > Layout. Then, you will get the below screen.
customize
  1. Now, from the left panel, you can
  • Change the position of header elements
  • Change the header layout
  • Change the header alignment
  • Change the logo padding
  • Enable or disable header widgets
  • Change the widgets position
  • Change the widgets alignment

After making all the changes, click on the Publish button to save all the changes and make it live.

  1. Social icons

To add social icons on the footer area, follow the steps below:

  • From the WordPress dashboard navigate to Appearance > Customize
  • On the next page, select Footer option
footer settings
  • Next, click on Layout option
layout settings
  • On the next page, scroll down to Social links section and add your social media links
social links

Here’s how your social icon will look like:

add social links

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 what people have to say about Responsive theme – Responsive theme testimonials.

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

Facebook
Twitter
LinkedIn
WhatsApp

Disclosure: This post contains affiliate links. That means if you make a purchase using any of these links, we will earn a commission without any extra cost to you. Thanks for your support.

Join over 30k users who use Responsive Theme for building professional websites.

Leave a Reply

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

*

Ready to Launch Your Website?

Ready to built your business website with the fast and fully customizable website templates? Get started for free and extend the settings with easy affordable plans.

Enjoy Extra 20% Off On All Plans - Limited Time Offer!