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.
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: