Use Class Helpers

Our v3 Page Editor allows you to easily change and control everything about your website. For those who want a bit more customisation, we have added a few of our own helpful pre-defined classes to help you along your way.

In order to utilise our Class Helpers, you will first need to add them to the Custom Class field in the ⚙ ︎Settings > Advanced tab.

You can use Class Helpers for both Rows and Blocks, but they each have their own specific class names:

📖 Row Classes

• row--full-width can be used to make a Row the full width of the screen, breaking free of the default container width of 1100px.

• row--fill-viewport will ensure that the Row will fit at least the entire height of the visible viewport/screensize (100vh).

• row--half-viewport will ensure that the Row will fit at least half of the height of the visible viewport/screensize (50vh).

• row--border-#{{top/bottom}} adds a 1px border to your Row. You can append the class with the side (top/bottom) you wish the border to appear on, or you can just use row--border to add a border to both the top and bottom.

• row--border-#{{colour}} in addition to the row--border class, you can also use this class to change the colour of the border (default is grey) using shades from your brand colours.
  
  e.g. row--border-secondary or row--border-primary-darker

• row--bg-contain ensures that the Row's background colour is contained within the inner container (1100px wide) of the Row, instead of being full width.

• row--bg-half turns the background of the Row to fit half of the Row. It will align to the left side of the block, but you can use this in conjunction with row--bg-right if you want to align it to the right instead. If you want to control the size of the background further, you can use the Style Editor to target row--bg-half and adjust the width property.
  
  e.g. row--bg-half row--bg-right

📖 Block Classes

• block--background-#{{colour}} allows you to set the background of the Block using shades from your brand colours 👀
  
  e.g. block--background-primary or block--background-secondary-dark
  
  Note: When using darker shades, the Block's text colour will automatically lighten in order to improve readability. However, this is not an exact science and may need fine-tuning in the Style Editor.

• block--color-#{{colour}} allows you to set the text colour of the Block using shades from your brand colours 👀
  
  e.g. block--background-primary or block--background-secondary-dark

• block--box-#{{top/middle/bottom}} adds a padded box around the Block. You can either use block--box to create a box around the entire element, or you can use the #{{top/middle/bottom}} variations to string multiple Blocks together.
  
  e.g. block--box or block--box-top followed by a Block with block--box-bottom added

• block--border-#{{top/right/bottom/left}} adds a 1px border to your Block. You can append the class with the side (top/right/bottom/left) you wish the border to appear on or you can use block--border to add a border around the entire row.

Show/Hide Classes

• show/hide--logged-in/out is a useful class that enables you to show or hide both Rows & Blocks depending on whether the user is logged in or not. For example, show--logged-out could be used to display a specific call to action encouraging users to 'Sign Up' or 'Login'.

• show/hide--owned-profile is a useful class that enables you to show or hide both Rows & Blocks depending on whether the user is viewing a Profile they own (be that an Individual or Team page). For example show--owned-profile could be used to display a personalised 'Welcome' message or a 'Sponsor Yourself' call-to-action.

👀 We automatically generate a palette from your Brand colours, each with a number of shades. Both your Primary & Secondary colours have the shades Light, Lighter, Lightest, Super Light, Dark, Darker, and Darkest, which you use through the Class Helpers and in the Style Editor as SCSS variables (e.g. $primaryColor, $secondaryDark etc.)
 

Cannot find the support guide you are after? Head on over to our YouTube channel 📺 for more creative content to help you go further. You can even leave us comments, suggesting new content ideas 🤯