Creating a Pricing Plan Table in Webflow

John
August 18, 2022

Welcome to my Figma to Webflow series where I take great projects created by the Figma community and showcase how to build them in Webflow. In the video above I go over step-by-step how to create the pricing table created by Softwareseni. The Figma file can be found here: https://www.figma.com/community/file/1140868779457790834.

The Webflow project can be cloned here: https://webflow.grsm.io/interaction?interaction=webdev-for-you-figma-to-webflow-build-1

Cloning the project will allow you to copy the project directly into your Webflow dashboard to see how I added and built all the elements in the video tutorial.

The outline for the video is as follows:

  • Adding the navigation bar.
  • Adding the heading, text blurb, and monthly/yearly buttons at the top.
  • Creating the pricing table using a Grid display setting with 3 columns and 1 row. The first pricing column was then created by adding all the text and elements inside of the column. The column was then copied 3 times to have 3 pricing columns. The last column was given a combo class of “popular” so that unique stying could be applied.
  • Adding the background colors, and images to pricing table section.
  • Making the pricing table responsive for tablet and mobile (I don’t give over the responsive aspect in the video but the clone-able project has been made responsive).

To get started with Webflow and to clone this project click here: https://webflow.grsm.io/get-started.

As a photographer, it’s important to get the visuals right while establishing your online presence. Having a unique and professional portfolio will make you stand out to potential clients. The only problem? Most website builders out there offer cookie-cutter options — making lots of portfolios look the same.

That’s where a platform like Webflow comes to play. With Webflow you can either design and build a website from the ground up (without writing code) or start with a template that you can customize every aspect of. From unique animations and interactions to web app-like features, you have the opportunity to make your photography portfolio site stand out from the rest.

So, we put together a few photography portfolio websites that you can use yourself — whether you want to keep them the way they are or completely customize them to your liking.

12 photography portfolio websites to showcase your work

Here are 12 photography portfolio templates you can use with Webflow to create your own personal platform for showing off your work.

1. Jasmine

Subscribe to our newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.