Beiträge von Mario

Mario

Hallo Rick,
ich hatte den Google-Webdesigner vor ca. einem halben Jahr auch getestet. Mir war aber die Einarbeitung zu Zeitaufwendig.

Normalerweise hast du 2 Möglichkeiten das ganze einzubinden erstere ist einfach zu bewerkstelligen und sollte auch funktionieren. Die zweite ist schon etwas komplizierter und es kann Probleme geben weil sich die Java-Scripte nicht immer miteinander verstehen.

Du veröffentlichst den kompletten lokal abgespeicherten Ordner per FTP zB. mit File-Zilla auf deinem Server. Oder halt per Googledrive. Wie auch immer Hauptsache dein Banner ist nun im www verfügbar. Nun kannst du dein Banner einfach per iFrame einbinden.
Du öffnest den lokal abgespeicherten Ordner, alle Java-Script, CSS-Dateien müssen wieder per FTP auf den Server. Diese Dateien musst du nun in Zeta verlinken. Infos dazu HIERNun fügst du den Bodybereich der HTML-Seite per Widget > Quelltext in Zeta ein.

Mario

Hallo,
deine Mail ist angekommen.

Ich habe HIER ein Testprojekt hochgeladen. In der mobilen Ansicht werden die Kontaktdaten ausgeblendet und stattdessen klickbare Butten angezeigt somit öffnet sich zB. beim Klick auf den Telefon-Button die Telefon-APP mit der entsprechenden Nummer. Für Smartphones werden die Button dann nochmal verkleinert. Du kannst das ganze ganz gut testen indem du das Browser-Fenster in der Breite verkleinerst und das Verhalten dabei beobachtest.

Einstellungen < CSS folgendes einfügen und an deine Bedürfnisse anpassen

CSS

<style>
.fon {
position: fixed;
z-index:7000;
top:10px;
margin-left:0;
font-size:1em;
color: #006600;
font-weight: 900;
text-shadow: 1px 1px 1px white;
}
@media (max-width: 979px) {
.fon {
display: none;
}}
.fon-mobil {
position: fixed;
z-index:7001;
top:60px;
left:20px;
width: 40px;
height: 40px;
}
@media (min-width: 979px) {
.fon-mobil {
display: none;
}}
@media (max-width: 568px) {
.fon-mobil {
top:50px;
left:20px;
width: 30px;
height: 30px;
}}
.mail {
position: fixed;
z-index:7000;
top:30px;
margin-left:0;
font-size:1em;
color: #006600;
font-weight: 900;
text-shadow: 1px 1px 1px white;
}
@media (max-width: 979px) {
.mail {
display: none;
}}
.mail-mobil {
position: fixed;
z-index:7001;
top:60px;
left:70px;
width: 40px;
height: 40px;
}
@media (min-width: 979px) {
.mail-mobil {
display: none;
}}
@media (max-width: 568px) {
.mail-mobil {
top:50px;
left:60px;
width: 30px;
height: 30px;
}}
</style>

Alles anzeigen

Widget > Quelltext folgendes einfügen und anpassen, unten links auf das Mischpult und den Haken bei "auf allen Seiten anzeigen" setzen

HTML

<div class="fon">☏ 01234/56789</div>
 <div class="mail">✉ e-mail@mail.de</div>
<div class="fon-mobil"><a href="tel:+4923456789"><img src="http://zella.de/bilder/social4/fon.png" alt="telefon" /></a></div>
<div class="mail-mobil"><a href="mailto:mail@email.de"><img src="http://zella.de/bilder/social4/kont.png" alt="email" /></a></div>

Mario

Hallo,
schau mal HIER

gehe zu Einstellungen > CSS und füge dort folgendes ein:

CSS

<style>
body {
background-position:center;
background-attachment:fixed;
background-size:cover;
}
</style>

Mario

Gibt es einen Link oder einen Screenshot von der Seite wo man sehen kann wie viel Platz in der Menüleiste vorhanden ist?
Dann schau ich mir das gerne einmal an.

Mario

Hallo,
alternativ zu den Tabs findest du HIER ein Accordeon-Widget.

Mario

Hallo,
seit dem letzten Update von Zeta-Producer werden im Widget Quelltext keine Abstände zum nächsten Artikel eingefügt. Deshalb kannst du den Artikel im Vorschaumodus nicht finden.

Wechsele mit der Funktionstaste "F8" in den Spaltenmodus.

