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:

Download the latest Responsive theme from My Account > Downloads or the WordPress Repository
Login to your WordPress Dashboard
Go to Appearance > Themes > Add New
Upload the downloaded theme zip file
Install the Responsive theme
Activate it

FTP Installation

To install the Responsive theme via FTP

Download the Responsive theme zip from the 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

Starter Content for Responsive Theme

When you install the Responsive Theme you can publish the starter content to get started with Responsive Theme.

TO publish the starter content install the Responsive Theme. Navigate to Appearance > Customizer & just click on the publish button without making any customizations. You will have option to publish starter content only for the first time when you open the customizer.

Gutenberg Blocks Compatibility

If you are customizing any pages using Gutenberg Blocks those changes will not be preserved by Responsive Theme so your pages with different colors, typography will be displayed correctly with the Responsive Theme.

Responsive Theme Compatibility with WPML Plugin

You can translate your website to other languages using WPML Plugin. Responsive Theme is compatible with the WPML Plugin.

You can find more information integrating Theme with WPML Plugin here - https://wpml.org/documentation/getting-started-guide/theme-localization/.

Customizer Settings

Site identity

Enable Retina Logo (Responsive Pro) - Check if you are uploading the Retina Logo for the website.

Theme Options

Layout

Width - You can select the width of the website as full width or contained width here.

Container Width - You can set the width of container from here.

Style - Here you can select a layout 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 - 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.
Flat - This layout will remove the white background from the content. The content is displayed in a single container. The container Width will be applied to this layout.

Box Padding (px) - Padding for the selected Layout Style

Box Radius (px) - Radius for the selected layout style

Buttons

Padding - Left, right, top and bottom can be given to button.
Radius (px) - Border radius of all buttons. Here border radius is in pixels.
Border Width (px) - You can set the width of the button from here.

Form Inputs

Padding - Left, right, top and bottom padding can be given to
Radius (px) - Border radius
Border Width (px) - You can set the width of the form inputs from here.

Color Palletes Scheme

With Color palletes Scheme you can select any predetermined color scheme from which colors will be applied to header, text, links, etc.

Colors

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.

Box Background Color

Background color for selected box layout

Background Image (Pro)

Background Image for selected box layout

Alternate Background Color

Here you can select background color for pre, blockquotes, code etc.

General Text

Here you can update following color present in website.

Body Text Color
Heading ( H1 ) Color
Heading ( H2 ) Color
Heading ( H3 ) Color
Heading ( H4 ) Color
Heading ( H5 ) Color
Heading ( H6 ) Color
Meta Text Color

Links

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

Link Color
Link Hover Color

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.
Background Image (Pro) - Background Image for button.
Button hover Color - Button color will be visible on mouse hover.
Button Text Color - Color of the text on button.
Hover Text Color - Color for the button text on mouse hover.
Border Color - Border color for buttons.
Hover Border Color - Border color for buttons on mouse hover.

Inputs

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

Input Background Color - If button has any input field assigned then this color is used as background color for that input.
Background Image (Pro) - Background Image for input textbox
Input Text Color - If button has any input field assigned then this color is used as text 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.

Labels

Label Color - Text color for the label if any label is present.

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 separately for all individual heading tags - H1, H2, H3, H4, H5 & H6

Font Family
Font Weight
Font Style
Text Transform
Line Height
Letter Spacing
Font Color

Meta, Buttons, Input Fields

Here you can change above specified typography options for Meta items, Buttons

Header

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

Layout

Full Width header - Upon selecting this checkbox header will become full width other wise header width will be same as container width

Header Elements - Position of Site Branding & Navigation can be changed by using this option. Also any of those elements can be disabled by clicking on eye icon in front of the element name.

Header Layout - Here you can select the layout as Horizontal or vertical to display logo and menu accordingly.

Header Alignment - If the header layout is vertical, you can select the alignment for logo and menu as left, right or center.

Logo Padding (px) - Here you can give top, bottom, left and right padding to logo.

Header Widgets

