Add "Don't run in the Builder" for "Code Element"

Feature Requests / Improvements
1

Please Add “Don’t run in the Builder” for “Code Element”.
A lot of times we need to disable it in the builder to have a better management.

For instance, now I have a code that contains opacity:0; , currently it make items invisible in the builder and each time I need to edit items, I have to disable execute code, and then re-enable it again.

Regards

4 Likes
2

Hi @hosi,

Could you please demonstrate or explain your use case so that we can better understand it? Do you (or other users) see any other applications for this besides the opacity: 0 challenge you are currently encountering?

Thank you,
Matej

3

Thank you @Matej for your response.

For instance, based on Simon Clay Adam Jordan comments on the facebook group, for implementing a stagger like effect for cards he suggest the below code:

”

You can add this CSS and JS to your site. Add the class “fade-up” to the main element inside the query.

CSS:

.fade-up {

opacity: 0;

transform: translateY(20px);

transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;

}

.fade-up.visible {

opacity: 1;

transform: translateY(0);

}

JS:

const observer = new IntersectionObserver((entries) => {

entries.forEach((entry, index) => {

if (entry.isIntersecting) {

setTimeout(() => {

entry.target.classList.add(‘visible’);

}, (index * 200) + 200);

}

});

}, { threshold: 0.1 });

document.querySelectorAll(‘.fade-up’).forEach((el) => {

observer.observe(el);

});

“

If you test it, you can find out the problem in this case.

4

Hey @hosi,
Perfect. Thank you for the example. I can now see the reason why this is happening and how it would help in this case.

Could you please provide the link to the Facebook group or the post? I had trouble locating it using my quick search. :sweat_smile:

Thanks

5

Yes Matej, here you go:

6

You can disable that with CSS like so:

.fadeup {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;

  &.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Disable in builder */
  .bricks-area & {
    opacity: 1;
    transform: none;
  }
}

Or simply

/* Show while editing in the builder */
.bricks-area .fadeup {
  opacity: 1;
}
1 Like
7

Thank you :slight_smile:

Best regards,
Matej