The Space Header block plays a crucial role in creating a welcoming and informative first impression for users. It contains key actions and information that enhances navigation, content creation, and space management.
The block offers comprehensive customization options for space admins, with the ability to adjust the artwork, content, fields, and layout. Admins can create a unique and engaging header that not only enhances the visual appeal of the space but also improves functionality. By leveraging these customization tools, spaces can be made more user-friendly and aligned with the specific goals or themes of the community.
Adding the Space Header block
Any Admin can add this block to the Space of their choice. You can add this block to a space of your choice by :
Navigating to the space you wish to add this to
Pressing “C” to access the design studio for the space
Hovering over any container block in the selected space
Selecting “add block” from the container menu
Selecting “space header” from the block list.
Configurations
Presets
Admins can choose from 7 different presets for the space header. Each preset is designed to offer a unique layout and style for the space's header block, providing flexibility in how the information and design elements are presented. These presets control the overall structure of the header, making it easy to select one that aligns with the space's theme or purpose.
Artwork
Admins can personalize the artwork for the space header in several ways:
Image Upload a custom image that serves as the backdrop of the space header. This could be a graphic, logo, or any visual representation of the space's theme.
Video Add a video as the background, which can bring a dynamic and engaging element to the space header.
Color Select a custom solid color as the background. This can be aligned with brand guidelines or the overall aesthetic of the space.
No Image Admins can opt to have no image or video in the header, allowing the space to maintain a minimalistic or clean appearance.
Tint and Media Height Adjustments: Adjust the tint of the header image or video to make the text and other elements more visible. Media height can also be configured to control how large or small the image or video appears in the header, giving admins control over the visual emphasis of the artwork.
Content
The content section within the Space Header Block can be customized to ensure readability and alignment with the space’s design. Admins can:
Text Color:
Choose between light, dark, or theme color for the text within the header block.
This feature allows the text to contrast effectively against the background artwork, ensuring visibility.
Content Height:
Adjust the content height to manage the space between the header elements (title, description, buttons, etc.) and the rest of the page. This ensures the header remains visually balanced with other components of the space.
Fields
Admins can configure several fields within the Space Header Block to ensure only the relevant information and actions are visible to users. Each of these fields can be shown or hidden depending on the space’s needs.
Space Icon Show or Hide: Admins can choose to display the space icon. Size and Alignment: Control the size and alignment of the icon within the header. Customization: Upload a custom icon to better represent the space.
Space Title Show or Hide: Decide whether to display the space title. Size and Alignment: Configure the size and placement of the title text. Custom Text: Add custom text for the space title to reflect branding or other space-specific details.
Space Description Show or Hide: Choose to display or hide the space description. Custom Description: If preferred, admins can add a custom description that differs from the standard space description. Alignment: Control how the description is aligned within the header.
Space Stats Show or Hide: Display key statistics, such as:
Total members
Total posts
Date created These stats offer users a quick glance at the activity level and history of the space.
Buttons Admins can customize the visibility, size, and alignment of various action buttons, including:
Add Post: Allows users to create a post directly from the header.
Join or Leave the Space: Quick access to join or leave the space.
Notifications: Enable users to adjust their notification preferences.
Search: A search tool for finding specific content within the space.
Share: Provides a quick way to share the space with others.
Space Options: This dropdown gives admins access to manage settings, members, analytics, and more. Users may also access relevant actions like viewing members or sharing the space.
Space Members Show or Hide: Display a preview of space members in the header to highlight active users. Size and Alignment: Adjust the size and alignment of the member preview section to fit within the overall header design.
