Start here
If you just purchased Invstor X Framer Template and are looking for the basics on how to get started editing it, start here.
Getting started
Thanks for purchasing the Invstor X template. In this brief guide we cover all the basics on how to edit basic elements (i.e. colors, fonts, CMS content, etc) from the Invstor X Framer template.
If you are not very familiar with Framer, we highly recommend you to take a look at the Framer Academy, as it will teach you all the basics to get up and running.
Styling
Let's get started with the styling of the template.
Colors
Invstor X template is built using Color Styles, meaning that you can easily edit a color style to be updated site-wide.
To do this, you need to go to the Assets tab in the left sidebar, then scroll to Colors section, and you will be able to see all color styles and edit them to be updated site-wide to any color needed.
Fonts
To update the fonts in the Invstor X template:
Open text styles: Go to any page, click the Assets tab, and find the text styles section.
Change the font: Select the text style (e.g., Body, Heading), then go to the typography settings. You can pick from the available fonts or upload a custom one to fit your brand.
Graphics & Icons
Some icons or graphics in the template are normal images (e.g., PNG, JPG, SVG), so when updating colors across the site, these elements may still retain their original template colors.
This is because these graphics are images, and CSS styling updates won’t affect them. However, since you're using Framer, all the graphics in the template are fully editable directly on the canvas page. You can easily modify them within Framer itself, or replace them with your own images or graphics that match your brand.
Editing pages
Now it's time to continue with the next steps to edit your website pages. Usually there are 2 types of content that will be edited, which are the following.
Static pages
Static Content is all the content that is not CMS-based, which means that it is not dynamic (like a Blog Post, for example).
If you want to edit this type of content, you can just double click it, and you will be able to directly type right there.
Dynamic Content (CMS)
Dynamic Content in Framer is content that automatically updates based on the data added to the CMS Collection. You can easily spot dynamic elements in Framer by selecting any CMS-connected content on your canvas. When you click or hover over these elements, they will display a data icon to indicate they are connected to the CMS. You can manage and update this content by editing the relevant CMS Collections, which can be accessed from the CMS panel in the left sidebar.
This content should be updated directly in the CMS Collections section. Framer makes it easy for you to keep dynamic content up-to-date, especially for items that will likely change frequently (e.g., adding a new blog post).
Alternatively, for quick changes, you can double-click on any CMS-connected text directly on the page to edit it instantly without going into the CMS panel.
If you want to edit a CMS-generated page (like a blog post), you can locate these pages by looking for the CMS icon (stacked database symbol) in the Layers panel. These CMS pages aren't necessarily grouped in one section; you may find them scattered across different folders. Once located, you can fully customize the layout and styling of these CMS-linked pages directly within the Framer canvas.
Useful notes
Also than the main basic explanation we shared above, here we share a few tips and how-to's which are from the most common questions we receive.
Effects
If you'd like to edit any template effect (e.g., removing an appear effect), you can easily identify elements with effects by looking for the Effects icon (a small star) in the left sidebar Navigator.
Clicking on an element with this icon will reveal the Effects section in the right sidebar, where you can edit or remove the interaction.
Editing Meta Title, Desc and Featured Image
To customize the Title, Description, and Image that appear when sharing your website (e.g., on Facebook, Twitter, etc.), simply right-click on the page you want to modify and select Settings. In the settings panel, you’ll find all the necessary SEO options to adjust these details.
Version history
If something goes wrong—like if you're not satisfied with the direction of the design, accidentally delete important layers, or just want to revert to a previous version—you can use the Version History feature in Framer.
To access this, click the Framer logo in the top left, then navigate to File > Version History (or use the shortcut ⇧⌘H on Mac or Windows). Here, you’ll see a timeline of automatically saved versions, with backups every five minutes for the past four hours, hourly for the last 24 hours, and daily for older versions.
While you can’t edit older versions directly, you can select elements from any previous version and copy them into your current project. Framer also offers the option to replace existing layers or add new ones when pasting.
Invstor X Framer Template Support
As you could see above, Invstor X was built on Framer using the best practices to make it very easy for you to edit the template and customize it to your needs.
However, if you ever find any issue, need help, or just want to say hi, feel free to send us at email at invstorx@brixtemplates.com — We will be happy to help you.
Custom Design & Development
On the other hand, if you are looking for help to build an unique and personalized version of Invstor X, or just an amazing website designed & developed from scratch on Framer, feel free to get in touch with our Framer Design & Development Agency. The amazing team behind Invstor X Framer Template can help you.
Frequently Asked Questions
Are you going to release a template for X?
Have an idea for another Framer Template you would like to see come to life? Send us your Framer Template Idea and win a special price if we select it.