Mit den Widgets kannst du Informationen zu deinen Veranstaltungen in unterschiedlichen Formen auf deine Homepage integrieren. 

Der Vorteil hierbei ist, wenn diese Widgets einmal eingebunden sind, kannst du den Inhalt und die Darstellung komplett aus dem Ticketsystem heraus steuern.



  • Alle Veranstaltungen mit den einzelnen Veranstaltungstage werden abgebildet
  • Erweiterter Filter für die Kategorien

Image Placeholder

Beispiel: Widget -Style 6




HTML-Code


<div class='event'>
<div class='eventwrapper clearfix'>
<div class='egocol-1'>
<div class='event-name'>{EVENTNAME}</div>
</div>
<div class='egocol-2'>
<div class='event-date'>{EVENTDATE}</div>
<div class='event-venue'>{VENUENAME}</div>
</div>
<div class='egocol-3'>
<div class='event-button'>{BUTTON}</div>
</div>
</div>
</div>




CSS-Code


/* outer structure */
.event { overflow: hidden; }
.eventwrapper { width: 100%; margin: 7px 0; padding: 10px; background-color: #fff; border: 1px solid #dadada; border-radius: 0px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.12); }

/* inner elements */
.posterwrapper { position: relative; max-height: 200px; overflow: hidden; border-radius: 0px; }
.event-price { position: absolute; font-size: 16px; color: #fff; text-align: center; background: rgba(0,0,0,0.5); width: 100%; padding: 6px; bottom: 0; }
.event-pic { height: auto; width: 100%; }
.event-name { padding: 0 0 0 10px; color: #000; font-size: 20px; }
.event-venue { padding: 0 0 0 10px; color: #333; font-size: 13px; margin-bottom: 0px; }
.event-date { padding: 0 0 0 10px; color: #333; font-size: 13px; font-weight: bold; margin-bottom: 0px; }
.event-info { position: relative; height: 4.1em; overflow: hidden; font-size: 14px; line-height: 1.4; padding: 0 10px; }
.event-info:after { content: ''; text-align: right; position: absolute; bottom: 0; right: 0; width: 70%; height: 1.4em; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); }
.event-button .button { display: block; width: 100%; font-size: 14px; padding: 9px 15px; text-align: center; background-color: #037DB1; color: #fff; }
.more-button { text-align: left; padding: 10px; }
.more-button .button { background: #ccc; color: #666; font-size: 11px; padding: 3px 6px; }
.more-button .button:hover { background: #dadada; color: #333;}
.button { border-radius: 0px; text-transform: uppercase; font-weight: normal; text-decoration: none; }
.button:hover { background-color: #85754E; border-color: #85754E; color: #fff; text-decoration: none; }

/* layout */
.clearfix:after { content: ''; visibility: hidden; height: 0px; display: block; clear: both; }
.egocol-1,
.egocol-2,
.egocol-3 { position: relative; float: left; }
.egocol-1 { width: 30%; }
.egocol-2 { width: 50%; }
.egocol-3 { width: 20%; }

@media only screen and (max-width: 640px) {
.egocol-1,
.egocol-2,
.egocol-3 { float: none; width: 100%; }

.event-info,
.eventdate-info,
.more-button,
.event-name,
.event-date { padding-left: 0; padding-right: 0; }
.event-name { margin-top: 10px; }
.more-button { margin-bottom: 10px; }
}

@media only screen and (min-width: 600px) {
.event-filter {
    display: flex;
}

.filterwrapper {
    width: 30%;
}
}
.filterheader {
    font-size: 20px;
    font-weight: bold;
padding-top: 10px;
}





Erstellung eines Widgets:





Einbindung eines Widgets: