How to globally manage typography in Elementor Hello Theme

Managing typography in Elementor hello theme

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 😉

The Quick link in the secondary (right-click) menu.

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.


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.

The template gallery popup from where you can import Helper (and other) templates from.

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?


23 Responses

  1. Would love one bit of added functionality: the ability to assign different colors to the Headings (H1, H2 etc.). Thanks!

    1. If you are using Elementor Pro you can add custom fonts and they will appear in the Style Kits typography dropdown. Unless you meant something different? 🙂

  2. You mention the Text editor, but not how to apply styles to it other than Headings.

    After some trial and error, I see that the Text editor uses the Body Typography setting by default. How would I tell it to use the Text Sizes Small style for example?

    1. Hi Sergio, I totally agree with you, but this would involve tweaking the default paragraph widget. It would be good to have a dropdown for selecting the size, but I think it is more appropriate for elementor to handle this is the core. Thanks!

  3. I just tested it, and it looks good. Something missing is the ability to change the link colors. I’d like to set the link colors for light and dark background + the states of links like visited and hover.

  4. Awesome! Im a web designer who uses a combo of hello theme and elementor pro, and im ALWAYS scratching my head wondering why there’s no simple “global fonts” settings.

    Good stuff. This is definitely going to get added into my work flow.

  5. I use the Hello theme for my web sites and I would appreciate if a new “tab” would be added to control the bullet points and the numbered bullet points.

    Right now, Hello has ZERO control over bullet points.

    Consequently, I’m forced to add CSS code which is less than optimal, given Elementor should provide me with the styling options, for those.

    Please add this feature!

    Furthermore, the H1 tags can have a specific font but there’s no way to define a color, or an indentation. Please fix this too, many thanks!

  6. Hi,
    I tried a fresh nstall of Hello on a localhost and I installed Style Kit.
    I didn’t find out how to configure text in paragraph (). When I set a text widget with no setting, nothing is change and the global settings is not applied.
    Can you help me please.

    1. Hi there 🙂 The paragraph text should follow the styles of the body typography, as defined in the Style Kits panel. Keep in mind that if there are inline styles on the text widget, these will override the Style Kit styles. You will need to reset the element’s styles. If you need further assistance, we will be more than happy to help if you send an message through our support form:

      You may also want to visit the documentation site where you should find more information.


  7. Thank you for quick answer.
    Now I I’m struggling with the elementor templates (if it ispossible to select a style, it is not reccorded) and the pages generated by woocommerce.
    First of all, I must reorder all my stuff… but your plugin is really in the mood for Hello theme.

    1. I finally found where the trouble came from.
      I had the following line in my child theme css file.
      p, a {
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
      I removed it and now all is ok.
      Have a good night and thank you again for the job.

  8. Hi

    we use elements from envato and usually the Typographie is fixed in sections etc. Can styler kit overide the importet values with style kit settings?


    1. Hi Rene, any inline styles applied on the elements will always override the Style Kits styles, just like it happens with Global styles.

      In order for the global styles / style kits to apply, you much first reset the styling of the elements.

      Hope this helps!

  9. I believe this plugin is nice, but why to reinvent the wheel if Astra already has all of this natively?

    Adding a plugin and increase time consumptivo to something that should have it natively in the theme, because lets be honest, who use elementor is typically who dont know much of coding, CSS, HTML, etc, otherwise would not use a page builder.

    I tried hello theme but will go back to Astra that is 1000% better.


Leave a Reply

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

Share this post on social

Let's stay in touch!

Sign-up to our mailing list for occasional updates.

Join our mailing list

Stay in touch! Subscribe for occasional Style Kits updates.

We use cookies to optimise your experience. By continuing browsing our website, you agree to our Privacy Policy