This article describes the layouts, elements, and components found on the chapter page builder canvas.
Layouts, Elements, and Components
Layouts, Elements, and Components are tools found in the chapter page builder canvas that are used to build your customized chapter page.
Layout
Layouts are options for how the page will be designed and formatted. These are preset layouts that contain information that is pulled from the chapter settings or event settings.
Elements
Elements are additional links or text that can be added to the layout of the page. They can fit within certain containers or layouts.
Components
Components are parts of the chapter that are created in the chapter dashboard. The information they contain cannot be edited or removed in the page builder canvas.
- Organizers
- Sub-chapters
- Past events
- Upcoming events
- Global sponsors
- Local sponsors
- Local partners
- Blog posts
Layouts
Chapter Banner
- Container one includes the chapter banner image.
- Container two includes the chapter’s region information.
- Container three consists of the chapter name, chapter join (or leave) button, and chapter member count.
- Container four includes the chapter’s description, and the last container consists of the chapter share button.
Bevy recommends placing the chapter banner at the top of your chapter page design.
Three Columns
HQ Admins can adjust the spacing between and within columns with the spacing margin and gap controls. In addition, deleting addition, deleting, and duplicating actions can modify this layout to fewer or more than three columns.
Alternating
Bevy recommends using this layout when incorporating longer-form content on a chapter page.
Featured Video
Quote
Statistics
HQ Admins can adjust the spacing between and within each statistic with the spacing margin and gap controls. In addition, deleting and duplicating actions can modify this layout to fewer or more than four statistics.
Empty Container
The empty container enables an HQ admin to create a new layout. Building the layout within a container allows the community admin to quickly move the content to different locations on the chapter page.
Elements
Social Links
Add social follow icons to a chapter page and encourage chapter members to follow the social media accounts of the chapter. When the social links element is added to the chapter page, all or some social sharing icons are displayed on the chapter page (this is dictated by the content settings configured on the chapter’s settings tab). An HQ admin cannot change the order of the social share icons, but they can change the color of the icons.
Social Share
Add social share to a chapter page and encourage members to share the chapter’s information on an external social platform. When the social share element is added to the chapter page, all or some of the share icons are displayed on the chapter page. After adding the social share element to the canvas, select the settings tab and choose the platforms where chapter members can share chapter information’s placing the chapter banner at the top of your chapter page design.
The supported platforms are:
-
Copy link
-
Email
-
Facebook
-
LinkedIn
-
Pinterest
-
SMS (only appears on mobile devices)
-
Twitter
Kindly note that the default color for the Social Share button is transparent. You need to update it to see the share icon.
Text
Add static content to the chapter page with the text element. The static text does not automatically update on the chapter page and must be manually updated. Within the text settings, these settings can be customized:
- Text Style: In the text style drop-down, assign the body or heading style to the selected text. Heading styles 1 through 5 are supported in the page builder.
- Font: In the font drop-down, assign a specific font to the selected text. Only font styles enabled on your Bevy site will show in the list.
- Text Size: Adjust the text size of the selected text. Sizes 12 - 80 are supported in the page builder.
- Text Color: Adjust the text color of the selected text. The text color can be changed by entering the hex color code, the RGB color code, or selecting a color from the color picker.
- Text Align: Adjust the alignment of the text. For example, the chapter page builder supports the left, center, and right alignment.
- Style: Add bold, italic, or underlined styles to the selected text.
- Insert link: Display text as hyperlinks via the insert link drop-down. Hyperlinked text can direct the page viewer to a custom URL, external website, featured video URL, or parent chapter URL.
- Lists: Add content to the chapter page as a bulleted or numbered list.
Video
The HQ admin can add embedded videos to any chapter page builder page with the video element. Visitors can watch the video on your chapter page without leaving the current page.
- External Video: This embeds video content from an external video platform like YouTube, Vimeo, or Vidyard using an URL.
- Featured video: This embeds video content from the chapter dashboard found in the settings. This content must also be an external URL from video platforms such as YouTube or Vimeo.
Video content can not be uploaded into Bevy.
The height of the embedded video cannot be adjusted, only the width, by setting the percentage in the video width setting.
Button
Buttons are a visual addition to your chapter page, making it easier for viewers to know where to click. Adding button(s) to the chapter page encourages viewers to engage with content further down the chapter page or other community web pages.
Buttons can be left, center, or right aligned, and one of two button styles can be selected. The available button styles in the chapter page builder are consistent with the established button styles throughout your Bevy Instance. Additional button styles are not supported.
Button Options:
-
Link: Direct page visitors to any of the following content pages
-
Custom URL
-
External Website
-
External video URL
-
Parent Chapter URL
-
- Anchor: An anchor is a web page element that links the viewer to another location on the same page. Anchors improve the chapter page user experience because visitors can jump to specific parts of the page without having to scroll as much. An anchor can be applied to any section heading on the chapter page. The following anchor locations are supported:
-
-
Social share element
-
Social links component
-
Sub-chapters
-
Upcoming events
-
Social share
-
Past events
-
Organizers
-
Global sponsors
-
Local sponsors
-
Partners
-
-
Load more: Allows the visitor to view more content for a page component. This is most relevant when a chapter page component has a default configuration to show a default number of items on the chapter page. The load more button can be used in conjunction with the following components:
-
Sub-chapters
-
Upcoming events
-
Past events
-
Organizers
-
Global sponsors
-
Sponsors
-
Partners
-
-
Join chapter: Create an automatic link for attendees to join or leave the chapter.
-
Contact Chapter: Allows viewers to email the event's chapter organizer. When the button is selected, a form opens on the user's screen.
Image
Add images to any chapter page builder page with the image element. Existing images, such as the chapter banner or chapter thumbnail, can be added to the chapter canvas. Additionally, new images can be uploaded via the custom image upload option. Custom images must be 2MB or smaller and have a supported file format of .jpg, .png, or .svg. Images can be left, center, or right-aligned.
-
Alt text: Alt text is written copy describing an image's appearance on a page providing context for search engines, and is also read aloud by screen readers.
-
Image width: The height of the image cannot be adjusted, only the width, by setting the percentage in the image width setting.
-
Rounded corners: Define the radius of the corners of an element with the round corner settings.
Divider
Add the divider element to add a line to group content or create sections on the chapter page. The divider can be aligned left, right, or center and styled with width, drop shadow, and color settings.
Dynamic Text
Dynamic text is a feature that automatically populates and updates the chapter page with content from the chapter dashboard, eliminating manual updates on a chapter page whenever chapter details change. The following dynamic text options are available:
-
City
-
Country
-
Description
-
Member count
-
Parent chapter name
-
Region
-
State
-
Chapter name
Components
Organizers
Displays the members of the chapter team. The default component layout renders when the component is added to the canvas but can be customized for design and content. For example, the following dynamic text sources are available for the organizers component:
-
First name
-
Last name
-
Full name
-
Company
-
Title
-
City
-
Country
-
Description
-
Member count
-
Parent chapter name
-
Region
-
State
-
Chapter name
When the view profile link is clicked, the page viewer is brought to the chapter organizer’s Bevy profile page.
Sub-chapters
Displays sub-chapters within the community. The default component layout renders when the component is added to the canvas, but the HQ admin can customize the design and content. For example, the following dynamic text sources are available for the sub-chapters component:
-
City
-
Country
-
Description
-
Member count
-
Parent chapter name
-
Region
-
State
-
Chapter name
-
Sub-chapter city
-
sub chapter country
-
Sub-chapter description
-
Sub-chapter member count
-
sub-chapter region
-
Sub-chapter state
-
Sub-chapter name
Sub-chapters is a term that can be customized on your Bevy site, and a different term may display on the chapter page builder canvas. The component only displays on the parent chapter page when sub-chapters are associated.
Past events
Displays events that previously occurred in the chapter . The default component layout renders when the component is added to the canvas but can be customized for design and content. For example, the following dynamic text sources are available for the past events component:
-
City
-
Country
-
Description
-
Member count
-
Parent chapter name
-
Region
-
State
-
Chapter name
-
Event title
-
Event description
-
Event short description
-
Event date
-
Event type
Upcoming events
Displays events the chapter is hosting in the future. The default component layout renders when the component is added to the canvas but can be customized for design and content. For example, the following dynamic text sources are available for the upcoming events component:
-
City
-
Country
-
Description
-
Member count
-
Parent chapter name
-
Region
-
State
-
Chapter name
-
Event title
-
Event description
-
Event short description
-
Event date
-
Event type
Global sponsors
Displays the organization(s) sponsoring the chapter. Only active global sponsors added via the the admin dashboard sponsors tab display in the global sponsors component.
Local sponsors
Displays the organization(s) sponsoring the chapter. Only local sponsors added via the the chapter dashboard sponsors tab display in the local sponsors component.
Local partners
Displays the organization(s) sponsoring the chapter. Only local partners added via the the chapter dashboard sponsors tab display in the local partners component.
Blog posts
Displays recently published blogs. The default component layout renders when the component is added to the canvas but can be customized for design and content. For example, the following dynamic text sources are available for the blog posts component:
-
City
-
Country
-
Description
-
Member count
-
Parent chapter name
-
Region
-
State
-
Chapter name
-
Blog post title
-
Blog post publish date
-
Blog post description
-
Blog post author