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.


Style 2

  • Alle Veranstaltungen oder einzelne Veranstaltungstage werden in einer Liste dargestellt.
  • Durch klick auf den Button Tickets gelang der Kunde in den Shop und kann sich den Veranstaltungstag auswählen.
  • In diesem Widget sind folgende Variablen verbaut:
  • Veranstaltungsname
  • Veranstaltungsdatum
  • Ticket-Button
  • Veranstaltungsbeschreibung
  • Veranstaltungsbild
  • More-Button
Image Placeholder


HTML Code:


<div class='event2'>
<div class='egowrapper clearfix'>
<div class='egocol-1'><div class='posterwrapper-ego'><div class='event-price2'>{PRICERANGE}</div>{POSTER}</div></div>
<div class='egocol-2'>
<div class='event-name2'>{EVENTNAME}</div>
<div class='event-date2'>{EVENTDATE}</div>
<div class='event-info2'>{EVENTINFO}</div>
<div class='more-button2'>{MORE}</div>
</div>
<div class='egocol-3'>
<div class='event-button2'>{BUTTON}</div>
</div>
</div>
</div>

CSS Code:

.event {
overflow : hidden;
}
.egowrapper {
width : 100%;
margin : 7px 0;
padding : 10px;
background-color : #fff;
border : #fff solid 0;
}
.posterwrapper {
position : relative;
max-height : 400px;
overflow : hidden;
border-radius : 3px;
}
.event-pic {
height : auto;
width : 98%;
}
.event-name2, .event-date2 {
font-size : 18px;
font-family : Oswald;
color : #fff;
text-align : center;
background : rgb(0, 0, 0, 0.4);
width : 100%;
padding : 6px;
top : 0;
}
.event-button2 .button {
display : block;
margin-left : 25%;
margin-right : 25%;
width : 50%;

bottom : 15px;
background-color : rgb(0, 0, 0, 0.4);
color : #fff;
border : #fff solid 3px;
border-radius : 0;
font-family : Nunito Sans !important ;
font-weight : 800 !important ;
font-style : normal;
font-size : 18px !important ;
text-transform : uppercase;
line-height : 1.4em;
letter-spacing : 0.5px;
}
.event-button2 .button:hover {
background-color : #fff;
border : #fff solid 2px;
color : #000;
text-decoration : none;
}
.clearfix:after {
visibility : hidden;
height : 0;
display : block;
clear : both;
}
.egocol-1, .egocol-2, .egocol-3 {
position : relative;
float : left;
}
.egocol-1 {
width : 20%;
}
.egocol-2 {
width : 60%;
}
.egocol-3 {
width : 20%;
float : right;
}
@media only screen and (max-width: 640px) {
.egocol-1, .egocol-2, .egocol-3 {
float : none;
width : 100%;
}
.event-info2, .eventdate-info, .more-button2, .event-name2, .event-date2 {
padding-left : 0;
padding-right : 0;
}
.event-name2 {
margin-top : 10px;
}
.more-button2 {
margin-bottom : 10px;
}
}
Erstellung eines Widgets:




Einbindung eines Widgets: