Sections are distinct pieces of a page that groups related content together. Sections help organize layout and improve readability by breaking up the page into meaningful parts. You can build Sections for a welcome banner, a list of resources, and playlist of call recordings ... the options are endless.
Custom Layout Sections are generally more customizable than Content Sections are are great for stacking lots of different elements like images, videos, buttons, blocks of text, iFrame elements and more.
There are two types of Custom Column (Layout) Sections:
- Column Sections allow you to combine text, images, icons, videos, embed codes and buttons in 1-4 Columns. The Column Section is the most customizable Section and comes with the most amount of styling choices.
🎥 See this video for a quick walkthrough on getting started with building Column Sections. - Sidebar Sections allow you to create asymmetrical layouts. Sidebar Sections include the same types of elements available for Column Sections.
🎥 See this video for a quick walkthrough on getting started with building Sidebar Sections.
Adding different elements
There are several different types of elements you can bundle together inside of any Column/Layout Section. Click on each element to learn more about it:
- Text Elements: Headline, Subheadline and Paragraph
- Image
- Icon
- Video
- Embed Code
- Button
- Line Break
Text Elements: Headline, Subheadline and Paragraph
You can stack Headline, Subheadline and Paragraphs to create bodies of text inside of a Section. All three text elements can pull in custom name fields, which means that you can use them to create custom welcome messages that say Welcome, FIRSTNAME inside of your Hub.
Image
Image elements are a great way to create balance between other element types.
Icon
Icon elements, similar to image elements, allow you to add some 🪩 ❤️ ⭐️ wherever you'd like.
Video
Video elements allow you to pull in any video file currently hosted in your Library.
Embed Code
If you have third-party elements like a Calendar or calculator, you can use iFrame element to bring it into your Hub.
The Embed Code element in your Hub will only accept HTML code with <iframe> tags that include a source URL attribute. You will not be able to add other types of code to this element. Our support team will only be able to troubleshoot cases where valid iframe code is not working as expected.
Button
A Button element is a classic way to turn any Section into a call to action where you can link out to a File, Playlist, Hub Page or external link.
Line Break
A Line Break element is an elegant way to create space between different elements, like breaking up a wall of text.
Styling your Layout Sections
You can enhance how each Section elements looks with a variety of different styling options. The styling menu for each element can be accessed by clicking the paintbrush icon on the top-right of any element or Section as pictured below:
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. Here's an example of what Styling options are available for a Button element:
Click on any Styling option below to learn more about how to use it:
- Margin Top
- Padding
- Alignment
- Background and Text Theme
- Width
- Device Visibility
- Animation
- Vertical Alignment
- Custom Image Appearance
- Custom Button Theme
Margin Top (px)
Adjust the space between the referenced top and the design element.
Padding
Adjust the empty space around your columns for optimal spacing.
Alignment
Position texts or elements along the horizontal axis, such as left-aligned, center-aligned, or right-aligned.
Background and Text Theme
Select a color or image for your Section's background. When you pick a custom background you can also change the color of the text that appears in that Section.
You can set a custom background for each Section, Column or Element to create a super unique look.
Width
Adjust the size of the element from side to side.
Device Visibility
Choose which device you want the section to appear: on Mobile, Desktop, or both.
Animation
Control how the Section moves (eases in, fades in) as the Section comes into view and out of view.
Vertical Alignment
This Styling option only appears on Columns, not sections or elements. See below how you can choose between Top, Middle or Bottom vertical alignment.
Custom Image Appearance
Change the sizing, padding, corner radius and/or border for any image element.
Custom Button Theme
Change the color, add an icon, and adjust the width for any button element.