Elementor Hello theme is a lightweight, free theme by Elementor. It works as a clean canvas for your Elementor-powered site. And it is true, that with the flexible options and features that Elementor Pro offers, one can build on top of Hello theme, practically anything.
One thing you might have been missing in Hello is Typographic Options. Especially if you come from a theme like Astra or GeneratePress, you will see that there are no Customiser options for defining your default theme styles for your Headings and Text.
You can easily set up some typographic styles with CSS in your Child theme if you know your way around it, and that’s a great practice.
But what about if you want to minimize your interaction with CSS if you are not that tech-savvy? You might be just starting out in web design, or simply want a consistent experience in your Elementor-powered workflow.
After all, one of the reasons we love Elementor so much is because it provides a friendly UX framework, to work in a CSS-free environment, correct?
Setting up
Our recipe includes Elementor Hello theme and the Free version of Style Kits for Elementor, which is a limited but powerful version of our product that you can download from the WordPress repository, or from our website right here.
Disabling Elementor default fonts and colors
One thing you might want to check before we get started, is that you have disabled the default Elementor fonts and colors. This way Elementor will inherit the styles from the theme, which is exactly what we want to do here.
Activating Style Kits for Elementor
From your dashboard, go to the plugins page \ add new, look for Style Kits for Elementor.
You may install and activate it. Style Kits adds a number of styling controls in the Editor’s native sidebar, interacting with your design in real time.
Defining the styles for text and heading
I am now in a fresh new page, where I have applied the canvas template.
What I am planning to do is to use this page to collect the H1-H6 instances of my headings and body text, and easily customize their styles from a single page.
Having the Headings all visible at the same time also helps me to see the proportional relationship of each heading element with each other.
I am using a simple two-column layout to create a structured base for the elements.
I am going to drop some instances of Heading, and some of the Text editor elements. For each of the headings, I will set the right HTML tag so I can have all the scale from H1 to H6.
I also tweak the default text a bit, to associate it with the HTML tag (eg. This is heading 2).
For now, everything looks like they should, according to the default styles of the Elementor Hello theme. Now, let’s visit that Style Kits panel on the left sidebar, shall we?
Managing Typography in Elementor with Style Kits
There are two ways to reach the Style Kits panel. The first one is from the cog icon on the bottom left, and then by clicking on the Style Tab.
We also provided another way to teleport there. From anywhere in your layout, right-click to trigger the Elementor right-click menu, and you will find a Page Styles link there. Click on it and it will call up the Style Kits panel directly 😉
In the Style Kits panel, we see a plethora of meaningful design controls. For today, we will simply work with the Body and Headings Typography, to define a site-wide typographic system.
Setting styles for the body text
Let’s replace this default body font now. Under the Body Text Typography panel, we shall choose a different font and apply the size, line-height and other properties as we see fit. We see that all the body text in my layout, adapts to the style I define in my Style Kit panel.
After I make sure I set the responsive sizes as well, I am good to proceed with setting the styles for my headings.
Setting styles for Heading titles
For simplicity, I am going to use the same font here (Poppins) for the Headings, but it is up to you if you want to use a different font.
I am getting started right away with setting up the styles of all the headings, from H1 down to H6. I see how the instances of the Heading widgets adapt to their related control tweaks.
Remember to set a different HTML tag (H1,2,3,4,5,6) on each Heading element.
Saving the styles as a Style Kit
I have now created a baseline typographic scale from which my Elementor typography will cascade. What I want now is to apply it to my whole website.
Here is the nice part. All of the styles we applied in the Style Kits panel, can be saved as an entity, called a Style Kit. We can then apply a Style Kit on any other page, or globally.
Think of it as a Saved configuration of your basic design styles, that you can recall, update and maintain with site-wide scope and control.
By default, the typographic styles we created, apply on this page only. To make these styles apply globally, we need to save them as a Style Kit, and then set this Style Kit as Global.
Go to the Style Kits tab and hit the purple Save As button. This will trigger a modal that will ask you to give your Style Kit a name. I will name it My Styles.
The Style Kit must now have been auto-applied on the page. And from now on, you should be able to see it listed on the Style Kit dropdown.
Apply the Style Kit to another page
You may close the page we were working on for a minute, and create a new Static page that you will create with Elementor.
If you attempt to drop some Typographic elements there, you will see them with the default Hello theme styles, not the ones we created.
But if you go to the Style Kits panel and select the Style Kit you created from the dropdown, you will see that the page inherits the Style Kit styles.
Setting global Typography in Elementor Hello theme
It is extremely easy to set up a Global Style Kit so that it applies to all your pages by default. This option exists at the bottom of the Elementor / Settings / Style tab. Feel free to select your Style Kit from the dropdown, and hit save.
Now all your Elementor layouts will inherit their styles from this Style Kit. What does that mean? That you have just set up your Global Typography system in Elementor Hello theme, just like you would do with Customiser controls.
Create a new page to see the new default styles
If you create a new page now, and you start adding typographic elements in your layout, you will see that the global Style Kit is automatically applied. We now see that the default typography appears with the right styles.
Updating a Style Kit
What about maintaining and updating your Style Kit every time you want to make changes?
After making the desired changes to your Style Kit, hit the Update Style Kit Button. A modal asks for a confirmation, and as soon as you provide it, the changes are saved on the Style Kit.
The styles on all the layouts that use the same Style Kit are updated.
By using a Global Style Kit, you can dynamically control the Typography of your Elementor Hello theme, sitewide.
*Important: For the Style Kit to be updated with the latest changes, you need to click the Update Style Kit button, not the default Green that updates the page.
Resources
Style Kits is free and available for download right now. Apart from these extra design controls in the Editor, Style Kits offer a collection of free templates that can be imported in any Elementor page via the rounded blue triangle button.
You might also want to import one of our utility templates into your layout. These templates can be a good starting point for setting up your Typography, following the steps mentioned here.
You might also want to join our Facebook community where we share best practices and discuss all things related to Style Kits and Elementor design.
Wrapping up
We hoped you enjoyed this post and workflow proposal for working with Typography in Elementor Hello theme. What do you think about it? How have you been managing Typography so far?
Thanks!
