We appreciate your decision to acquire the our template. This concise manual will guide you through the fundamental editing procedures for essential components such as colors, fonts, section structure, sizes and other.
For those new to Webflow, it's advisable to enroll in the Webflow 101 Crash Course offered by Webflow University. This course is designed to equip you with the foundational knowledge necessary for a smooth start.
Establishing the core components of your site's visual language with Webflow is a process centered around the use of variables and the style guide page.
Initiate with Variable Definition: Pin down your basic design elements like colors, fonts and sizes.
Utilize the Style Guide Page: This page should be used to conduct a visual review and make necessary adjustments to your designs.
Keep in mind, the style guide page is an invaluable tool for maintaining design uniformity. It serves as a visual benchmark for all the styles implemented on your site.
Also pay attention to the Global Component and Card Component pages! This will simplify and speed up your work!
This template utilizes the Webflow variables feature, allowing you to effortlessly modify all colors, which will be promptly updated across the entire site.To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.
Start by adding all your colors to the webflow variables
Then define the colors for the background (bg)
Then, you will notice how the corresponding colors you previously established for the background (bg) have been applied to other types, such as content, border, action primary, and action primary inverse.
Watch the short video to learn how to reassign colors
You can set the fonts family for headings and the paragraph. To do this, use variables.
If you require a custom or premium font that is not included in Webflow's library, navigate to Project Settings > Fonts, where you can upload your own custom fonts or link your Adobe Fonts account.
Next, set the size and line height individually for desktop and mobile for each type of text! Below is shown the commonly applicable typographic semantics for any website. For a deeper understanding of how to work with typography in Webflow and what mean the REM measurement unit is, read this article.
Sizes are also stored in variables! They change infrequently, but you always have the option to customize them.
At the core of the section structure is crucial foundational principles. Watch the video and examine the "section" component structure to understand how it functions!
The Title Area is a section that includes the title, description, and may also feature a tagline and buttons! It's a widely used component. You can explore different compositions of this component on the global component page. This video will show you what this component encompasses and how to work with it.
The space between the header and the description is also stored in variables! This is done to ensure that the spacing on your website is consistent.
At the core of the section structure is crucial foundational principles. Watch the video and examine the "section" component structure to understand how it functions!
Here are some of the most commonly used elements found on almost any website! The principles of their sizes, which are stored in variables, are the same as those for the component mentioned above.
To easily add SVG icons to your website and manage them through classes, you should use the embed code! Change the values of width and height to 100%, and change the value of fill to currentColor.
Similarly, insert your svg logo code on the style guide page in the logo section! Go inside the component without destroying it and replace the old code with the new one! Change the values of width and height to 100%, and change the value of fill to currentColor. After that, the old logo will be replaced with a new one throughout the site
Check out our short video tutorial on adding SVG icons!
It's now time to proceed with the subsequent steps for editing your website pages. Typically, two types of content require editing, as outlined below.
Static Content refers to all the material on your site that isn't managed by a CMS, meaning it doesn't change or update dynamically, such as blog posts.
This content is readily identifiable as it appears in grey within the left sidebar's Navigator and is highlighted with a blue border when you click on it or hover your cursor over it.
To modify this content, simply double-click on it, and you'll be able to edit it directly on the page.
Dynamic Content encompasses all the material on your site that is dynamic and automatically generated based on the information inputted into the CMS section located in the left sidebar, just beneath the Pages icon.
This type of content is distinguishable by its purple color in the left sidebar's Navigator and by the purple border that appears when you click or hover over it. To update this content, you should make changes directly within the CMS section. This setup is designed to simplify the process of updating frequently changing content, such as adding a new blog post.
Additionally, if you wish to edit an entire auto-generated CMS page, like a Blog Post, you can find this page available for editing at the bottom of all pages listed in the Pages section of the left sidebar.
For a deeper understanding of how CMS works, it is recommended to take the course on CMS and Dynamic Content offered by Webflow University.
To modify any template Interaction, such as removing an "appear" effect, you can quickly identify elements with interactions by looking for a small Interactions icon, resembling a tiny thunder, in the left sidebar's Navigator.
By clicking on this Interactions icon, the right sidebar's Interactions tab will open, allowing you to edit the interaction associated with that element.
Whenever you implement a change, such as designing a new section, it's advisable to check the Viewport in the top navigation to see how the update appears on both Tablet and Mobile devices.
This practice is particularly important if you've made significant alterations to the template, such as editing classes or adding new sections.
Even if you've only updated text or images without removing any Template class, it's still beneficial to periodically review the mobile and tablet views to ensure that everything displays correctly and looks optimal across all devices.
To tailor the Title, Description, and Image displayed when sharing your website on platforms like Facebook or Twitter, navigate to the Pages section in the left Sidebar.
Click on the small Settings icon next to the page you wish to customize. This action will reveal the settings where you can make the necessary adjustments.
Remember, it's crucial to modify these settings individually for each page to ensure the correct information is shared across different platforms.
Short lesson by Webflow
In the event of an issue, such as dissatisfaction with the website's direction, accidental deletion of essential classes that contribute to the template's aesthetics, or simply a desire to revert to a previous state, you can rely on the Backups section.
This section is located within the Settings area on the left Sidebar. Here, you'll find a list of both automatic and manually created backups.
Restoring your website to a previous backup is as straightforward as a single click.
Short lesson by Webflow
