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

Leave A Comment