Sp Page Builder Front End Editor Workaround

Sp Page Builder Front End Editor Workaround

As you may know, we are fans of the Sp Page Builder, but we are not that fond of its front end editor. Wheter we are talking about the 3rd or the 4th version, the main bug that prevents us from using and recommend it is the custom css section.

Sp Page Builder is very limited in choosing the styles from the addons and you are often required to use the custom css box. However, this box applies the css differently from the native addon options. If you check with browser’s developer tools on the front end editor, you will see that the native options have the resulted css like #addon-id .class-from-addon while the custom css box of the addon will just make the css without the addon id, like .class-from-addon, this way interfering with other addons which use the same classes.

The only way to workaround this until we hopefully get a fix for it is to give the addon a custom class and then adress it in the css box of the respective addon. For example, the text block addon, you give it the class my-text and after in its css box you address it like .my-text .sppb-addon-title {your styles}.

Here is a video showing you exactly what I am talking about and how to apply this fix:

Thank you for reading, we used the Sp Page Builder 4 component in the video, but this works for the Sp Page Builder 3 front end editor as well.

Stay tuned!

Windstripe Themes

Related Post

Comments (2)

  1. So hopefully this will be gone now with new backend SP Pagebuild

    Ofi Khan
    Accepted Answer
    Support Agent 1 day ago

    Hello Andrey Uvikov

    Please follow this documentation to know where to use Page CSS. I know it is kind of new to completely shift to the frontend. The good news is we are bringing the backend editor back in SP Page Builder 4. We are working on it and hope to release it soon.

    Best regards

    18 February 2023
    1. Hello! This issue has been around for years, it is present in Sp Page Builder 3 versions as well, so it is not related with the backend editor.
      I hope there will be a fix for this.
      But yes, bringing back the backend editor will make things easier because whatever issues may arise with the frontend one, you can fix them in the backend.

      25 February 2023

Leave A Comment