2. Remix the template

First things first. You need to remix the template to your Framer account. To do this, once you have completed the checkout process on Polar, our payment processor, and considering that Lineup Studio is a free Framer template, you will simply have to make the "purchase" for $0 (zero dollars – free), and we will send the remix link to your email address. Once you receive this email, just click the remix link and you will have your remixed template in your Framer account ready to start editing and publishing your new website. All of this will literally take you a couple of minutes of your valuable time.

Template structure

3. Design Styles

You will find all these elements in the 'Assets' panel of the left sidebar (Pages | Layers | Assets).

3.1 Styles > Text

In this section you can adjust the text styles of your website. From main heading titles to body texts and support captions elements.

3.2 Styles > Color

Similarly, in this section you can change the template's color palette. With this simple tool you can completely change the mood of the whole website in just a few seconds.

3.3 Styles > Find

When you are not sure where a style, color, or component is applied, just hover over it and right‑click, then select 'Find'. Framer will show you all instances or elements that receive the style, color, or component you want to modify or locate within the project.

3. Components

Possibly the most powerful tool in Framer. Components are groups of elements that you can reuse anywhere in your project. Any change you make at the component level will propagate to all instances of that component throughout the project. For example, one of the most important components in the template is 'Project Title'. This component generates all the logic and interactivity of each project shown on the home, creates the hover movement, makes the project image appear in the bottom right (or wherever configured in the template), controls text sizes, colors, etc.

With this in mind, any change made at the component level will affect all instances of that component. If you change the text color, all texts of all component instances in the template will be affected and properly updated.

5. Code Overrides

Code overrides are small scripts written in the programming language used by Framer that allow us to extend the platform's functionality in (almost) unlimited ways.

Thanks to these, we can make Lineup Studio offer a unique user experience, as the custom system for displaying projects in the main list on the home would not be possible without custom code, allowing us to position the featured images of each project in a fixed way, as well as the different configurations offered by the template. The same happens with the featured image and its behavior within the single project pages.

The best part is that if you don't have sufficient coding knowledge, you simply don't have to deal with these assets; you can ignore them, we did the hard work for providing you with a full no-code experience. However, if you know React and want to extend, create, or improve the components and overrides included with the template, all the code is available from the 'Assets > Code' panel.

5.1 Custom Font Sizing

As mentioned earlier, there is an exception regarding how you can customize the styles of your texts, which relates to the size of some texts on the website, particularly the headings on the home and single project pages, as well as the texts in the project list on the home. They work with a very simple code override. You will find it in 'Assets > Code > Fluid_Font.tsx' and 'Assets > Code > Heading_Fluid_Font.tsx'.

• Fluid_Font.tsx: Controls the size of the texts in the project list on the home.
• Heading_Fluid_Font.tsx: Controls the size of the headings and titles on both pages and single project pages.

Basically, the snippet shows the CSS value used by the rest of the file in JavaScript (TypeScript React). In short, the code defines a higher‑order component called fluidText that wraps any React component to apply fluid and responsive typography to all text elements inside it. This allows us to apply the CSS rule that uses the clamp() function. This function is what makes the 'magic' of taking responsive text capabilities to another level, turning responsive text into liquid text. When you resize the browser window on the main/home page or a project page, you will see the heading adapt in a very dynamic way, and the project list on the home also adapts to different device sizes.

Thus, adjusting the text size is as simple as setting a maximum pixel value, a minimum pixel value, and a preferred value (usually in vw). This is the ideal value that drives the fluidity. The first value is the minimum size in px, the second is the preferred value, and the third is the maximum size in px.

If you want to modify this, just change these three values and save the file (CTRL + S or CMD + S).

The rest of the files you will see in the 'Assets > Code' section correspond to functionalities that do not aim to change any design aspect but rather handle specific behaviors of certain elements. For example:

• Project_Image.tsx: Creates the fixed "floating" featured image on the screen that behaves in two configurable ways. The first generates the hover effect on the project list on the home, and the second handles the fixed image on each single project page.
• Date.tsx: Custom component that generates dates in the way the template does, directly from CMS data. It formats dates and can be configured from the canvas UI as well.
• UppercaseInput.tsx: A utility code override used in the home version that includes a contact form inside the 'Info' overlay. The form inputs have tight line-height, so this method prevents that behavior. This code override does not offer any customization.

6. Creating Projects (CMS)

In this section we will see in detail how to create projects in Framer's CMS and how the CMS features apply to creating projects with Lineup Studio.

7. Framer CMS

First of all, we need to introduce what Framer's CMS is. If this is your first time with a content manager or a design editor as advanced as Framer, don't worry, it's very simple.

A CMS (Content Management System) is a tool that allows you to create, organize, edit, and publish content on a website without touching code. It works as a "digital filing cabinet" where you store text, images, videos, links, and other elements. Instead of manually editing each page (which can be tedious and error‑prone), you update the content in one place and the CMS automatically propagates it to all relevant pages. This is ideal for dynamic sites like blogs, portfolios, stores, or project pages like those offered by Lineup Studio, where content changes frequently.

Well‑known CMS examples: WordPress, Contentful, or Sanity. But Framer has a native, integrated CMS specifically designed for its no‑code design tool.

In the top left you will see 'Projects' and 'Categories'. 'Projects' represents the projects you create in the CMS, and 'Categories' represents the categories you create in the CMS.

Each CMS element has different fields representing metadata and content of your project, such as title, featured image, date, etc. Let's look at each in more detail:

• Title – The project title.
• Slug – The URL that will be generated for the project.
• Image – The featured image, which appears both in the main list on the home and when entering a single project page. It is the fixed image that by default appears at the bottom right.
• Date – The date the project was created.
• Category – The category the project belongs to.
• Gallery – The project's image content; you can drag image packages from your computer directly into this area and Lineup Studio will create the image gallery you can see in the template demo. Drag and drop.
• Content – Here you describe your project with words; you can use Framer's text editor, but if you want the default result offered by Lineup Studio, you should follow the content guide included in the template to display the project name in one color and the description in another, for example. This also applies to text size, which should be an H2.

We will look in more detail at how the 'Content' field works, as formatting text in the overlay is really simple and straightforward if you follow these two rules:

8. Project Details

This is the only part that requires a bit more attention because the text that you want to represent the project title is defined as a "code" tag. As you can see in the screenshot, to create the title you simply use the "code" formatting tool highlighted in the pink frame. Once you write the title, just write the rest of the description outside the "code" tag. If you look closely at the screenshot, you will see that the whole block is inside a Heading 2, which is important for formatting the text as in the template.

If you have any doubts, we encourage you to look at other projects to better understand how this tool works, and of course, if you have any questions about any other element of your new site built with Lineup Studio, just contact us and we will try to help you as soon as possible.

9. Featured Images

This is probably one of the tools you will use the most, as it allows you to upload the image that will represent your project both in the home list and within each project as a fixed image at the bottom right of the screen, as predefined by the template. To do this, simply use the dedicated Featured Image field within each project's CMS, drag and drop from a folder on your computer or use the 'upload' option to add the image you want.