If you have multi-level pricing for your product or service then the best way to show your pricing model to the end-user is through a pricing list. And to make this process that much easier Qubely offers a premium block called Price List. It helps you show your many pricing models with a user-friendly customization interface. Just add it from the Add Block option to your post/page.

Style

General Settings

This section provides the general configuration settings for the Qubely Price List block. You can set

Number of Items: Select the number of items you want to show in the price list. You can also manually enter the item number.

Select Column: Choose the column number for your Price List block.

Column Gap: Define the gap distance between each column. You can set the distance using the slider or through manual entry.

Price After Title: Enable this if you want to show the pricing number after the Title of the Pricing package.

Price List Layouts

In the Price List block, you have the option to select a layout for your price list. There are three predefined layout designs you choose from.

Alignment: Select the alignment of the content in your pricing list. You can choose the left, middle and right alignment.

Background: If you would like to show a specific color to the background to the content of the team member details section you have the option to do that from here. You can choose

• Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
• Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
• Clear: Lets you reset the existing gradient effect. You can use it to start over. 

Enable Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double.

Corner: This slider lets you configure the corner radius of each post grid blocks. After you enable the border you can set the border width and the border color. The border width is a responsive feature so you can set different border width for different types of devices.

Radius: Use the slider to set the radius of the avatar area. You can set a global value or even use the custom option to set different radius values to different sections separately.

• Box-Shadow: You can apply shadow to the image using this feature. You can apply shadow for both Normal and Hover states. Enabling the feature will present you with the following options:
  • Color: Lets you choose the color of the shadow.
  • X: Lets you define the length of the shadow of X-axis.
  • Y: Lets you define the length of the shadow of Y-axis.
  • Blur: Lets you control the blurriness of the shadow.
  • Spread: Lets you control how far the shadow will spread.

Spacing: This feature lets you set the spacing distance value between the testimonial content and the dot navigations. Set the value with the slider or set it manually.

Padding: To set the Padding of the icon list, you can use the Padding function. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.

Media

Enable this toggle button if you want to upload an image or set a digit number on the price list. After you turn on the feature you will find the following options.

Media Type: Choose the media type you want to set for your Price List block. You can choose from either image type or digit type.

• Image: If you select image type you will find the following configuration settings.
  • Position: Select the position of the image. You can set the image to the left or top side.
  • Size: Set the size of the image using the slider. Or even set it manually. It is a responsive feature so you can set a different size for different devices.
  • Radius: Configure the radius of the image. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.
  • Spacing: Define the distance area between the image and the text in the Price List block. Select the distance using the slider or manually set it.
• Digit: Once you select the digit type the following settings can be configured
  • Position: 
  • Typography: Select what typography you would like to use from these settings. 
    • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
    • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
    • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
    • Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
      • Line Height: It’s the difference between lines, adjust it the way you want to.
      • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
      • Text Transform: Lets you apply your preferred capitalization format to the text.
  • Color: Select the color of the digit text from a wide color palette. Click on the clear button to reverse any applied color.
  • Background Color: This option lets you set the background color of the digit text area. The clear button removes any applied color.
  • Size: Set the size of the image using the slider. Or even set it manually. It is a responsive feature so you can set a different size for different devices.
  • Radius: Configure the radius of the image. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.
  • Spacing: Define the distance area between the image and the text in the Price List block. Select the distance using the slider or manually set it.

Badge

Show the exclusivity of your pricing packages you can enable the badge feature for pricing list block. Once you enable you will find

Position: You can choose the position in this section. Choose from either the Left Top or Right Top.

Color: Set the color of the badge text from here. Choose from the color palette and set it. You can also clear any applied color with the clear button.

Background Color: Choose the color of the background of the badge. Select the color from the color palette.

Radius: Set the border radius of the Pricing List block area using this slider. You can use the global settings or set the radius for each corner separately. It is a responsive feature so you can set different radius values for each type of device.

Padding: To set the Padding of the badge in the pricing list, you can use the Padding function. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.

Content

You can define what your Pricing List content will look like from these settings.

Heading Tag: This option lets you select the Tag for the heading section of the content block. You can choose from six options such as H1, H2, H3, H4, H5, H6.

Heading Typography: To change the typography of the text turn on this function and you’ll have the followings:

Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.

Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 

Weight: Set the font-weight. Normally the font-weight is the thickness of a font.

Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.

Line Height: It’s the difference between lines, adjust it the way you want to.

Letter Spacing: It controls the space in between letters, defines the gap the way you want to.

Text Transform: Lets you apply your preferred capitalization format to the text.

Heading Color: Set the color of the heading text with the color palette. Click on the clear button. Reverse any applied color.

Heading Spacing: Define the spacing between the header and the paragraph. Slide the bar to set the spacing value or manually enter it. It is also responsive so you have the option to set a different spacing value for different devices.

Enable Description/Price/Discount:  These three options lets you set a description, price, and discount section in your Pricing List. After you enable any of these features you will find the following configuration options.

• Typography: Select what typography you would like to use from these settings. 
  • Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
  • Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
  • Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
  • Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
    • Line Height: It’s the difference between lines, adjust it the way you want to.
    • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
    • Text Transform: Lets you apply your preferred capitalization format to the text.
• Color: Choose the color of the feature text from the wide range of colors of the color palette and apply it.

Advanced

Animation

To make the block more interesting, you can add an animation effect. It is disabled by default, to enable this feature, choose an effect from the dropdown list. Once you choose your desired one, then start making modifications as you seem fit. The units are in milliseconds. Note: Duration is how long the animation will run and Dealy is the waiting time before the animation starts loading. The following effects are currently available.

• Fade: Selecting this will animate your Image block with a fading animation.
• Slide: Animate your Image block with a sliding animation.
• Bounce: If you want to animate your Image block with a bouncing animation then select this.
• Zoom: This option will animate your Image block with a Zooming animation.
• Flip: Animate your Image block with a Flipping animation using this option.
• Fold: Selecting this will animate your Image block with a sliding animation.
• Rotate: This will animate your Image block with a rotating animation.

Note: You can control the from which direction the animation will start such as from the center, right, left, up or down. Also, control how many times the animation will repeat. You can also select the duration and the starting delay of the animation which are considered in milliseconds.

Advanced

This section lets you override the current styling of this particular block.

Enable Custom Position: If you want to set the image block to a custom position then simply enable this option. After enabling you will find the following options

• From X-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.
• From Y-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.

Z – Index: If any of your blocks override another, then you can set a value here, the one with the higher value will appear before the other.

Hide on Tablet/Phone: Turn it on to hide this block in your desired device. The change will appear on the frontend.

Block Row CSS: In case you need to override current block settings, you can write down your own code followed by {{QUBELY}} to override the current settings.

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is the field where you define the name.