booster addons
creative elementor bundle
Purchase Now
Purchase Now
Purchase Now

Home - Widgets - Price Box

Price Box

Preview Widget
Preview Widget
Getting Started
General Settings
Heading Section
Price Section
Icon Section
Content Section
Button & Ribbon Sections
Heading & Price Areas Styling
Icon & Content Areas Styling
Button & Ribbon Areas Styling
Areas Background Styling
Price Section Settings

More Widgets

• Pricing Plan
• Price Listing
• Testimonial
• Business Hours

# Getting started

Creating a price box is one of the most important tasks to sell your services.A Price box must be simple but at the same time have a unique identity that makes it stand out.The price box widget is here to give you all the tools required to create the perfect price box with its multi sections feature and the ability to customize the styling for pretty much everything.

Lets dive into the options and customization available in this exceptional widget.

General Settings

The general settings section will be used to manage the following 6 price box components : 

  • Heading section : Enable the use of a title and sub heading.
  • Icon section : Enable a section with an icon/image.
  • Price section : Enable the use of pricing and discounts with a duration (example 500$ per month).
  • Content section : Enable a section that you can use to list your features and services.
  • Button section : Enable the use of a purchase button.
  • Ribbon section : Enable a ribbon on your price box.

This section also offers you the option to specify a go to link on click.You can click on the link options button(The cog wheel on the right) to enable the 'open in new window' and the 'no follow' options.

Heading Section

The heading section is going to be used to define your price box heading and sub heading elements.

  • Heading Title :  A title name for your price table.
  • Sub-heading : An optional second heading or small more detailed text about your service.
  • Heading & Sub Heading HTML Tags : These controls will be used to choose heading tags for the search engine optimization.
  • Alignement : Align the heading section in the price box to meet your needs.

Price Section

The price section is where you can setup the pricing for your price box.

  • Price : Define the price of your price box service.
  • Currency Symbol : Define the desired currency.
  • Enable Discount : Enable the use of a discount price and fill in the original price.
  • Offer Duration : Specify an optional duration text.For example if its a per month or per year deal.

Icon Section

The icon section will be used to select an icon or upload an image to add more design to the widget.

  • Alignement : Align the price section in the price box.
  • Icon Or Image : Choose if you want to use an image or an icon.
  • Choose Icon / Image : Choose an icon form our extensive icon libraries or upload an image if you want to use that instead.

Content Section

This section is where you will setup your services or features list.You can add a text item to the list by clicking on the add item at the bottom of this section.For each row you have the following options:

  • Row Text : The name of the service or a description text.
  • Icon : Choose an icon from the list.This icon will be placed on the left side of the text by default.
  • Enable Custom Colors : Enable the use of custom colors for this item.This is for both the normal and hover styles.
  • Colors : Change the color schemes for the text and background but also for the icon.This is also available for the hover state of the item.
  • Border : Add a border for the row item to add even more style.

Button & Ribbon Sections

The button section will be used to define your button text and alignement with the possibility to use an icon along the text.You can also define a ribbon text in the ribbon section.

  • Button Text : Specify the text for your button.
  • Button Icon : Choose one of the many icons available.
  • Button Position : Horizontally position the button inside the price box.
  • Icon Alignement : Align the icon next to the button text.
  • Ribbon Text : Define the text for the ribbon.

Heading & Price Areas Styling

These two sections will be used to style to change all the visual aspects for the heading and price components.

  • Heading Area Style

Customize the style for the heading and sub heading.

-Enable Hover : Enable the styling for the heading hover.

-Typography : Customize the font family, font size, and all the other text properties for the heading and sub heading.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Colors : Change the heading sub heading text colors with the possibility to use gradient colors.

-Shadows & Margins : Add shadows to your text elements and change the margin values to control the space between them.

  • Price Area Style

You have full control over the design of the price area text elements.

-Enable Hover : Enable the styling for the price section hover.

-Typography : Change the text properties for the price, currency, discount, and duration.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Colors : Change the colors for the price area text elements with the possible use of both solid and gradient colors.

-Shadows : Create shadows for your text to create a unique style.

Icon & Content Area Styling

Icon and Content styling section is where you change the design for the icon and features list.

  • Icon Area Styling

Customize the icon and image settings.