Mario

Ich habe mich mal damit auseinender gesetzt. Ob das ganze auch in ZETA 11 funktioniert kann ich nicht sagen.
LINK

Mario

UPDATE

Mario

Einfach mal probieren.

Den CSS-Code fügst du so ein wie HIER beschrieben.
Den Quellcode fügst du per Widget Quelltext ein.
Wie du ein eigenes Bild auf den Server bekommst ist HIER beschrieben.

Im Quelltext passt du dann die Grau hinterlegten Bereiche an.
Im CSS-Code kannst du unter .bullet { die Größe und Farbe der Punkte ändern.

Mario

Hallo Rick,
"...ist noch in Arbeit" weil bei verkleinerter Ansicht Hotspots die ganz rechts sitzen nicht komplett angezeigt werden. (siehe Anhang)
Wenn dies nicht weiter stört kannst du das so verwenden.

Das einzubauen ist recht einfach, die Positionierung der Hotspots kann aber schon zeitaufwendig werden.

Mario

Hatten wir doch eben erst.

Mario

Imagemap

Mario

Hallo,
wie man CSS auf Einzelseiten einfügen kann habe ich HIER beschrieben.

Den verwendeten CSS-Code kannst du über die "Developer Tools" heraus finden, zB. im Crome "Rechtsclick (Element untersuchen)".

Mario

Im Widget Quelltext werden die Einstellungen für den Artikelabstand nicht übernommen.

Zur Veranschaulichung habe ich das veröffentlicht.

HIER ein Beispiel Text.
HIER ein Beispiel Bild.

Mario

Ja das liegt wohl am Widget Tab, oder daran das ich den gleichen Code mit der selben ID 2x eingebunden habe.

Ich finde die Lösung mit dem Tab eh nicht so richtig schön, würde das dann doch eher mit einem kleinem Vorschaubild darstellen. HIER

Du musst nur darauf achten das du den Galerien unterschiedliche IDs vergibst.
Beispiel 1. Galerie

Code

<div id="iga0" class="zpImageGallery" style="height:100px;
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0" 
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">




<a class="fancybox" href="https://lh6.googleusercontent.com/-chjmak0R3ns/UYVkhjnBTKI/AAAAAAAADwI/uUHmOEsM8_k/w1024-h768-no/P5021523.JPG" title="" rel="g0">
Mai 2013
<img src="https://lh3.googleusercontent.com/QIp4deYZtxfxgslmdyvX2ixpwV_5dkxnRtXiZmjCAm0=w270-h202-p-no" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-RL2KEGuBR2I/UYVkjKvmMQI/AAAAAAAADwM/wDgdiC1s-hk/w1024-h768-no/P5021525.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-_YyPOW-0n8k/UYVkk9n-0-I/AAAAAAAADzs/sf4meeSKn6g/w1024-h768-no/P5021529.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh4.googleusercontent.com/-ZEc2NIQlDx8/UYVknm5CQuI/AAAAAAAADzo/VvwH1PJiG2A/w1024-h768-no/P5031530.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-S8r9HzUz9u0/UYVkqHX7mrI/AAAAAAAADz4/q_HxiGR8wFc/w1024-h768-no/P5031531.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-CfQ_lMAh43I/UYVksqCI7rI/AAAAAAAAD0A/bu5e2AxpTXk/w1024-h768-no/P5031535.JPG" title="" rel="g0">
</a>
</div>

Alles anzeigen

Beispiel 2. Galerie

Code

<div id="iga01" class="zpImageGallery" style="height:100px;
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0" 
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">




<a class="fancybox" href="https://lh6.googleusercontent.com/-gbYSuQ_I4bs/UWEHZZMw8OI/AAAAAAAAC64/7sA0eUTQMqg/w800-h451-no/P3300326.JPG" title="" rel="g01">
April 2020
<img src="https://lh3.googleusercontent.com/oWpA5McFXCLksTThxJR1lFzqMza4ry0Jg3M8Q_75VKE=w338-h190-p-no" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-KuImbPSwM6U/UWJXD27rkoI/AAAAAAAAC68/HvRqrtXQ1V4/w800-h451-no/P4020534.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-yYIT_9hF0SE/UWJXCsC_tYI/AAAAAAAAC3Q/t4Jc0Lc_4Uk/w800-h451-no/P3300321.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-1aFW9vxx1HI/UWJXVmtNsEI/AAAAAAAAC7M/NIv_p_S-iPw/w800-h451-no/P4020652.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-W7cmgt_MzbQ/UWJXqYCujZI/AAAAAAAAC4Y/uCsTT5b3R5s/w800-h451-no/P4030729.JPG" title="" rel="g01">
</a>
<a class="fancybox" href="https://lh6.googleusercontent.com/-CQ6kIfX-goA/UWJX1PKlzYI/AAAAAAAAC7g/UhD_lQVg47o/w800-h451-no/P4030755.JPG" title="" rel="g01">
</a>
</div>

Alles anzeigen

Mario

Ja, hier geht es wohl um das Favicon.

Hallo Michael,
erstelle eine Grafik in der Größe von 32x32 oder 16×16 Pixeln und speichere diese als GIF oder PNG-Datei ab.

Anschließend kannst du dieses im Layout-Designer auswählen: Layout > Allgemein > Favicon

Mario

Ja, dazu lässt du die Bildervorschau einfach weg und fügst für das erste Bild einen Textlink ein.
Sollte dann so aussehen.

So sieht dann der Code aus:

HTML

<div id="iga0" class="zpImageGallery"
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0"
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">




<a class="fancybox" href="https://lh3.googleusercontent.com/-GVj4XdjMHXc/UVlF9Ed4tVI/AAAAAAAACmA/NiBRgulbbHM/s800/P3310427.JPG" title="">
MÄRZ 2020
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-pFxdHe11o1Y/UVlLV1B9fDI/AAAAAAAADI8/fZIoGDn3hUU/s800/P3310491.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-QnJsB-NY5dY/UVlCWcrjZpI/AAAAAAAACbI/fnax1IA0Vhg/s800/P3300331.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-Z4aU260dS-0/UVlBEmLmeYI/AAAAAAAACU4/q3VsBtG8GZE/s800/P3300280.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-6jKjxh3u9Jc/UVk-DYdKGNI/AAAAAAAACRw/pSOwBwWE1n0/s800/P3290252.JPG" title="" rel="g0">
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-qqm4FqSzxrk/UVk-EoUz8kI/AAAAAAAACR4/fUSiuFEY5sw/s800/P3290253.JPG" title="" rel="g0">
</a>
</div>

Alles anzeigen

Mario

Hallo Edip,
du schreibst das dir die Bildergalerie von Zeta gut gefällt und gern den Speicherplatz von Picasa nutzen möchtest.
Das lässt sich recht einfach realisieren, allerdings ist hierbei etwas Handarbeit gefragt.
Hier ganz unten auf der Seite.

Füge einen neuen Artikel > Quelltext ein, füge unten stehenden HTML-Code ein und kopiere die URL der Bilder bei Picasa in den Code.

HTML

<div id="iga0" class="zpImageGallery"
data-width="128"
data-height="72"
data-margin="10"
data-bordercolor="default"
data-borderwidth="0"
data-numbershow="0"
data-titleshow="0"
data-titleposition="off"
data-transition="elastic"
data-inner-transition="white"
data-slideshow="0"
data-slideshowinterval="0"
data-lang="de">
<a class="fancybox" href="https://lh3.googleusercontent.com/-GVj4XdjMHXc/UVlF9Ed4tVI/AAAAAAAACmA/NiBRgulbbHM/s800/P3310427.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-GVj4XdjMHXc/UVlF9Ed4tVI/AAAAAAAACmA/NiBRgulbbHM/s128/P3310427.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-pFxdHe11o1Y/UVlLV1B9fDI/AAAAAAAADI8/fZIoGDn3hUU/s800/P3310491.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-pFxdHe11o1Y/UVlLV1B9fDI/AAAAAAAADI8/fZIoGDn3hUU/s128/P3310491.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-QnJsB-NY5dY/UVlCWcrjZpI/AAAAAAAACbI/fnax1IA0Vhg/s800/P3300331.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-QnJsB-NY5dY/UVlCWcrjZpI/AAAAAAAACbI/fnax1IA0Vhg/s128/P3300331.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-Z4aU260dS-0/UVlBEmLmeYI/AAAAAAAACU4/q3VsBtG8GZE/s800/P3300280.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-Z4aU260dS-0/UVlBEmLmeYI/AAAAAAAACU4/q3VsBtG8GZE/s128/P3300280.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-6jKjxh3u9Jc/UVk-DYdKGNI/AAAAAAAACRw/pSOwBwWE1n0/s800/P3290252.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-6jKjxh3u9Jc/UVk-DYdKGNI/AAAAAAAACRw/pSOwBwWE1n0/s128/P3290252.JPG" width="128" title="" alt="" />
</a>
<a class="fancybox" href="https://lh3.googleusercontent.com/-qqm4FqSzxrk/UVk-EoUz8kI/AAAAAAAACR4/fUSiuFEY5sw/s800/P3290253.JPG" title="" rel="g0">
<img src="https://lh3.googleusercontent.com/-qqm4FqSzxrk/UVk-EoUz8kI/AAAAAAAACR4/fUSiuFEY5sw/s128/P3290253.JPG" width="128" title="" alt="" />
</a>
</div>

Alles anzeigen

Mario

Hallo Edip,
ich verstehe auch nicht warum Google hier das längst tot geschriebene Flash verwendet. Die Zeiten zu versuchen der Konkurrenz so eines auszuwischen sind längst vorbei.

Mario

Hallo Edip,
ich habe das HIER mal probiert, funktioniert soweit ganz gut.

Einstellungen > CSS

CSS

<style>
#hintergrund {
display:none;
z-index:8000;
position: fixed;
height:100%;
width:100%;
top:0px;
left:0px;
background:#000;
}




