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 4

  • Alle Veranstaltungen werden in einem Grind dargestellt.
  • Durch klick auf den Button Tickets gelang der Kunde in den Shop und kann sich den Veranstaltungstag auswählen.
Image Placeholder



HTML Code:


<div class='style4event'>
<div class='style4eventwrapper clearfix'>
<div class='style4col-1'><div class='style4posterwrapper'><div class='style4event-price'>{PRICERANGE}</div>{POSTER}</div></div>
<div class='style4col-2'>
<h3 class='style4event-name'>{EVENTNAME}</h3>
<div class='style4text'>Nächste Vorstellung:</div>
<div class='style4event-day'>{EVENTDATE_NEXT}</div>
<div class='style4text'>Spielstätte:</div>
<div class='style4event-venue'>{VENUENAME}</div>
<div class='style4more-button'>{MORE}</div>
<div class='style4event-button'>{BUTTON}</div>
</div>
</div>
</div>


CSS Code:

div#widget1309 {
display : flex;
flex-wrap : wrap;
}
.style4event {
overflow : hidden;
margin-right : 3.33333%;
width : 30%;
float : left;
box-sizing : border-box;
display : flex;
}
.style4eventwrapper {
width : 100%;
margin : 7px 0;
padding : 10px;
background-color : transparent;
float : left;
}
.style4posterwrapper {
position : relative;
max-height : 200px;
overflow : hidden;
border-radius : 3px;
}
.style4posterwrapper:hover {
background-color : #000;
}
.style4event-price {
position : absolute;
font-size : 16px;
color : #fff;
text-align : center;
background : rgb(0, 0, 0, 0.5);
width : 100%;
padding : 6px;
bottom : 0;
}
.style4event-pic {
height : auto;
width : 100%;
}
.style4event-name {
padding : 15px 0 0 10px;
color : #000;
}
.style4event-day {
padding : 0 0 0 10px;
color : #333;
margin-bottom : 10px;
}
.style4text {
padding : 0 0 0 10px;
color : #333;
margin-bottom : 0;
}
.style4event-venue {
padding : 0 0 0 10px;
color : #333;
margin-bottom : 10px;
}
.style4event-button .button {
font-family : Fira Sans Condensed !important ;
font-weight : 700 !important ;
font-style : normal;
font-size : 14px !important ;
text-transform : capitalize;
line-height : 1.4em;
letter-spacing : 0;
display : block;
width : 100%;
padding : 9px 15px;
text-align : center;
background-color : #037DB1;
color : #fff;
}
.style4event-button:hover .button {
background-color : #BBA887;
}
.style4more-button {
text-align : left;
padding : 10px;
}
.sytle4more-button .button {
font-family : Fira Sans Condensed !important ;
font-weight : 700 !important ;
font-style : normal;
font-size : 14px !important ;
text-transform : capitalize;
line-height : 1.4em;
letter-spacing : 0;
background : #ccc;
color : #666;
font-size : 11px;
padding : 3px 6px;
}
.button {
text-transform : uppercase;
text-decoration : none;
}
.style4event-day, .style4text, .style4event-venue {
font-size : 16px;
font-family : Fira Sans Condensed;
font-weight : 400;
line-height : 30px;
letter-spacing : 0;
}
.style4clearfix:after {
content : '';
visibility : hidden;
height : 0;
display : block;
clear : both;
}
.style4col-1, .style4col-2 {
width : 100%;
}
.style4col-2 {
background-color : #F4F4F4;
}
@media only screen and (max-width: 640px) {
.style4col-1 {
float : none;
width : 100%;
}
.style4event {
width : 100%;
}
.style4event-info, .style4eventdate-info, .style4more-button, .style4event-name, .style4event-date {
padding-left : 10px;
padding-right : 0;
}
.style4event-name {
margin-top : 10px;
}
.style4more-button {
margin-bottom : 10px;
}
}

Erstellung eines Widgets:




Einbindung eines Widgets: