Block settings

Updated 3 weeks ago by Geoffroy "Vomact" Piot

This guide will explain all of the block settings you may come across while using the Website Builder. The different settings are presented as such:

Setting name
Available options or sub-settings
Layout block Basic block Toornament block

Function of the setting and its options.

Use blocks to create your page layout(s) or directly modify your website's pages, by adding and nesting them as you need. Here is the complete list of settings you will encounter in the website builder:

Content


Alignment (Horizontal/Vertical)
Left/Top, Center, Right/Bottom, Stretch
Section Container

Define how elements are horizontally aligned within the block:

  • Left/Top, Center, Right/Bottom: elements are all aligned starting from the left/top, around the center, or from the right/bottom
  • Stretch: elements are aligned to cover the entirety of the horizontal/vertical space
Alternative Text
-
Image Image Link

Define the "alt text" of the image located in this block, to provide alternative information for the image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Bracket
Show rounds
Structure viewer Stage viewer

Choose whether you want the round titles to be displayed on your bracket or not.

Columns/Rows
-
Section Container

Set the size of the different columns/rows in this block, depending on the orientation (horizontal/vertical). The number of columns/rows depends on the number of elements in the block, and the size can be set in pixels (px) or percentage (%).

Distribution (Horizontal/Vertical)
Left/Top, Center, Right/Bottom, Space between, Space evenly, Stretch
Section Container

Define how elements are horizontally distributed within this block's space:

  • Left/Top, Center, Right/Bottom: elements are all aligned starting from the left/top, around the center, or from the right/bottom
  • Space between: outermost elements are aligned left/top and right/bottom, and the space between all elements is the same
  • Space evenly: there is an equivalent space on the left/top and right/bottom of all elements
  • Stretch: the whole block surface is covered with elements, that may be stretched in the process
Heading
-
Heading

Define the text and type of heading in this block. Headings are used by search engines to index the structure and content of the web page. A <h1> heading should be used for the main heading of your page, followed by <h2> headings, then <h3> for less important things etc.

Image
-
Image Image Link

Upload a new image to the website gallery, or select an existing one to appear in this block.

Web address, Page
Text Link Image Link Button

Select the type of link, whether it is an external web address or a relative page of your website.

Match
Opponents to display, Pagination size, Show date
Structure viewer Match calendar Stage viewer

Defines the number of participants to display in FFA matches, and the number or matches to display per page. You can also choose to show or hide the date in the matches.

-
Navigation

Set the different items that will appear in the navigation menu. They can be links to other pages of the website, or absolute links to any other web page.

Orientation
Vertical, Horizontal
Section Container

Define the orientation of the content within this block, and if multiple elements exist, creates rows / columns accordingly.

Participant
Icon to display, Participants per row, Pagination size
Structure viewer Match calendar Stage viewer Participant list

Define the display option of participants, such as the visual to display (none, logo or flag), how many participants appear per row, and how many per page.

Ranking
Show Heading, PWL, Draws, Forfeits, Score
Structure viewer Stage viewer

Defines what information are to be displayed or not in ranking-based stage displays.

Text
-
Heading Text Text Link Button

Define the text that will appear in this element.

Spacing
None, 1px, Tiny, Small, Medium, Large, Huge
Section Container

Select a spacing norm for elements within this block.

Stage
Stage to display
Stage viewer

Select which stage to display in the block. The type of stage will change the way matches are displayed and available options.

URL
-
Text Link Image Link Button Video

Set the URL for the link, be it an absolute URL or a relative one in the website, or a media link from Youtube, Twitch, Vimeo for a video embed.

Width/Height
-
Image Image Link Video

Set the width and height of the media. The default values will use the ones from the media or containing element (depending on which is the smallest one), and it can be set in either pixels (px) or percentage (%).

Style


Background
Color, Image (Auto, Contain, Cover, Repeat)
Section Container

Define the background for this block: either a color from your theme or an image, which then comes with different filling options:

  • Auto: Default value. The background image is displayed in its original size, centered in the block
  • Contain: resizes the background image to make sure the image is fully visible
  • Cover: resizes the background image to cover the entire block, even if it has to stretch the image or cut a little bit off one of the edges
  • Repeat: combined with another option, will repeat the image to fill all of the available space

Border
Radius, Thickness, Color
Container Image Image Link

Add a border to a block, choosing the radius of the element's corners (for rounded corners), its thickness in pixels and its color (selected from your theme).

Bracket
Style
Structure viewer Stage viewer

Select the theme of the bracket displayed in this block, from the ones you have created in the Theme of your website.

Buttons
Load more
Structure viewer Match calendar Participant list

Select the theme of your "Load more" button, from the ones you created in the Theme of your website.

Date
Style, Color, Alignment
Match calendar

Define the style of the dates in this block.

Layout
Horizontal/Vertical Alignment
Container All Basic blocks All Toornament blocks

Define the layout of the block relative to its parent element. It is missing from the Section block because it always fills the whole space of its containing element.

Match
Match style
Match calendar Structure viewer Stage viewer

Define the style of the matches to be displayed in the different competition blocks, as designed in your website theme. Note that the 'Mini' styles are not available for the Match calendar block.

Stage list, Group list, Group info, Round list
Navigation Structure viewer Stage viewer

Select the theme of your navigation items, from the ones you created in the Theme of your website.

Size
Width, Height, Min. Height, Min. Width
Container Heading Text Text Link Structure viewer Stage viewer

Define the size of the block, with width and height values in either pixels or percentage. Minimum values in pixels can be set on some Toornament blocks.

Spacing
Margin, Padding
Section Container

Define the top, bottom, left and right values for either the margin (used to create space around an element, outside of any defined borders) and the padding (used to create space around an element's content, inside of any defined borders).

Text
Style, Color, Alignment (Left, Center, Right, Justify)
Heading Text Text Link

Define your text style, by selecting a theme preset and a color. You can also choose the alignment, left, right, center or justified (each line is stretched so that every line has equal width, and the left and right margins are straight).

Theme
-
Button

Select the theme of your button, from the ones you created in the Theme of your website.

Ranking
Style
Structure viewer Stage viewer

Select the theme of the ranking displayed in this block, from the ones you have created in the Theme of your website.


How did we do?