Pricing Section

Designing an effective pricing section for your website is essential in guiding potential customers towards making purchasing decisions and overall marketing strategy.

You can use this section on your website to display the pricing of all your services offered and redirect customers towards the Payments page using Call-to-Action buttons.

Add Pricing Section

A section can be added to a page. You can either add a section to an already existing page or create a new page within your website.
On your page, click on the blue + icon to add a new section.

You will now see the section categories on the left side.
Scroll to Pricing (1) section and click on it. A screen will pop up allowing you to choose from different layouts (2) of the Logo Section.

Choose any section layout and click on it to add it to your page.

Manage Pricing Section

Once you have added the section:

Click on the Manage Pricing (1) button to open the Pricing Section (2) Settings.

Add & Edit List Items

Add a List Item

Click on the Add Item (1) button to add a new item to the list.
Duplicate or Delete (2) the list items.
Edit the Headline (3) of the section.

Edit List Item

Click on the list item that you want to edit. It will open that particular List item’s editing options.

From here you can:

Upload or Delete (1) the image. You can also edit the Accent Color which will be visible while hovering cursor over the image.
Add a Title (2), Subtitle (3), and Description (4) of the list item.

Note

Before adding the description, check this article.

Link a List Item’s Title by clicking on the toggle (5). Click here to know more.
Set the Link to open in a New Tab or in the Same Tab (6).
Add other Links (7) to the list item. You can add a Button/Text Link/Image link/Social Icon. Learn more.
Save (8) your changes.

Sequencing List Items

You can easily change the sequence of the List Items by Dragging and Dropping them.

See sequencing the Pricing Items List in action:

Manage Layout

Click on the Layout tab (1).
Select the preferred layout (2) and save(3) the changes.

Style Pricing Section

You can customize different aspects of the Logo section using various styling options. To navigate to the Styling options, click on the Manage Pricing (1) button, and choose the Style (2) tab.

Items Styling options

Display the items in Rows and Columns or in Carousel mode (1).
Set the Number of Columns (2). You can select up to a maximum of 10 columns.
Specify the Space Between Columns (3) of the list items. This value is defined in Pixels.
Specify the Space Between Rows (4) of the list items. This option will not be visible if the Carousel mode is active. This value is defined in Pixels.
Choose the Content Order (5) i.e., the images of the list items to be displayed first or the associated text.
Manage the Content Alignment within the section Horizontally (6).
Manage the Content Alignment within the section Vertically (7).
Specify the Number of Columns on Mobile devices (8). You can select up to a maximum of 3 columns.
Manage the spacing between the items Vertically and Horizontally (9).

Image Styling options

Choose the Image Crop (10) for the list items. You can set the images as Square, Circle, Landscape, Portrait, and Original.
Using Corner Radius (11) the corners of the images can be managed for their sharpness. You can also choose to manage the corners Individually.
Choose the Image Hover Color (12) to be the accent color or to be specified. If you have chosen the accent color, then specify the opacity.
Choose the Base Color (13) and Opacity that you want while hovering over the images. This option will only be visible when Specify Color is selected.
Set the Elements Color (14) for the list items of the section.
Choose to Animate Images (15) while hovering. If enabled, you can also change the Animation Style (16).

Size & Space and Text Style options

Specify the Image Width (17) for items’ images.
Specify the Content Width (18) for the List Items.
Specify the Space Below Section Headline (19) in Pixels.
Specify the Space Below Image (20) in Percent.
Specify the Space Below Title (21) of the List Items in Percent.
Specify the Space Below Subtitle (22) of the List Items in Percent.
Specify the Title (23) Font Style of the List Items.
Specify the Subtitle (24) Font Style of the List Items.
Specify the Description (25) Font Style of the List Items.

Cards and Shadow

See how to manage Cards (26).
Specify how to Display (27) the shadow.
Style (28) the shadow. There are several Presets and also you can Customize the shadow with Box Shadow Generator tool.
If the Presets option is selected, then Choose Shadow Styles (29) from the dropdown.

Buttons & Links

See how to manage the styling of Buttons & Links (30).

Can't find what you're looking for?

Get in touch with a Pixpa Expert.

In this article