Responsive Theme
Responsive can be installed and used as any standard free WordPress theme. You can install it in two ways.
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
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
In Appearance section you can design your website’s appearance.
Here you can select background color for your website
Here you can select background Image for your website. You can position your selected image.
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.
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.
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 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.
In Blog section you can select layouts for Blog entries page (Blog page) & Single post page
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.
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.
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.
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.
Here you can set Footer Background Color & Footer Text Color.
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
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
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.
Exclude Categories from Blog page - Selected the categories which you wish not to be displayed on the blog page.
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.
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!
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.
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.
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