Enable Header Widgets - Here you can enable or disable header widgets.

Widgets Position - Here you can select where you want to display the widgets, above header, beside logo or below header.

Widgets Alignment - Here you can select the alignment of the widgets as left, right, center, spread or space around.

Colors

Here you can update all the colors for your website header & added header widgets. Here are all the options whose color can be updated

Background Color - Background color for Header
Background Image (Pro) - Background Image for Header
Border Color - Color for header border
Site Title Color - Color for site title
Site Title Hover Color - Hover color for site title
Site Tagline Color - Color for site tagline

Header Widget

Text Color - Text color for header widget.
Background Color - Background color for header widget.
Background Image (Pro) - Background Image for widget
Border Color - Border color for header widget.
Links Color - Text color for link.
Links Hover Color - Hover color for links

Transparent Header

Enable on Complete Website - Select this option to enable the transparent header on the complete website.

Different Logo for Transparent Header - Check this checkbox to display the different logo for pages with the transparent header.

Site Content Padding (px) - Padding for the website content when a transparent header is enabled.

Disable the transparent header on certain pages - Select the appropriate checkboxes to disable the transparent header on those pages.

Transparent Header Colors - Select the colors for border, site title, site title hover, site tagline.

Transparent header Menu - Select the colors for menu elements when the transparent header is enabled.

Header Widget - Select colors for header widgets when transparent header is enabled.

Typography

Here you can update overall typography related to Site Title and Site Tagline. You can update following options

Font Family - Select font family from large number of Google fonts.
Font Weight - Select font weight.
Font Style - Select font family style from normal and italic.
Text Transform - Select between Default, Capitalize, Lowercase or Uppercase.
Font Size - Select font size.
Line Height - Give line-height from 1-4.
Letter Spacing - Give letter spacing upto 10.

Layout

Enable Search Icon in Menu - Enable / Disable search icon in the menu.
Enable Mobile Menu - Enable / Disable mobile menu.
Menu Breakpoint in pixels which will be used to decide which menu (Desktop or Mobile) should be displayed.
Style - (Dropdown / FullScreen / Sidebar) for mobile view.
Last Item in Menu - Select what you want to display as the last item in primary menu. This option will work only if you have primary menu set.
Search Style - If you have selected Search Icon as last item in above option then you can select it's style as default or full screen.

Colors

Active Menu Background Color - Background color for active menu.
Menu Item Link Color - Text color for menu link text.
Active Item Link Color - Text color for active menu link text.
Menu Item Link Hover Color - Hover color for link text.
Sub Menu Background Color - Background color for sub menus.
Sub Menu Link Color - Link color for sub menus.
Active Sub Menu Link Color - Link color for active sub-menu item.
Sub Menu Link Hover Color - Link color for sub menus.
Menu Toggle Background Color - Background color for mobile toggle button.
Menu Toggle Color - Toggle color for menu.
Background Image (Pro) - Background Image for transparent header menu

Typography

Here you can update overall typography related to Menu

Font Family - Select font family from large number of Google fonts.
Font Weight - Select font weight.
Font Style - Select font family style from normal and italic.
Text Transform - Select between Default, Capitalize, Lowercase or Uppercase.
Font Size - Select font size.
Line Height - Give line-height from 1-4.
Letter Spacing - Give letter spacing upto 10.

Sidebar

Typography

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

Font Family - Select font family from large number of Google fonts.
Font Weight - Select font weight.
Font Style - Select font family style from normal and italic.
Text Transform - Select between Default, Capitalize, Lowercase or Uppercase.
Font Size - Select font size.
Line Height - Give line-height from 1-4.
Letter Spacing - Give letter spacing upto 10.

Colors

You can update the colors for the sidebar background, heading, text, links from here.

Background Image (Pro) - Background Image for sidebar

Footer

Layout

Full Width Footer - Here you can set the width of the footer as full width. By default, the width is set as container width.

Footer Widgets

Number of Columns - You can select number of footer widgets here.
Padding - You can give padding to footer here.

Footer Bar