-Icon / Image Size : Change the size for the icon or for the image.

-Enable Hover : Enable the styling for the icon hover.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Border & Box Shadow : Add a border and a box shadow to your icon/image.You can also change the border radius to change their shape.

  • Content Area Style

This section is going to be used to style your services and features list.

-Enable Hover : Enable the styling for the content section hover.

-Enable Odd & Even : Enable this if you want to use a different style for odd and even rows.This will add an 'even row' styling area at the bottom of this section.

-Content Alignement : Horizontally align the content section in the price box.

-Content Typography : Change the text properties for your services list.

-Icon Size : Change the icon size for the row items that have a selected icon.

-Row Padding : Control the rows inner space by changing the padding values.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Colors : Change the colors for the rows text, background, and icon.

-Border : Add a border to your rows to give them extra style.You can specify the width and color of the border.

-Icon Position : Position the row icon to either left or right side of the text.

Button & Ribbon Areas Styling

The button and ribbon areas styling sections are available so you can have full control over the button and ribbon designs.

  • Button Area Style

This section will be used to control the styling of the button area.

-Width & Height : Define your button height and width to fit your needs.

-Typography : Choose a font family and change all the text properties for your button text.

-Icon Size : Control the button's icon size.

-Button Padding & Margin : Change the padding and margin values to have more control over the button area space.

-Icon Margin : Control the distance between the icon and the text by changing the icon margin values.

-Enable Hover : Enable the styling for the button area hover.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Colors : Change the color for the text, icon, and background with the possibility to use gradient colors for the background.

-Border & Box Shadow : Add a border and a box shadow to your button or alternate the border radius to change the button shape.

  • Ribbon Area Style

Ribbon area style is where you can control the ribbon layout and design.

-Enable Hover : Enable the styling for the ribbon section hover.

-Ribbon Layout : Select one of different ribbon layouts available.

-Ribbon Style : This option is only available for some of the layouts.You can choose from many styles available.

-Ribbon Triangle : This option is only available for some of the layouts.Enable this to add a hanging style to the ribbon.

-Ribbon Position : Set the ribbon position to either the left or right of the price box.

-Ribbon Size : Control the ribbon size or height and width depending on the layout.

-Typography : Change the ribbon text font properties using this control.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Colors : Change the color for the both the ribbon text and ribbon background.

-Shadows : Add a shadow for your text or a box shadow for the ribbon section.

-Ribbon Margin & Padding : Change the margin and padding values to position the ribbon and to control the ribbon inner space.

Advanced

Under the advanced tab, you will find a background styling section for each of the price box components.You can change the colors, shape, border, and more.

  • Areas Background Styling

For each background styling section, you have the following options.

-Section Padding & Margin : Control the distances by changing the padding and margins values.

-Shape Style : Change the background shape for each of the price box components.Choose from a great number of styles.

-Normal & Hover : Select​ which state you want to customize.Note that all the remaining options of this section will only affect the selected state.

-Background : Apply either a solid or gradient color for the background or upload an image if you want to use that instead.

-Border & Box Shadow : Add a border and a box shadow for each of the price box section or alternate the border radius to change the shape.

-Shape Color : Change the color for the shape to create the desired design.Note that this option is only available for the heading and price areas.

Layout

The layout tab is going to be used to setup the price section layout.

  • Price Section Settings

Control everything about the price section elements positioning.

-Section Layout : Choose one of the three available section layouts.

-: Align the price section in the price box.

-: Vertically and Horizontally position the currency next to the price.

-Duration Layout Type : Select either inline or block layout for the duration element.This option should only be changed if you are familiar with CSS.

-Duration : Vertically and Horizontally position the duration element next to the price and unit.

-Discount : Control the discount element position in the price area.

Get Help From Professionals

Can't find what you are looking for?

If you can't find what you are looking for any our documentation website, please feel free to open a support ticket  & get help from our support team.

Open a Ticket
Open a Ticket

WHO ARE WE ?

We are a group of talented WordPress developers & designers from Earth our main goal is to create great products & provide the best services to our customers.

BOOSTER ADDONS

CREATIVE ELEMENTOR BUNDLE

FOLLOW US

Email : contact@certaindev.com

WebSite : Certain Dev

Made with love from Earth!

Certain Dev | all rights reserved © 2020