3 MUST KNOW Layout Tips in Webflow

John
August 18, 2022

There are many ways to go about building layouts in Webflow. In this video I outline 3 layout tips that have saved me a lot of time when approaching layout builds in Webflow.

The layout tips are as follows:

1. Absolute Full in Relative Positioned Elements

Setting a parent element to a position of relative and then adding a div block with a position of “Absolute” and “Full” allows you to fill the parent element completely. This allows for very interesting overflow effects by setting the parent element overflow property to “hidden.” I use this effect quite a bit when creating panel reveal or zoom effects in Webflow.

2. Fill Available Space with Flexbox

Rather than using columns in Webflow you can give a display setting of flex to a parent element and set the flex settings to:

Direction: Horizontal, Align: Stretch, Justify: Start

Then you can add a div block and set the flex child settings to “Grow if Possible.” This will fill the available space within the parent element. You can then copy and paste this div block multiple times to have equal width div blocks and create equal width columns. This allows for more flexibility than using the column element and is great for responsive design as you can change the layout easily with a click of a button for tablet and mobile. This is done by setting the parent element flex setting to “Vertical” on tablet and mobile rather than “Horizontal.”

3. Grid Layout

If you have a unique layout, let’s say images for a portfolio, you can use the grid option in Webflow to create various sized grid cells for your images. This is a bit more advanced than flex in the sense that the rows and columns don’t have to be equal sizes. This can be done be creating a grid matrix and then adding div blocks and filling specific cells of the grid matrix to create the unique layout.

Hope you enjoyed these 3 layouts tips in Webflow and happy designing and developing.

To sign up for Webflow 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.