Features Box

h-code-document-text-block
Add styled features box to any page/post/portfolio post. 10 different features box style with style and configuration settings.

Please follow below steps to use “Features Box” shortcode.

  • Step 1: Login to WordPress Admin section.
  • Step 2: Add/Edit any page/post/portfolio post.
  • Step 3: Click on “+” button (Add New Element), it will show the popup with all shortcodes.
  • Step 4: Click on H-Code tab, it will show all shortcodes of H-Code theme. Now click on “Features Box” shortcode.
  • Step 5: Follow below inputs/settings and see “Features Box” preview in frontend.

General (tab)

If Feature Style 1 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Select Et-Line Icon Type – Select Icon from pre-defined list of icons.

Number Text – Add text for number.

Title – Add text for title.

Description – Add content for description.

Enable Separator – Yes/No options

General (tab)

If Feature Style 2 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Select Et-Line Icon Type – Select Icon from pre-defined list of icons.

Title – Add text for title.

Description – Add content for description.

General (tab)

If Feature Style 3 is selected:

Heading Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Select Et-Line Icon Type – Select Icon from pre-defined list of icons.

Title – Add text for title.

Description – Add content for description.

Enable Separator – Yes/No options

General (tab)

If Feature Style 4 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Blog Post – Select blog post.

General (tab)

If Feature Style 5 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Blog Post – Select blog post.

Excerpt Length – Enter numeric value like 20

Enable Separator – Yes/No options

General (tab)

If Feature Style 6 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Title – Add text for title.

Subtitle – Add text for Subtitle.

Description – Add text for description.

Currency Symbol – Set currency symbol

Price – Add your price

Price – Set button URL and text.

Button Link – Set button URL and text.

Active Feature – Select YES to mark as active feature

General (tab)

If Feature Style 7 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Select Et-Line Icon Type – Select Icon from pre-defined list of icons.

Title – Add text for title.

Description – Add content for description.

Enable Separator – Yes/No options

General (tab)

If Feature Style 8 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Image – Select or upload image

Title – Add text for title.

Description – Add content for description.

Enable Icon – Yes/No options

Enable Star – Yes/No options

General (tab)

If Feature Style 9 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Select Et-Line Icon Type – Select Icon from pre-defined list of icons.

Number Text – Add number text.

Title – Add text for title.

General (tab)

If Feature Style 10 is selected:

Feature Style – Select feature style from 10 pre-defined styles (Feature Style 1, Feature Style 2, Feature Style 3, Feature Style 4, Feature Style 5, Feature Style 6, Feature Style 7, Feature Style 8, Feature Style 9, and Feature Style 10). Each style has preview image, it will help you to select best style you like.

Image – Select or upload image

Title – Add text for title.

Description – Add content for description.

Configuration (tab)

Settings are different as per feature style selected:

Select Icon Size – Select icon size from pre-defined size list.

Icon Color – Set icon color.

Title Color – Set title text color.

Style (tab)

Settings are different as per feature style selected:

Padding – Apply padding with pre-defined padding classes or specify your custom padding for desktop/tablet/mobile devices.

Margin – Apply margin with pre-defined margin classes or specify your custom margin for desktop/tablet /mobile devices.

Extras (tab)

Extra ID – Define element id (The id attribute specifies a unique id for an HTML element)

Extra Class – Add additional CSS class to this element if you wish, you can define multiple CSS class with use of space like “Class1 Class2”