The Page Builder

If you're looking to create a new section or academic page, you have three section-type options to choose from:

1. Page Builder: The main focus of this article. This option lets you insert columns and blocks to display your content.
2. Guided Tour: This option enables you to add and filter guided tours based on filter options such as Location, Subject Area, and more.
3. Disabled: This option prevents content addition and is ideal for parent sections of nested, content-rich areas.

Page Builder

Columns

Before adding any blocks to your page, you need to add columns to house them using the “Add Column” button.

You can also configure the width of these columns to determine the page layout and fill out the available space. For instance, to create two columns side by side, set both columns to “½”. However, be careful, if you have a column set to “⅓” followed by two columns set to “½”, the ⅓ column will be next to the first ½ column.

Blocks

Styling

Width: The same width configuration can be set for blocks within their "Style" tab, excluding the Spacer block. Simply select the width of the block within its containing column. Be mindful, though: if you set a column's width to ½ and a block's width to ½ within that column, the block will appear as if it has a ¼ width.

Padding: Turning this toggle on removes the internal block from the block, which is often useful when the block's background is transparent.

 

Other Styling: There are several more styling options that are self-explanatory, including: 

• Show on Mobile
• Background colour
• Background colour opacity
• Text colour
• Heading colour
• CTA and Hyperlink text colour
• CTA and Hyperlink text hover colour
• Heading text size
• Body text size.

Filtering: Just like other Vepple elements like posts, guided tours & groups, and blocks can also be filtered against Custom FIltering taxonomies. 

 

Types of Blocks

Introduction Block

The Introduction block is outlined by the black border in the provided photo. It has three areas where you can insert content: the heading, body, and buttons.

In the button settings, you can choose between an internal or external link (ensure you format the link as shown in the provided URL example). You can also select a button style from one of the configured options built within Site Options, and customise the button's width and icon.

Text Block

The text block consists of a singular text input field, allowing you to enter and format your desired text content.

 

The Accordion Block

The accordion block includes fields for a heading and a description. By clicking "Add Row," you can create individual accordion items, each with its own title, icon, text, and image options. This setup allows for expandable sections within the accordion, making it easy to organise and display content in a visually appealing and user-friendly way.

 

Embed Post Block

The Embed Post block allows you to incorporate any Vepple post into your section, enabling you to add images, text, galleries, videos, TikTok and Instagram posts, and buttons.

To use it, simply add the block, search for the desired post, and select it.

Content Grid Block

The Content Grid block enables you to arrange posts or groups into a grid of cards, each featuring an icon, image, and title. Additional settings allow you to add a heading, display only posts or groups, separate the content, show groups first, and include subsections.

 

 

When the "Featured" toggle on a post is set to "Yes," the post will be displayed on the section of the content grid block on the assigned section or academia page; e.g., 

For a group, you simply have to assign the group to the same section/academia as the content grid belongs to.

 

Quote Block

The Quote block features predefined inputs for the quote, name, and bio, as well as an option to add an image, circular or square.

 

 

For example, without an image, the quote block looks like this:

The Quote Carousel Block

The main difference between this block and the Quote Carousel block is the ability to add multiple quotes within a collection by clicking “Add Row”. 

Furthermore, you can control the navigation of this collection by enabling the “Show Pagination” option, allowing users to select which quote they want to view. Moreover, the “Autoplay” toggle does what it says on the tin, automatically cycling through the collection.

Chat Block

The Chat block allows you to open chat providers and communicate with students directly from the block. You can integrate services like Unibuddy, TAP, or others like Chatify using custom JavaScript.

 

Simply choose your chat provider and enter the iFrame source (everything contained in src=""). You can then add text and image content, with optional inputs for heading, thumbnail, and body text:

 

Spacer Block

Adding a Spacer block creates a specified height in pixels or rem, resulting in a blank space within the layout. The only adjustable options are the height, and whether you want this spacer applied on mobile devices or not.

Inline Image Block

 

Adding an Inline Image block allows you to display an image with a specified aspect ratio. Additionally, there is a toggle to enable captions for the image. 

If you're unsure whether the uploaded image has a caption, simply press the pencil button in the top right corner. This will open a modal displaying the image's data, which you can edit as needed.

 

Relevant Events Block

The Relevant Events block allows you feature events that are relevant to your audience on other section pages. You can showcase "On Demand" or "Scheduled Events," and specify the number of event cards to display.

Additionally, you can add a heading, body copy, and an icon to the block.

Within the Styles tab, in addition to the standard block stylings, you can customise the appearance of your event cards as well as the text and design of the "View All Events" button.

If no events are available, the block will still be displayed, but with placeholder text in place of any event cards.

Call to Action Block

The Call to Action block allows you to create a button that links to either an internal Vepple link or an external link, with the CMS providing examples for both types.

 Additionally, while the default click event opens the link in the same tab, you can choose to have users open the link in a new tab or modal, as demonstrated in the gif above.

For styling, you can modify the button's aesthetics in the same ways described previously in this article. Additionally, for this block, you have the option to change the background and text colouring of the container of the button.

 

Subject Grid Block

The Subject Grid block creates a grid of all the academia pages, allowing users to swap their subject personalisation by switching to the respective academia page when a specific card's button is clicked.

 

The only style changes you can make are to the button's style, width, and alignment. If an academia page does not have a featured image set, the fallback image (configured in Site Options under Defaults) will be used.

 

Guided Tour Block

The Guided Tour block allows you to select a Guided Tour to link to and offers several layout options, each with different inputs:

1. Button Alone: Set the button text and styling.
2. Image Background: Set the button text and styling, and display an image with a custom aspect ratio underneath.
3. Text + Button (Horizontal): Set the button text and styling, and add some text to the left of the button.
4. Text + Button (Vertical): Set the button text and styling, and add some text above the button.
5. Carousel with a Play Button: Similar to the Quote carousel, this layout features a carousel of each stop's featured image, displaying the Guided Tour title, the stop title, and a play-icon button linking to the Guided Tour. Also has an option to autoplay the carousel.
6. Carousel with a Button: The same as the previous layout option, but a button with customisable copy in place of the play-icon button.

 

 

HTML Block

The HTML block allows you to add custom HTML code and style it with CSS. This gives you the flexibility to create and design unique content beyond the standard options available.

 

Instagram Embed Block

The Instagram Embed block allows you to display an Instagram post as a section block. The key consideration when using this block is identifying the type of Instagram post you have. This ensures the post is displayed at the correct height without being cut off.

 

.

The only other consideration is whether you want to display the Instagram post's comment section, with the photo demonstrating the block showing both the yes or no option.

 

360 Block

The 360 block allows you to place any valid 360 image as a section block and define the pan limits. This feature lets users immerse themselves in a university's content without needing to enter a post, group, or guided tour. 

 

 

Similar to a guided tour, you can add content spots for specific groups to your 360 experience. Simply select the desired filters, and make sure both the groups and their posts are assigned to the same section as your 360 block. This way, the content spots will be displayed accordingly.