Customize Your Color Palette and Typography with Showit
Your website is more than a digital presence; it's an extension of your brand and identity. It's the canvas where your story unfolds. To make that canvas uniquely yours, customization is key. With Showit, you have the creative freedom to customize your color palette and type styles. In this guide, we'll take you through the process, and to make things even easier, we've included a video tutorial that walks you through each step.
The Style Editor is your gateway to customization in Showit. To access it, follow these steps:
In the Showit builder, look to the left sidebar, where you'll find design settings. It will open the Style Editor where you can edit the site style & fonts.
Customizing your website's colors and typography is more than just a design choice – it's a brand statement. It's a way to ensure that your website aligns perfectly with your unique identity and leaves a lasting impression on your visitors.
The Importance of Customization
Color Palette
Your color palette is the foundation of your website's visual identity. Here's how to define it:
- Head to the "Smart Swatches" section in the Style Editor.
- Click the "+" button to add a new color swatch.
- Use the color picker to choose your desired color or input the hex code for precise matching.
- Edit existing swatches, organize them into folders, or rearrange them to suit your preferences.
Step 3: Apply Your Color Swatches
Now that you've defined your color palette, applying it to your website is a breeze:
Select the element on your canvas that you want to change the color of.
Use the color picker and choose the swatch from your color palette.
Typography plays a significant role in your website's aesthetics and readability. Here's how to create and apply custom type styles:
In the Style Editor, you'll find the Type Styles section. This is where you can define and customize your font styles.
In the Style Editor, navigate to the "Type Styles" section.
- Click the "+" button to create a new type style.
- Define your font's size, weight, style, and line height to match your brand's guidelines.
- Apply your type styles to text elements on your canvas.
Changing and adding Fonts
To utilize Google Fonts from Showit's library:
1. Access Design Settings: Follow the steps mentioned earlier to access the "Design" tab and then the "Fonts" option within Showit.
2. Browse Google Fonts: In the fonts selection menu, you will notice a variety of Google Fonts readily available for your use.
3. Select Google Fonts: Click on the Google Font you want to use, and it will be applied to your text elements seamlessly.
4. Customization: Just like with custom fonts, you can customize the style, size, and color of Google Fonts to match your website's aesthetic.
5. Preview and Save: Always preview your changes to ensure the chosen Google Font enhances your site's design. Once satisfied, don't forget to save your changes.
adding Custom Fonts
Step 1: Choosing Your Custom Fonts
Before you can add custom fonts to your Showit website, you need to select the fonts that best represent your brand. Here's how to do it:
1. Browse Font Websites: Start by exploring font websites like Google Fonts, Adobe Fonts, or myfonts.com. These platforms offer a vast collection of fonts that you can use on your website.
2. Pick Fonts That Match Your Brand: Consider your brand's personality and target audience. Choose fonts that align with your brand's values and the message you want to convey.
3. License Fonts: When you find fonts you like, make sure to check the licensing terms. Some fonts are free for personal and commercial use, while others may require a purchase or subscription.
4. Download the Fonts: Once you've selected your fonts, purchase and download them to your computer. You will need to purchase a web license in .woff format.
Step 2: Uploading Custom Fonts to Showit
Now that you've chosen your custom fonts, it's time to upload them to Showit. Follow these steps:
1. Access Your Site: Open your Showit website in the Showit app.
2. Add a Font: Click on “Media Library” in the left-hand menu. Create a folder called “Fonts” (optional, but helps keep all fonts organized).
3. Upload Your Custom Fonts: Drag and drop or upload the downloaded .woff font file from your computer into the “Fonts” folder in the Media Library. Close the Media Library once the font is uploaded.
Step 3: Add the Font to Your Showit Website
1. Access Design Settings: Click on the "Design" tab on the left sidebar.
2. Fonts: In the Design Settings, select the "Fonts" tab.
Why Custom Fonts Matter
Custom fonts allow you to infuse your website with personality, helping you communicate your brand's identity effectively. Showit offers a range of built-in fonts, but custom fonts can give your site a distinct look and feel that aligns with your brand.
3. Upload Your Custom Fonts: Under “Custom Fonts,” you’ll see a dropdown menu for “Woff Library.” Click on it and select the custom fonts you upload in Step 2.
4. Name Your Fonts: Give your custom fonts a clear and descriptive name to easily identify them in your font list.
5. Add Custom Font: Click the “Add Custom Font” button. The font will now show up in the active fonts section on the right side. Repeat the process for any other custom fonts you’ve uploaded.
7. Save Changes: Click the "Save" button to add the custom fonts to your Showit website and close the Design Settings.
Step 3: Applying Custom Fonts to Your Website
With your custom fonts now available in Showit, it's time to apply them to your website's design:
1. Select a Text Element: Click on any text element on your web page to bring up the text editor.
2. Choose a Font: In the text editor, open the "Font" dropdown menu. You will see your custom fonts listed there alongside Showit's default fonts.
3. Apply Your Custom Font: Select your custom font from the list, and it will instantly be applied to the text element.
4. Adjust Styling: You can also adjust the font size, style, color, and other text properties to match your design preferences.
5. Preview Your Changes: Always preview your changes to ensure your custom fonts are rendering correctly on your website.
Wrapping Up
Adding and choosing custom fonts in Showit can significantly enhance your website's visual appeal and branding. It's a simple process that can make a big difference in how your site communicates your brand's identity. As a beginner, take your time experimenting with different fonts until you find the perfect combination that complements your website's design. Showit's user-friendly interface makes it accessible for web design beginners to create a beautiful and uniquely styled website.