{"id":4376,"date":"2024-04-15T02:26:13","date_gmt":"2024-04-14T18:26:13","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4376"},"modified":"2024-04-15T02:26:13","modified_gmt":"2024-04-14T18:26:13","slug":"creating-website-designs","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/creating-website-designs\/","title":{"rendered":"Creating website designs"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">Designs determine the overarching format of a webpage. Numerous methods exist for constructing website designs \u2014 starting from scratch, utilizing prebuilt components, or even by employing reusable designs from Libraries. Moreover, you can further enhance your site\u2019s design using style configurations.<\/p>\n<p id=\"\">This guide will cover the following:<\/p>\n<ol id=\"\">\n<li id=\"\">Design components<\/li>\n<li id=\"\">Customizing design in the Style panel<\/li>\n<li id=\"\">Optimal approaches<\/li>\n<\/ol>\n<h2 id=\"\">Design components<\/h2>\n<p id=\"\">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 <strong id=\"\">Add panel<\/strong>:<\/p>\n<ul id=\"\">\n<li id=\"\">Segment<\/li>\n<li id=\"\">Storage<\/li>\n<li id=\"\">Vertical alignment<\/li>\n<li id=\"\">Horizontal alignment<\/li>\n<li id=\"\">Quick Stack<\/li>\n<\/ul>\n<p id=\"\">If your intention is to create designs from the ground up, <strong id=\"\">segments<\/strong> and <strong id=\"\">storage<\/strong> enable you to establish a basic structure where additional components can be included.<\/p>\n<p id=\"\"><strong id=\"\">Vertical alignment<\/strong> and <strong id=\"\">Horizontal alignment<\/strong> are beneficial components to incorporate <em id=\"\">within<\/em> 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.<\/p>\n<p id=\"\">For more immediately usable designs, you can employ the <strong id=\"\">Quick Stack<\/strong> 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.<\/p>\n<p id=\"\">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 <a href=\"https:\/\/webflow.com\/libraries\" id=\"\">Webflow Marketplace<\/a> or from the Starter Library.<\/p>\n<p id=\"\">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.<\/p>\n<h2 id=\"\">Customizing design in the Style panel<\/h2>\n<p id=\"\">You can also modify your component&#8217;s design via the <strong id=\"\">Style panel<\/strong> &gt; <strong id=\"\">Layout <\/strong>section. Here, you can adjust the display settings (e.g., flexbox, grid, etc.) of components to further personalize your design.<\/p>\n<p id=\"\">Based on the display settings you choose (e.g., block, flexbox, grid, inline block, inline, or none), additional formatting options may appear in the <strong id=\"\">Layout <\/strong>section. For example, choosing flexbox allows you to determine whether your component should be aligned horizontally or vertically.<\/p>\n<h2 id=\"\">Optimal approaches<\/h2>\n<p id=\"\">Ultimately, your design decisions are at your discretion \u2014 and we suggest experimenting with various methods to determine your preferred approach! For additional guidance, we&#8217;ve compiled a few tips and tricks for efficiently designing layouts:<\/p>\n<ul id=\"\">\n<li id=\"\">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<\/li>\n<li id=\"\">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<\/li>\n<li id=\"\">Apply flexbox on parent elements for fluid design across 1 dimension<\/li>\n<li id=\"\">Incorporate Library designs when seeking prebuilt, styled layouts<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn how to build website layouts in the Webflow Designer.","protected":false},"author":2,"featured_media":5175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[284],"tags":[],"class_list":{"0":"post-4376","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4376"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5157"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}