#popup {
display: none;
z-index: 8001;
position: fixed;
width:820px;
top: 20%;
left: 50%;
margin-left: -410px;
}




div.schliessen {
position: relative;
height: 30px;
width: 30px;
left: -7px;
bottom: -15px;
background: url("http://zella.de/bilder/close-black3.png") no-repeat scroll 0 0 transparent;
float: right;
cursor: pointer;




}




#popup_inhalt {
}




@media (max-width: 800px) {
div.schliessen {
left: -410px;
}}




</style>




<script type="text/javascript">




jQuery(function($) {




var popup_zustand = false;




$(".popup_oeffnen").click(function() {




if(popup_zustand == false) {




$("#popup").fadeIn("normal");




$("#hintergrund").css("opacity", "0.8");




$("#hintergrund").fadeIn("normal");




popup_zustand = true;




}




return false;




});




$(".schliessen").click(function() {




if(popup_zustand == true) {




$("#popup").fadeOut("normal");




$("#hintergrund").fadeOut("normal");




popup_zustand = false;




}




});




});




</script>

Alles anzeigen

Und im Inhaltsbereich Widget > Quelltext

HTML

<a href="#"><img class="popup_oeffnen image" border="0" src="http://zella.de/bilder/button_klick_hier.png"></a> <div id="popup"> <div class="schliessen"></div> <div id="popup_inhalt">
<embed type="application/x-shockwave-flash" src="https://photos.gstatic.com/media/slideshow.swf" width="800" height="533" flashvars="host=picasaweb.google.com&captions=1&hl=de&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F111376037177916050469%2Falbumid%2F5851859303784209009%3Falt%3Drss%26kind%3Dphoto%26hl%3Dde" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</div> </div> <div id="hintergrund"></div>

