Brand your website
Making your online presence reflect your brand identity is key to making the user experience the best it can be. With effective website branding, you can establish a clear connection between you and the site, making it stand out from the rest and easily recognizable.
RevasOS is based on the concept of high-quality visual web design delivered through themes that can be customized by the website creator. This provides the highest level of quality of user experience for the end user and ease of use for the website creator.
In this guide, you will learn how to customize your website template by changing its colors, logos, fonts of your brand, and other aspects.
Branding in RevasOS
Branding on RevasOS is applied to the following elements that have a high impact on the graphic appearance of the site and its differentiation from other websites:
- The main logo,
- The favicon,
- The typeface,
- The main color,
- The roundings of the shapes.
Upload the logo and favicon
Choosing a logo and a favicon is essential for the identity of a brand on a website, with the difference that the logo will be clearly displayed on the actual website, while the favicon will be used in the browser tab, if supported.
For this reason, it is recommended to use smaller files (32x32 pixels) for favicons, while logos can be larger.
To add a logo and a favicon to the website follow these steps:
- Open the Websites app in RevasOS;
- Find the group of websites you want to make changes to;
- Click on the button with the name of the chosen template (for example Default Template) located next to the name of the website on the group of websites bar;
- Click on the "Upload icon" button and select the favicon file;
- Click on the "Upload logo" button and select the logo file;
- Click "Save" in the top right corner to apply the changes;
Choose the accent color
RevasOS also gives you the option to choose the accent color based on your brand identity. This color will be used in all the accent elements of the group of websites.
Colors convey a lot of feelings and emotions immediately: red is warm and sensual, yellow is bright, green is serene and calm, blue is pleasant and relaxed and black is elegant and sober.
Think about what feeling you want your site visitors to feel: elegance and sobriety, or energy and movement? Some colors are more energetic than others, so if you want something sober, elegant and calm you can choose colors like blue, green, light blue, maybe in neutral or slightly bright colors. If you want to convey energy, instead, aim for red, orange, yellow or purple, maybe in bright colors.
To add the accent color to the group of websites follow these steps:
- Open the Websites app in RevasOS;
- Find the group of websites you want to make changes to;
- Click on the button with the name of the chosen template (for example Default template) that is next to the name of the site on the site group bar;
- Click on the hex code of the accent color;
- Enter the hex code of the accent color you have chosen;
- Click "Save" in the top right corner to apply the changes;
Set the font
Another way to personalize the website and make it more recognizable is to add the brand font. This will be used on all pages of the group of websites.
The font conveys a lot of personality as there are different types and each with its own graphic style with a distinct personality: imagine visiting a site that uses "Times New Roma" and then one that uses "Comic Sans". Which of the two conveys to you an idea of greater professionalism, seriousness and precision? Perfect if you are looking for a new lawyer. But if you are looking for a service to organize a birthday party, which will give you a greater idea of fun and joy?
The existing font types are:
- Serif, or those with feet and embellishments, such as "Times New Roman" or "Merryweather",
- Sans Serif, or those linear and precise without embellishments, such as "inter", "Calibri" or "Roboto",
- Monospace, or those with all the letters of the same size and with equal spacing similar to those of typewriters,
- Display, those very full of personality and often used only in titles or graphics as they are difficult to read in small.
You can search for fonts using sites such as Google Fonts or Adobe Fonts if you have an active Adobe plan. Here you can search among many fonts.
If you want, to start we can start with a very versatile font, elegant and neutral like "Inter".
To customize the font of your website group, follow these steps:
- Open the Websites app in RevasOS;
- Find the group of sites you want to make changes to;
- Click on the button with the name of the chosen template (for example Template default) that is next to the name of the site on the site group bar;
To change it, select the default font you want to use from the drop-down menu next to the Font item. Or activate the Use custom configuration checkbox to use a specific value. In this case, follow these steps:
- In the first field under the Font label, enter the name of the font;
- In the second field, enter the link that leads to the font package
- Click Update preview or Save and proceed to apply the changes.
If you know CSS and HTML, you can also add additional fonts to your website to use in specific places or just for titles, for example, thanks to code injection.
Define the rounded edges
Even if it seems like a secondary element, in a website the geometric shapes are many and widespread and help to define the "softness" or "hardness" of a brand: a website with buttons and tabs with very rounded corners will convey an idea and a feeling of sweetness, softness and openness, while a website
Other customizations
If you know CSS and HTML, thanks to code injection you can completely transform the style of your template, modifying the appearance of some sections or blocks even page by page.
Learn More
Next Steps
Now that you've customized your website and aligned it with your brand image, here's what you can do: