HyperBuilder
...
Blocks
Documentation Draft

Topic

16min

Overview

The 'Topic' block is the subject of the 'body' section and can be used to display content that needs to be extra visible. You can set it apart by adding a background color, use and image or video, etc..

Topic block - Page structure
Topic block - Page structure


Preview Topic block

Document image


Text

The text settings to the right of your screen allow you to add or edit content

Topic block, text settings
Topic block, text settings


Prefix

Document image


This is the very first text line visible in the Topic block, it's visible above the title in a small fontsize.

Title

Document image


This is the second text line, it's visible underneath the Prefix and printed in a large fontsize.

Subtitle

Document image


This is the third text line, it's printed underneath the Title in a semi large fontsize.

Text

Document image


This is the main Topic content. It's printed in a small fontsize. Depending on the length of your content the image to the left of the text will be automatically enlarged to fit the full size of the Topic block column.

Text align

Document image


This setting will align your text/content to the Left or Right.

Background

To customize the Topic block you can choose what will be displayed, you can pick an image, use a solid color or play a video.

Topic block, background settings
Topic block, background settings


Media Type

Topic block, media type
Topic block, media type


Select a still image or video from your media library.

Media url

Topic block, media url
Topic block, media url


Upload a new image or use an existing image from your library. Click the "Open Media Library" button and choose your image or video.

Media width

Topic block, media width
Topic block, media width


Set the size for your chosen image or video. You can select 40%, 50% or 60%. The image or video will be visible in a column to the left or the right of the Text content. You can change the alignment in the Text settings.

Enable sticky animation

Topic block, sticky animation settings
Topic block, sticky animation settings


When scrolling down the page the whole Topic block will stick to the top of your screen all other content blocks will scroll underneath. This feature can be used to give the block some extra visibility.

Background color

Topic block, background color
Topic block, background color


Click the rectangular box to pick a solid background color.

Text color

Topic block, text color
Topic block, text color


Click the rectangular box to pick a text color.

Video autoplay

Topic block, video autoplay settings
Topic block, video autoplay settings


When enabled the video will start playing when opening the page. If not enabled play/stop buttons will be added.

Show controls

Topic block, video controls settings
Topic block, video controls settings


When enabled this will add play/pauze buttons to the Video.

Background type

Topic block, background type
Topic block, background type


Full will display the Topic across the full width of your screen. When you set this to Reduced it will add spacing/padding to the left and right side of your Topic block.

Buttons

Topic block, button settings
Topic block, button settings


You can add multiple buttons, for this you need to press on '+ Add' icon. You can also insert a link (internal or url):

a) Select a Button style, there are 6 styles available

b) Add Text to your button to make it visible

c) Button URL, copy the chosen link, but don't forget to insert it for every language.

d) Internal link, pick your page from a list of pages available in Hyper Builder, which in this case automatically will be chosen for every language.







Updated 08 Aug 2024
Doc contributor
Did this page help you?