What is a Feature Box Addon

Feature Box addon lets you display your features, tag messages, or something with a good title, content display, and focused elements. The SP Page Builder Pro feature box will display your featured content in the most concentrated way for maximum exposure.

How to Add a Feature Box Addon

You can add a Feature Box addon to your page from the SP Page Builder sidebar. Simply drag the addon from the Addons panel and drop it on the section of the page where you want to add a Feature Box addon.

Feature Box Settings

When you click on the Feature Box addon, the addon inline editor will open up. You can access the Feature Box settings and customize the addon to fit your needs. The Feature Box Settings come with Four different tabs: 

• Media
• Icon
• Title
• Content

Media

The Media tab comes with a Media Type option that lets you access the settings of your used icon or image or if you have used both icon and image in your Feature Box addon.

Media Type: Icon

Choose this option if you want to set an Icon in your Feature Box. Icon media type comes with the following settings:

• Icon: Replace the icon according to your preference from a list of different icons in the Icon Library.

• Position: Choose where you want to position your chosen icon in the Feature Box. 

Media Type: Image

Choose this option if you want to set an image in your Feature Box. Image media type comes with the following settings:

• Image: Choose what image you want to set in your Feature Box and upload it from the Media Manager.
• Margin: Set the top, right, bottom, and left margins using these fields. The value you put is always in pixels(px).
• Position: Choose the position where you want to set your chosen image in the Feature Box. Choose from a dropdown list of different image positions.
• Alt Text: Add ALT text for your image in the Feature Box addon for creating a better user experience for your visitors.

Media Type: Both

Choose this option if you want to use both icons and Images in your Feature Box. This media type comes with the following settings: 

• Icon: Replace the icon according to your preference from a list of different icons in the Icon Library.
• Image: Choose what image you want to set in your Feature Box and upload it from the Media Manager.
• Margin: Set the top, right, bottom, and left margins using these fields. The value you put is always in pixels(px).
• Position: Choose the position where you want to set your chosen image and icon in the Feature Box. Choose from a dropdown list of different options.

Icon

The Icon settings let you customize the icon you have chosen for your Feature Box. Please note that the settings only apply for editing icons and not images.

• Icon size: Set an optimum icon size for your chosen icon.
• Padding: Define paddings for top, right, bottom, and left areas. Padding is the space between the content of the element and its border. 
• Top Margin: Set an optimum distance from the top element.
• Bottom Margin: Set an optimum distance from the bottom element.
• Background Color: Add the icon Background color as per your design requirement. You can use the color picker tool to add the desired color you want.
• Hover Background Color: Set the background color of your icon that will be displayed upon hovering.
• Border Width: Set the border width of the divider border. Enter the desired digit as per your design requirement.
• Border Color: Add the border color as per your design requirement. You can use the color picker tool to add the desired color you want.
• Border Radius: Add the Border radius as per your design requirement. Border radius is for the corner of the border to be round or straight.

Title

Use this tab to add a title to the section you just added with the addon.

• Title: Add a title on top of your feature box.
• HTML Element: The <h1> to <h6> tags are used to define the HTML headings according to the importance. 
• Margin: Create your custom space around your title.
• Padding: Create your custom space around your title inside your row.

Content

In this addon content is everything. Use this editor field to enter your content here. Arrange your content in your desired way using this content field. 

Link Settings

Use the Link Settings to convert your feature box Title, image/icon, or both into a Hyperlink. Click on the Link icon on the inline editor. This should open up the Link settings where you can choose between the options URL, Menu, and Page.

• For URL, simply paste the web address you want to link to into the first field.
• For Menu, select the option you want to link to from the dropdown list. Note that the options on this list are all Menu Items that exist on your website.
• For Pages, select the option you want to from the dropdown list. Like Menu, these options are all existing Pages available on this website.

Lastly, you can enable the option Open in New Tab to open this link in a new tab and No Follow to tell search engines to ignore this link.

• URL Will Be Used For:  Choose where you want to use your link from a dropdown menu list of available options.

Button Settings

Use this setting in case you want to set a button inside your Feature Box. The Button Settings comes with all the options necessary to create a fully customized button. The Button Settings come with the following tabs:

• Basic
• Icon
• Typography
• Link
• Color

Basic

The basic settings let you create a button and apply a basic style to it. 

Button tab:

• Label: Enter the button text here. Leave it blank if you don’t want any button.
• Style: You can choose a desired button style from the given list.
• Appearance: You can choose a suitable button appearance from the list.
• Shape: Choose your button shape from the list using this option.

Options tab:

• Size: There are numerous options you can choose from to define your button size.
• Full Width: Set this option to ‘Yes’ if you want a full-width button. Leave that to ‘No’ if you don’t.
• Margin: Set an optimum distance around your button.

Icon

Button Icon lets you choose any icon that you want to place inside your button.

• Button Icon: Choose your desired icon from a list of available icons in the Icon Library.
• Icon Position: Choose whether you want to set the icon position to the left or right of your button text.

Link

Add a link to your added button using the Link tab options.

• For URL, simply paste the web address you want to link to into the first field.
• For Menu, select the option you want to link to from the dropdown list. Note that the options on this list are all Menu Items that exist on your website.
• For Pages, select the option you want to from the dropdown list. Like Menu, these options are all existing Pages available on this website.

Lastly, you can enable the option Open in New Tab to open this link in a new tab and No Follow to tell search engines to ignore this link.

Color

Use the Color tab settings to edit the color of your added button. The Color tab comes with the following two tabs:

• Normal
• Hover

Normal

This tab lets you change the color of your button’s background and the color of the text inside your button.

Hover

This tab lets you change the color of your button’s background and the color of the text inside your button upon hovering.

Learn more about Color settings here.