Creating website designs

Designs determine the overarching format of a webpage. Numerous methods exist for constructing website designs — starting from scratch, utilizing prebuilt components, or even by employing reusable designs from Libraries. Moreover, you can further enhance your site’s design using style configurations.

This guide will cover the following:

1. Design components
2. Customizing design in the Style panel
3. Optimal approaches

Design components

When commencing the design of your site, you will need to utilize design components to organize your creations. There are 5 format components in the Add panel:

• Segment
• Storage
• Vertical alignment
• Horizontal alignment
• Quick Stack

If your intention is to create designs from the ground up, segments and storage enable you to establish a basic structure where additional components can be included.

Vertical alignment and Horizontal alignment are beneficial components to incorporate within segments and storage. Vertical alignment is a div block that employs preconfigured vertical flexbox display settings, while Horizontal alignment is a div block that employs preconfigured horizontal flexbox display settings. This facilitates the creation of flexbox-based designs more efficiently.

For more immediately usable designs, you can employ the Quick Stack component. The Quick Stack component utilizes CSS grid and comprises cells composed of div blocks utilizing preconfigured vertical flexbox display settings. When adding the Quick Stack to your site, you can choose from 8 presets, after which you can customize the component and its cells as required. This simplifies the building process and enables you to structure designs more rapidly compared to building them from individual components.

Additionally, if you prefer prebuilt designs that encompass components and even CSS styling, you can utilize designs in Libraries. These can be accessed from our Webflow Marketplace or from the Starter Library.

We recommend utilizing Quick Stack for the majority of designs to streamline your design process. However, if you wish to construct the design using basic components (e.g., if you prefer your design not to automatically utilize flexbox or be structured with CSS grid), you can design with just segments, storage, and div blocks.

Customizing design in the Style panel

You can also modify your component’s design via the Style panel > Layout section. Here, you can adjust the display settings (e.g., flexbox, grid, etc.) of components to further personalize your design.

Based on the display settings you choose (e.g., block, flexbox, grid, inline block, inline, or none), additional formatting options may appear in the Layout section. For example, choosing flexbox allows you to determine whether your component should be aligned horizontally or vertically.

Optimal approaches

Ultimately, your design decisions are at your discretion — and we suggest experimenting with various methods to determine your preferred approach! For additional guidance, we’ve compiled a few tips and tricks for efficiently designing layouts:

• Initiate your designs using the Quick Stack component for the majority of layouts. This component is versatile and readily applicable, with some of the most common display settings (e.g., flexbox and CSS grid) already in place
• Implement a grid when you have a structured design across 2 dimensions but wish to set position settings on cells or have content overlapping other content
• Apply flexbox on parent elements for fluid design across 1 dimension
• Incorporate Library designs when seeking prebuilt, styled layouts