Design and build your Hub
      Back to home
      1. Membership.io Help Center
      2. Hubs
      3. Design and build your Hub

      Design Custom Layouts in your Hub

      Combine various site elements (text, image, video, and more) when customizing page sections within your Hub

       

      🧰 What You Will Need

      A Hub in Membership.io (Start plan or higher) 

      Understand Custom Layouts

      You can use Custom Layouts and design your sections in the hub. It allows you to mix and match elements such as images, videos, buttons, texts, etc. The possibilities are limitless!

      Add Element

      Step 1 - Add a new section

      Navigate to your Hub Editor and select the custom page where you want to add a layout section.

      Select Hub Page

      Locate and click on the + Add Section button.

      Add Section

      Step 2 - Design your custom layout

      Select between Columns and Sidebars and pick a custom layout.

      Select Custom Layout

      Select Custom Layout (1)

      Pick a column from the panel to open the settings. 

      Select Column

      Click + Add Element to start adding design elements from the list. 

      Add Elements

      You can add flare to your design using the styling option! Explore a variety of styles to elevate your layout, including the following:

      • Margin Top (px) - Adjust the space between the referenced top and the design element.
      • Alignment - Position texts or elements along the horizontal axis, such as left-aligned, center-aligned, or right-aligned.
      • Width - Adjust the size of the element from side to side.
      • [Advanced] Device Visibility - Choose which device you want the section to appear: on Mobile, Desktop, or both.

      Styling

      Certain styles are unique to the type of element used (e.g. custom button appearance) therefore, they may or may not be present for each.

      Custom Layouts Use Cases

      Stack Videos, Images, and Buttons

      Pick a custom color as your section's background or upload images with matching backgrounds for a seamless, layered look. Add a thumbnail to a media file to blend your video with the rest of the section.

      Custom Color

      Text Sections

      Use the Custom Layouts for your blog or large blocks of text. Create one Column and mix Headlines, Subheadlines, and Text Elements for text across your whole Hub page.

      Text Elements

      You can also change the style of specific text inside the paragraph elements without creating a Headline or Subheadline elements inside the Layout sections.

      Button Columns

      Organize important links (such as to your Hub pages) using four Columns containing one button each. You can think of the example below as a navigation bar on a website.

      Buttons

      Combine Videos with Text

      Use multiple layout sections and a consistent background color to blend your content and highlight specific aspects.

      Video + Text

       

      📚 Up Next