Copyright Text - Provide the Custom Copyright text to change the default text.
Hide Copyright Icon & Year - Check this checkbox to hide the default copyright icon & year.
Hide Powered By Responsive Theme - Select this option to remove the text 'Powered By Responsive Theme'.
Layout- Here you can select a layout 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.
Padding - Here you can give padding for the footer bar.

Social Links

You can provide links for following social icons if you want to display them

Twitter
Facebook
LinkedIn
Youtube
Google +
RSS Feed
Instagram
Pinterest
StumbleUpon
Vimeo
Yelp
Foursquare
Email Address

Colors

Here you can set Footer Background Color, Text Color, Links Color & Links Hover Color. Background Image (Pro) - Background Image for footer.

Typography

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

Font Family - Select font family from large number of Google fonts.
Font Weight - Select font weight.
Font Style - Select font family style from normal and italic.
Text Transform - Select between Default, Capitalize, Lowercase or Uppercase.
Font Size - Select font size.
Line Height - Give line-height from 1-4.
Letter Spacing - Give letter spacing upto 10.

Content Header

Layout

Disable Breadcrumb List - If selected page breadcrumbs will not be visible.
Alignment - You can select alignment to display breadcrumb as Left, Right or Center.

Colors

Here you can set Title Color & Description Color.

Typography

Here you can update overall typography related to Header Content Title, Description, Breadcrumb seperately. You can update following options

Font Family - Select font family from large number of Google fonts.
Font Weight - Select font weight.
Font Style - Select font family style from normal and italic.
Text Transform - Select between Default, Capitalize, Lowercase or Uppercase.
Font Size - Select font size.
Line Height - Give line-height from 1-4.
Letter Spacing - Give letter spacing upto 10.

Blog / Archive

Content Header

Enable Blog Page Title - If selected, you can give a title on the Blog page.
Blog Page Title - Here, you can edit the title of the Blog page.

Layout

Main Content Width - You can select the width of the content here for the blog page.
Entry Columns - You can select the number of columns to display blogs. Blog entries will be displayed in the number of columns you select.
Sidebar Position - You can select a layout for single post from following options
- Right Sidebar - Sidebar will appear on the right side. This is the most traditional way to show sidebar content.
- Left Sidebar - Sidebar will appear on the left side and the main content will be on the right side.
- No Sidebar - Sidebar will not be present and the content will span across entire container width.
Post Pagination (Pro) - You can select if the blog page or archive page should display all posts on single page or use the default option for pagination. If the Infinite option is selected first set of blog posts will be displayed and when a user scrolls to the bottom of page next set of posts will be loaded.

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

Content

Entry 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 the page.
Entry Featured Image
- Image Width Size (px) - Update the Featured image width size by slider. The default value will be used when slider is in the middle. Dragging the slider to left or right will decrease or increase the image width respectively. You can click the reset button next to the input field to get the default value.
- Style - Here you can choose if you want to display the featured image of the blog as default or stretched.
- Alignment - Here you can choose if you want to display the image at left, right, or center.
Entry Title
- Alignment - Here you can choose if you want to display the title of the blog page at left, right, or center.
Entry Meta
- Meta Elements - If you have kept Meta elements visible in above Post Elements options then you can decide the order and visibility of individual Post Meta including Author, Date, Categories, Comments.
- Meta Separator - Here you can edit the separator that will be present in between different meta elements.
- Meta Alignment - Here you can choose if you want to display the meta of the blog page at left, right, or center.
Entry Content
- Content Type - Choose if you want to display post content as Excerpt or full Content.
- Content Alignment - Here you can choose if you want to display the blog page content at left, right, or center.
- Excerpt Length - If you have chosen excerpt as post content, choose the total length of the excerpt to display.
- Read More Text - If you have chose excerpt as post content, you can edit the read more text here.
- Read More Type - If you have chosen excerpt as post content, you can choose the display of read more text as a link or button.

Typography (Responsive Pro)

Blog Title - Update the typography of the Blog Title.

Blog Post

Layout

