Dein Warenkorb ist leer

11.06.2021 Custom Drops, Dropper

Custom Drops Showcase - Timeline

Wir stellen euch ein Custom Drop vor, mit dem die Historie der Marke rollibeet.de und deren Produkte illustriert wird - das Timeline Drop.

Manchmal ist es eine gute Idee, auf "Wir über uns" Seiten oder auf der Startseite etwas zur Historie seiner Marke oder zur Entwicklung seiner Produkte zu erzählen. Hübsch verpackt in einer Timelime lassen sich solche Stories und Rückblicke besser lesen - und machen optisch auch etwas her.

Timeline Custom Drop auf rollibeet.de

Einfache Dateneingabe

Rollibeet.de verwendet eine solche Timeline, um die Entstehung (und auch Transformation) der selbstentwickelten Hochbeete zu zeigen. Zur leichteren Dateneingabe und um die einfache Verknüpfung mit anderen Drops zu ermöglichen (hier: Gallery, Image Banner) wird ein Custom Drop verwendet.

Im Drop werden Eingabeelemente wie Date, Text und das neue Icon Control verwendet, um Daten zu erfassen und die Optik der Timeline zu bestimmen.

Andere Drops verlinken

In einem HTML Control können Beschreibungen zum jeweiligen Zeitpunkt der Timeline hinterlegt und auch Drops verlinkt werden. In der Rollibeet Timeline werden Image Banner und Gallery Drops verwendet, um die einzelnen Stationen der Produkt- und Markenentwicklung zu illustieren. Und um externe (Partner-) Seiten zu verlinken.

Timeline Custom Drop Inhalt mit Gallery Drop

(Responsive) Implementierung

Das Grundgerüst zur Dateneingabe ist schnell mit unseren Custom Drop Builder erstellt. Für die Umsetzung der Ausgabe kann man sich (wie auch hier geschehen) im Netz inspirieren lassen (Google Suche nach CSS Timeline).

Insgesamt summiert sich der CSS und Smarty Code hier auf überschaubare 200 Zeilen auf, wobei gut 1/3 des CSS Codes für Media Queries (die Timeline ist responsiv) verwendet wird. PHP und Javascript wird nicht benötigt.

Natürlich reiht sich auch dieses Custom Drop wieder in die Dropper Installation ein: es können nicht nur andere Drops in den Inhalten der Timeline verlinkt werden, sondern die Timeline selbst auch in andere Drops. Auf rollibeet.de wurde die Timeline bspw. als Space in das Flex Layout der eigenen Seite "Geschichte" eingefügt.

Dropper Silber benötigt

Um Custom Drops nutzen zu können, benötigt ihr zumindest Dropper Silber. Der Drop Builder hilft euch bei der Erstellung eines Grundgerüstet, unser DEV Wiki bei den Details. Und uns könnt ihr sowieso gern um Hilfe bitten.

Nutzt ihr Custom Drops?

Schreibt uns gern, wenn ihr selbst Custom Drops entwickelt habt und einsetzt. Gern schauen wir einmal in euren Code, geben Tipps oder stellen euer Drop hier vor.