How to Upload your Logo in Flatsome Theme

Want to personalize your Flatsome site with a custom logo? This guide will walk you through how to upload a high-quality logo in either PNG or SVG format. Let’s get started!

Step-by-Step Guide:

Step 1: Choose Your Logo Format

1. Prepare Logo Files: It’s best to use either SVG or PNG files.
   • SVG files are vector-based and remain sharp on any screen.
   • PNG files support transparency, unlike JPEG, making them ideal for websites with transparent headers.
2. Organize Files: Place your logo files in a folder on your computer for easy access. Have both a “light” (for transparent headers) and a “normal” version if needed.

Step 2: Resize Your Logo

1. Check Dimensions: Your logo should ideally be double the width you plan to display on your site. For example, if your logo container width in Flatsome is 180 pixels, your logo file should be 360 pixels wide.
2. Retina-Ready Quality: This sizing trick ensures your logo stays sharp on high-resolution screens.

Step 3: Upload PNG Logo in Flatsome

1. Go to WordPress Dashboard: From your WordPress admin, go to Flatsome > Theme Options.
2. Select Header Settings: Click Header and then go to Logo & Site Identity.
3. Replace Default Logo: Click on the existing logo, select Upload Files, and upload your PNG logo.
4. Select Image Size: Assign the normal logo (black text) to the header, and adjust the width to half the original size of the uploaded image for best display quality.

Step 4: Setting Up Transparent Header with Light Logo

1. Enable Transparent Header: On the page where you want a transparent header, open it in UX Builder.
2. Select Transparent Header Option: Choose Full Width Transparent Header with Light Text under page layout.
3. Upload Light Logo: Go back to Logo & Site Identity in your Flatsome settings, and add your light logo version (e.g., white text) for transparent headers.

Step 5: Using SVG Logos (Requires Plugin)

1. Install SVG Plugin: In the WordPress dashboard, go to Plugins > Add New. Search for “SVG support” and install a plugin like “SVG Support by Benbodhi”.
2. Activate the Plugin: Once installed, activate the plugin to allow SVG uploads in WordPress.
3. Upload SVG Logo: Return to Theme Options and upload your SVG logo the same way as before.
4. Select SVG for Header: Replace your PNG with the SVG version if you prefer. SVGs will automatically scale for any screen size without needing the double-size trick.

Your custom logo is now set up in Flatsome! Enjoy your personalized branding across your site.