Responsive Theme

Installation

Responsive can be installed and used as any standard free WordPress theme. You can install it in two ways.

WordPress Admin Dashboard Installation

To install the Responsive theme manually from the WordPress admin dashboard:

  1. Download the latest Responsive theme from My Account > Downloads or the WordPress Repository

  2. Login to your WordPress Dashboard

  3. Go to Appearance > Themes > Add New

  4. Upload the downloaded theme zip file

  5. Install the Responsive theme

  6. Activate it

FTP Installation

To install the Responsive theme via FTP

  • Download Responsive theme zip from WordPress repository

  • Unzip the Responsive theme zip file

  • Open your WordPress site via FTP. We would recommend you to use FileZilla

  • From FTP, visit the root of the WordPress install

  • Now visit wp-content folder > themes

  • Upload Responsive unzipped file from step 2

  • After installation: Login to your WordPress Dashboard and activate it from Appearance > Themes

Customizer Settings

Appearance

In Appearance section you can design your website’s appearance.

Background Color

Here you can select background color for your website

Background Image

Here you can select background Image for your website. You can position your selected image.

Container

Here you can select a layout and container width for your website. There are 3 options to select from

Boxed - When Theme is newly installed or no layout is selected Default layout is selected. The container Width will be applied to this layout.

Content Boxed Layout - This layout is similar to previous layout regarding container width. Content will have white background color. The container Width will be applied to this layout.

Full Width / Contained - This layout is used to make the content full width. The content is displayed in a single container. The container Width will be applied to this layout.

Full Width / Stretched - This layout is used to make the container full-width irrespective of the container width.

Buttons

Here you can update colors & border radius for all the buttons on your website. Following is a list of all the options.

  • Button Color - Main button color.

  • Button hover Color - Button color will be visible on mouse hover.

  • Button Text Color - Color of the text on button.

  • Label Color - Color for the label if any label is present.

  • Input Background Color - If button has any input field assigned then this color is used as background color for that input.

  • Input Border Color - If button has any input field assigned then this color is used as border color for that input.

  • Input Border Color Focus - If button has any input field assigned then this color is used as border color for that input when such input element is selected.

  • Input Text Color - If button has any input field assigned then this color is used as text color for that input.

  • Padding - Left, right, top and bottom can be given to button.

  • Button Border Radius (px) - Border radius of all buttons. Here border radius is in pixels.

Here you can update your appearance settings for sidebar of your website.

  • Sidebar Width (%) - You can set width for sidebar and the content will adjust automatically.

  • Sidebar Background Color - Update the background color for sidebar.

  • Padding (px) - You can select padding for each individual side for your sidebar or you can click on link button which will update all 4 padding values at a time.

  • Sidebar Radius - Update the border radius to make sidebar corners round.

  • Sidebar Heading Color - Color for all the headings present in sidebar.

  • Sidebar Text Color - Color for text in sidebar.

Scroll To Top

In this section you can decide if you want to display scroll to top button or not. You can choose devices (Mobile / Desktop) to display this button, Position of button, colors for button etc.

In Header section you can select options for your website’s menu and header section

Header Menu Padding (px) - Here you can give top, bottom, left and right padding to menu.

Here you can also update all the colors for your website menu

  • Enable Menu Background gradient - If this option is checked, menu will have a gradient color background with Menu Background Color & Menu Background Color 2.

  • Menu Background Color - Primary Background color for menu

  • Menu Background Color 2 - This is the second color for the menu gradient background. The gradient will be applied If Enable Menu Background gradient option is checked.

  • Menu Text Color - Text color for all menu items.

  • Menu Hover Text Color - Hover text color for all menu items.

  • Active Menu Color - Color for active menu item.

  • Menu Hover Color - Hover color for menu item.

Mobile Menu

Here you can select options for displaying Mobile Menu

  • Menu Style Layout (Dropdown / FullScreen / Sidebar) for mobile view.

  • Menu Breakpoint in pixels which will be used to decide which menu (Desktop or Mobile) should be displayed.

  • Toggle Button Color select color for Toggle button to expand menu in mobile

  • Border Color Select color for borders in mobile menu

Sub Menu

  • Container Border (px) Border size in pixels for Submenu container

  • Submenu Border Color Border color for Sub Menu

  • Submenu Divider Color Divider color for Sub Menu

  • Submenu divider (checkbox) Check this box if you wish to show divider between 2 submenus

  • Submenu Color Select color for Submenu

