Guide Overview
01 — Before You Start
Create a backup and follow the recommended customization order.
02 — Editing Text
Change headlines, paragraphs, labels and button text.
03 — Replacing Images
Replace and optimize project, service and website imagery.
04 — Changing the Logo
Replace the Navbar and Footer logo.
05 — Changing the Brand Name
Replace “Design Studios” with your own company or agency name.
06 — Changing Colors
Customize the complete color scheme of the template.
07 — Changing Fonts
Replace fonts and adjust typography.
08 — Navbar & Navigation
Edit navigation labels, links and Current states.
09 — Hero Section
Customize the main headline, description and buttons.
10 — About Section
Replace the company introduction and supporting content.
11 — Portfolio / Recent Projects
Add your own projects, images and project links.
12 — Services Section
Customize, remove or add services.
13 — Service Links
Configure the “Learn more” buttons.
14 — Our Process Carousel
Edit the Process cards without breaking the custom carousel.
15 — Book a Call Button
Connect the CTA to your preferred booking destination.
16 — Our Impact Section
Customize the animated statistics.
17 — Rating / Social Proof & Testimonials
Replace the demo rating or add your own testimonial section.
18 — Final Call to Action
Customize the final CTA before the Footer.
19 — Contact Page
Replace the Contact page content.
20 — Contact Form
Customize and configure the project request form.
21 — Form Success State
Edit and test the successful submission state.
22 — Footer
Replace branding, contact details and Footer navigation.
23 — Social Links
Connect your social media profiles.
24 — Imprint
Replace all placeholder legal information.
25 — Privacy Policy
Review and customize the Privacy Policy.
26 — Editing Components
Understand how reusable Framer Components work.
27 — Component Properties
Change text, images, links and variants safely.
28 — Do Not Detach Components Without a Reason
Keep Components connected whenever possible.
29 — Desktop, Tablet & Mobile
Check all responsive breakpoints.
30 — Mobile Testing
Test the website on a real mobile device.
31 — Hover Effects
Customize Desktop hover interactions carefully.
32 — Adding a New Section
Duplicate existing sections to preserve the design system.
33 — Removing a Section
Remove sections without leaving broken links or spacing.
34 — Adding a New Page
Create additional pages based on the existing design.
35 — SEO Settings
Update titles and Meta Descriptions.
36 — Favicon
Replace the browser icon.
37 — Social Share Image
Replace the Open Graph / Social Share image.
38 — Image Optimization
Keep images lightweight and fast.
39 — Before Publishing
Perform a complete final website check.
40 — Important — Do Not Modify
Important parts of the template that should remain unchanged.
41 — Thank You
Final notes, creator information & Framer credit.
01. Before You Start
Before customizing the template, create a duplicate of the project.
This gives you a clean backup in case something is accidentally deleted or changed.
A recommended customization order is:
Replace your logo and brand name.
Change colors and fonts.
Replace text and images.
Replace projects and services.
Update the Process section.
Update the Impact statistics.
Update Contact information.
Configure the Contact Form.
Replace Footer information.
Update legal information.
Update SEO, favicon and Social Share settings.
Test Desktop, Tablet and Mobile.
Publish.
This workflow makes customization easier and reduces the risk of breaking the layout.
02. Editing Text
To change any text:
Select the text directly on the canvas or inside the Layers panel.
Double-click the text.
Replace the existing content.
Adjust the Typography settings in the right sidebar if necessary.
You can safely change:
Headlines
Paragraphs
Section labels
Button text
Service names
Project names
Descriptions
Important
Try to keep replacement text approximately the same length as the original.
Significantly longer headlines or descriptions can change the layout, especially on smaller screens.
After larger text changes, always check:
Desktop
Tablet
Mobile
03. Replacing Images
Select the image you want to replace.
In the right sidebar, locate the image settings and choose Replace.
Recommended formats:
WebP / AVIF — photographs and website imagery
PNG — transparent graphics
SVG — logos and icons
For larger website images, approximately 1600–2400 px width is usually sufficient.
Avoid uploading unnecessarily large files because they can increase loading times.
After replacing an image, check:
Image crop
Position
Aspect ratio
Mobile appearance
For most project and service images, Cover works well.
04. Changing the Logo
The main logo is used inside the Navbar and Footer.
Select the existing logo and replace it with your own.
For the best result, use:
SVG with a transparent background
SVG logos remain sharp on every screen size.
After replacing the logo, check:
Desktop
Tablet
Mobile
If your logo is significantly wider or taller than the original, you may need to adjust the surrounding spacing slightly.
Avoid changing the overall Navbar structure unnecessarily.
05. Changing the Brand Name
The demo brand name is:
Design Studios
Replace it with your own business, studio or agency name.
Check the complete project for references to the original brand.
Important places include:
Navbar
Footer
SEO settings
Legal pages
Contact information
Social Share information
Page titles
Make sure no unwanted demo branding remains before publishing.
06. Changing Colors
The colors of the template can be fully customized inside Framer.
You can change the colors of:
Backgrounds
Text
Buttons
Borders
Cards
Icons
Accent elements
Hover states
Form states
To change a color:
Select the element you want to edit.
Open the right sidebar.
Locate Fill, Text Color, Border or the corresponding color setting.
Choose your new color.
Shared Colors
If a color is connected to a shared Framer Color Style or Variable, changing that shared value can automatically update all elements using it.
This is the recommended way to change the overall color scheme because it keeps the design consistent.
You can transform the current dark design into almost any visual direction.
For example:
Black & Gold
Dark Blue & White
Light Minimal
Corporate Gray
Your own brand colors
Important
After changing the main colors, also check:
Buttons
Hover states
Borders
Icons
Navbar
Mobile navigation
Footer
Form fields
Error states
Success states
Make sure there is enough contrast between text and backgrounds so that the website remains readable.
07. Changing Fonts
Select a text element and open the Typography settings.
You can change:
Font Family
Font Weight
Font Size
Line Height
Letter Spacing
Different fonts have different proportions.
Changing the main font can therefore affect:
Headline wrapping
Navbar spacing
Button widths
Card heights
Mobile layouts
After changing fonts, check:
Hero headline
Navbar
Buttons
Service cards
Project cards
Process cards
Contact Form
Footer
Also review Tablet and Mobile.
08. Navbar & Navigation
The main navigation contains links such as:
Home
About
Portfolio
Contact
To change a navigation item:
Select the Nav Link.
Change its text.
Open the Link setting.
Select the correct page or section.
Current Page State
The Navbar may use a Current state to visually highlight the active page.
Do not remove the Current state if you want visitors to see which page they are currently viewing.
You can customize the appearance of the Current state, for example:
Underline
Different text color
Different opacity
After changing navigation labels, check that the Navbar remains properly aligned on all breakpoints.
09. Hero Section
The Hero is the first major section visitors see.
You can customize:
Small label
Main headline
Supporting description
View Work button
Get in Touch button
Background visuals
Simply select the existing content and replace it with your own.
Recommended
Keep the main headline relatively short.
Very long headlines can create additional lines and change the visual balance of the Hero.
After editing, check:
Desktop
Tablet
Mobile
Also test both Hero buttons.
10. About Section
The About section introduces your company, agency or studio.
You can replace:
Section label
Headline
Paragraphs
Images
Supporting text
Service-related keywords
Replace the demo copy with information that describes your own business.
You can explain:
Who you are
What you do
Who you work with
What makes your company different
If you add significantly more text than the original, check the section spacing afterward.
11. Portfolio / Recent Projects
The Recent Projects section is designed to showcase your work.
Replace the demo projects with your own projects.
For every project, update:
Project image
Category
Project name
Project link
Use high-quality images with similar proportions when possible.
This helps maintain a consistent layout.
Project Links
Select each View Project element and connect it to the correct destination.
This can be:
A project detail page
An external case study
A client website
Another relevant URL
If you do not have a detailed project page, you can remove the link.
Always test every project link before publishing.
12. Services Section
The Services section is located on the Home page.
The template contains service cards such as:
Web Design
Branding
Photography
Content Creation
Development
You can replace these with any services your business provides.
Each card can be customized.
You can change:
Service title
Description
Image
CTA text
Link
Removing a Service
If you do not need one of the services, delete the complete service card.
After deleting it, check:
Desktop layout
Tablet layout
Mobile layout
Adding a Service
The easiest way to add another service is to duplicate an existing card.
Then replace its content.
This helps preserve the same design and spacing.
13. Service Links
The service cards contain Learn more CTAs.
Connect every CTA to the correct destination.
You can link to:
A dedicated Service page
Another page
A Contact page
Another section
An external website
If you do not need individual Service pages, you can remove the CTA.
Always test the links before publishing.
14. Our Process Carousel
Important!
The Our Process section contains custom functionality.
The current Process contains steps such as:
01 Discover
02 Strategy
03 Design
04 Develop
05 Launch & Grow
You can safely change the visible content of the Process cards.
You may edit:
Step number
Title
Description
Icon
Image
You can also rename the complete Process steps to match your workflow.
Do Not Remove the Code Overrides
The Carousel requires the following Code Overrides:
ProcessCarouselTrack
ProcessCarouselPrev
ProcessCarouselNext
These control important Carousel functionality including:
Mobile swiping
Previous arrow
Next arrow
Carousel positioning
Do not remove, rename or replace these Overrides.
You normally do not need to open or modify the Carousel code.
After Changing the Process
Always test:
Swipe left
Swipe right
Next arrow
Previous arrow
Test the Carousel in Framer Preview and on a real mobile device before publishing.
15. Book a Call Button
The Our Process area contains a Book a Call now CTA.
You can change:
Button text
Button link
You can connect it to:
Contact Page
Calendly
Booking system
External scheduling service
Another page
If you use an external booking platform, you can enable Open in New Tab.
Always test the destination before publishing.
16. Our Impact Section
The Our Impact section contains animated statistics.
Replace the demo statistics with values that are relevant to your business.
You can change:
Number
Unit
Label
Supporting text
Example metrics could include:
Projects completed
Average delivery time
Clients
Years of experience
Countries served
Important
The numbers may use an animation.
After changing the values, preview the website and make sure:
The animation starts correctly
The correct final value appears
The text still fits on Mobile
17. Rating / Social Proof & Testimonials
The rating / social proof area can be customized to match your business.
The demo content should be treated as placeholder content.
You can:
Replace the rating with your own genuine rating
Change the text
Change the icons
Remove the rating completely
Replace it with customer testimonials
Do not publish demo ratings as real customer ratings.
Adding Testimonials
If you want to display customer reviews, you can add any testimonial design that fits your website.
There are several ways to do this.
Create Your Own Testimonials Section
You can build a testimonial section directly inside Framer.
For example, create cards containing:
Customer quote
Client name
Company
Position
Profile image
Rating
Use the existing template typography, spacing and colors so that the new section matches the rest of the website.
Duplicate an Existing Section
You can also duplicate an existing section from the template and redesign it into a testimonial section.
This can make it easier to preserve:
Maximum width
Spacing
Typography
Responsive behavior
Use the Framer Marketplace
You can also use a testimonial Component, Section or Template from the Framer Marketplace.
You can either:
Download a free testimonial section
Purchase a premium testimonial Component
Purchase another Framer Template containing a testimonial section
After adding it to your project, customize it so that it matches this template.
Update:
Colors
Fonts
Spacing
Border radius
Client names
Quotes
Images
Ratings
Important
Only publish genuine customer testimonials and ratings.
If you do not have testimonials yet, you can simply leave them out and add a testimonial section later.
18. Final Call to Action
Before the Footer, the template contains a final Call to Action.
It includes content such as:
LET’S WORK TOGETHER
Let’s build something exceptional.
and the Start Your Project button.
You can change:
Small label
Headline
Description
Button text
Button destination
The CTA is designed to direct visitors toward the Contact page.
If you change the destination, make sure the button still links to the correct page.
19. Contact Page
The Contact page is designed to collect project inquiries.
Replace the demo information with your own business information.
You can customize:
Headline
Description
Contact information
Form labels
CTA text
Make sure all displayed email addresses and company information are correct.
20. Contact Form
The Contact Form is designed for project inquiries.
It contains fields such as:
Your Name
Email Address
Company / Brand
What Can We Help With?
Approximate Budget
Project Description
Preferred Start Time
You can rename visible labels if required.
Before Publishing
Test the Contact Form carefully.
Check:
Required fields
Email validation
Error states
Success state
Form submission
Try submitting the form with missing fields.
Try entering an invalid email address.
Then submit the form correctly.
Make sure the submission reaches the correct destination.
21. Form Success State
After a successful submission, the visitor receives a success response.
You can customize the success message if necessary.
You can edit:
Success headline
Supporting message
Visual appearance
Do not remove the underlying Form logic when changing the design.
After making changes, always perform another real submission test.
22. Footer
The Footer contains the final website information.
It includes elements such as:
Branding
Short company description
Navigation
Services
Contact information
Location
Social Links
Copyright
Imprint
Privacy Policy
Replace all demo information before publishing.
Make sure your:
Company name
Email
Phone number
Location
are consistent throughout the website.
23. Social Links
The Social Links are located inside the Footer.
To customize them:
Open the Footer.
Select the social icon or social link.
Open the Link setting in the right sidebar.
Replace the demo URL with your own profile URL.
You can connect platforms such as:
Instagram
LinkedIn
Behance
Dribbble
YouTube
X / Twitter
If you do not use a platform, simply remove the corresponding icon or link.
For external profiles, you can enable:
Open in New Tab
Before publishing, click every Social Link and make sure it opens the correct profile.
24. Imprint
The template includes an Imprint page.
The included information is placeholder content.
Replace all demo information with your own business information.
Depending on your business, this may include:
Company name
Owner
Responsible person
Address
Email
Phone number
VAT information
Company registration details
Do not publish the placeholder information.
25. Privacy Policy
The template includes a Privacy Policy page.
Review and customize it according to:
Your company
Your country
Your Contact Form
Your analytics tools
Your hosting setup
Your external services
Your cookies
Any additional integrations
Important
The included legal pages are only a starting structure.
Legal requirements vary depending on your country, business and services.
You are responsible for making sure the final legal information is appropriate for your website.
26. Editing Components
Several parts of the template may use reusable Framer Components.
Examples include:
Navbar
Buttons
Footer
Cards
Process Cards
Service Cards
If you edit the Main Component, the change may appear everywhere that Component is used.
This is useful for global design changes.
For example:
Changing the button style in the Main Component may update all buttons using that Component.
Before editing a Main Component, check where it is used.
27. Component Properties
Many Component instances contain editable properties.
Select the Component and check the right sidebar.
Depending on the Component, you may be able to change:
Text
Image
Icon
Link
Variant
Use these properties whenever possible.
This is usually safer than opening the Component and changing its internal structure.
It also keeps the project easier to maintain.
28. Do Not Detach Components Without a Reason
Framer allows you to detach a Component instance.
Avoid doing this unless you specifically need an independent version.
Once a Component is detached, it no longer receives updates from the original Main Component.
For normal changes such as:
Text
Images
Links
Variants
detaching should usually not be necessary.
29. Desktop, Tablet & Mobile
The template uses responsive layouts.
After making larger changes, always check every available breakpoint.
Review:
Desktop
Tablet
Mobile
Pay particular attention after changing:
Fonts
Headlines
Images
Card sizes
Navbar text
Spacing
Buttons
Components
A layout that looks correct on Desktop may need adjustment on Mobile.
Use Framer Preview regularly while customizing the website.
30. Mobile Testing
Do not rely only on the Framer editor.
Before publishing, open the actual website on a real smartphone.
Test:
Navbar
Mobile navigation
Hero buttons
Portfolio
Services
Our Process Swipe
Our Process arrows
CTA buttons
Contact Form
Footer
Social Links
The Our Process Carousel should allow visitors to swipe naturally between cards.
Also test the previous and next arrows.
31. Hover Effects
Some elements use Hover interactions on Desktop.
These interactions are intentional and contribute to the visual style of the template.
You can customize individual Hover effects through the Interaction or Variant settings.
For example:
Movement
Opacity
Scale
Shadow
Border
Important
Avoid changing the overflow or Code Override structure of the Our Process Carousel.
Changing these settings may affect:
Mobile swiping
Arrow navigation
Desktop card animation
If you only want to change the visible content of the Process cards, leave the Carousel structure unchanged.
32. Adding a New Section
If you want to add another section, the easiest method is usually to duplicate an existing section with a similar layout.
Then:
Move it to the desired location.
Replace its content.
Adjust spacing if necessary.
Check all breakpoints.
Duplicating an existing section helps preserve:
Maximum width
Spacing
Typography
Responsive behavior
Design consistency
33. Removing a Section
If you do not need a section:
Select the complete section inside the Layers panel.
Delete it.
Check the spacing between the sections above and below.
Remove any navigation or button link pointing to the deleted section.
Afterward, check:
Desktop
Tablet
Mobile
34. Adding a New Page
To create another page:
Duplicate an existing page.
Rename the page.
Change its URL slug.
Replace the content.
Update its SEO settings.
Add a Navbar or Footer link if required.
Duplicating an existing page helps keep the same design language.
35. SEO Settings
Before publishing, update the SEO information for your website.
Open the settings of each important page.
Change:
Page Title
Meta Description
Example:
Page Title
Your Company — Creative Digital Agency
Meta Description
We create modern websites, brands and digital experiences for ambitious businesses.
Do not leave the original Design Studios brand name in the SEO settings if you are using your own brand.
Check SEO settings for all important pages.
36. Favicon
Replace the demo favicon with your own icon.
The favicon appears inside the browser tab.
Use a simple version of your logo because detailed graphics can be difficult to recognize at very small sizes.
Also replace the Apple Touch Icon if applicable.
37. Social Share Image
Replace the template's Social Share / Open Graph image.
This image may appear when someone shares your website through:
LinkedIn
WhatsApp
Messaging apps
Social media platforms
A common size is:
1200 × 630 px
Use your own branding and imagery.
38. Image Optimization
Before uploading new photography, optimize the files.
Recommended formats:
WebP
AVIF
Avoid uploading unnecessarily large uncompressed images directly from a camera.
Large files can significantly increase page loading times, especially on Mobile.
Use PNG mainly when transparency is required.
Use SVG for logos and simple vector graphics.
39. Before Publishing
Before publishing, review the complete website one final time.
Check:
Logo
Brand name
Hero content
Hero buttons
About content
Portfolio projects
Project images
Project links
Services
Service links
Our Process content
Carousel swipe
Carousel previous arrow
Carousel next arrow
Book a Call button
Our Impact statistics
Rating / Social Proof
Testimonials if added
Final CTA
Contact Page
Contact information
Contact Form
Form validation
Success state
Footer
Social Links
Imprint
Privacy Policy
SEO
Favicon
Social Share image
Desktop layout
Tablet layout
Mobile layout
Make sure no unwanted demo content remains.
40. Important — Do Not Modify
There are only a few areas that should not be changed unless you know exactly what you are doing.
Our Process Carousel Overrides
Do not remove:
ProcessCarouselTrack
ProcessCarouselPrev
ProcessCarouselNext
These are required for the Carousel functionality.
Component Structure
Avoid unnecessarily detaching Components.
Use their available Component properties whenever possible.
Responsive Layout
Avoid deleting breakpoint-specific settings without checking Desktop, Tablet and Mobile afterward.
Most normal customization tasks do not require changing the underlying structure.
You can safely customize:
Text
Images
Branding
Colors
Fonts
Projects
Services
Contact information
Links
Quick Start Checklist
If you want to customize the template as quickly as possible:
Duplicate the project.
Replace your logo.
Replace the Design Studios brand name.
Change colors.
Change fonts.
Edit the Hero.
Replace About content.
Add your Projects.
Customize Services.
Update the Process cards.
Replace the Impact statistics.
Replace or remove the demo rating.
Add Testimonials if desired.
Update the final CTA.
Configure the Contact Form.
Replace Footer information.
Update Social Links.
Replace Imprint information.
Review the Privacy Policy.
Update SEO.
Replace favicon and Social Share image.
Test Desktop.
Test Tablet.
Test Mobile.
Publish.
Need Help?
If you have questions about the template, need help with customization or run into a problem while setting up your website, feel free to contact me.
You can send your request to:
I will do my best to answer your request as quickly as possible and help wherever I can.
To help me understand your issue faster, please include a short description of the problem and, if possible, a screenshot or additional information.
You can also use your untouched duplicate of the original template as a reference.
For the safest customization workflow:
Change the content first.
Change the visual design second.
Change the structure last.
This helps preserve the responsive layout, Components and existing interactions.
Thank You!!
Thank you for choosing Design Studios.
I created this template to give creative agencies, studios and modern businesses a flexible foundation for building a professional online presence.
I hope it gives you a strong starting point for your next project.
Design Studios — Framer Template
Customization Guide — Version 1.0
Created by David Weber
Built with Framer.