Flex Admin & How to get started with Style Kits

If you recently purchased a Flothemes design (or updated your Flextheme to version 2.0) you’re probably curious about the Flex Admin tab, the style kits and how everything works inside. We prepared 2 quick articles to help you wrap your head around style kits, how they work and how to create a custom style kit based on your branding. This is Part 1, it includes an overview of the Flex Admin and explains how to get started with using style kits. Part 2 can be found here.

Before we dive into the process, let’s make sure you’re familiar with the terminology:

Style Kit – a predesigned styling direction for your website. It’s a combination of font and color options that determine the aesthetic and feel of your site. You can create your own style kits (check this article for a tutorial), based on your branding or imagination. Or, you can also subscribe to our libraryof premade style kits and enjoy a variety of website looks created by our designers. The subscription style kits come with a bonus of 20 unique page blocks, each. Currently there are 17 style kits inside the library with a total of 340 unique blocks. 

Flextheme – those who have been using Flothemes for years, know what’s the difference between a Classic theme, a Legacy theme and a Flextheme. Yet, if you just started using Flothemes, the term Flextheme is confusing for you. If you own any of the themes currently available in our shop – you own a Flextheme. It’s a new generation of website templates that have the Flex editor integrated into the theme core, hence allow you to go more wild with your website design ideas. 

Flex Admin Overview 

All your website’s styling settings, your fonts, colors and style kits – can be found and managed inside the Flex Admin tab. 

This tab includes 3 main areas:

1. My Account
This is where your general user information is kept – the order key for your theme or style kit subscription, as well as details about your Global Style Kit. 
The first time you open this tab, you will need to activate your theme license by introducing your order number and clicking on “Update”. Your Order Key is your purchase number, which can be found on your Orders page. After that, go ahead and click Start Data Sync. This will refresh your style kit library, get you the latest style kit updates and show you any new style kit purchases. 

If a new style kit is release and you should have access to it, via the style kit subscription or as a Classic theme owner – you will need to click on Start Data Sync to get those updates. 

2. Style Kits
Through this tab you can explore the style kits created by our team, as well as access your theme’s default style kit, plus any custom ones that you’ll create in the future. 

The Global Style Kit is the style kit that is currently applied to your whole website. To view it, go to Style Kits → Installed tab inside your Flex Admin area. If you install other style kits in the future, this is where you’ll be able to view them all. 

All your purchased Style Kits are going to appear under the Purchased tab. Meaning, if you currently have the Faro theme, you will find the Faro style kit inside this tab. It includes the default fonts and colors of the Faro theme. 

When you create your own custom style kits – they are saved inside the Custom tab of your Flex Admin area, and always easily accessed. 

Note: If you purchased your Flextheme before August, and haven’t updated it to version 2.0 or higher, you’ll need to do that to get access to Flex Admin and the style kits functionality. All details are here.

3. Edit Style
This is where all your font and color settings are located. We’ll mainly work inside this tab while we show you how to tweak your website’s styling, how to transfer your branding into your site, etc. 

Working with a Global Style Kit vs making changes to fonts & colors locally, inside each block

We recommend all our clients to work with their theme’s style kit, and apply all tweaks to fonts and colors inside the style kit, rather than locally inside each block. Why?

1. It’s more time efficient as compared to accessing each block to make the changes. It takes a single click to apply a new style kit and change the look of your entire website or a specific page, as a test.  
2. It helps maintain visual consistency. When you set your fonts and colors inside the global style kit, blocks inherit those settings and follow certain rules assigned by our design team. In this way, you don’t risk having too many font families or color combinations on each page – which make your website look  “messy” or overwhelming for your users.

When you chose to make changes inside a single block, and upload options that are not available inside your theme (via the Custom Typography tab or by applying colors that don’t come with your theme) – that block gets disconnected from your global style kit. Which means, when you’ll tweak your global style kit in the future – that block will keep its custom styling and won’t match the new design. To avoid having blocks disconnected from your main styling library – make customizations inside the style kit first, then apply those new fonts or colors inside your block. 

***

Now that you’re familiar with Flex Admin and have a solid understanding of how style kits work, let’s get to the fun part of creating a custom style kit and transferring your brand colors and fonts into your website design. Find Part 2 here.

Flothemes Team,
Supporting You.