Pricing Page Section Layouts

pricing page section

The image depicts a newsletter page section.

A pricing page on a website is like a menu for potential customers, showing them what’s available and at what cost. It typically starts with different plan options, like basic, standard, and premium, each offering different features or services.

Then, there’s usually a section where these plans are compared side by side, making it easy for visitors to see what they get with each option. Following that, you’ll find the actual prices for each plan, often with options for monthly or yearly billing. There’s usually a big button somewhere urging visitors to take action, like signing up or contacting sales.

To build trust, businesses often include testimonials or case studies from happy customers. There’s also usually a section for frequently asked questions (FAQs) or support, so visitors can find answers to common queries.

Sometimes, you’ll see a money-back guarantee or refund policy, showing customers that there’s little risk in giving the product or service a try.

These sections all work together to guide visitors through the decision-making process and hopefully turn them into paying customers.

Feel free to explore the examples below and find the perfect testimonial design that fits your requirements.

Section 1

A pricing page section

The mobile view

A pricing page section

The desktop view

Notes:

  • This pricing section comprises a title and description follwed by 3 pricing options. The pricing options specify a price, the service, a description and a button which can lead to a sign up form or other call to action.
  • The pricing options are presented in 3 columns on a desktop and stacked on a mobile device.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.

Section 2

A pricing page section

The mobile view

A pricing page section

The desktop view

Notes:

  • This pricing section comprises 3 pricing options.
  • Each option has the name, price followed by a list of benefits and a call to action button.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.

Section 3

A pricing page section

The mobile view

A pricing page section

The desktop view

Notes:

  • This section displays a headline, title and 3 pricing options.
  • The pricing options comprise a title, price, list of benefits and call to action button.
  • The pricing options are presented in 3 columns on a desktop and stacked on a mobile device.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.

Section 4

pricing section mobile 4 sized

The mobile view

desktop pricing section

The desktop view

Notes:

  • The desktop version is arranged in 3 columns, a header provides the product/service name, the monthly price some descriptive text and a button leading to a signup form.
  • The features for each product are listed below the header, each item has an ‘tick’ icon.
  • One offer is highlighted as ‘most popular’ but could be recommended, best selling etc.
  • The mobile version shows the same information but the blocks are simply arranged as one column.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.

Section 5

pricing section mobile 5 sized 2 scaled

The mobile view

pricing section desktop 5 sized 2

The desktop view

Notes:

  • On a desktop the section is arranged in 4 columns, the left column lists the features, there are 3 other columns for the 3 services/products offered. A header provides the product/service name, the monthly price some descriptive text and a button leading to a signup form. Each service/product indicates if the feature applies using a tick or cross icon.
  • On a mobile, there are 3 lists which are stacked, each list comprises a header specifying the service, price, description and button leading to a sign up form. Underneath each header is a list which specifies the features that apply.
  • One service/product is highlighted as ‘most popular’ but could be recommended, best selling etc.

View in a browser:

  • Please click the button below to see the page section in a browser, scroll down to find the correct section.
  • If on a desktop, try narrowing the browser window to see section in mobile view.