How to Build Multi Layout Websites with Webflow?
A single-layout website is quite dull and feudal. The website design and development’s current trend is tailored toward building dynamic, unique, intuitive, and aesthetically pleasing multi-layout Webflow websites. One way of doing so is to present your site’s content in different layouts.
One of the things we love about Webflow is that it allows us to build dynamic multi-layout websites without complex coding. If you think your current website layout does not work with all the content you want to add, or maybe you want certain pages or content to be presented in different formats or layouts, this post is for you.
Below, we will share how you can build a multi-layout website using Webflow.
But before we show you how to build multi-layout Webflow websites, let us first see why your website might need different layouts.
Table of contents
Why You Might Need Multi Layout Webflow Websites?
A website layout serves as a critical component of your site’s design. It does not only ensure the overall visual balance of your website, but it also impacts your site’s usability and message. A well-designed layout allows you to successfully direct your visitors’ attention and focus toward the most important section in your web pages and then the other sections.
Typically, websites are designed with just a single layout- often, a basic layout. However, there are times when one layout is not enough to effectively deliver the message you want to convey to your visitors. Or perhaps, you find your current layout not fitting for the different content you want to add to your web pages or blog.
Maybe you want to showcase your works or projects on one webpage and your products or services on another webpage. Perhaps, you want to format different types of news articles or blog posts within the same collection in different layouts so you can effectively, efficiently, and quickly deliver the message to your audience. Or maybe you feel like the layout does not fit well with the content you want to share on your website. For these cases, the best thing you can do is to build a multi-layout website.
Webflow allows us to create multiple layouts that may serve different purposes. Using multiple layouts is also beneficial for A/B testing. It will help you test different layouts at the same time and see which of them works best for your website.
Now that you know the common reasons why your website may need to have different layouts let us proceed to the steps on how to create a website with different layouts.
Steps to Create Multi Layout Webflow Websites
So, is it difficult to create a multi-layout website? How can you do this? You may ask.
The great news is that creating more than one layout is easy with Webflow! Webflow is a user-friendly builder that allows us to build dynamic web pages using our own custom layouts.
What’s more? Well, you can do this within just a few minutes!
Without further ado, here’s how you can build different layouts with Webflow.
Flowbase duplicate
To start, open a project that requires more than one layout. You can also create a new project if you haven’t created one yet. You may use your own custom template or a template from webflow.com/templates or Flowbase that contains elements you will likely need for your project. For this illustration, we will use a CMS blog-type template.
Create your blog posts CMS collection
Once the project is loaded, open the CMS collection page. Then, click the “CMS Collection +” icon to create a “blog posts CMS collection.”
When you click “Blog Posts,” you will see the different blog post samples that Webflow provides us as a sort of mock-up per se. You can use these blog post samples when creating layouts or adding new blog posts. To create a new blog post, simply click the “+ New Blog Post” button on the screen’s upper right side.
Add a new field
The next step is to create and add a new field. This new field will let us create additional layouts. Here’s what you should do
1) Click “Blog Post.”
2) Go to Blog Post Settings.
3) Click the “+ Add New Field” button, then choose an “Option Field.” The options field will allow us to pick which layout you will use for your post.
4) Fill out the “Label” field. You may choose any label you want, but for this example, we will use “Layout” as the label.
5) Then add the options. For example, if you want three different layouts, you can set option 1 as layout 1, option 2 as layout 2, and option 3 as layout 3. You can also choose to name the options according to your preference.
6) Once done, click “save the field.”
7) Finally, click “save the collection.”
Choose the layout for your blog posts
Now, it’s time to choose a layout for each blog post. What you are going to do is to head back to the blog posts CMS collection page and then:
1) Click the blog post you want to edit.
2) Scroll down the page to see the layout option section.
3) Pick a layout (Layout 1, Layout 2, or Layout 3).
4) Save changes.
5) Follow the same procedure for the other blog posts.
Give the main layout conditional logic
The next step is to add the conditional logic for the main layout or Layout 1. To do this, follow these step:
1) Click the “Pages” icon.
2) Click “Blog Posts Template.”
3) Click the “Navigator” icon.
4) Click section > container > layout 1.
5) On the left side panel, click the settings icon.
6) Under “Conditional Visibility,” set the condition to “Element is visible when layouts equal to option 1.
Build Multi-Layout Webflow Websites.
SEO-Friendly. Super Attractive. Responsive Websites. Hire Experts. 200+ Projects Completed.
Create Layout 2 in Webflow Websites and So on
Now let us create layout 2. Here’s what you should d
1) Choose the blog post with layout 2.
2) Create a new div block by dragging the div block icon from the “Add” section to the “Navigator” section.
3) Position the new div block under section > container below layout 1.
4) Name the div block as layout 2.
5) Then, format the new layout. To do this, simply drag and drop the elements you want from layout 1 to layout 2. For example, if you want to add a heading and text block to layout 2, just drag the heading and text block from layout 1 and drop them to layout 2.
6) Once you’re done formatting layout 2, go to div block settings.
7) Under “Conditional Visibility,” add the conditional logic for layout 2. The condition should be “Element is visible when layouts equal to option 2”.
8) Then, save.
And that’s it! You can repeat these steps when creating layout 3.
Wrap up
Creating and implementing multiple layouts with Webflow is indeed pretty quick and easy. Webflow allows you to create as many layouts as you need and have better control over how your website looks. You can also use this guide to create multiple layouts for other CMS collections.
Want to create a professional-looking multi-layout website? How about letting our Webflow developers handle your multi-layout website development project? If so, contact APPWRK and send your details anytime. Hire Webflow Developer from us and he/she will help you create a dynamic and robust multi-layout website that matches your company’s needs and requirements
Related Links:
About author
Whether you are planning a start-up or want to enhance your existing business, APPWRK is a one-stop solution to satisfy your goals and expectations. We have action-oriented experience in UI/UX, Mobile, and Web App development. Also, you can knock on our door for Quality Assurance and Digital Marketing services.
Book A Consultation Now!