Aber!

Ist das Flash, du solltest auf Apple-Geräten prüfen ob da eine HTML5-Variante nachgeladen wird.
Ist das nicht Responsive, deshalb habe ich den Schließen-Button so eingefügt das er in der mobilen Ansicht Mittig rutscht, sonst kommt man da nicht mehr dran.

Mario

Hallo Jan-Frederik,
da hast du natürlich recht. So ganz optimal ist die Lösung nicht weil es bei einem langen Hauptmenü zu Überlappungen kommen kann. Das kann man ganz gut beobachten wenn man das Browserfenster verkleinert und dann in der Höhe verschiebt.
Natürlich habe ich zuerst versucht das ganze direkt unter dem Hauptmenü zu platzieren. Hierfür habe ich aber nicht die richtige CSS-Klasse heraus gefunden, sofern dies überhaupt möglich ist.
Hierzu wird sich sicher nochmal der Zeta-Support melden, auch wenn das nicht zu deren Aufgabenbereich gehört drücken die Jungs doch öfters mal ein Auge zu.

Ich habe HIER nochmal etwas anderes probiert. Das Prinziep ist das gleiche, aber durch den Hover-Effekt können wir Platz sparen. Und da das ganze auch am Touchscreen funktioniert und der kleine Butten nicht stört kaönnen wir dieses auch in der mobilen Ansicht so belassen.

Widget > Quelltext

HTML

