How to edit template — Framer Template Customization Guide

You can remix the template and follow along with this guide.

Customizing your content

Remember: If you make changes on the desktop screen, they will automatically be reflected on both the tablet and mobile. However, if you make changes on a tablet or mobile, they won’t reflect on the desktop. I recommend working only on the desktop screen to avoid potential issues in the future.

Once you’re familiar with the template, it’s time to personalize it. Most users begin by updating the text and images.

To edit text, you can just double-click on the text and change it that way, or you can also select the particular element and then, on the right-side properties panel, you will see its properties, as shown in the image above.

To edit other content, such as images and components, it’s almost the same. All you have to do is select the particular element, and then, on the right-side properties panel, you will see its properties.

Components

This template comprises multiple components. When you select a component, you’ll see a pink outline around it. Most components can be easily customized using the properties on the right-side panel, as shown in the example image above.

However, for some components, such as the navigation bar, footer, and FAQs, you won’t see properties in the right-side panel. In those cases, you’ll need to either double-click the component or click Edit Component from the right-side panel to open it and edit its content.

Layout Templates (Edit Nav, Footer)

Layout Templates manage site-wide elements like navigation and footers in one place. This template supports Layout Templates, which means you can easily edit global components such as the navbar or footer. To access the Layout Template, select the desktop screen and, in the right-side panel, click Edit. This will take you inside the Layout Template, where you can open the navbar or footer component and customize them as you wish.

Recent Works Carousel

To edit the cards in the carousel, simply pan a little to the left, and you’ll find the cards listed there. All you need to do is select the card you want to edit, and then, just like we discussed earlier, update its content from the right-side panel of that particular card component.

Services Ticker / Reviews Ticker

Just like the carousel, editing the cards in the ticker works the same way. Simply pan a little to the left to find the cards.

Select the card you want to edit, then update its content from the right-side panel of that particular card component.

How to Change Colors

To change colors in Framer, you can do it globally or locally. Global changes update all layers using that color style across the project. Local changes affect only the selected layer or element.

To edit colors globally, On left side panel, go to Assets→ Styles → Color and update the color style. To change it locally, select a layer/element, go to the right-side panel, and change it from there.

How to Edit CMS Blog Posts

Framer CMS is a built-in tool that lets you manage dynamic content (like blog posts, projects, etc.). In our case, this template includes a blog in the CMS. To edit blog posts, go to the CMS option on the top left. From there, you can add a new item to create a new blog post or edit an existing item to update a blog post.

Connect the Contact Form

Framer lets you receive contact form submissions directly in your email. The form in this template is already set up. You just need to add your email address.

Select the form. Then, in the right properties panel, scroll to the Form section and choose Email under the Send To property.

Add the email address where you want to receive messages. You can also adjust the sender name, subject, and message text if needed.

Once your site is published, any form submission will be sent straight to your email.

Final Thoughts

I hope this guide helps you easily customize the Framer template. If you have any questions or need further assistance, feel free to reach out. Thank you for your time, and happy building! 🚀