{"id":17224,"date":"2020-03-06T16:09:23","date_gmt":"2020-03-06T16:09:23","guid":{"rendered":"https:\/\/analogwp.com\/?p=17224"},"modified":"2022-08-09T12:46:17","modified_gmt":"2022-08-09T12:46:17","slug":"style-kits-elementor-theme-styles","status":"publish","type":"post","link":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/","title":{"rendered":"Extending Elementor Theme Styles with Style Kits"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"17224\" class=\"elementor elementor-17224\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ff90f04 ang-section-padding-no elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"ff90f04\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-75b419d elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"75b419d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e3e4674 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"e3e4674\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-xxl\">With the addition of Theme Styles in Elementor 2.9, we get a step closer to global design management. In this article we will see how Style Kits extends the design control and usability of Theme Styles, while taking a quick look at a unique library of templates, blocks and theme style presets.<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e59337 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"2e59337\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5764576 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"5764576\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In a component-based tool like\u00a0<a href=\"https:\/\/elementor.com\" target=\"_blank\" rel=\"noopener\">Elementor<\/a>, the need for a global design framework was always a high priority. With Elementor&#8217;s version 2.9 we are introduced to Theme Styles, and finally, global design gets its place in the core Elementor platform. In Style Kits, we have been tackling the Elementor Global Styling chapter since February 2019. Early on, we understood that what we needed was a framework for organizing design in our Elementor-oriented workflows.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b312b64 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"b312b64\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">It's more than theme styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b124f4 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"0b124f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We wanted to define and extract the design variables that make our layouts and templates. To achieve this, we needed to create the UI control options that will allow us to globally manipulate and maintain these design variables.\u00a0<\/p><p>With the addition of Theme Styles in Elementor, Style Kits adds extended design control inside the Theme Style Editor by adding additional panels that manage global design attributes. It also introduces the first-of-its-kind template library, with truly dynamic templates and theme style presets.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-620aee3 elementor-blockquote--skin-border elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-blockquote\" data-id=\"620aee3\" data-element_type=\"widget\" data-widget_type=\"blockquote.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote class=\"elementor-blockquote\">\n\t\t\t<p class=\"elementor-blockquote__content\">\n\t\t\t\t\"...what we needed was a framework for organising design in our Elementor-oriented workflows...\"\t\t\t<\/p>\n\t\t\t\t\t<\/blockquote>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-ed6eb27 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"ed6eb27\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-88f434a elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"88f434a\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c556eaa external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"c556eaa\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"439\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/02\/STyles-Home-min.gif\" class=\"attachment-large size-large wp-image-16916\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8e8dda6 ang-section-padding-no elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"8e8dda6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e5cdc9 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"2e5cdc9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d3d5001 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"d3d5001\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Adding more design controls in Elementor Theme Style editor<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-873c0e4 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"873c0e4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor Theme Styles are a great direction towards the global styling management we need if we look for an organized layout system. But apart from the default theme style UI controls, we need the tools to define and maintain the organizational design framework that we talked about earlier. This includes better management of the following:<\/p><ul><li>Typography<\/li><li><span style=\"font-size: 18px; letter-spacing: 0px;\">Color<\/span><\/li><li><span style=\"font-size: 18px; letter-spacing: 0px;\">Spacing<\/span><\/li><li>Buttons<\/li><li>Form Elements<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f771a4 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"3f771a4\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-1376be9 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"1376be9\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-264ad18 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"264ad18\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4a65c7d external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"4a65c7d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"463\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/sk-panel-1024x592.png\" class=\"attachment-large size-large wp-image-17692\" alt=\"The Elementor theme style editor with the added panels\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/sk-panel-1024x592.png 1024w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/sk-panel-300x174.png 300w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/sk-panel-768x444.png 768w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/sk-panel-1536x889.png 1536w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/sk-panel.png 1924w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">The Elementor theme style editor with the added panels<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-a1209e8 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"a1209e8\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-6b7ed58 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"6b7ed58\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ec9c250 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"ec9c250\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"348\" height=\"516\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/heading-text-sizes.jpg\" class=\"attachment-large size-large wp-image-17491\" alt=\"Headings and Text size control in Theme Styles\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/heading-text-sizes.jpg 348w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/heading-text-sizes-202x300.jpg 202w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Headings and Text size control in Theme Styles<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-2c4a03d elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"2c4a03d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dce54e1 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"dce54e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Typography<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2011956 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"2011956\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Typography is one of the most essential ingredients of our global design language. We need to organize typography and apply it with consistency across our entire layout system.\u00a0<\/p><p>Theme Styles do a great job on that, with fine-grain control over text and headings. Style Kits adds more control for the available heading and text sizes, using the default Elementor&#8217;s size scale.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-6ec9b3e elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"6ec9b3e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Color<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1caaaec elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"1caaaec\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In Style Kits, the use of color is abstracted based on role in the layout. <a href=\"https:\/\/analogwp.com\/style-kits-color-system\/\" target=\"_blank\" rel=\"noopener\">We categorize colour<\/a> in Typographic, Accent and surface colors. We use these consistently throughout our templates, maintaining a dynamic color relationships that can be managed through (and stored into) Elementor Theme Styles.<\/p><p>In Elementor Theme Styles editor, Style Kits adds a number of handy color controls for the most essential color needs. <a href=\"https:\/\/analogwp.com\/style-kits-color-system\/\" target=\"_blank\" rel=\"noopener\">Here is a related article<\/a> on how color is used in Style Kits.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-7c45cf4 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"7c45cf4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-5ca20ef elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"5ca20ef\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9c7f057 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"9c7f057\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"314\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/accent-colors.jpg\" class=\"attachment-large size-large wp-image-17485\" alt=\"Primary and secondary color in Elementor Theme Style\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/accent-colors.jpg 350w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/accent-colors-300x269.jpg 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Primary and secondary color<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4c190f1 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"4c190f1\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2885a3f external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"2885a3f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"281\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/background-color-classes.jpg\" class=\"attachment-large size-large wp-image-17486\" alt=\"Setting custom background colors for surfaces in ELementor Theme Styles\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/background-color-classes.jpg 350w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/background-color-classes-300x241.jpg 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Setting custom background colors for surfaces<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-64c3cdc elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"64c3cdc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Spacing<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f86cf4 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"5f86cf4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We need a mental model for digesting spacing Elementor, while avoiding the need for inline styles on Column Gap and section padding. In Style Kits, we manage layout spacing globally, by customizing the default column gap and outer section padding presets.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-36526f9 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"36526f9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-576a653 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"576a653\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-07a98cc external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"07a98cc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"518\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/column-gaps.jpg\" class=\"attachment-full size-full wp-image-17489\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/column-gaps.jpg 348w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/column-gaps-202x300.jpg 202w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ca020b3 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"ca020b3\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e4cdbc external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"2e4cdbc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"455\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/outer-section-padding.jpg\" class=\"attachment-full size-full wp-image-17494\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/outer-section-padding.jpg 348w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/outer-section-padding-229x300.jpg 229w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-4879d6f elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"4879d6f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Style Kits adds responsive controls inside Theme Styles, for all the available Column Gap presets, and additionally a scale of Outer Section padding presets. You can combine these two presets on each section, and achieve layout spacing management for your entire site.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-4574cd1 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"4574cd1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-0031c63 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"0031c63\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f534e1b elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"f534e1b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Buttons<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d050ca4 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"d050ca4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In Elementor theme styles, the default button styling control is great. But we already have a scale of five button sizes available in Elementor.\u00a0<\/p><p>Style Kits adds the UI controls you need to customize the default style of all the button sizes.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-70d6bb0 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"70d6bb0\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-58259b2 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"58259b2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"347\" height=\"489\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/buttons.jpg\" class=\"attachment-large size-large wp-image-17487\" alt=\"In Elementor theme style editor, you have control over all the button sizes\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/buttons.jpg 347w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/buttons-213x300.jpg 213w\" sizes=\"(max-width: 347px) 100vw, 347px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">In Elementor theme style editor, you have control over all the button sizes<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-07e88bd elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"07e88bd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d5cb15e elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"d5cb15e\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7801ec2 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"7801ec2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"513\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/forms.jpg\" class=\"attachment-large size-large wp-image-17490\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/forms.jpg 349w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/forms-204x300.jpg 204w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-b788e8d elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"b788e8d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b8b9d46 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"b8b9d46\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Forms<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5eb2f2a elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"5eb2f2a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Form controls are great already. But Style kits provides extended control over styling attributes that are specific for the Elementor form widget.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-619d931 ang-section-padding-no elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"619d931\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-76edf65 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"76edf65\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8558c67 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"8558c67\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Modular presets of theme styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f7b23f elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"0f7b23f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In Style Kits, Elementor Theme Styles are modular. All the above styling controls that allow you to maintain a flexible layout system in Elementor, are stored as Theme Style Kits. The default Kit that is created by Elementor, is one of these kits as well.<\/p><p>\u00a0<\/p><p>Making important design experiments? Keep a version control of your design by Saving your Theme Style, and work without affecting your entire site. When you are good to go, just make your new Style Kit Global, for a site-wide effect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89b1748 elementor-blockquote--skin-border elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-blockquote\" data-id=\"89b1748\" data-element_type=\"widget\" data-widget_type=\"blockquote.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote class=\"elementor-blockquote\">\n\t\t\t<p class=\"elementor-blockquote__content\">\n\t\t\t\t\"...You can customize, save, re-use and apply these Theme Style presets on any layout. Apply different presets on a page and see the style changing on the fly....\"\t\t\t<\/p>\n\t\t\t\t\t<\/blockquote>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-5bcb458 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"5bcb458\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-8bbe2c3 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"8bbe2c3\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-eae08b1 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"eae08b1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"329\" height=\"505\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/Theme-style-kit-1.png\" class=\"attachment-large size-large wp-image-17871\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/Theme-style-kit-1.png 329w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/Theme-style-kit-1-195x300.png 195w\" sizes=\"(max-width: 329px) 100vw, 329px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-503e24e elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"503e24e\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3923b07 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"3923b07\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"603\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/modular-sks.jpg\" class=\"attachment-full size-full wp-image-17493\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/modular-sks.jpg 349w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/modular-sks-174x300.jpg 174w\" sizes=\"(max-width: 349px) 100vw, 349px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7cd1b0e ang-section-padding-no elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"7cd1b0e\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3f7852e elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"3f7852e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-03a07e8 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"03a07e8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Design Library of template kits, blocks and ready-made Theme Style presets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cf0e08 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"7cf0e08\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-size: 18px; font-style: normal; font-weight: 400;\">Style Kits does not only add the extended design controls in the theme styles editor. It also provides a unique design library of theme-style-ready Template Kits, Blocks, and Theme Style Presets (Style Kits). All layouts provide a mix-and-match, modular design experience, powered by a consistent layout system.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-14e098a elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"14e098a\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-74d2c26 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"74d2c26\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4c26085 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"4c26085\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"586\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/template-kits.jpg\" class=\"attachment-large size-large wp-image-17857\" alt=\"The Elementor Template Kit library by Style Kits\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/template-kits.jpg 960w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/template-kits-300x220.jpg 300w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/template-kits-768x562.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">The Elementor Template Kit library<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc1e18f elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"dc1e18f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Template Kits<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10c63bd elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"10c63bd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In the Template Kits library, you will find more than 150 templates organised in Template Kits. Free from inline styles, each template Kit comes with its own Theme Style preset and gives you template-kit-wide control for:<\/p>\n<ul>\n<li>Typography<\/li>\n<li>Colors<\/li>\n<li>Spacing<\/li>\n<li>Buttons<\/li>\n<li>Form Elements<\/li>\n<\/ul>\n<p><a style=\"font-size: 18px; background-color: #ffffff; letter-spacing: 0px;\" href=\"https:\/\/analogwp.com\/elementor-template-kits\/grip\/\" target=\"_blank\" rel=\"noopener\">Take a look at Grip<\/a>, one of our latest Template Kits.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-1cafc1b elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"1cafc1b\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-c577f67 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"c577f67\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-877b6ab external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"877b6ab\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/analogwp.com\/elementor-template-kits\/grip\/\" target=\"_blank\" rel=\"nofollow\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"755\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/yemplates.jpg\" class=\"attachment-large size-large wp-image-17859\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/yemplates.jpg 960w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/yemplates-300x283.jpg 300w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/yemplates-768x725.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Browsing templates inside a Template Kit<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-acce98a elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"acce98a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Elementor Theme Style Presets<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-495a66a elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"495a66a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Feeling stuck? Does your design lack inspiration? Get started with more than 15 plug-and-play Elementor Theme Style presets. Import into your site, customise and start creating layouts with built-in consistency.<\/p>\n<p>Any of the available Template Kits and Blocks, will adapt to the Theme Style when imported.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-75240d9 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"75240d9\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-d39417f elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"d39417f\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2cc8dc5 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"2cc8dc5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"778\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/style-kits.jpg\" class=\"attachment-large size-large wp-image-17856\" alt=\"Elementor Theme Style Presets\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/style-kits.jpg 960w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/style-kits-300x292.jpg 300w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/style-kits-768x747.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Ready-made theme style presets with helper layouts<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-51b7fce elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"51b7fce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Blocks<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52f77b6 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"52f77b6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-size: 18px; font-style: normal; font-weight: 400;\">These Blocks are different, and imported with built-in consistency. When you import a Block into your existing layout, you will see that it automagically adapts to your theme style. Looking for inline styles on these blocks? You will not find any. Everything cascades beautifully from your Theme Style.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-4433c29 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"4433c29\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-94a9539 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"94a9539\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9cb6649 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"9cb6649\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"948\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/blocks-864x1024.jpg\" class=\"attachment-large size-large wp-image-17855\" alt=\"ELementor Theme-style-ready blocks\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/blocks-864x1024.jpg 864w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/blocks-253x300.jpg 253w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/blocks-768x910.jpg 768w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/blocks.jpg 960w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Browsing inside a category of Blocks<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-91823be ang-section-padding-no elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"91823be\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a611aea elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"a611aea\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fbc5af9 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"fbc5af9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Helper Tools<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd436f4 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"fd436f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A frictionless workflow requires the right set of tools. Style Kits provides a set of intuitive helper tools that will easily find their place in your processes.\u00a0<\/p>\n<h3>Inline Styles Cleanup<\/h3>\n<p>What about all those old templates and layouts that are full of inline-styles? Wouldnt it be great if you could give them a face-lift and make them Theme-Style-ready? Style Kits offers a great helper tool that allows you to clean up the inline styles of a layout.<\/p>\n<ul>\n<li><b>Typography and color: <\/b>Removes inline values for Typography and Colour Styles<\/li>\n<li><b>Reset all styles: <\/b>Cleans every inline value from the layout (including spacing)<\/li>\n<\/ul>\n<p><!-- \/wp:paragraph --><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-4d86939 elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"4d86939\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-5e5b85b elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"5e5b85b\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18dc481 external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"18dc481\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"439\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/layout-tools.jpg\" class=\"attachment-large size-large wp-image-17492\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/layout-tools.jpg 348w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/layout-tools-238x300.jpg 238w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-4263940 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"4263940\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-325ffad external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-image\" data-id=\"325ffad\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"405\" src=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/shortcuts.jpg\" class=\"attachment-full size-full wp-image-17495\" alt=\"\" srcset=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/shortcuts.jpg 348w, https:\/\/analogwp.com\/content\/uploads\/2020\/03\/shortcuts-258x300.jpg 258w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-b559079 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"b559079\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3>CSS Classes Highlight<\/h3>\n<p>With a switch of a toggle (or a keystroke combination) you can visually highlight any element that has custom css classes or custom CSS. This way you an have a bird&#8217;s eye view over the custom CSS applied on your layout compositions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4262de7 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-video\" data-id=\"4262de7\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/VmYtvvmQbnI&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d0addbe ang-section-padding-no elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"d0addbe\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d5d69b2 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"d5d69b2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1cffa43 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-heading\" data-id=\"1cffa43\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Wrapping up<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee41204 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-text-editor\" data-id=\"ee41204\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-size: 18px; font-style: normal; font-weight: 400;\"><span style=\"font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: 0px;\">Style Kits offers the UI controls we need to start making sense of design in Elementor and avoid design-micro-management with excessive inline styles. Relying on global design variables will make your layouts more scalable and easy to manage, for yourself or your clients.<\/span><\/p><p style=\"font-size: 18px; font-style: normal; font-weight: 400;\"><span style=\"font-size: 18px; font-style: normal; font-weight: 400;\">Style Kits is a workflow-friendly design library, as flexible as your Theme Style configuration.<\/span><\/p><p><!-- \/wp:paragraph --><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Elementor theme styles is a good first step into a component-based design approach. See how Style Kits can help you design better, with a global scope.<\/p>\n","protected":false},"author":2,"featured_media":17636,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,3],"tags":[],"class_list":["post-17224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-elementor"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elementor Theme Styles: Extending global design control with Style Kits<\/title>\n<meta name=\"description\" content=\"With the addition of Elementor Theme Styles we now have better design control. See how you can use Style Kits to add more options to the theme styles editor\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementor Theme Styles: Extending global design control with Style Kits\" \/>\n<meta property=\"og:description\" content=\"With the addition of Elementor Theme Styles we now have better design control. See how you can use Style Kits to add more options to the theme styles editor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"AnalogWP\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/analogwp\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-06T16:09:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-09T12:46:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1144\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"John Fraskos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@analogwp\" \/>\n<meta name=\"twitter:site\" content=\"@analogwp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Fraskos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\"},\"author\":{\"name\":\"John Fraskos\",\"@id\":\"https:\/\/analogwp.com\/#\/schema\/person\/ac22be2040dca298b283ab40dfb8c81a\"},\"headline\":\"Extending Elementor Theme Styles with Style Kits\",\"datePublished\":\"2020-03-06T16:09:23+00:00\",\"dateModified\":\"2022-08-09T12:46:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\"},\"wordCount\":1198,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/analogwp.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg\",\"articleSection\":[\"Design\",\"Elementor\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\",\"url\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\",\"name\":\"Elementor Theme Styles: Extending global design control with Style Kits\",\"isPartOf\":{\"@id\":\"https:\/\/analogwp.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg\",\"datePublished\":\"2020-03-06T16:09:23+00:00\",\"dateModified\":\"2022-08-09T12:46:17+00:00\",\"description\":\"With the addition of Elementor Theme Styles we now have better design control. See how you can use Style Kits to add more options to the theme styles editor\",\"breadcrumb\":{\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage\",\"url\":\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg\",\"contentUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg\",\"width\":1144,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Style Kits\",\"item\":\"https:\/\/analogwp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Extending Elementor Theme Styles with Style Kits\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/analogwp.com\/#website\",\"url\":\"https:\/\/analogwp.com\/\",\"name\":\"AnalogWP\",\"description\":\"Premium Plugins for WordPress\",\"publisher\":{\"@id\":\"https:\/\/analogwp.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/analogwp.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/analogwp.com\/#organization\",\"name\":\"Analog WP\",\"url\":\"https:\/\/analogwp.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/analogwp.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg\",\"contentUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg\",\"width\":600,\"height\":600,\"caption\":\"Analog WP\"},\"image\":{\"@id\":\"https:\/\/analogwp.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/analogwp\/\",\"https:\/\/x.com\/analogwp\",\"https:\/\/www.instagram.com\/analogwp\/\",\"https:\/\/www.youtube.com\/channel\/UC1pPY6TFeIv-XyE6DpMAdKA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/analogwp.com\/#\/schema\/person\/ac22be2040dca298b283ab40dfb8c81a\",\"name\":\"John Fraskos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/analogwp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9a73de7e6ca9e8d08ecea453b553cd5cca6ab12347ff08b9919ab3593f450671?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9a73de7e6ca9e8d08ecea453b553cd5cca6ab12347ff08b9919ab3593f450671?s=96&d=mm&r=g\",\"caption\":\"John Fraskos\"},\"description\":\"UI Design by day, modular synthesizers by night. I love designing templates and layouts for our favourite page builder.\",\"sameAs\":[\"https:\/\/analogwp.com\"],\"url\":\"https:\/\/analogwp.com\/author\/johnpixle\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Theme Styles: Extending global design control with Style Kits","description":"With the addition of Elementor Theme Styles we now have better design control. See how you can use Style Kits to add more options to the theme styles editor","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/","og_locale":"en_US","og_type":"article","og_title":"Elementor Theme Styles: Extending global design control with Style Kits","og_description":"With the addition of Elementor Theme Styles we now have better design control. See how you can use Style Kits to add more options to the theme styles editor","og_url":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/","og_site_name":"AnalogWP","article_publisher":"https:\/\/www.facebook.com\/analogwp\/","article_published_time":"2020-03-06T16:09:23+00:00","article_modified_time":"2022-08-09T12:46:17+00:00","og_image":[{"width":1144,"height":600,"url":"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg","type":"image\/jpeg"}],"author":"John Fraskos","twitter_card":"summary_large_image","twitter_creator":"@analogwp","twitter_site":"@analogwp","twitter_misc":{"Written by":"John Fraskos","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#article","isPartOf":{"@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/"},"author":{"name":"John Fraskos","@id":"https:\/\/analogwp.com\/#\/schema\/person\/ac22be2040dca298b283ab40dfb8c81a"},"headline":"Extending Elementor Theme Styles with Style Kits","datePublished":"2020-03-06T16:09:23+00:00","dateModified":"2022-08-09T12:46:17+00:00","mainEntityOfPage":{"@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/"},"wordCount":1198,"commentCount":0,"publisher":{"@id":"https:\/\/analogwp.com\/#organization"},"image":{"@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg","articleSection":["Design","Elementor"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/","url":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/","name":"Elementor Theme Styles: Extending global design control with Style Kits","isPartOf":{"@id":"https:\/\/analogwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage"},"image":{"@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg","datePublished":"2020-03-06T16:09:23+00:00","dateModified":"2022-08-09T12:46:17+00:00","description":"With the addition of Elementor Theme Styles we now have better design control. See how you can use Style Kits to add more options to the theme styles editor","breadcrumb":{"@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#primaryimage","url":"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg","contentUrl":"https:\/\/analogwp.com\/content\/uploads\/2020\/03\/featured-image.jpg","width":1144,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/analogwp.com\/style-kits-elementor-theme-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Style Kits","item":"https:\/\/analogwp.com\/"},{"@type":"ListItem","position":2,"name":"Extending Elementor Theme Styles with Style Kits"}]},{"@type":"WebSite","@id":"https:\/\/analogwp.com\/#website","url":"https:\/\/analogwp.com\/","name":"AnalogWP","description":"Premium Plugins for WordPress","publisher":{"@id":"https:\/\/analogwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/analogwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/analogwp.com\/#organization","name":"Analog WP","url":"https:\/\/analogwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/analogwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg","contentUrl":"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg","width":600,"height":600,"caption":"Analog WP"},"image":{"@id":"https:\/\/analogwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/analogwp\/","https:\/\/x.com\/analogwp","https:\/\/www.instagram.com\/analogwp\/","https:\/\/www.youtube.com\/channel\/UC1pPY6TFeIv-XyE6DpMAdKA"]},{"@type":"Person","@id":"https:\/\/analogwp.com\/#\/schema\/person\/ac22be2040dca298b283ab40dfb8c81a","name":"John Fraskos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/analogwp.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9a73de7e6ca9e8d08ecea453b553cd5cca6ab12347ff08b9919ab3593f450671?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9a73de7e6ca9e8d08ecea453b553cd5cca6ab12347ff08b9919ab3593f450671?s=96&d=mm&r=g","caption":"John Fraskos"},"description":"UI Design by day, modular synthesizers by night. I love designing templates and layouts for our favourite page builder.","sameAs":["https:\/\/analogwp.com"],"url":"https:\/\/analogwp.com\/author\/johnpixle\/"}]}},"_links":{"self":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/posts\/17224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/comments?post=17224"}],"version-history":[{"count":123,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/posts\/17224\/revisions"}],"predecessor-version":[{"id":23527,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/posts\/17224\/revisions\/23527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/media\/17636"}],"wp:attachment":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/media?parent=17224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/categories?post=17224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/tags?post=17224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}