Tutorial
Assembling the grid
To get started, delete any of the example components that are in the grid that you don't want to keep. To add new components, go to the Assets tab, then click on the "Cards" category. Inside is a list of components that can be drag-and-dropped into the grid. Each component has different variants and properties that can be customized.
As you drop components into the grid, you can control their width and height by changing the "Span" properties under the "Size" category.
Changing the top bar
The project comes with a top bar over the components grid, but the default layout may not ideal be ideal for your site. You can modify and delete the icon, title, and buttons inside it.
Modifying the layout for phones
Now that you've created a grid of components, you can modify it to work better on phones. Navigate to the "Phone" breakpoint, where you can reorder components as needed. Some components have "Desktop" and "Phone" or "Horizontal" and "Vertical" variants. You can switch from the horizontal to the vertical variants on the Phone breakpoint for a better layout.
Customizing your site
To edit colors, open a color picker and go to "Shared Colors" for a list of all colors used in the project.
To edit the corner radius and hover effects of all cards, open the "Card Background" component. To configure individual components, open that component in the Assets tab or double-click it in the grid.
To edit text styles, go to the "Styles" section in the Assets tab.
To edit the page load animations, select the "Container" element (the only child of the breakpoints). The animations are different on desktop and phone, so you will need to edit each individually or reset the Phone breakpoint's animation to use the same animation on both platforms.
Building custom components
The components that come with this template cover the needs of most projects, but in some cases, it might be necessary to have a component that is not included. To do this, duplicate the "Custom" card component and add your own elements to it.
Component Library
About
Let visitors know who you are with a profile picture, name, and optional description.
CTA (Call to Action)
Direct your site's visitors with a CTA component. Display a title, an optional description, and a button.
Discord Server Invite
Invite people to your Discord server with this component. Add an image with the Desktop and Phone variants, or use no image with the Compact variant.
Let people contact you by sending you an email. Display your email address with a button to send an email in the user's email app and a button to copy it to the clipboard.
Google Maps
Insert a Google Maps widget into your page. To set the map's location, go to the Google Maps website, right-click on a location, and select the coordinate button from the context menu to copy coordinates, then paste them into the component property.
Image
Display an image with an optional caption at the top or bottom.
Newsletter
Let people subscribe to your newsletter in a simple widget on your site. Works with Mailchimp, Revue, and FormSpark, which are the only services Framer has prebuilt components for. Other newsletter services could be supported with custom code.
Product
Sell your product with this component. Enter the product's name, an image, and an optional description.
Social Link
Display links to your profiles on social media platforms, online communities, and music and podcast services. Includes icons for 20 platforms.
To use an icon platform that is not included, select the "Custom Icon • SVG" or "Custom Icon • Image" variants. To use an SVG, enter valid SVG code into the "Custom SVG Code" property. Any color attributes with the value "currentColor" will use the Shared Color named "Icon". See the "Social Link Icon" component for examples.
2 Social Links
Similar to the "Social Link" component, but with two link blocks stacked. Supports the same platforms and custom icon features.
4 Social Links
Display four social links in a grid, showing only their icons. Supports the same platform icons as the "Social Link" component.
Spotify
Embed a Spotify playlist, album, artist, song, or podcast with this widget.
Testimonial
Showcase a testimonial with a quote, person's name, description or title of person, and optional image.
Text
Display an optional heading and subtitle with no decoration.