Header Section

Header Layout - Select layout for header from following options

  • Logo Left - Keep the logo to left and menu to the right side of the website.

  • Logo Center - Keep the logo to center and menu will appear below the logo.

  • Logo Right - Keep the logo to right and menu to the left side of the website.

Header Menu Position - Select menu position from the following options

  • Above Header - To display menu above header, on the top.

  • Default - This will display the default layout of header which is logo on the left side and menu on the right side of the website.

  • Below Header - To display menu below header.

Header Width - Select header width from the following options

  • Container - This will set the width of the header same as the width given to container.

  • Full - This will set the width of the header stretched to full screen.

Blog

In Blog section you can select layouts for Blog entries page (Blog page) & Single post page

Blog Entries

Post Content - Choose if you want to display post content as Excerpt or full Content.

Excerpt Length - If you have chose excerpt as post content, choose the total length of excerpt to display.

Blog Posts Index Layout - You can select layout for blog page from following options

  • Default - This layout will be selected by default when theme is installed.

  • Right Sidebar - Sidebar will appear on right side. This is the most commonly used layout for sidebar.

  • Left Sidebar - Sidebar will appear on the left side and main content will be on the right side.

  • Right Sidebar Half Page- Sidebar will be on the right side and sidebar will take half width of container, which will make the main content width similar to sidebar.

  • Left Sidebar Half Page- Sidebar will be on the left side and sidebar will take half width of container.

  • Full Width Page (No Sidebar) - Sidebar will not be present and content will span across entire container width.

  • Blog 2 Column - Blog entries will be displayed in 2 columns

  • Blog 3 Column - Blog entries will be displayed in 3 columns

  • Blog 4 Column - Blog entries will be displayed in 4 columns

Post Elements - Here you can set the order of Title, Meta, Featured Image and Content in which they appear. You need to drag the elements to change their order. Also you can toggle click on the eye icon in front of each element to show / hide that element on page.

Post Meta - If you have kept Meta elements visible in above Post Elements options then you can decide order and visibility of individual Post Meta including Author, Date, Categories, Comments.

Container Background Color - Select the background color for Blog Entries page.

Single Post

Sidebar Position - You can select layout for single post from following options

  • Default - This layout will be selected by default when theme is installed.

  • Right Sidebar - Sidebar will appear on right side. This is the most traditional way to show sidebar content.

  • Left Sidebar - Sidebar will appear on the left side and main content will be on the right side.

  • Right Sidebar Half Page- Sidebar will be on the right side and sidebar will take half width of container, which will make the main content width similar to sidebar.

  • Left Sidebar Half Page- Sidebar will be on the left side and sidebar will take half width of container.

  • Full Width Page (No Sidebar) - Sidebar will not be present and content will span across entire container width.

Post Elements - Here you can set the order of Title, Meta, Featured Image and Content in which they appear. You need to drag the elements to change their order. Also you can toggle click on the eye icon in front of each element to show / hide that element on page.

Meta Elements - If you have kept Meta elements visible in above Post Elements options then you can decide order and visibility of individual Post Meta including Author, Date, Categories, Comments.

Page

Layout

Select a layout for your website pages.

Sidebar Position - Select sidebar position for pages.

  • Default - This layout will be selected by default when theme is installed.

  • Right Sidebar - Sidebar will appear on right side. This is the most traditional way to show sidebar content.

  • Left Sidebar - Sidebar will appear on the left side and main content will be on the right side.

  • Right Sidebar Half Page- Sidebar will be on the right side and sidebar will take half width of container, which will make main content width similar to sidebar.

  • Left Sidebar Half Page- Sidebar will be on the left side and sidebar will take half width of container.

  • No Sidebar - Sidebar will not be present and content will span across entire container width.

Post Elements - Here you can set the order of Title, Featured Image and Content in which they appear. You need to drag the elements to change their order. Also you can toggle click on the eye icon in front of each element to show / hide that element on page.

Footer Width - Here you can set the width of the footer as container width or full width.

Footer Bar Layout - Here you can select from two options:

  • Horizontal - In this layout, the items will appear side to side.

  • Vertical - In this layout, the items will appear below each other.

Footer Border Width - Here you can set the width for the border of the footer.

