Example of Blocks Design

This page shows some examples of using blocks when creating a page. More uses three columns, and within each column, an icon block at 82px and some paragraphs of text. An alternative design might use images instead of icons, or a “cover” image block to combine image and text

Columns block

A columns block, containing three columns, each containing an icon block, heading block and some paragraphs of text.

Ski & full board philosophy

Following our tradition, BASP Frontiers 2021 will take place in a ski resort of the Swiss Alps in a full board regime.

The most fruitful discussions often take place after the sessions themselves, on the terrace, or during breakfast, lunch, or dinner.

Invited & contributed work

Session organizers will work jointly with the area chairs to invite speakers for talks and poster presentations.

Contributions for non-invited poster presentations are subject to abstract review and acceptance (see abstract submission).

Contribution policy

 One registration fee is due for each abstract. Non-author attendance is not possible. Invitation to talk is not transferable (see registration page).

Reusable blocks

This combination of columns, buttons and text for the BASP site, which was planned for the front page has been saved as a “reusable block” called “Front page icons (new)”. You will also find a saved “abstract submission button” saved as a reusable block a similar way.

Button blocks

Block options

You can change various settings for a block. These settings vary depending on type of block.

The settings for the button block allows you to select colour, fill type, rounded corners etc. If you don’t see the panel on the right of the editor with options for a block click the “cog icon” in the top right to show or hide the block options

Columns

Columns can block can be used as a design tool to show paragraphs, images, or various combinations of blocks side by side. This was used to create the three columns in the ‘front page icons block’ above.

Media and Text Block

But for a distinct section where there is an image, with some text to left or right, I would recommend the “Media and Text” block. This one gives nicest layout which adapts depending on the width of the screen, and allows easy swapping of text and image.

Interior of a hotel room with balcony window, couch, TV and desk.

Media and text block

The workshop will be held at Viu Hotel Villars, in the heart of Villars-sur-Ollon village, 50 meters away from the train station and from the departure of the local mountain railway giving direct access to the slopes.

The hotel is fully booked and privatised for the workshop from Saturday January 30 until Friday February 5. Given the limited capacity (60 rooms), part of the attendees will be accommodated at the next-door hotel Alpe Fleurie, or the Eurotel Victoria. All the logistics is handled by Viu Hotel Villars. Note that an extended stay is possible at workshop rates upon room availability.

There are also gallery blocks and image slider blocks to display multiple images.

Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.

Image block

Hotel lobby
Image Caption: Hotel Lobby

Captions are optional, but please remember to set the “Alt tag” to describe each image. This is an accessibility requirement on all of our university websites.

To add some text, click on the page, and start typing, or use the plus button and add a new paragraph block.

After making a heading, there is an option to select heading level H1 is already used by the main title of the page. Most headings will be the default H2 level. Some subheadings may be H3 or occasionally H4. This gives the page an accessible structure and consistent appearance.

Heading H2: Headings

Heading H3: Use real heading blocks

Please use real ‘heading blocks‘. Click plus, and add a heading block, or any existing paragraph can be converted into a heading.

Heading H4: Avoid using size as a substitute for headings

Please do avoid the temptation to write a heading by using a paragraph of text highlighted in bold, or to manually change the font size to make a fake heading. This makes for inconsistent heading sizes and less accessible website. Instead add a new heading block, or click on any existing paragraph of text and change it into a heading block.

Heading H4: Converting a paragraph to a heading

Existing line of text can be converted by clicking on the paragraph, and clicking on the “paragraph” symbol in the floating icon bar. This allows you to change an existing paragraph into a proper heading, or a list, or into various other predefined styles.

Back to H2 again: Lists

  • Convert paragraphs to lists
  • In a similar way
  • Just like this

Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.

Tables

Tables include a couple of predefined styles, outline and stripes, and have options for turning on or off styling of top and bottom rows as heading and footer. Here is a table with outline, and a green baground.

ItemCost
Widget cost£70
Booking fee£30
Tax£20
Total£120
Table 1: Outline style with green background

Here’s a stripes table with headers and footers turned on

ItemCost
Widget cost£70
Booking fee£30
Tax£20
Total£120
Table 2: Stripes style

Cover Block

Cover block gives an intesting way to highlight some key text with a background image. The background image can be given a colour shade effect. An interesting animated option option to try is the cover block with the “fixed background” option. This gives an interesting subtle animated effect. This is frequently used on a front landing page to highlight some key point.

Using the Block path to access settings

Here we are nesting some blocks inside the cover block. Here we have added some “paragraph blocks”, and then a “button block” using the “plus” button.

When editing, you may find it hard to click and select the correct outer block. So, where you are using nested blocks, look out for the ‘path‘ of block types at the bottom of the editor page. eg.

Document –> Cover –> Button Group –> Buttons”.

Clicking on the names of the types of blocks in the path at the bottom of the editor allows you to select from a nested set of blocks based on the current cursor position, and will allow you to access the settings in one of the outer blocks.

Animation

Many blocks have an “animation option” which provides some animated options to have a block or item slide or bounce into view (similar to powerpoint animation options). The animations are activated when the user scrolls down the page an. This animation option applies to many blocks.

Bar at hotel

Another ‘media and text’ block

This one with “animation” option site. The workshop will be held at Viu Hotel Villars, in the heart of Villars-sur-Ollon village, 50 meters away from the train station and from the departure of the local mountain railway giving direct access to the slopes.

The hotel is fully booked and privatised for the workshop from Saturday January 30 until Friday February 5. Given the limited capacity (60 rooms), part of the attendees will be accommodated at the next-door hotel Alpe Fleurie, or the Eurotel Victoria. All the logistics is handled by Viu Hotel Villars. Note that an extended stay is possible at workshop rates upon room availability.

Quotation Block

Pencil drawing of Don Quixote

“Do you see over yonder, friend Sancho, thirty or forty hulking giants? I intend to do battle with them and slay them.”

— Don Quixote