How to use the Pricing Table block by Zoloblocks

This documentation provides comprehensive insights into the Pricing Table Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Pricing Table block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Pricing Table block.
3. After on the right side, Click on the Block. Then the Pricing Table details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

General Section

Go to Basic > General

This section provides control for the pricing table,

1. Show Ribbon: Enable the switcher to show the Ribbon for the pricing table.
2. Show Features: Enable the switcher to show features.
3. Show Primary Button: Enable the switcher to show the primary button.
4. Show Secondary Button: Enable the switcher to show the secondary button.

5. Alignment: Set the alignment for the content( e.g.: left, center, middle ).
6. Buttons Position: Set the button position ( e.g.: Middle, Bottom ).
7. Buttons Direction: Set the button direction ( e.g.: Column, Row ).

Ribbon Section

Go to Basic > Ribbon

Make the ribbon section more customizable,

1. Title: Set the title for the ribbon.
2. Horizontal Position: Set the position in the horizontal of the ribbon.
3. Vertical Position: Set the position in vertical for the ribbon.
4. Rotate: Make a rotation of the ribbon.
5. Position: Set the position for the Ribbon ( Top Left, Top Right )

Header Section

Go to Basic > Header

Customize the header section by following it,

1. Title: Set the title for the header.
2. HTML Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).
3. Show Description: Enable the switcher to show the description.
4. Description: Set the description for the header.

Price Section

Go to Basic > Price

This section provides control to set the price,

1. Prefix: Set the prefix for the price.
2. Price: Set the price.
3. Suffix: Set the suffix for the price.

4. Sale: Enable the switcher to show the sale price.
5. Original Price: Set the original price.
6. Period: Set the period for the price.

Features Section

Go to Basic > Features

This section provides control to work with the features,

1. Show Title: Enable the switcher to show the Title.
2. Show Description: Enable the switcher to show the description.
3. Hide Feature Icon: Disable it to show the feature icon.
4. Title: Set the title for the feature.
5. Description: Set the description.

Add New Feature Item

6. Click on the ” Plus ” icon to show the add new feature items list.

Set Content For Feature Item

7. Click on the newly added item and appear text box and icon selector.
8. Text: Set the text for the featured item.
9. Icon: Set the icon for the item.

Remove Feature Item

10. Trash Icon: Click on the trash icon to remove any particular item.

Primary Button Section

Go to Basic > Primary Button

Set customization for the primary button,

1. Button Text: Set the text for the primary button.
2. URL: Set the URL to navigate the button.
3. Open in new tab: Enable the switcher to open the link on a new tab.

Secondary Button

Go to Basic > Secondary Button

This section provides controls to customize the secondary button,

1. Button Text: Set the text for the secondary button.
2. URL: Set the URL to navigate the button.
3. Open in new tab: Enable the switcher to open the link on a new tab.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Item Container

Go to Style > Item Container

This section provides controls to change the appearance of the items container,

1. Border: Set the border for the item container.
2. Border Radius: Set the border corner edges rounded by setting the radius.
3. Margin: Set margin for the content.
4. Padding: Make inner space by setting the padding.

5. Box Shadow: Set the box shadow of the item container.
6. Background: Set the background for the item.

Header Section

Go to Style > Header

This section provides control for the header,

1. Padding: Set inner space for the header.

Header Content Section

Go to Style > Header Content

This section provides control for the header content,

1. Title Typography: Set the typography for the Title.
2. Border: Set the border for the Header content.
3. Border Radius: Make the border corner edges rounded by setting the radius.
4. Padding: Set inner space for the header content.
5. Margin: Set the margin for the header content.

6. Color: Set the color for the Header content.
7. Background: Set the background color.
8. Text Shadow: Make the Title text shadow.

DESCRIPTION

9. Typography: Set the typography for the description.
10. Color: Set color for the description.
11. Margin: Set margin for it.

Pricing Section

Go to Style > Pricing

This section provides control for the pricing and makes appearance changes by following it.

1. Typography: Set the typography for the pricing.
2. Color: Set color for it.
3. Margin: Set margin for the pricing.

PREFIX

4. Size: Set the size for the prefix of the pricing.
5. Position: Set the position of the prefix.

SUFFIX

6. Size: Set the size for the suffix of the pricing.
7. Position: Set the position of it.

ORIGINAL PRICE

8. Typography: Set the typography for the original price.
9. Color: Set the color for it.
10. Margin: Make outer space by setting the margin.

PERIOD

11. Typography: Set the typography for the Period.
12. Color: Set color for it.
13. Margin: Set the margin for the period

Separator Section

Go to Style > Separator

1. Width: Set the width for the separator.
2. Color: Set the Color for the Separator.

Features Section

Go to Style > Features

Make the features customization,

1. Padding: Set the padding for the features.

Features Content Section

Go to Style > Features Content

Make the features content stylish by following the controls,

1. Title Typography: Set the typography for the title.
2. Title Color: Set the color for the title of the feature content.

DESCRIPTION

3. Typography: Set typography for the description of the feature content.
4. Color: Set color for the description.
5. Margin: Make outer space by setting the Margin.

FEATURE LISTS

6. Typography: Set the typography for the feature lists.
7. Color: Set color for lists.
8. Item Gap: Make a gap between the feature list items.
9. Margin: Make outer space from the list of items.

10. Icon Color: Set the color for the icon.
11. Icon Background: Set the background of the icon.
12. Icon Size: Set the size of the icon.
13. Icon Gap: Set the gap between the icon
14. Icon Padding: Make the inner space by adding the padding.

Buttons Section

Go to Style > Buttons

Make customization for the buttons,

1. Margin: Set the margin for the buttons.

Primary Button Section

Go to Style > Primary Button

Make the primary button more customization for the appearances,

1. Typography: Set the typography for the primary button.
2. Border: Set the border for the button.
3. Border Radius: Make the primary button corner radius.
4. Padding: Set inner spacing by adding the padding.

Normal State of Primary Button

5. Text Color: Set the color for the text.
6. Box Shadow: Set the box shadow for the primary button.
7. Background: Set the background for the button.

Hover State of Primary Button

8. Text Color: Set the text color for the button that works on mouse hover-over.
9. Box Shadow: Set the box shadow for the button.
10. Background: Set the background color for the primary button for the hover state.

Secondary Button Section

Go to Style > Secondary Button

Make the primary button more customization for the appearances,

1. Typography: Set the typography for the secondary button.
2. Border: Set the border for the button.
3. Border Radius: Make the secondary button corner radius.
4. Padding: Set inner spacing by adding the padding.

Normal State of Secondary Button

5. Text Color: Set the color for the text.
6. Box Shadow: Set the box shadow for the secondary button.
7. Background: Set the background for the button.

Hover State of Secondary Button

8. Text Color: Set the text color for the button that works on mouse hover-over.
9. Box Shadow: Set the box shadow for the button.
10. Background: Set the background color for the secondary button for the hover state.

Ribbon Section

Go to Style > Ribbon

Make the ribbon more customizable by following it,

1. Typography: Set the typography for the ribbon.
2. Color: Set the color for the ribbon.
3. Border: Set the border for it.
4. Border Radius: Make the border corner edges rounded.

5. Padding: Set the padding for the ribbon.
6. Margin: Set the margin for the ribbon.
7. Background: Set the background for the ribbon.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial for learning more.

Check the Demo Page.

Thanks for being with us!