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

Default - When Theme is newly installed or no layout is selected Default layout is selected

Full Width Boxed Layout - This layout is used to make the content full width. The content is displayed in a single container. Content will have borders around it.

Full Width Without Boxes - This layout is similar to previous layout regarding container width. However with this layout content will not have borders around it. Also with this layout you can select different Header Color & Site Title Color for your website.

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.

  • 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 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

Here you can 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 Menu Style Layout (Dropdown / FullScreen / Sidebar) for mobile view. Also you can set custom Menu breakpoint in pixels which will be used to decide which menu (Desktop or Mobile) should be displayed.

Header Section

Header Layout - Select layout for header from following options

  • Default - This option will be used by default after installing theme.

  • 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.

Blog

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

Blog Entries

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.

Copyright Text - Update the copyright text for your website.Display Powered By WordPress Link - If checked Powered By WordPress Link will be displayed in the footer.

Choose Footer Widgets Layout - You can select footer layout from following options

  • Default 3 Columns - By default this layout will be used and widgets will be displayed in 3 columns

  • 2 Column Layout - Display footer widgets in 2 columns.

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 Blog Title - If enabled you need to specify title for blog page which will be displayed on the blog page.

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

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

  • Store Notice

  • Product Catalog

  • Product Images

  • Checkout

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