Design Custom Layouts in your Hub

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

 

Understand Custom Layouts

There are two types of Hub layouts: Content (predefined) and Custom layouts. When editing Hub sections, the icons indicate which layouts are predefined and which are custom. Additionally, when adding sections, you can choose layouts from either category.

You can use Custom Layouts to 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!

For example: 

Step 1 - Add a new section

Navigate to your Hub Editor and select the custom page where you want to add a layout section. Let's use a custom page named "Course Module" in this example.

Locate and click on the + Add Section button.

Step 2 - Design your custom layout

Select between Columns and Sidebars and pick a custom layout.

Pick a column from the panel to open the settings. 

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

You can enhance your design using the styling options! Explore a variety of styles to elevate your layout, which includes, but is not limited to, 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.

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 Layout Tips

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.

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.

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.

Padding

You can adjust the padding around your columns for optimal spacing. Adding padding to one or both sides (horizontally or vertically) is straightforward. Just click or unclick the lines connecting the value boxes to either sync the values or disable the sync.

See it in action: