Class Helpers

Our Page Builder allows you to do a whole bunch of cool things. However, it does have its limitations and you may find that you need to do something a bit fancier than what you can do in the builder.

To help you out, we've built a bunch of class helpers that you can use to take your campaigns to the next level. Just copy them from the tables below and paste them into the relevant settings and you're away!

💡

You can also create your own custom class helpers as well 👀

Row Helpers

These classes can be applied to any row.

When editing a page choose the ⚙️Settings on the far right of the editor (not to be confused with the ⚙️ for a particular block). Then add the class in Advanced under Attributes > Custom Class

Block Helpers

These classes can be applied to any block.

When editing a page choose the block ⚙️Settings, then add the class in Advanced under Attributes > Custom Class

Display Helpers

These can be added to both blocks and rows to show / hide content under certain conditions.

Typographic Helpers

These classes can be applied to any heading or paragraph block.

When editing a page choose the block ⚙️Settings, then add the class in Advanced under Attributes > Custom Class

Button Helpers

These classes can be applied to any button row block, or to an individual button within that block.

For the button row, go to the block ⚙️Settings, then add the class in Advanced under Attributes > Custom Class.

For an individual button, you can add a class (or multiple classes) to the [Button Number] Custom Classes field.

Custom Class Helpers

Although we've done our best to bake-in helpers that we think you might need, this is definitely not an exhaustive list and you might find that you need to add your own class helpers. Luckily, this is super straightforward.

You can simply add a custom class to any Row, Column, or Block, and write some styles to get everything looking just right 👌

Here are a couple of CSS starters to help you style your elements:

// Row Helper Example

.row {
  
  &--[class-helper-suffix] {
    // target row
    
    .row__bg {
      // target row background
    }
    
    .row__container {
      // target element that contains the columns
    }
    
    .col {
      // target all columns
      
      &:nth-of-type([X]n) {
        // target a specific ([X]) column
      }
    }
  }
  
  &--[another-class-helper-suffix] {
    // ...
  }
}

// Column Helper Example

.col {
  
  &--[class-helper-suffix] {
    // target column
    
    .col__container {
      // target element that contains all the blocks
      // this is also the element that padding, borders,
      // and colors are applied to
    }
    
    .page--is-editor & .col__container [class*="BlockWrapperContainer"] > * [data-test-id],
    .page--is-editor & .col__container .raisely-blockwrapper,
    .page--is-client & .col__container > * {
      // target all blocks inside this column
      // we need to add some extra specificity for the editor
      // because the DOM structure is slightly different
    }
  }
}

// Block Helper Example

.block {
  
  &--[class-helper-suffix] {
    // target block
    
    .foo {
      // target child element with class .foo
    }
  }
}

🚧

What's the deal with all the classes in the DOM that start withcss-?

If you've been poking around in inspector, you'll have noticed that the DOM is dotted with a number of classes that start with css- and are followed by a random collection of letters and numbers. These are used to apply a collection of dynamic styles that you can adjust in the page builder (e.g. padding, margins, colours etc.). The randomised naming convention comes from Emotion and is used to avoid any interference with other classes on the page.

The most important thing to note about these classes are that they dynamically generated and might change when any of those values are updated, or if any adjustments are made behind the scenes on our end.

This makes them a lot more volatile when compared to our base logical classes used for our elements (e.g. donation-form), class helpers, or any other custom classes that you add, as these are static and won't change.

With this in mind, please avoid writing custom styles that rely on these dynamic classes and instead add your own custom classes, which we can guarantee won't change.

For example, instead of writing styles this like:

.css-12b4da7 .element {
      // ... awesome styles that might stop working 🥲
}

Add a custom class to the row, block, or column that you want to target and do something like this:

.my-amazing-class .element {
      // ... awesome styles that will always get applied 💪
}