How to include global styles to elementor?

Question

I want to learn more about elementor theme development. I have set up header.php, footer.php and index.php and created a new page via wordpress admin. I added a new widget, which show correctly in my editor, but when i publish the page, my global elementor styles are not applied. I tried searching the documentation and googling, but found nothing. I assume i need to call some elementor function to make this work. What am i missing?

For example: --e-global-color-primary is undefined

Here are my files:

header.php

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body <?php body_class(); ?>>
    <?php wp_head(); ?>

footer.php

        <?php wp_footer(); ?>
    </body>
</html>

index.php

<?php get_header(); ?>

<?php the_content(); ?>

<?php get_footer(); ?>

gogibogi4 gogibogi4 · Accepted Answer · 2021-03-04T19:21:17

I have done some extra research on this. It is a bug in elementor and is not fixed yet. I ended up doing a workaround. It is provided below if anyone needs it.

add_action('the_content', 'load_elementor_style');

function load_elementor_style($content) {
    [
        $primary_color,
        $secondary_color,
        $text_color,
        $accent_color
    ] = get_elementor_colors();
    
    [
        $primary_font,
        $primary_font_weight,
        $secondary_font,
        $secondary_font_weight,
        $text_font,
        $text_font_weight,
        $accent_font,
        $accent_font_weight
    ] = get_elementor_fonts();
    
    $content .= sprintf(
        '
        <style>
            :root {
                --e-global-color-primary: %s !important;
                --e-global-color-secondary: %s;
                --e-global-color-text: %s;
                --e-global-color-accent: %s;
                --e-global-typography-primary-font-family: %s;
                --e-global-typography-primary-font-weight: %s;
                --e-global-typography-secondary-font-family: %s;
                --e-global-typography-secondary-font-weight: %s;
                --e-global-typography-text-font-family: %s;
                --e-global-typography-text-font-weight: %s;
                --e-global-typography-accent-font-family: %s;
                --e-global-typography-accent-font-weight: %s;
            }
        </style>
        ',
        $primary_color,
        $secondary_color,
        $text_color,
        $accent_color,
        $primary_font,
        $primary_font_weight,
        $secondary_font,
        $secondary_font_weight,
        $text_font,
        $text_font_weight,
        $accent_font,
        $accent_font_weight
    );

    return $content;
}

How to include global styles to elementor?

1 Answers