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 5

  • Alle Veranstaltungstage werden nach Datum sortiert in einer Liste ausgegeben.
  • Bei Mouse-over über eines der Elemente wird das Veranstaltungsbild im Hintergrund eingeblendet.
Image Placeholder


HTML Code:

<div class='event'>
<div class='eventwrapper clearfix'>
<div class='eventposter'>{POSTER}</div>
<div class='egocol-1'>
<div class='event-day'>{DD}</div>
<div class='event-mon'>{MM}</div>
</div>
<div class='egocol-2'>
<div class='event-name'>{EVENTNAME}</div>
<div class='event-info'>{EVENTINFO}</div>
<div class='more-button'>{MORE}</div>
</div>
<div class='egocol-3'>
<div class='event-button'>{BUTTON}</div>
<div class='event-price'>{PRICERANGE}</div>
</div>
</div>
</div>

CSS Code:

.event {
overflow : hidden;
}
.eventwrapper {
width : 100%;
margin : 7px 0;
background-color : transparent;
color : #000;
display : flex;
flex-wrap : wrap;
}
.eventposter {
display : none;
}
.eventwrapper:hover > .eventposter {
display : block;
position : absolute;
overflow : hidden;
z-index : 0;
display : block;
object-fit : cover;
width : 91%;
height : 287px;
opacity : 60%;
}
.eventwrapper:hover {
color : #fff !important ;
}
img.event-pic {
position : absolute;
top : 50%;
left : 50%;
margin-right : -50%;
transform : translate(-50%,-50%);
}
.event-price {
font-size : 16px;
text-align : center;
width : 100%;
padding : 6px;
bottom : 0;
}
.event-pic {
height : auto;
width : 100%;
}
.event-name {
padding : 0 0 0 10px;
font-family : Yanone Kaffeesatz;
font-weight : normal;
font-style : normal;
font-size : 54px;
text-transform : none;
line-height : 66px;
letter-spacing : 0;
}
.event-day {
font-size : 50px;
font-family : Fira Sans Condensed;
font-weight : 400;
line-height : 30px;
letter-spacing : 0;
color : #037DB1;
margin-top : 10% !important ;
}
.event-mon {
font-size : 25px;
font-family : Fira Sans Condensed;
font-weight : 400;
line-height : 30px;
letter-spacing : 0;
margin-top : 7px !important ;
}
.event-info {
position : relative;
height : 10em;
overflow : hidden;
font-size : 16px;
font-family : "Fira Sans Condensed";
font-weight : 400;
letter-spacing : 0;
line-height : 1.4;
padding : 0 10px;
}
.event-button .button {
display : block;
width : 100%;
font-family : Yanone Kaffeesatz;
font-weight : normal;
font-style : normal;
font-size : 25px;
text-transform : none;
line-height : 30px;
letter-spacing : 0;
padding : 9px 15px;
text-align : center;
border : #037DB1 solid 3px;
color : #037DB1;
}
.more-button {
text-align : left;
padding : 10px;
}
.more-button .button {
color : #037DB1;
font-size : 17px;
padding : 3px 6px;
border : #037DB1 solid 1px;
}
.button {
border-radius : 3px;
text-transform : uppercase;
font-weight : normal;
text-decoration : none;
}
a.button.event-closed {
background-color : #b40404 !important ;
color : #fff;
border : #b40404 solid 2px;
}
.clearfix:after {
content : '';
visibility : hidden;
height : 0;
display : block;
clear : both;
}
.egocol-1, .egocol-2, .egocol-3 {
position : relative;
float : left;
z-index : 2;
padding-top : 10px;
}
.egocol-1 {
width : 15%;
}
.egocol-2 {
width : 75%;
padding-left : 7%;
}
.egocol-3 {
width : 10%;
}
.egocol-1 {
border-right : 2px solid #E5E5E5;
text-align : center;
}
@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;
}
}

Erstellung eines Widgets:




Einbindung eines Widgets: