• When using Atomic Editor (Elementor 4.x), the Elementor CSS is not loading properly on the frontend when using widgets from Ultimate Addons for Elementor.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Dhruv

    (@dpandya)

    Hi @nsluc93,

    Thank you for reporting this.

    To help us understand this better, could you please share a bit more detail about the setup? Specifically:

    • Is this issue occurring specifically when using the Atomic Editor (Elementor 4.x)?
    • The URL of the page where the issue can be seen
    • A short screencast showing the CSS not loading on the frontend

    Also, if possible, please let us know:

    • Your Elementor version and UAE version
    • Whether the issue occurs with only UAE active (after temporarily deactivating other plugins)

    This will help us check if the issue is reproducible on our end and assist you more effectively.

    If you prefer to share the details privately, you can also reach out here:
    👉 https://ultimateelementor.com/contact/

    Looking forward to your update.

    Best regards,
    Dhruv – BSF Support Team

    Thread Starter Hieu

    (@nsluc93)

    Hi Dhruv,

    Thank you for your response.

    Here are more details about the issue:

    • All plugins (Elementor and UAE) are updated to the latest versions.
    • I am using the Atomic Editor (Elementor 4.x).

    Issue description:

    • I created two identical SVG elements using the SVG widget (same configuration).
    • When placed inside a normal page, the Atomic CSS loads correctly.
    • However, when placing the same element inside the footer (Theme Builder), the Atomic CSS is not enqueued on the frontend.

    As a result, the SVG in the footer is missing styles, while the one in the page works fine.

    Additional debugging:
    I tried to manually force Atomic CSS enqueue using the following code:

    $atomic_manager = \Elementor\Modules\AtomicWidgets\Styles\Atomic_Styles_Manager::instance();

    // Trigger render for template
    do_action(‘elementor/post/render’, $post_id);

    // Render template
    echo \Elementor\Plugin::instance()->frontend->get_builder_content($post_id);

    // Force enqueue styles
    if (method_exists($atomic_manager, ‘enqueue_styles’)) {
    $reflection = new ReflectionClass($atomic_manager);
    $method = $reflection->getMethod(‘enqueue_styles’);
    $method->setAccessible(true);
    $method->invoke($atomic_manager);
    }

    Best regards,
    Hieu

    Plugin Support Jan Gerald Starosa

    (@jangsr)

    Hi @nsluc93,

    Thank you for the detailed follow-up and for sharing those debugging steps, that level of detail is really helpful!

    What you’re describing, Atomic CSS loading correctly on regular pages but not enqueuing for Theme Builder templates (footer/header), points to a rendering context issue with how Elementor 4.x’s Atomic Styles Manager handles templates outside the main post loop. Theme Builder templates are rendered at a different point in the WordPress loading cycle, which can cause the Atomic CSS enqueue hook to miss those templates entirely.

    Looking forward to assisting you further!

    Best regards,
    Jan – BSF Support Team

    Thread Starter Hieu

    (@nsluc93)

    Hi Jan,

    Thank you for your support.

    I’m sorry, but I’m currently testing this on a localhost environment, so I’m unable to provide access credentials.

    However, the issue should be very easy to reproduce:

    • Install Elementor (4.x) and UAE (latest version)
    • Create a Header or Footer using Theme Builder
    • Add any Atomic Element (e.g. SVG widget)
    • View on frontend → the Atomic CSS is not enqueued

    Meanwhile, the same element works correctly when placed inside a normal page.

    So this does not seem to be environment-specific, but rather related to how Atomic CSS is handled in Elementor Header & Footer Builder templates.

    Please let me know if you need a minimal test setup or further details.

    Best regards,
    Hieu

    • This reply was modified 3 weeks, 3 days ago by Hieu.
    Plugin Support Dhruv

    (@dpandya)

    Hi @nsluc93,

    Thank you for the detailed steps and explanation, that’s really helpful.

    We did try to replicate this on our end using a similar setup, but we weren’t able to observe a clear difference between the SVG rendering on a regular page vs inside a Theme Builder template.

    That said, your findings are quite specific, so to better understand what’s happening on your end, could you please share a short screencast showing:

    • The SVG widget working correctly on a regular page
    • The same widget inside the footer where the styles are missing

    Also, if you could point out which specific styles are not being applied (for example: color, size, alignment, etc.), that would help us narrow down whether this is related to Atomic CSS loading or something else.

    We’ll also continue checking this on our end based on the steps you shared.

    Looking forward to your update.

    Best regards,
    Dhruv – BSF Support Team

    Thread Starter Hieu

    (@nsluc93)

    Hi Jan,
    Thanks for the explanation. I’ve attached a short video showing the issue where Atomic CSS is not loading in Theme Builder templates—could you please review it?
    https://www.youtube.com/watch?v=AFns1T5saqY

    Best regards,
    Hieu

    Plugin Support Dhruv

    (@dpandya)

    Hi @nsluc93,

    Thanks again for the screencast, really appreciate you putting that together.

    I attempted to replicate the issue on my end using the exact setup you described:

    • Latest version of UAE Lite
    • Latest version of Elementor (4.x, Atomic Editor)
    • Hello Elementor theme (default)
    • No other plugins active

    In my test, the Atomic CSS for the SVG widget enqueued correctly on the frontend in both a regular page and a footer built via the Theme Builder. Here’s a short screencast of my test for reference: https://bsf.d.pr/v/IM0kjb

    Since the behaviour seems to differ between our environments, would you mind running the same test on a clean sandbox to help us isolate the cause? You can use either of these (both free, no install required):

    On the sandbox, please:

    1. Install Elementor (4.x) and UAE Lite, keep all other plugins deactivated.
    2. Activate the Hello Elementor (or any default) theme.
    3. Try replicating the issue with Header.
    4. View on the frontend and check whether the Atomic CSS enqueues.

    If the issue does not reproduce on a clean sandbox, that would point to something specific to your local environment (another plugin, a custom theme, a caching layer, or a dev tool) interfering with the enqueue. If it does reproduce there, please share the sandbox URL, that will help us look at the exact instance where it’s failing and significantly speed up diagnosis.

    Looking forward to your findings.

    Best regards,
    Dhruv – BSF Support Team

    Thread Starter Hieu

    (@nsluc93)

    Hi Dhruv,

    Thanks for testing, that setup looks correct.

    Could you please check the same header on the homepage? In my case, the Atomic CSS works correctly when viewing via the Single Template, but it does not load properly on the homepage.

    Thanks!

    Plugin Support Dhruv

    (@dpandya)

    Hi @nsluc93,

    Thanks for the additional detail, pointing to the homepage as the trigger was really helpful. I apologize for any inconvenience this may have caused.

    Following your suggestion, we tested the same header on the homepage and were able to reproduce the issue on our end as well: the Atomic CSS for widgets inside a Theme Builder header/footer enqueues correctly when viewing a Single template, but does not enqueue when viewing the homepage.

    Now that we have a reliable repro, we’ve passed this on to our development team to investigate the root cause. We’ll post an update in this thread once we have findings or a path forward.

    Appreciate the patience and the thorough debugging on this.

    Best regards,
    Dhruv – BSF Support Team

Viewing 9 replies - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.