Thank you for cooperating with 2PLUS. In this quick guide, we cover all the basics of editing the main elements (i.e. colors, fonts, content, links, etc.) from the Kerico site.
If you are new to Webflow, we highly recommend that you take the Webflow 101 crash course from Webflow University as it will teach you all the basics. Or you can watch the Webflow Start video course
Styling
Let's start with styling the template.
Colors
The site is built using color swatches, which means you can easily edit a color swatch to update across the site.
To do this, you just need to go to the Style tab on the right sidebar, then scroll to the Colors section under the Typography section, and if you click on a color, you can see all the color swatches and edit them to update. across the site to any color you need.
Fonts
The site uses one single font across the page, and it's set in the 'Body' (all pages) selector, so it means you can easily update the font across the entire site with one click.On any page, simply click the orange switch in the upper-right corner of the Style tab, then select Body Text (All Pages). Once you've done that, you can go to the Typography section below and change the font to any font for your business branding.
If you need a custom or premium font not available in Webflow, you can always go to Project Settings > Fonts and you can download custom fonts or connect your Adobe Fonts account.
Text/Button/Content Part styles
You can easily edit the styles of any element on the page by clicking on it after. After that, styles will appear in the right panel. You need the Typograthy section. All text styles of the element are placed there.
Editing of page content
Text
To edit the text, you just need to double-click on the text, after that you can edit the text.
Links
To edit the text, you just need to double-click on the text, after that you can edit the text.
Images
In order to replace the image, you just need to double-click on the element and a panel will open with an offer to replace the image.
Icons
In the project, all icons work through HTML Embed, in which the icon code from Figma is added. To replace the icon, you need to copy the new icon as SVG to Figma (right mouse button). And insert the code in HTML Embed.
Each icon is assigned the standard icon-embed class. This class sets styles and cannot be deleted.
Hide/show item
1. In order to temporarily remove an element, you need to remove it by clicking on it or selecting it in the layers panel (Z on the keyboard).
2. After that, go to the element settings by clicking on the gear icon in the right panel or press D on the keyboard.
3. After that, the VISIBILITY settings field will open, where you can hide the block or show it to users. Do not forget to publish the site after all changes, otherwise users will not see the changes.
Adding and removing items
You can easily add an element by clicking on the plus icon in the upper left corner. After that, a list of items will open. You can add heading, paragraph, button, div block...
To delete an element, you should select it by clicking on it and press Delete on the keyboard.
.jpg)
.jpg)
.jpg){kind=icon}
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