<div align="center">
<div id="menu">
<!-- hier fügt ihr zB. ein Bild ein welches bereits vor dem Hover angezeigt werden soll -->
<img src="http://shop.antalis-verpackungen.de/files/live/sites/DE_Packaging/files/0_Home/Kontakt.png" alt="">
<!-- hier fügt ihr den Inhalt ein der während dem Hover angezeigt werden soll -->
<p>
<span style="color: #ffffff">Paul Muster<br>
<span style="color: #ffffff">Musterstraße 22<br>
<span style="color: #ffffff">99999 Mustershausen<br><hr>
<span style="color: #ffffff">Fon: 0000000000000</br>
</p>
</div>
</div>

Alles anzeigen

Einstellungen > CSS

CSS

<style>
#menu {
padding-top:5px;
left:0;
bottom:0;
position:fixed;
width:60px;
height:60px;
z-index:1;
transition: all 0.2s ease-in-out;
}
#menu:hover {
padding-top:15px;
height:200px;
width:200px;
background:rgba(38, 33, 89, 0.8);
}
</style>

Alles anzeigen

Auch hier gilt: Vor dem veröffentlichen ausgiebig testen!

Mario

Hallo Jan-Frederik,

HIER EIN BEISPIEL wie du das ohne Eingriff in das Layout realisieren könntest.

Im Inhaltsbereich fügst du einen neuen Artikel "Widget > Quelltext" mit unten stehendem Inhalt ein, welchen du natürlich noch an deine Bedürfnisse anpasst.
Im Widget unten Links auf die drei Pfeile klicken und den Hacken bei "Auf allen Seien anzeigen" setzen.
Nun werden deine Kontaktdaten immer unten Links auf der Seite angezeigt.

HTML

<div class="kontakt" style="position: fixed; bottom:40px; left:20px;">
<p>
<h2><span style="color: #ffffff">Kontakt</h2>
<hr>
<span style="color: #ffffff">Paul Muster<br>
<span style="color: #ffffff">Musterstraße 22<br>
<span style="color: #ffffff">99999 Mustershausen<br><hr>
<span style="color: #ffffff">Fon: 0000000000000</br>
<span style="color: #ffffff">Fax: 0000000000000</br>
<span style="color: #ffffff">Mail: <a href="mailto:muster@mail.de"><span style="color: #ffffff">muster@mail.de</a>
<hr>
</p>
</div>

Alles anzeigen

In der mobilen Ansicht würde das ganze aber stören. Hier blenden wir das ganze wieder aus.
Einstellungen > CSS

CSS

<style>
@media (max-width: 800px) {
.kontakt {
display: none;
}}
</style>

Vor dem veröffentlichen ausgiebig testen!

Mario

Hallo Edip,
schau mal HIER.
Aber normalerweise funktioniert das ZP-Widget prima.

Mario

Hallo Simon,
gehe auf Einstellungen > CSS und gib dort den unten aufgeführten Code ein. "#ffffff" gibt den Farbwert an, in diesem Beispiel Weiss.

CSS

<style>
#header {
border-bottom: 1px solid #ffffff;
}
</style>

Du kannst die Linie natürlich aus ausblenden:

CSS

<style>
#header {
border-bottom: none;
}
</style>

Mario

Hallo Erwin,
das Widget Bild lässt sich leider nicht zentrieren. Der Wunsch danach wurde hier schon oft geäußert, aber scheinbar ist das nicht so einfach Möglich oder nicht gewünscht.
Alternativ könntest du das Bild im Texteditor einfügen, hier ist die Ausrichtung kein Problem, nur lässt es sich dann nicht mehr vergrößern.
Schau dir mal das Widget Popup-Bild an, hier gibt es die Möglichkeit der Ausrichtung, sowie eine Vorschau-Größe anzugeben.

Einen Quelltext könntest du einfach in einen zentrierten DIV packen.

Code

<div style="text-align:center;">
dein Quellcode
</div>

Mario

Da solltest du dich wohl bei deinem Anbieter erkundigen.

Mario

Ich führe hier mal 2 Möglichkeiten auf.

Auf meiner Seite zella.de bin ich so vorgegangen.
Eine transparente Grafik mit dem Format 1x1 Pixel erstellt. Diese Grafik als Logo eingefügt und eine Höhe von 96 Pixel angegeben. Somit ist Platz für das neue Logo geschaffen.
Nun habe ich das Logo per Positon Absolue eingefügt (Widget Quelltext im Content-Bereich).

