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.
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.
