Responsive Gutenberg Addons

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 > Plugins > Add New

  4. Upload the downloaded plugin zip file

  5. Install the Responsive Addons plugin

  6. Activate it

FTP Installation

To install the Responsive theme via FTP

  • Download Responsive plugin zip from WordPress repository

  • Unzip the Responsive plugin 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 > plugins

  • Upload Responsive plugin unzipped file from step 2

Begin creating or editing a page or post

Create a post or a page that you wish to build with the Gutenberg editor.

Click on the + icon and scroll down to the Responsive Blocks section

Post Carousel

Post Carousel provides options to showcase custom post types with carousel layout. It provides an option to select available post types – posts, pages, media, or any CPT you have. It also offers taxonomy controls and predefined controls for every part of the post like Featured Image, Excerpt, Author, etc.

General

Post Author - Hide or Display the name of the author of the post.

Post Date - Hide or Display the published date of the post.

Post Content - Hide or Display the content of the post. If you choose to display the content, a slider will appear for you to select the content length of the post.

Columns - Decide the number of columns to display for grid.

Order by option allows you to order posts according to date or alphabetically dependent on the title.

Category controls allow you to choose posts according to categories or tags.

Orientation for the icon and a post timeline can be set to Center, Left, Right from Orientation. Arrow Alignment can be set vertically top, bottom, or center with respect to timeline card.

Carousel tab offer options to customize the post slider. The options are –

  • Pause On Hover

  • Autoplay

  • Autoplay speed

  • Infinite Loop

  • Transition Speed (ms)

  • Show Arrows & Dots

  • Arrow Size

  • Arrow Border Size

  • Arrow Border Radius

Testimonial

Testimonials are customer reviews that can be displayed on the site to add credibility. Testimonial block allows you to display a single testimonial block on your site.

Font-Size - Choose the font-size for your testimonial.

Cite Alignment - Choose left, center, or right as the alignment of the text.

Responsive Post and Page Grid

This block provides options to showcase custom post type anywhere on the page. It provides category controls to choose categories or tags. It also offers predefined controls for every part of the post like Featured Image, Title, Excerpt, author, etc.

Post and Page Grid Settings

Under the Post and page grid settings tab, Content Type option allows choosing post types – posts or pages. Order by option allows you to order posts according to date or alphabetically dependent on the title. Category controls allow you to choose posts according to categories or tags.

Orientation for the icon and a post timeline can be set to Center, Left, Right from Orientation. Arrow Alignment can be set vertically top, bottom, or center with respect to timeline card.

Post and Page Grid Content

Display Section Title - Hide or Display a title on top of the post grid. If you choose to display the title, an input box will appear for you to write a title.

Display Featured Image - Hide or Display featured image of post/page if there is one.

Display Title - Hide or Display the title of the post.

Display Author - Hide or Display the name of the author of the post.

Display Date - Hide or Display the published date of the post.

Display Excerpt - Hide or Display the excerpt of the post. If you choose to display the excerpt, a slider will appear for you to select the excerpt length of the post.

Display Continue Reading Link - Hide or Display a continue reading link for the post. If you choose to display the link, an input box will appear for you to customize continue reading text.

Post and Page Grid Markup

Post Grid Section Tag section - You can select the tag that you want to allot to the grid section such as div, header, section, main, aside, footer.

Section Title Heading tag - You can select the tag that you want to allot to the section title from H2 to H6.

Padding

Space can be managed for the content of the timeline card from the Padding tab.

Advance Column

Advanced Columns block acts as an outer wrapper and allows adding any Gutenberg block within it.

General

Columns - Decide the number of columns to display.

Column Gap option allows you to adjust the space between two columns.

Container Width controls allow you to choose a width for the columns. You can give a custom width of your choice to the columns from here.

Spacing

Spacing tab offer options to customize the post slider. The options are –

  • Top Padding

  • Bottom Padding

  • Left Padding

  • Right Padding

  • Top Margin

  • Name Bottom Margin

Border

Border Style - You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it

Border Radius - You can give border-radius to the columns from here.

