Reading Rooms

Reading rooms are assortments of reusable arrangements that you can incorporate into your site. Reading rooms enable swift reuse of similar blueprints (e.g., navigation bars, CTAs, forms, etc.) to ensure consistency and effectiveness when constructing sites. You can incorporate Reading rooms into your site from the Webflow Marketplace, or utilize the pre-existing Starter Reading Room.

Within this module, you will discover:

1. Varieties of Reading Rooms
2. How to employ Reading Rooms
3. How to remove a Reading Room

Varieties of Reading Rooms

There exist diverse kinds of Reading rooms, which vary on 2 attributes: who produces the Reading rooms and where the Reading rooms originate.

The Reading room categories include:

• Starter Reading Room — A Reading room encompassing Webflow-crafted structures with fundamental, customizable styles
• Marketplace Reading Room — User-generated Reading rooms that you can access via the Marketplace Libraries page

Initial Reading Room

The Initial Reading Room is a default, Webflow-crafted Reading room consisting of 34 designs that you can utilize on any site. These 34 designs are categorized into the subsequent sections:

• Navigation
• Hero
• Team
• Logos
• Gallery
• Features
• Pricing
• Testimonial
• Footer

To explore more about the distinct designs in our Initial Reading Room article.

Marketplace Reading Room

Marketplace Libraries are Webflow-evaluated collections of designs crafted by eminent Creators in the Webflow community. You can access them from the Marketplace, or from the Add panel > Layouts tab, to integrate them into your sites. Discover more about integrating a Marketplace Reading room into your site.

How to integrate a Marketplace Reading Room

Upon picking out a Marketplace Reading room you desire to utilize, you can include the Reading room into your site directly from the Webflow Marketplace. Remember, there is a maximum of 5 Reading rooms per site.

You can solely embed Rooms into sites within the same Workspace. To introduce a Marketplace Reading room to 1 or multiple existing site(s):

1. Visit Marketplace > Libraries
2. Choose the Library you wish to insert into your site
3. Tap on Install Library
4. Select a Workspace from the Workspace dropdown
5. Select 1 or multiple existing site(s) to incorporate the room into
6. Click Install
7. Press Open in Designer in the popup modal window to unveil the site in the Designer

Subsequently, you can retrieve the Room in your site.

To implement a Marketplace Room in a fresh site:

1. Go to Marketplace > Libraries
2. Click on the Library you desire to include in your site
3. Tap on Install Library
4. Select a Workspace from the Workspace dropdown
5. Click Create site and install library

The Designer will automatically reveal a new site with the Room installed. By default, the site will be denominated after the Room (e.g., if you install a room named “Cool room” to a new site, your site will be named “Cool room site” in your Dashboard). You can alter your site’s name in Site settings > General tab> General settings > Name field.

Observation: If you integrate a design to the canvas that possesses an existing class on your site, the class title will surface with an incremented number. For instance, if you have a “Button” class already on your site and you add a design containing the same “Button” class, the design class title will evolve into “Button-2” in the Selector field.

Observation: Marketplace Libraries may embrace unique code embeds or form file upload elements which are solely accessible on particular site plans. Ensure you possess the correct site plan to guarantee these elements perform accurately.

How to employ Rooms

In the Webflow Designer, you can retrieve Rooms by navigating to Add panel > Layouts tab or by applying Quick find. In the Add panel, each Room is marked by name.

How to access the designs in a Room

Each Room comes with designs (e.g., navigation bars, hero segments, footers) that you can add to your site. To access the designs within a Room:

1. Unfold Add panel > Layouts tab
2. Select a Room whose designs you wish to utilize
3. Click on a design category dropdown to unveil the designs in that category (e.g., if you desire to access the navigation designs in the Starter Room, click Navigation)

Subsequently, you can utilize the Room’s designs akin to any other element. To embed a design from your Room to the Webflow canvas, you can:

• Press on the design in the Layouts tab to append it to the canvas
• Drag the design onto the canvas
• Drag it into the Navigator

Observation: If you add a design to the canvas that has a class already in existence on your site, the class title will surface with an incremented number. For instance, if you already possess a “Button” class in your site and you add a design that includes the same “Button” class, the design class title will alter to “Button-2” in the Selector field.

How to view an enlarged version of a design

If you desire to preview a design in a larger perspective before adding it to the canvas, you can inspect an enlarged version. To inspect an enlarged version of a design from the Add panel:

1. Unfold Add panel > Layouts tab
2. Glide over the design to perceive an enlarged version

How to utilize a Room’s variables

Certain Room creators incorporate color variables in their Rooms, enabling you to reapply the Room’s color palette in your designs. The variables manifest in the Variables panel when you incorporate a design to the canvas that employs those color variables.

‍You can modify a Room’s color variable to adjust every instance of the color variable on the canvas.

How to explore Room designs

You can explore Room designs within a Room, or across all Rooms integrated into your site. 

Some helpful keywords to browse for:

• Navbar
• Hero
• Tab
• CTA
• Footer
• Pricing
• Form
• Logo
• Testimonial
• Content
• Button
• Dropdown
• Contact

To explore within a Room:

1. Unfold Add panel > Layouts tab
2. Select a Room whose designs you wish to peruse
3. Insert a design keyword into the Search library bar (e.g., “navbar”)

To explore across allLibraries that are installed on your site:

1. Access the Add panel > Layouts tab
2. Insert a layout keyword into the Search all libraries bar(for example, “navbar”)

How can you access information about a Library

You have the ability to access information about a Library, such as its title, version number, and the one who installed it on the site. To access information about a Library:

1. Open the Add panel > Layouts tab
2. Hover over the Library title and select the settings “cog” that displays to the right of the Library’s title

A modal window will appear displaying information about the Library.

How to remove a Library

If you wish to eliminate a Library from your site and do not want it accessible in your Add panel anymore, you can remove it. Removing a Library will not impact any of the Library’s layouts that you have previously incorporated into your site. You have the option to reinstall the Library whenever you desire.

To remove a Library:

1. Access the Add panel > Layouts tab
2. Hover over the title of the Library you intend to remove
3. Select the settings “cog” on the right side of the Library title
4. Choose Uninstall library in the “Edit library” modal window
5. Click Uninstall in the “Uninstall library” modal window