Das Widget kann problemlos mehrfach auf einer Seite eingesetzt werden. Ist ja https:
//www.
widget-zp.
de/bild-hover-1903.
html">HIER> auch so.
Du kannst das Widget aber auch erweitern, dann wird der gleiche CSS-Code nicht mehrfach eingebunden.
In der widget.
json folgenden Abschnitt entsprechend erweitern.
{
"displayName": "Bild 1",
"name": "bild_1",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-1",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-1",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-1",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-1",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-1",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 2",
"name": "bild_2",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-2",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-2",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-2",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-2",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-2",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 3",
"name": "bild_3",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-3",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-3",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-3",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-3",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-3",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 4",
"name": "bild_4",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-4",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-4",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-4",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-4",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-4",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 5",
"name": "bild_5",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-5",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-5",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-5",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-5",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-5",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 6",
"name": "bild_6",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-6",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-6",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-6",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-6",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-6",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 7",
"name": "bild_7",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-7",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-7",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-7",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-7",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-7",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 8",
"name": "bild_8",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-8",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-8",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-8",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-8",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-8",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
{
"displayName": "Bild 9",
"name": "bild_9",
"popupButtonWidthInPixel": 120,
"popupHeightInPixel": 172,
"popupWidthInPixel": 300,
"showLabel": false,
"type": "group",
"defaultValue": "",
"fields": [
{
"displayName": "Bild",
"name": "bild-9",
"type": "image-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Überschrift H3",
"name": "h3-9",
"type": "text-singleline",
"width": 200,
"defaultValue": "Widget"
},
{
"displayName": "Überschrift H4",
"name": "h4-9",
"treatAsSingleLine": true,
"type": "text-singleline",
"width": 200,
"defaultValue": "Zeta Producer"
},
{
"displayName": "Verweis",
"name": "link-9",
"type": "url-selection",
"width": 200,
"defaultValue": ""
},
{
"displayName": "Text Button",
"name": "linktext-9",
"type": "text-singleline",
"width": 200,
"defaultValue": "mehr dazu"
}
]
},
Und in den beiden HTML-Dateien in dieser Zeile for ( var i = 1; i <
= 9; i++){ die 9 durch die neue Anzahl erstzen.