PRO PLUGIN

Testimonial Carousel

Testimonials are customer reviews that can be displayed on the site to add credibility. Testimonial block allows adding a number of testimonials in a nice slider.

General

Number of Testimonials - Decide the number of testimonials to display in the slider.

Columns - Decide the number of columns to display.

Cite Alignment - Choose left, center, or right as the alignment of the text.

Carousel tab offer options to customize the post slider. The options are –

  • Pause On Hover

  • Autoplay

  • Autoplay speed

  • Infinite Loop

  • Transition Speed (ms)

  • Show Arrows & Dots

  • Arrow Size

  • Arrow Border Size

  • Arrow Border Radius

Colors

Under the Colors tab, color options are available for Background, Testimonial, Name, Company and Arrows & Dots.

Typography

Under the Typography tab, options for font size, font-weight, and line-height are available for Testimonial, Name, and Company.

Border

Border Style - You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it

Border Radius - You can give border-radius to the background of the grid from here.

Spacing

Spacing tab offer options to customize the post slider. The options are –

  • Gap Between Content & Dots

  • Column Gap

  • Content Padding

  • Testimonial Bottom Margin

  • Name Bottom Margin

Post Timeline

Post Timeline block allows you to choose Custom Post Type and displays them in the timeline. It provides an option to select available post types as posts or pages

Post Timeline Settings

Under the Post timeline settings tab, Content Type option allows choosing post types – posts or pages. Order by option allows you to order posts according to date or alphabetically dependent on the title. Category controls allow you to choose posts according to categories or tags.

Orientation for the icon and a post timeline can be set to Center, Left, Right from Orientation. Arrow Alignment can be set vertically top, bottom, or center with respect to timeline card.

Post and Page Grid Content

Display Section Title - Hide or Display a title on top of post timeline. If you choose to display the title, an input box will appear for you to write a title.

Display Featured Image - Hide or Display featured image of post/page if there is one.

Display Title - Hide or Display the title of the post.

Display Author - Hide or Display the name of the author of the post.

Display Date - Hide or Display the published date of the post.

Display Excerpt - Hide or Display the excerpt of the post. If you choose to display the excerpt, a slider will appear for you to select the excerpt length of the post.

Display Continue Reading Link - Hide or Display a continue reading link for the post. If you choose to display the link, an input box will appear for you to customize continue reading text.

Post and Page Grid Markup

Post Grid Section Tag section - You can select the tag that you want to allot to the grid section such as div, header, section, main, aside, footer.

Section Title Heading tag - You can select the tag that you want to allot to the section title from H2 to H6.

Padding

Space can be managed for the content of the timeline card from the Padding tab.

Content Timeline

Content Timeline allows displaying historical events with vertical timeline items. The block contains various customization options; you can add a title, description, icon, date to the timeline items.

General

Number of Items - You can select the total number of items to display in a grid.

Orientation for the icon and a post grid can be set to Center, Left, Right from Orientation.

Timeline Event

Heading tag - You can select the tag that you want to allot to the section title from H2 to H6.

Border Radius - You can give border-radius to the background of the grid from here.

Padding - Space can be managed for the content of the grid from the Padding tab.

Date Settings

Display Date - Hide or Display the published date of the post.

Date Format - Select a format for the date.

Date Settings - A date can be set for individual timeline card. If the option β€˜Display Post Date’ is set as ON, then add a date for each timeline card individually.

Typography

Under the Typography tab, options for font size, font-weight, and line-height are available for Date, Heading and Content.

Colors

Under the Colors tab, color options are available for Date, Heading, and Content.

Icon List

This block allows you to place an icon in a list format. You can select from 62 icons under Icon Settings tab.

Icon Color Settings

Under the Colors tab, color options are available for Text, Icon, Icon Background, Icon Border.

Buttons Group

This block allows you to place a number of buttons in a group format.

General

Under the General tab, you can select the button alignment as left, right, or center.

Button Settings

Under the Colors tab, color options are available for Text, Background, Border.

​

​

​

​

​

​

​