How can we help?

Widget Style 1

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 1

  • 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

 

 

 

 HTML Code:


<div class='event'>
<div class='eventwrapper clearfix'>
<div class='egocol-1'><div class='posterwrapper'><div <div class='event-name'>{EVENTNAME}<br>{EVENTDATE}</div> <div class='event-button'>{BUTTON}</div>{POSTER}</div> </div>
<div class='egocol-2'>
</div>
<div class='egocol-3'>
</div>
</div>
</div>

CSS Code:

.event {
overflow : hidden;
}
.eventwrapper {
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 : 100%;
}
.event-name, .event-date {
position : absolute;
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-button .button {
display : block;
margin-left : 25%;
margin-right : 25%;
width : 50%;
position : absolute;
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-button .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 : 100%;
}
.egocol-2 {
width : 0%;
}
.egocol-3 {
width : 0%;
float : right;
}
@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:

 

 

 

Deine Antwort nicht gefunden? Schick uns Deine Frage