Shortlinks

Shortlinks (NATURE v2.6.0 and later)

With the NATURE theme version 2.6.0 and later (only with Contao 5 and Bulma 1.x / V2) you can use shortlinks – small linked icons fixed to the left or right edge of the screen.

Requirements

NATURE theme version 2.6.0 or later
V2 installation with CSS variables (not SCSS variables)
Contao 5
Bulma 1.x

Setting up shortlinks – step by step

1. Create an article

Create a new article, e.g. under “Nature Theme Elemente”.

In the article settings:

Under Template settings → select a Theme Helper Tag, e.g. NATURE03/01
Under Expert settings → CSS class, add one of the following position classes:

Position	CSS class
Left top	`shortlinks left-top`
Left center	`shortlinks left-center`
Left bottom	`shortlinks left-bottom`
Right top	`shortlinks right-top`
Right center	`shortlinks right-center`
Right bottom	`shortlinks right-bottom`

💡 If you imported the current demo, you can also select these classes via CSS style selection.

2. Add hyperlink elements

Now add as many content elements of type Hyperlink to the article as you like.

Field	Content
Link address	e.g. `tel:+49123456789` or `mailto:info@example.com`
Link text	Icon via a Font Awesome insert tag, e.g. `{{fa::phone}}`
Link title	e.g. `contact by phone`

👉 You find an explanation and a list of available insert tags here: Font Awesome Inserttag Bundle (GitHub)

3. Create a module

Create a new module under Themes → Modules:

Module type: Custom HTML
HTML content:

{{theme::content::NATURE03/01}}

📌 Make sure the Theme Helper Tag (NATURE03/01) matches the article.

4. Include the module in the page layout

Go to the page layout and open the include settings:

Go to Include settings
Under Included elements → add a new row
Section: Footer (layout section)
Module: select the shortlink module you created
Save

Example icons via insert tag

{{fa::phone}}      →  phone icon
{{fa::envelope}}   →  email icon
{{fab::facebook}}  →  Facebook icon
{{fab::instagram}} →  Instagram icon
{{fab::whatsapp}}  →  WhatsApp icon
{{fab::linkedin}}  →  LinkedIn icon
{{fab::pinterest}} →  Pinterest icon
{{fab::youtube}}   →  YouTube icon
{{fab::tiktok}}    →  TikTok icon
{{fab::github}}    →  GitHub icon

You find a complete overview of all available icons here: GitHub: Font Awesome Inserttag Bundle

Result

The shortlinks now appear fixed to the left or right edge of the screen, depending on the chosen position.

✅ Ideal for:

Phone or email contact
Links to social media
Quick access to certain sections of the page