Non-beta / Feature request - Classes for nested elements

Beta
#1

It would be very nice if we could apply classes to such elements as sub-headline, image backgrounds etc. Today, i need to use jQuery .addClass for these purposes.

#2

Hi @Georgich,

Nearly every element has a way to add a custom class. This could be used to target nested elements. I don’t see us ever adding more inputs to target DOM elements within a builder element. Let me know if there are any specific use cases you had in mind.

#3

Give me a try :slight_smile: I’m using animation (keyframes) classes to animate elements. But classes applyed with jQuery with addClass will have a class but it will not animate :slight_smile: So if sub-headline will have a class input field like headline do, i can add a “fade-up”/“fade-down” to them ) now i can animate only headline with class so sub-headline is always static.

#4

Should still be possible without classes directly on the elements. Take a look at this:

#5

Currently i’m using ScrollReveal.js to reveal elements when they come into viewport. Simple JS code looks like this:

ScrollReveal().reveal('.reveal', {
  distance: '0',
  opacity: 0,
  delay: 1000,
  reset: false,
  easing: 'ease-in-out',
  scale: 1,
  duration: 1500,
  interval: 500,
  origin: '',
});

The class “reveal” applyed to an element with class input field in customize makes animation work.

And when a class applyed with this code:

document.querySelector('.x-col').classList.add('reveal')

or

jQuery(document).ready(function($) {
  $(".x-col").addClass('reveal');
});

It will gave a column named class, BUT scrollreveal.js will not work.

That’s why i want to give a class names to to sub-elements which have no such option and customize settings (css/class/id). Such things happens with over jquery and css libraries such as aos.js, wow.js etc.

#6

Gotcha. In that case, as an alternative to adding the classes with jQuery you could just adjust the selector like this:

ScrollReveal().reveal('.reveal-subheadline .x-text-content-text-subheadline', {
 //
});

If you want a single call to ScrollReveal() you could build a selector like this:

var toReveal = [
  '.reveal',
  '.reveal-subheadline .x-text-content-text-subheadline'
]; 

ScrollReveal().reveal(toReveal.join(', '), {
 //
});

In either case you would add reveal-subheadline as a custom class to your Headline elements instead of reveal

1 Like
#7

YOU DON’T EVEN KNOW HOW I LOVE YOU :heart: I was searchin’ for this simple anwser SO LONG. It’s totally awesome ) THANK YOU VERY MUCH!

1 Like
#8

I’m sooooo stupid :slight_smile: it was so simple… ))

#9

You’re most welcome! :slight_smile: Glad I could help you simplify it!

#10

Just used it on .x-col… LOOKS AWESOME!

#11

Great! Thanks for letting me know. Good to hear that it’s working out nicely.