HTML

<div style="position: absolute; top:40px; margin-left: -183px; left:50%; width:366px; height: 60px; z-index:7000;" class="image1"
><a href="http://www.zella.de" target="_self"><img title="zur Startseite" alt="" border="0" src="http://zella.de/bilder/366x60-einfach.png"></a></div>

Auf dieser Testseite bin ich etwas anders vorgegangen.
Ist zwar ein anderes Layout, muss aber in Producer-Responsive genau so funktionieren.

Das Logo wurde abgeschaltet und im Banner-Bereich das Widget Quelltext eingefügt.

HTML

<div style="background-image: url('http://zella.de/bilder/hg-kopf.jpg');background-repeat: repeat; padding: 10px 10px 0 0px; position:absolute; color:#ffffff; top:0; left:0; width:100%; text-align: center; box-sizing: border-box;">
<p><img title="" class="logoo" border="0" alt="" src="http://zella.de/bilder/366x60-einfach.png"></p>
</div>
<div style="width: 1px; height:10px;"></div>

Der erste DIV fügt das Logo und den Hintergrund per Position Absolute ein. Der zweite schafft den Platz.

Weiterhin wurde per CSS eine Skallierung für die mobile Ansicht ab 620 Pixeln hinzu gefügt.
Einstellungen < CSS

CSS

@media (max-width: 620px) {
.logoo {
transform: translate(0, 16px) scale(0.8, 0.8);
}}

Mario

Hallo Andreas,

Konfiguration > Spalten > HTML-Attribute

CSS

style="height:100px"

Mario

Ja, habe ich, HIER zu sehen.

Muss aber jetzt los. Ich schreibe heute Abend wie ich vorgegangen bin.

Mario

Hallo Jenny,
falls du die Version 12.5 nutzt kannst du das ganze auch ganz einfach als Widget nutzen welches der Thomas entwickelt hat.

Auf dieser Seite die oberste ZIP_Datei (hover-zip) runter laden. In der Datei findest du eine Installationsanleitung.

Mario

Ok, könntest du mal hier posten?

Welche Codes nicht da sind oder was nicht funktioniert.
Funktioniert das schon auf meiner Seite nicht, oder erst nach dem einbinden auf deiner Seite?
Welchen Browser verwendest du?

Mario

Danke für den Hinweis, werde ich heute Abend ausbessern.

Mario

Hast du den Code unverändert eingefügt, oder schon Änderungen vorgenommen? Kann man das schon online sehen?

Mario

Hallo Ronny,
Ich hätte es so gemacht. LINK

Wenn dir das gefällt kann ich den Code hier posten.

Mario

Wie Herr Seiz schon schreibt wird im Widget Bild das Vorschaubild immer in der vollen verfügbaren Breite angezeigt.
Also bei einem Artikel 100%, bei 2 Artikeln 50%, bei 3 Artikeln 33% und bei 4 Artikeln 25% der Seitenbreite.

Du kannst aber auch das Widget Popup-Bild verwenden, hier hast du die Möglichkeit die Größe des Vorschaubildes zu bestimmen und auch die Ausrichtung (Links Zentriert Rechts).

Mario

Hallo Frank,
ich nutze für meine Panoramen das Panorama-Studio.

Mit der Software erstelle ich HTML-Seiten die ich dann extern auf den Server lade und per iFrame in Zeta einbinde.

Hier kannst du dich ein wenig umschauen. Teilweise sind die Panoramen schon ziemlich alt.
Die Panoramen in der Kategorie Ferienwohnungen und Camping sind etwas neuer und fast alle 360°Panoramen.

Mario

Hallo Werner,
hast du wie Steffen schrieb, folgendes probiert:

Erweitert > Erstellen > alle Seiten erstellen
Veröffentlichen > Komplette Website veröffentlichen

Mario

Ja das geht.
Einstellungen > CSS:

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>




<script>
$(function() {
$("#slideshow > div:gt(0)").hide();




setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>

Alles anzeigen

Und Widget > Quelltext:

HTML

<div id="slideshow">
<div>
Dies ist der erste Text.
</div>
<div>
Dann folge ich.
</div>
<div>
Ich bin auch noch da.
</div>
</div>

Alles anzeigen

Hier zu sehen.

Mario

Kannst du ein Beispiel aufzeigen wie das genau aussehen soll?

Mario

Schau mal HIER