Meet Style Kits for Elementor (1.2 Beta)

We have been hard at work lately, refining the experience for the Page styles control we introduced in our last update. The feedback was strikingly positive, so we took things a bit further. Today we rolled out Analog Templates version 1.2 which brings a couple of interesting things on the table, and of course, two brand new free templates.

Better Typographic and Spacing control in Elementor

With this update, you get robust control over typography and spacing for all your Elementor-powered layouts. Setting styles on a global scope, allows you to escape micro design, (where you find yourself tweaking the styles on a per-element basis), and embrace macro-control of your Design Systems essential variables. Typography, spacing, and soon, much more.

Apart from numerous other optimizations, we also get introduced to a new entity, Style Kits.

Style Kits

Simply put, a Style Kit is a collection of the custom Typography and Spacing styles that you have added to your template, via the Page Settings → Style panel. A Style Kit stores the styling information that is added there and (since version 1.2) includes:

  • Body and Headings Typography
  • Body and headings Sizes
  • Column Gaps

You can save your styles/values for all the above as a Style Kit. The good thing is that apart from selected pages, Style Kits can also apply globally, giving you unparalleled control over your whole design system, and allowing you to minimize your engagement with individual element controls, and go page-wide, or site-wide.

 

 

Setting styles on a global scope, allows you to escape micro design, and embrace macro-control of your Elementor-powered Design System.

 

Managing Style Kits

When you save your page styles as a Style Kit, it becomes available to use on any Elementor-powered layout and can be applied via the Page Style Kit dropdown.

You can update any changes that you make to the Style kit via the Update Style Kit button. Please note that when you update the layout you are working on, the changes do not get saved in the Style Kit, although the values remain in the custom controls. If you want to include these changes/values to your Style Kit, you need to make use of the Update Style Kit button.

At any point, you can Save a Style Kit as another file, and keep working on your new one.

You can switch Style Kits on any layout, and see a rapid transformation based on the new styles applied. Check the video below to see it in action:

 

 

Style Kits are stored as Custom Post Types and are accessible from your Dashboard by going to AnalogWP > Style Kits. You can visit this space to manage your kits.

 

With this update, you should check under AnalogWP \ Style Kits and you should already have these two Style Kits imported. Try applying them on an Elementor page.

 

As with any custom post type in WordPress, you can use the default WordPress importer and exporter to transfer this post type out and into any WordPress installation.

Making a Style Kit Global

You can make any of the available Style Kits global. From the Style Kits panel, click the text link You can set a Global Style Kit here that appears highlighted in the screenshot below.

 

 

This button will open the Elementor → Settings → Style tab, where you will find added controls for selecting the Global Style Kit. Once you define a Global Style kit, here is what you can expect:

  • The Global Style Kit will auto-apply on all the new Elementor pages and the ones that do not already have another Style kit manually applied to them.
  • Any Elementor page that has a different Style Kit applied on it, will not follow the Global Style Kit.

As you see, even you set a Global Style Kit, you can still override per page, by simply choosing a different Style Kit than the global one.

 

 

Optimized Controls and Improvements

An update is not complete without a good number of fixes and tweaks. Here are the major ones:

Page Styles link in the secondary menu

Another thing was that the Page Style panel is not very accessible most of the time, as you would have to click on the little cog icon at the bottom right of your editor, and then click the Style Tab. In this version, we are introducing a very efficient quick link/shortcut that you can now access via the right-click menu, on any element. Clicking the Page Styles shortcut will land you directly to… well, the Page styles tab.

Export Styles as Custom CSS

A new option has been added to export all the custom styles as CSS. This will export only the styles you have added at the Page Styles and not the styles that have been added manually on the elements.

The exported CSS is very useful if you already have a CSS-oriented workflow, or you simply want to add the CSS at the Custom CSS tab of your customizer and enjoy rock-solid, site-wide CSS consistency.

Adding Size controls for Text

The last version of the Page styles included separate controls for Body and Paragraph text. This was a bit of overkill by our side. In this version, we take a small step back, to get ready for the huge jump in the future, and we are consolidating those two controls into one Body Text control.

In this version, we also added Size controls for text. Practically this means that when you use a Heading Element with an HTML tag other than H1-H6, you can set sizes with different values than what you can have for Headings.

This allows establishing a typographic scale of 10 font sizes (5 sizes for headings and 5 sizes for non-headings) that can be used throughout the entire site and controlled with a single Style Kit.

From those 12 abstract font sizes of XXL, XL, Large, Medium and Small, we can have 5 sizes for our Headings Typography and 5 sizes for our text.

 

Adding line-height controls to sizes

Different font sizes require different line-height values in order to display properly, so just a single control for Size would not do the trick. We have added line-height controls for both Heading and Text sizes so that you can have precise control of every typographic size instance.

 

 

Two new Style-Kit-Powered Templates

With this update, we are introducing two new, free templates that are powered by Style Kits. Meet Struct and Dash. To make them appear in your Library, you need to have the latest version installed. Once done, please click on Sync Library on AnalogWP Settings page to get the latest templates.

 

A better way to distribute Templates

When you import any of these two templates, you will find a minimal amount of manually added style on the Element. Instead, all of the style values that define the specific template, have been teleported into the related controls at the Page Styles panel. If you like the styles of the page, you can save them directly as a Style Kit. You can then expand to building other pages using the same style kit, maintaining site-wide consistency and macro stylistic control.

If instead of saving the style values as a style Kit, you decide to try on another template, the style values will be accordingly updated to accommodate the design of the specific template you intend to import to your page.

Please note that only these two templates are powered by Style kits. All our other templates still have the styles manually added on them, so applying a Style Kit on these templates probably will not make any change, since the values on the individual Element controls always override the ones of the Style Kit.

