Custom Classes Used in Site Editor and Their Purpose

If you’re customizing layouts using the WordPress Site Editor, SureDash provides specific custom classes to help control the behavior and design of sidebar and content blocks more precisely.

These classes are especially helpful when you’re using the Portal block and need to set up sidebars, control visibility on mobile, or apply consistent styles.

Available Custom Classes and Their Usage

Below are the custom classes you can apply to column blocks while building your layout:

portal-sidebar

Use this class to mark a column block as the sidebar. It applies sticky behavior using CSS, allowing the sidebar to remain fixed while scrolling.

When to use:
Apply this to the left or right column block that should act as a sticky sidebar in your layout.

portal-content

This class applies typography and color design settings to the column block, helping it blend seamlessly with SureDash’s layout styling.

When to use:
Apply this to the main content column where your actual document or post content lives.

portal-hide-on-responsive

This class is used to hide a column block on smaller screens, like tablets and mobiles. It’s typically used when the sidebar is shown as an off-canvas flyout on mobile, so you don’t need the static version.

When to use:
Apply this to sidebar column blocks you want hidden on mobile devices.

How to Apply These Classes in Site Editor

• Open the WordPress Site Editor.
• Select the column block where you want to apply the class.
• In the right sidebar panel, open the Advanced section.
• In the Additional CSS Class(es) field, enter the desired class name
  (e.g., portal-sidebar, portal-content, or portal-hide-on-responsive).
• Save your changes.

You can apply more than one class by separating them with a space.

Conclusion

Using these custom classes gives you more control over your layouts and helps you match SureDash’s intended design and functionality. It’s a simple but powerful way to make your content look and behave just right.

If you’re unsure which class to use or need help with layout customization, our support team is here for you. Submit a support ticket or reach out directly through your SureDash dashboard.