Style issue by adding new button

  • Unknown's avatar
    yannickd7f9d3dc82 · Member ·

    Hi,

    I have a website which I manage. I want to add a new button in Elementor. To do this I just duplicated an existing one and changed the required properties. In elementor it looks like expected.

    When I publish it the style of the new button is messed up, even when it is in the same container as the other buttons.

    I have cleared the cache already but it does not fix the issue.

    Does somebody have an idea?

    This is the view I have in Elementor:

    This is the view I have when published, the button in the bottom right is having the issue:

  • Unknown's avatar
    kudufo · Member ·

    Hi @yannickd7f9d3dc82

    Thanks for the detailed report and screenshots; they make it much easier to diagnose!

    Looking at what you’ve shared, the HIFU button appears faded/unstyled on the frontend while looking correct inside Elementor. Since clearing the cache didn’t help, this is most likely one of the following:

    1. The duplicated widget inherited a custom CSS class or ID conflict

    When you duplicate an element in Elementor, any custom CSS class or element ID set on the original gets copied over. If two elements share the same ID, browsers only apply the style to the first one; the second one gets ignored or partially styled.

    To check: Click on the HIFU button in Elementor → go to Advanced tab → look at the CSS ID and CSS Classes fields. Make sure they’re either empty or unique (not the same as any other button on the page).

    2. A widget-level style override is conflicting

    Go to the HIFU button → Style tab → check the button’s background color, border, and typography settings. Sometimes duplicated widgets carry over styles that look fine in the editor preview but conflict with how the theme renders them on the frontend.

    3. Elementor’s own CSS cache needs regenerating

    This is different from your hosting/page cache. To regenerate it: Go to Elementor → Tools → Regenerate CSS & Data and click the button. Then check the frontend again.

    Try those steps and let us know what you find — if you can share a link to the page, that’ll help us dig deeper if the issue persists!

  • Unknown's avatar
    2020testjj · Member ·

    Hi there, for help with 3rd party plugins, like Elementor, please contact their support directly. Elementor’s help resource can be found at https://elementor.com/help/

    Also, just to clarify, these support forums assist site owners hosted on WordPress.com, the hosting provider. If you need help with the open source WordPress software, head over to https://wordpress.org/support/forums/

    Not sure of the differences between WordPress.com, where we are, and the open source software? This guide helps explain https://wordpress.com/support/com-vs-org/

Log in or create an account to reply