Why we like this

In short, this way of template distribution and approach on design control has to offer the following:

  • Cleaner structure, with no added styles on every Element of your layout.
  • Inspires a simpler, component-based building mindset, where we design consistent layout systems, not disconnected collections of elements.
  • Using a template that comes with a Style Kit, allows you to scale-up the design of your next pages with safety and consistency. All you have to do is apply the same Style Kit to your pages, or set a Global Style Kit.
  • This is a very efficient solution for users of themes that do not come with Typographic controls. Elementor’s Hello theme is a great example.
  • Makes use of native abstractions like Sizes, and Column Gaps, and provides efficient control over them in a future-proof context.

Let us know your thoughts

We are really excited to share this news with you, and can’t wait to hear what you feel about them. The Style Kits features are currently in beta, and we look forward to optimize and refine any rough edges that will come up during the beta testing.

Feel free to download the latest version from the WordPress repository and try out the new feature. We really hope to bring true value in your workflow and inspire some robust design sessions.

We use a component-based tool (Elementor), with a modular logic natively built into it. It is time to integrate it into a broader context of systemic, consistent design practices that can scale with efficiency and safety. Thanks for your support, there are great things on the way.

✌🏻 Share this post on Social

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on pinterest
Pinterest

Submit your comment

31 thoughts on “Meet Style Kits for Elementor (1.2 Beta)”

  1. Wow, this is incredible!
    I have not yet been able to test all the features, but only reading the post has already made me super happy!
    Thank you!

  2. I look forward to testing this out (and using it) as this would really increase design workflow productivity. Great work and i’ll follow up when i’ve had to chance to try the new features.

  3. John great plugin and this will help you push out global styles and settings much more easier!! It my short time messing around with it – looks like the body typography settings shift all fonts on the page rather than just the body text.

    1. Thanks for the input, Jesse. All the styles will cascade from the body text styles. So, unless you set, for example, a different family for headings, the default font family will be the one you have set as body. I hope this helps, otherwise, let us know if you mean something different. Thanks!

    1. John Fraskos

      Thanks for your positive input here Puneet 🙂 means a lot to hear from you. Appreciate the kind words!

  4. Pingback: Free Elementor Templates: Download Free Elementor Page Templates

  5. This looks awesome! But I’m unclear how I actually create/apply style-kits to anything other than Struct/Dash.

    Can you clarify – can we modify CSS classes, etc, or create new Style-Kits from scratch on any theme (GeneratePress & Astra are my go tos).

    1. Hey Morgs! You can create stylekits on any theme. As long as elementor is enabled you are good to go.

      For now only a few templates from our collection are powered by stylekits, the plan is to convert them all. Working on it:)

      Thanks for the input!

  6. Love the approach. Looking forward to button styles as well. Would love a feature where I can just choose button for dark oder light background with my saved settings!

    1. Hey Marcel:) This should be available in a few days with the next update. Buttons are a struggle in Elementor, we definitely need this level of control on them.

      Stay tuned, thanks for the input 🙂

  7. Nice work! I’ve been wishing for more global controls like this, and having them grouped as kits is even better!

    One question: Do you have plans or thoughts around this scaling beyond typography and spacing into things like default button styling or global element defaults? Now THAT would make my propeller spin!

    Cheers.

    1. Thanks for the input here Grant 🙂 we do have such plans, certainly 🙂 we are adding default button controls in the next version and from there we are extending it even more.

      The product is an attempt to solve for real-life design workflow problems in Elementor, your input is highly appreciated. 🙂

      Thanks!

  8. Hey John, for font sizes of XXL, XL, Large, Medium and Small are you going to add additional styling options. Font weight, etc.?

    1. Hey Ivan 🙂

      Thanks for the input here. For now there are no plans to add more controls, for the sake of simplicity we only have size and lineheight.

      I understand the need for more styling though, perhaps this is one of the things we must revisit.

      Thanks!!

  9. Yeah it would be great to set one of the font sizes such as “Large” as the standard sub-heading under. Then there would be one spot to update them all from

  10. I believe if Elementor have add on award this one should be winner !! thanks for give us better control about Typography and Space

  11. I really like this plugin… but can you guys do me (us) a favor, i think to understand this plugin we would need to have a little tutorial.

    Anyways, thank you for your hard work, I’m seeing myself using this plugin a lot. And, I think it can become one of the most used plugins in the WP repository.

    Kudos

    1. Hi Brani. The easiest way to proceed with this (if you are using a global style kit) is to create a blank Style Kit. Save it, and assign it to the header and footer. This way it will override the global style kit 🙂

  12. Hello.

    How can I get the subscribe hero block version of Dash I looked at recently?

    It is the one with the full width / height hero and wavy split screen background image with subscribe form on the left under an h1.

    Cheers,
    Sean Sr.

    1. Hey Sean, sorry for the late reply. unfortunately, this template has been retired. Feel free to choose any of the other templates included in the library. Thanks!

  13. is it possible to remove the option to templates and button form the editor section? This confuses backend users, ie. clients.

    1. Afraid not as of yet. Although we’ve discussed disabling templates optionally in the past internally which might arrive at some point. I can’t say the same about disabling the custom sections added in the editor. We’ll however definitely consider it.

      Thanks.

  14. Pingback: How to customize the default Elementor Column Gap presets - AnalogWP %

Leave a Comment

Your email address will not be published. Required fields are marked *

Sign up to our mailing list

Stay in tune with Style Kits updates, original, Elementor-focused content and resources.

By signing up, we assume you agree with our privacy policy.

Scroll to Top