Get Started
How to Use a Framer Template
A practical step-by-step guide to customizing and launching your Framer template, from colors and fonts to CMS, forms, domains, and publishing.
Getting Started
Customization & CMS
3. Interaction & Setup
Launch
🛒 How to Buy
Here is how you can purchase the template from my website to get instant access.
⚡ Remix Link
This is the fastest way to bring the template directly into your account to start working.
Open your access link: Click the Remix link sent to your email.
Copy the project: Open the Remix Link, review the project preview, and click Copy to add an editable copy to your Framer workspace.
🎨 Colors
Changing the color palette across the entire website is very easy and will only take a few seconds.
Open the Assets panel: Go to the left sidebar menu and enter the color styles section.
Locate global colors: You will see the list with the main tones powering the template.
Modify values: Click on any color to change its code and adjust the hue.
Enjoy the update: All elements connected to that color will automatically update across your entire site.
🔤 Fonts
Adjust typography to seamlessly match your brand’s style.
Open Text Styles: In the left sidebar panel, enter the text styles section.
Select hierarchy: You will see the fonts assigned to headings, subheadings, body text, and buttons.
Modify text: Select the typography you want to change and adjust the font family, size, or weight.
Automatic application: Changes will instantly reflect across all pages of your site.
📁 Custom Fonts
You can upload your own font files directly from Framer’s font picker and use them across your template.
Select a text layer: Choose any text element in your project.
Open the font picker: Click the current font in the right panel and go to Custom.
Upload your file: Click Upload Fonts and select your font file from your computer.
Use in design: Once uploaded, the new font will be available to use in your text layers and Text Styles.
✏️ Content
Learn how to edit static text, replace images, and update buttons across your website.
Edit text: Double-click any text on the canvas or change it from the properties panel on the right.
Replace images: Select the image you want to change, go to the right panel, and upload your file.
Update links: Click on any button or icon, go to the link option in the right panel, and enter your target URL or path.
🗄️ CMS Collections
Easily manage your dynamic content, such as blog posts, services, or portfolio items.
Open the CMS: Click the top-left menu and select the CMS option
Select your collection: Choose the collection you want to manage from the left panel.
Edit directly or open detailed view: You can modify data directly in the table cells or click the button on the Slug field to slide out the right panel with all editable fields for that item.
Saves changes: Your changes will update across connected CMS sections and appear on the live site once you publish your changes.
Important: Keep in mind that the CMS page layout acts as a shared template. Any design or structural changes made to that page will apply to every item in the collection.
🧩 Layout Templates
Customize shared elements such as navigation bars and footers from one place.
Open the template: Go to Assets and select the Layout Template you want to edit.
Edit shared elements: Update the navigation, footer, announcement bar, or other shared content directly inside the template.
Adjust each breakpoint: Customize the Desktop, Tablet, and Mobile versions when needed.
Automatic updates: Changes made to the Layout Template will apply to every page using that template.
⚙️ Components
Learn how to customize reusable components using their exposed variables.
Select the component: Click the component instance you want to customize.
Use the right panel: Access the available text, link, image, color, and other exposed variables.
Customize: Update the values directly from the component controls in the right panel.
📩 Forms
Set up your contact forms to receive inquiries directly in your inbox.
Select the Form layer: Choose the Form component on the canvas.
Configure email: In the right panel, find Sent To, choose Email, and enter your email address.
Confirm your email: Verify the recipient address if Framer asks you to confirm it before receiving submissions.
Customize fields: Update the form fields, labels, placeholders, and required settings to match your needs.
🚀 Publishing & Domain
Review your site, configure SEO and social settings, connect your domain, and publish it when everything is ready.
Preview your site: Use Preview to test your pages, interactions, and responsive layouts before publishing.
Configure SEO & Socials: Open Site Settings to add your page title, meta description, and social sharing image.
Connect your domain: Go to Site Settings, open Hosting, Domains, enter your custom domain, and follow the DNS instructions provided by Framer.
Publish your site: Click Publish to launch your website. Use Update whenever you want to publish future changes.
💬 Support
If you need technical assistance or have questions about your template, feel free to reach out.
Check the guide: Review the documentation first in case your question has already been answered.
Send an email: If you still need help, send me an email explaining the issue.
Attach a short video: Include a screen recording showing the issue clearly inside your Framer project.
Share your Remix Link: If deeper troubleshooting is needed, I may ask for your project’s Remix Link to inspect the setup directly.
Templates
Don’t have a template to customize yet?
Explore free and premium Framer templates and find one you can make your own.