Main Content Width - You can select the width of the content here for single blog post.
Sidebar Position - You can select layout for single post from following options
- 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.
- No Sidebar - Sidebar will not be present and content will span across entire container width.

Content

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 Featured Image
- Image Width Size (px) - Update the Featured image width size by slider. Default value will be used when slider is in the middle. Dragging slider to left or right will decrease or increase the image width respectively. You can click the reset button next to input field to get the dafault value.
- Style - Here you can choose if you want to display the featured image of the blog as default or stretched.
- Alignment - Here you can choose if you want to display the image at left, right or center.
Post Title
- Alignment - Here you can choose if you want to display the page title at left, right or center.
Post Meta
- Meta Elements - If you have kept Meta elements visible in the above Post Elements options then you can decide order and visibility of individual Post Meta including Author, Date, Categories, Comments.
- Meta Separator - Here you can edit the separator that will be present in between different meta elements
- Meta Alignment - Here you can choose if you want to display the meta of the blog page at left, right, or center.
- Disable Author Profile Box (Responsive Pro) - Enable or disable the authors biographical info after posts. Author biographical info can be added/updated from user update page.
Post Content
- Content Alignment - Here you can choose if you want to display the blog page content at left, right or center.

Typography (Responsive Pro)

Post Title - Update the typography of the Post Title.

Page

Layout

Main Content Width - You can select the width of the content here for pages here.
Sidebar Position - You can select layout for pages from following options
- 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.
- No Sidebar - Sidebar will not be present and content will span across entire container width.

Content

Page 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.
Page Featured Image
- Image Width Size (px) - Update the Featured image width size by slider. The default value will be used when the slider is in the middle. Dragging the slider to left or right will decrease or increase the image width respectively. You can click the reset button next to the input field to get the default value.
- Style - Here you can choose if you want to display the featured image of the page as default or stretched.
- Alignment - Here you can choose if you want to display the image at left, right, or center.
Page Title
- Alignment - Here you can choose if you want to display the title of the page at left, right, or center.
Page Content
- Content Alignment - Here you can choose if you want to display the blog page content at left, right, or center.

Typography (Responsive Pro)

Page Title - Update the typography of the Page Title.

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

Product Catalog Options
Product Options
Cart Options

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.

Product Catalog Options

Layout

Main Content Width - You can select the width of the content here for product page.

Sidebar Position - You can select layout for product page from following options

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.
No Sidebar - Sidebar will not be present and content will span across entire container width.

Shop Product

Catalog View - You can select tif you want to display the products in a grid or in a list here.

Content Alignment - Here you can choose if you want to display the content at left, right or center.

Shop Elements - Here you can set the order of Title, Category, Price, Ratings, Add to Cart and Short Description 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.

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.

Colors

Rating Color
Price Color
Add to Cart Button Color
Add to Cart Button Text Color
Add to Cart Button Hover Color
Add to Cart Button Hover Text Color

Product Options

Layout

Main Content Width - You can select the width of the content here for single product page.

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

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.
No Sidebar - Sidebar will not be present and content will span across entire container width.

Product Elements

Image Width - You can select the width of the product image on single product page.

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

Single Product Structure - Here you can set the order of Title, Category, Price, Ratings, Add to Cart, and Short Description 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 the page.

Cart Options

Layout

Enable Cross-sells - You can enable/disable cross-sell products from here.

First you have to select products for cross-sells in WooCommerce > Edit Product > Linked Products. Products selected as cross-sells will appear in cart when user adds the edited product in the cart.

Main Content Width - You can select the width of the content here for cart page.

Cart Icon Visibility - Enable or disable the cart icon visibility on all devices. If enabled cart icon will be displayed in the primary menu. Make sure that you have set the Primary Menu otherwise cart icon will not be displayed. With Responsive Pro Plugin, If the cart icon is set to be displayed on all devices, you can update cart icon, style, color & select if wish to display total cart value alongside mini cart icon.

Colors

Here you can change the text color, background color and hover color for Cart Buttons and Checkout Buttons.