Footer Border Color - Here you can choose the border color of your choice for footer.

Social Icons

Depending on the layout you selected social icons position will be different. You can provide links for following social icons

  • Twitter

  • Facebook

  • LinkedIn

  • Youtube

  • Google +

  • RSS Feed

  • Instagram

  • Pinterest

  • StumbleUpon

  • Vimeo

  • Yelp

  • Foursquare

  • Email Address

Footer Widgets Column - You can select number of footer widgets here.

Footer Padding - You can give padding to footer here.

Colors

Here you can set Footer Background Color & Footer Text Color.

General Typography

Body

Here you can update overall typography related to body. You can update following options

  • Font Family - Select font family from large number of Google fonts.

  • Font Weight

  • Font Style

  • Text Transform - Select between Default, Capitalize, Lowercase or Uppercase.

  • Font Size

  • Line Height

  • Letter Spacing

  • Font Color

All Headings

Here you can update overall typography of all headings present on your website. You can update following options

  • Font Family

  • Font Weight

  • Font Style

  • Text Transform

  • Line Height

  • Letter Spacing

  • Font Color

This options are also available separately for all individual heading tags - H1, H2, H3, H4, H5 & H6

Here you can change above specified typography options for Main Menu, Dropdowns of menu and Mobile menu.

Here you can update following color of Links present in website.

  • Link Color

  • Link Hover Color

Extras (Theme Options)

Theme Elements

  • Enable Sticky Header - If selected header will be sticky and on scrolling page header will be always visible.

  • Disable Breadcrumb List - If selected page breadcrumbs will not be visible

  • Enable featured imaes - If enabled featured image will be displayed displayed on the blog page.

Blog Page Settings

Exclude Categories from Blog page - Selected the categories which you wish not to be displayed on the blog page.

Scripts

If you want to embed any scripts in header or footer you can add those in this section

Embeds to header.php - Scripts added here will be embedded in header of your website.

Embeds to footer.php - Scripts added here will be embedded in footer of your website.

WooCommerce

WooCommerce Integration Overview in Responsive Theme

Responsive theme integrates nicely with WooCommerce. All WooCommerce elements automatically adapt to the rest of your Responsive theme powered website and take colors, fonts out of the box from the theme customizer settings. That way, you can have your shop up and running immediately with minimum setup. Let’s take a look!

WooCommerce options

Please be sure you have WooCommerce plugin installed. Once you have it installed, you will find a dedicated tab for WooCommerce under the customizer. Here you can find the following options

  • General

  • Store Notice

  • Product Catalog

  • Product Images

  • Checkout

  • Single Product

  • Shop

  • Colors

Store Notice

You can use this feature to show sitewide notice / promotion to users.

Product Catalog

Using this feature you can select what you want to display on shop page, category pages, product sorting, products per row & rows per page.

Product Images

You can update width and height of product images & thumbnails using this option. Using this feature you can select ratio to crop thumbnail images.

Checkout

You can update settings for ‘company name’, ‘address line 2’ and ‘phone’ fields on checkout page using this option. You can decide to make those fields hidden, optional or required. Here you can set Privacy policy page and Terms & Conditions page. Under Privacy policy you can provide text which will be displayed to users on checkout.

General

Sale Notification - You can select from different types of sale notifications designs to add sale bubble on shop and product pages.

  • None - No sale notification.

  • Default - Default WooCommerce notification.

  • Custom String - You can provide any string here which will be displayed as sale notification. To display discount percentage of product keep ‘-[value]%’.

Sale bubble style - You can select one of the style for sale notification from following options

  • Circle - Filled circle.

  • Circle Outline - Hollow circle with colored outline.

  • Square - Filled square.

  • Square outline - Hollow square with colored outline.

Shop page layout

You can make changes to shop page layout by following Customizer > Layout > Shop. You can click on eye icon to make individual shop page element visible or hidden, also you can change order of elements in which they are displayed.

Single product layout

You can make changes to product page layout by following Customizer > Layout > Single Product. You can click on eye icon to make individual shop page element visible or hidden, also you can change order of elements in which they are displayed.

Gallery Layout - Here you can change layout for displaying product gallery images.

  • Horizontal - This is the default layout in which images from product gallery are displayed below the main image.

  • Vertical - With this option product gallery images will be displayed to left of the main image in vertical fashion