Recipe Tile Group

  1. Showroom Home
  2. Components
  3. Recipe Tile Group

Purpose

The Recipe Tile Group works very similar to the Tile Group component, allowing the integration of Recipe Tiles into the Recipe Group component. The component itself does not contain any content. Within the Tile Group component the editor can decide whether the inserted teasers should be displayed in a 4, 3, or 2 column grid. Depending on the defined settings the inserted teasers will be displayed wider or smaller. If a 2 column display is chosen the teasers will be center aligned. The hight of all inserted tiles adjust to the hight of the highest tile. This ensures a correct displaying of all tiles.

Go directly to

Examples

The following examples show how the component can be used on the live environment.

Example 1: 4 column display

Fisch-Raclette mit Asia-Salat und süßsaurer Mango-Soße – Rezepte von ALDI Nord
Fisch-Raclette mit Asia-Salat und süßsaurer Mango-Soße
10 min
Crémant-Mango-Cocktail – Rezepte von ALDI Nord
Crémant-Mango-Cocktail
5 min
Hähnchen-Curry-Eintopf – Rezepte von ALDI Nord
Hähnchen-Curry-Eintopf
10 min
Oliven-Ziegenkäse-Aioli mit Antipasti und Baguette – Rezepte von ALDI Nord
Oliven-Ziegenkäse-Aioli mit Antipasti und Baguette
5 min

Example 2: 3 column display

Fisch-Raclette mit Asia-Salat und süßsaurer Mango-Soße – Rezepte von ALDI Nord
Fisch-Raclette mit Asia-Salat und süßsaurer Mango-Soße
10 min
Crémant-Mango-Cocktail – Rezepte von ALDI Nord
Crémant-Mango-Cocktail
5 min
Hähnchen-Curry-Eintopf – Rezepte von ALDI Nord
Hähnchen-Curry-Eintopf
10 min

Example 3: 2 column display

Fisch-Raclette mit Asia-Salat und süßsaurer Mango-Soße – Rezepte von ALDI Nord
Fisch-Raclette mit Asia-Salat und süßsaurer Mango-Soße
10 min
Crémant-Mango-Cocktail – Rezepte von ALDI Nord
Crémant-Mango-Cocktail
5 min

Configuration

To create the component, follow the steps below. 

Tile Group
  • Step 1
    Configure TileGroup component
  • Step 2
    Choose the setting of the Tile Group component by selecting the corresponding radio button
  • Step 3
    Choose one of th three Tile generating options
    • Automatic (child pages): All recipes that are at the lower level 
    • Manual (multiple): Recipes XX-YY that are at the lower level, XX-YY can be set in poped up fields "First Tile" and "Last Tile" beneath
    • Manual (single):The recipes can be overwritten by maintaining other recipes

 

 
 

 

 

General Information:

The Recipe Tile will is adapted to the new design layout to have a more unified and consistent look throughout the website.

  • The adapted Reipe Tile will have permanent visible Tile frame and also same hover behavior as the Article Tile.
  • The lables will be determiend by the diet types (for exaple vegan recipes will have a vergan lable).
    • You can edit the diet Labels in properties of Language page -> TAB recipes
    • In the properties of the actual recipe (TAB Recipe page -> field Diet type) you can choose one label out of the dropdown
  • If lables are longer than 22 characters then the rest will be dotted out
  • Headline can be two rows long, rest will be dotted out

Diet types can be edited in the language page properties, in the tab recipes.

Be aware that any text which is placed at the right bottom within the image of the recipe tile, will be overlaped by the lable or video icon.

Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch