Enhance your Hub sections with custom styling options

Style your Hub's content and predefined section layouts with background, text theme, height, alignment, and animation settings

Step 1 - Access your Hub Editor

Get started with styling your Hub Sections by accessing your Hub Editor inside your Membership.io account.

Step 2 - Navigate to the correct Hub Page

Once you're in the Hub Editor, click the Pages button on the left sidebar, then click on Sections to reveal the Hub Sections menu.

Step 3 - Create or access the Hub Section you want to style

Select your desired Hub Section, or use the + Add Section button to create a new Hub Section.

Step 4 - Open the Hub Section Styling menu

Once inside your Hub Section, click the Styling icon either from the left-hand panel or from your Hub preview window as shown below:

Clicking the Paintbrush icon opens the Styling menu, allowing you to customize your Sections. The specific Styling choices vary based on the Section or Element you're customizing.

The available options are:

• Background: Choose from Default, Primary, and Secondary Custom Colours, or upload an Image.

• Text Theme: Choose between a Light, Dark, or Custom theme for your Section's text.

  • NOTE: The "Text Theme" menu is visible only when your Background is set to Custom Colour or Image
    

• Alignment: Adjust the vertical alignment of elements in your Section.
  
  
• Height: Adjust the height of your element.
  
  
• Animation: Choose and customize a transition style for your Section when it comes in view.
  
  

• Device Visibility: Display your Section on mobile and/or desktop devices.

NOTE: For styling your custom layouts, follow this article.

Step 5 - Save your Changes

Once you're happy with your Section Styling choices, just hit Save Changes to keep the updates!