Beiträge von Mario

Es gab mal eine Script mit dem dies umsetzbar war, leider funktioniert dies nicht mehr. Wenn ich richtig informiert bin erlaubt es Instagram nur Entwicklern einen Feed in die Website zu integrieren. Du musst dich also bei Instagram als Entwickler anmelden um dieses zu realisieren.

• Dieses Layout verwendet Grafiken für die Trennlinien. Diese kannst du unter Layout > Allgemein > Trennlinien austauschen.
• Für einzelne Container und Reihen kannst du im Darstellungsmodus die Abstände anpassen.

Um die Überschriften H1 bis H4 sowie den Text des gesamten Projektes anzusprechen sollte folgender Code passen. Die Werte musst du natürlich noch anpassen und das ganze dann anschließend mit den verschiedenen Viewports überprüfen.

<style>
h1 {
  font-size: 2.2em;
  font-size: clamp(2.2em, 5.5vw, 5em);
}
h2 {
  font-size: 2.0em;
  font-size: clamp(2.0em, 4.8vw, 4.4em);
}
h3 {
  font-size: 1.6em;
  font-size: clamp(1.6em, 4.4vw, 4em);
}
h4 {
  font-size: 1.4em;
  font-size: clamp(1.4em, 4vw, 3.4em);
}
p {
  font-size: 1em;
  font-size: clamp(1em, 3vw, 2.8em);
}
</style>

Ob das aber in allen Widgets so gut passt bezweifele ich. Deshalb würde ich das so machen.

<style>
.txtclamp h1 {
  font-size: 2.2em;
  font-size: clamp(2.2em, 5.5vw, 5em);
}
.txtclamp h2 {
  font-size: 2.0em;
  font-size: clamp(2.0em, 4.8vw, 4.4em);
}
.txtclamp h3 {
  font-size: 1.6em;
  font-size: clamp(1.6em, 4.4vw, 4em);
}
.txtclamp h4 {
  font-size: 1.4em;
  font-size: clamp(1.4em, 4vw, 3.4em);
}
.txtclamp p {
  font-size: 1em;
  font-size: clamp(1em, 3vw, 2.8em);
}
</style>

Alle Widgets in welchen diese Schriftgrößen übernommen werden sollen erhalten dann die CSS-Klasse: txtclamp

Zitat von Website-Laie

ja, die Tabellen werden oft aktualisiert (es kann sein, manchmal 2x in der Woche und manchmal auch 3 Wochen garnicht). Ja, es ist immer diesselbe Tabelle ...

Dann würde ich das Thema ganz anders angehen.

• Lade dir ein FTP-Programm wie "FileZilla" herunter.
• Logge dich damit auf deinem Server ein und lege einen zusätzlichen Ordner an.
• Lade die HTM-Datei (ich würde diese in HTML umbenennen) mit dem FTP-Programm in diesen Ordner.
• Lege in Zeta Producer das Widget "iFrame" an. Und binde damit die hochgeladene Datei ein.

Wenn du später die Tabelle aktualisieren möchtest brauchst du lediglich die neue HTM-Datei (mit gleichem Namen) in den Ordner laden (die alte damit überschreiben). Das geht ruck zuck. Ein weiterer Vorteil ist das diese Aktualisierung jeder vornehmen kann, auch ohne ZP-Lizenz.

Das betrifft nicht nur den Shop sondern scheinbar das Rechtklick-Menü aller Widgets außer dem Text-Editor.

Ich persönlich kann aber diese Wörter noch übersetzen.

Kannst die HTM-Datei gerne anhängen.

Noch eine Verständnisfrage. Die Tabelle wird dann oft aktualisiert oder eine zusätzliche eingefügt? Bei ersterem gäbe es eventuell einen einfacheren Weg.

Folgender Code sollte da funktionieren:

<script>
if($(window).width() < 767)
{
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>=50){
jQuery('#logo img').attr('style','transform:scale(1);');
}
})
})
} else {
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>=50){
jQuery('#logo img').attr('style','transform:scale(.6) translateY(-10px); transition:transform 300ms;');
}
else if (jQuery(this).scrollTop()<50) {
jQuery('#logo img').attr('style','transform:scale(1) translateY(0); transition:transform 300ms;');
}
})
})
}
</script>

• Der Wert translateY(-10px); verschiebt das Logo in diesem Fall um 10px nach oben. Diesen musst du je nach Logo-Größe und Zoomfaktor anpassen.
• Das Script liest die Seitenbreite beim laden der Seite aus. Deshalb wird in der Browser-Vorschau die (Ansicht Smartphone) den Code nicht abbilden.
• Zum Testen in der Browservorschau bitte das Browserfenster entsprechend verkleinern und anschließend die Seite aktualisieren.

Ganz ohne JS wird das nicht gehen.

Folgendermaßen kannst du das für "Top Responsive" umsetzen.

• Gehe zu Erweitert > Attribute und öffne das Attribut footer_script.
• Hier fügst du untenstehenden Code ein und bestätigst mit OK.
• Sicherheitshalber würde ich anschließend noch Erweitert > Erstellen > Alle Seiten erstellen durchführen.

<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>=50){
jQuery('#logo img').attr('style','transform:scale(.6); transition:transform 300ms;');
}
else if (jQuery(this).scrollTop()<50) {
jQuery('#logo img').attr('style','transform:scale(1); transition:transform 300ms;');
}
})
})
</script>

Was macht das Script:

• Wird die Seite mehr als 50 Pixel nach unten gescrollt wird das Logo auf 60% Größe skalliert. Die Animationszeit beträgt dabei 300 Milliskunden.
• Wird die Seite wieder nach oben gescrollt (50px vom oberen Rand) wird das Logo wieder auf 100% Größe skalliert. Die Animationszeit beträgt dabei 300 Milliskunden.

Spontan fallen mir da 2 Möglichkeiten ein.

Möglichkeit 1: per iFrame einbinden

• Importiere die HTML-Datei mit der Tabelle. Erweitert > Dateien > Importieren > ...
• Füge das Widget "iFame" ein und binde diese Datei ein. Link > Datei > Datei auswählen > ...

Möglichkeit 2: HTML-Quelltext einfügen

• Öffne die HTML-Datei mit der Tabelle mit einem Text-Editor. Kopiere den HTML-Code für die Tabelle "Nur den für die Tabelle".
• Füge das Widget "Quelltext" ein. und füge hier den kopierten HTML-Code für die Tabelle ein.

Die Schriftgröße "vw" alleine zu nutzen ist schwierig weil die Schrift dann auf kleinen Bildschirmen nicht mehr lesbar oder auf großen Bildschirmen zu groß dargestellt wird.

• Ich nutze in meinen Widgets oftmals die Schriftgröße clamp().
• zum Beispiel: font-size: clamp(1em, 10vw, 5em);
• Bedeutet: Die Schriftgröße ist 10vw, diese wird nicht kleiner dargestellt als 1em und nicht größer als 5em.

Über 90% der Browser können das lesen für die restlichen sollte noch eine normale Schriftgröße hinzugefügt werden.

Also zum Beispiel:

font-size: 1.1em;
font-size: clamp(1em, 10vw, 5em);

Ja, das ist möglich. Allerdings meckert Google wenn mehrere Dateien durchsucht werden müssen.

Hier würde ich in jedem betroffenen Projekt das Widget CSS_Global einsetzen. Dieses fügt das CSS einer Datei der blunde.css deines Projektes hinzu.

Steffen T. Da stelle ich mal eine Nachfrage. Sollte man die Altlasten nicht auch löschen?

1. In der Dateiverwaltung den zuvor angelegten Ordner "webfonts".
2. Unter "Website > Einstellungen > CSS" das zuvor hinzugefügte CSS für die Webfonts.

Zitat von Stefan S

Hallo,

das geht einfacher. Spalte auf gewünschte Breite ziehen und dann per Horizontaler Spalten-Ausrichtung zentrieren.

Siehe https://docs.zeta-producer.com/reihen-bearbeiten.html#a5579

Stimmt diese Funktion habe immer nicht auf dem Schirm.

• Ziehe das Textfeld wieder auf die gesamte Breite.
• Gehe im Text-Widget unten links auf das "Mischpult" anschließend auf "Mehr".
• Gebe unter "Inline CSS" folgendes ein: max-width:400px; margin:0 auto;

Das Ergebnis wird in der Live-Vorschau vermutlich nicht zu sehen sein. Wechsle hierzu zur Browservorschau.

Schau mal was passiert wenn du alle Bilder Quadratisch einbindest.

Also anstatt so oder so.

Eben so:

Wenn die Abstände ansonsten grundsätzlich passen würde ich das folgendermaßen umsetzten.

• Öffne das Bild-Widget.
• Klicke unten links auf das "Mischpult" anschließend auf "Mehr".
• Trage unter Inline-CSS folgendes ein: margin-top:-40px;

Den Wert 40px musst du noch anpassen. Das sollte so in allen Layouts funktionieren.

Zitat von Cello Jung

Danke -war ich jetzt gerade drin, aber finde keine Funktion dort. Suche ich am falschen Ort oder nach was muss ich genau suchen?

Hier mal durchlesen. Die Option "Reihe verbergen ab (und kleiner)" ist im Handbuch noch nicht aufgeführt. Du wirst sie aber in den Eigenschaften finden.

Zitat von Cello Jung

Wie gesagt, ich möchte es nur für die mobile Ansicht ausblenden

Das ist bei beiden Optionen Beitrag #4 und Beitrag #6 der Fall.

Wenn dich an CSS ran traust kannst du den Header folgendermaßen für Mobile ausblenden.

Einstellungen > CSS:

<style>
@media (max-width: 780px) {
.cello-header-ausblenden {
display:none;
}}
</style>

Anschließend öffnest du den gewünschten Header, gehst unten auf das Mischpult dann auf Mehr. Hier trägst du unter CSS-Klasse folgendes ein: cello-header-ausblenden.

Jetzt sollte auf Mobilen Geräten mit einer kleineren Bildschirmreite als 780px der Header ausgeblendet werden.

Ja, das habe ich vorhin auch recherchiert und daraufhin gleich mal ein kleines Widget gebastelt.

• Gibt dem Browser die Anweisung die Datei als Download zur Verfügung zu stellen anstatt sie anzuzeigen.
• Dabei gibt es keine Einschränkungen für den Dateityp (.img, .pdf, .txt, .html .mp4 usw.).
• Der Download kann dabei per Button oder Textlink aufgerufen werden wobei jeweils ein Download-Icon hinzugefügt wird.

wzp-datei-download.zip

Es gibt da eine Anweisung, ich bin mir aber nicht sicher ob das alle Browser so umsetzten.

• Importiere deine PDF in die Dateiverwaltung. Erweitert > Dateien > Importieren
• Kopiere die Objekt-ID dieser PDF-Datei. Handbuch

Für einen Textlink mit deinen Einstellungen aus dem Layout-Editor fügst du per Widget Quelltext folgendes ein:<a href="oid://file/deine_pdf" download="PDF-Name">PDF dowloaden</a>. Nun ersetzt du oid://file/deine_pdf mit der kopierten Objkt-ID.

Für einen Button mit deinen Einstellungen aus dem Layout-Editor fügst du per Widget Quelltext folgendes ein:<p><a href="oid://file/deine_pdf" download="PDF-Name" class="button"><span>BUTTON</span></a></p></a>. Nun ersetzt du oid://file/deine_pdf mit der kopierten Objkt-ID.

Wie mit Downloads umgegangen wird liegt in der Hand der Browser. Du könntest die PDF zippen "Rechtsklick > Senden an > Zip-komprimierter Ordner". Dann wird gedownloadet. Muss dann halt wieder entpackt werden, ist aber nur ein Doppelklick.

Ich denke du meinst so etwas. LINK

Bei weiteren Fragen zu den externen Widgets im entsprechenden Forum.

Zitat von Cello Jung

Habe das versucht, Pfad angelegt, nach langem probieren als nicht Crack im programmieren, wird das Video nun angezeigt, aber startet nicht von selbst (Firefox/Chrome).

<video controls height="360" width="640">

<source src="https://www............mp4" type="video/mp4" >

<source src="https://www.............webm" type="video/webm;codecs="vp8, vorbis" >

<source src="https://www.............ogg" type="video/ogg" >

<p>Dieser Browser unterstützt das HTML-Video-Element nicht</p>

<video autoplay>

<video loop>

Alles anzeigen

Probiere es mal so:

<video controls autoplay="autoplay" muted="muted" playsinline="playsinline" poster="deinbild.jpg" loop="loop" >
<source src="deinvideo.mp4" type="video/mp4">
<source src="deinvideo.webm" type="video/webm">
<div class="zpwarning">
<p lang="de">Ihr Browser kann die angegebene Filmdatei leider nicht abspielen, da er das Video-Element nicht unterstützt.</p>
<p lang="en">Your browser can't play the requested video file. The browser doesn't support the video element.</p>
<p class="zpfallbackdownloads">
<a style="margin-right: 10px;" href="deinvideo.mp4">blondi2.mp4</a>
<a style="margin-right: 10px;" href="deinvideo.webm">blondi2.webm</a>
</p>
</div>
</video>

controls / zeigt die Kontrollelemente an

autoplay="autoplay" / Video startet automatisch

muted="muted" / Video startet stumm (Beachte den Hinweis von Stefan in Beitrag #4)

playsinline="playsinline" / für IOS

poster="deinbild.jpg" / wird angezeigt wenn das Video nicht abgespielt werden kann

loop="loop" / automatische Wiederholung

Um die Videos und das Posterbild einzubinden musst du nicht über den Umweg gehen diese Extern einzubinden.

Diese kannst du in die Datei- bzw. Bild-Verwaltung importieren und dann die OID-Adresse verlinken. Handbuch

Es wird demnächst 3 neue Widgets zum Videoplayer geben.

Alle 3 Widgets starten die Wiedergabe sobald das Video in den Sichtbereich gescrollt wird und Pausieren wenn aus dem Sichtbereich heraus gescrollt wurde.

• Scroll Video
• Scroll Video Hide
• Scroll Video BG

Verstehe ich leider nicht. Die Hintergrundfarbe (bei dir Grün) kann man natürlich ändern. Die Farbe deines Logos kannst du nur mit einem Grafikprogramm ändern.

In meinen Augen hast du 2 Möglichkeiten um das Logo besser Sichtbar zu machen.

• Füge deinem Logo eine Hintergrundfarbe hinzu, sieht bei deinem Hintergrundbild sicher nicht so gut aus.
• Hauptmenü Schriftfarbe Grün und den Hintergrund Transparent.

Zusätzlich würde ich das "Logo in der Menüleiste" etwas größer darstellen.

Hallo Holger,

Das Logo welches beim scrollen in der Navigationszeile platziert wird ist das gleiche wie es zuvor eingeblendet wird, dieses wird nur nach deinen Vorgaben im Layout-Designer skaliert. Also lautet die Antwort, Nein.

Ich würde auch dringend davon abraten, ein Logo sollte man nie ändern weil dies der Wiederkennungswert für eine Firma ist.

Ja, war nur kurzzeitig. Kam sicher ein Update.

Ups, Link vergessen.

Fragen zu den externen Widgets bitte im entsprechenden Forum.

Dein Link geht nicht.

Eventuell das Widget Audioplayer Mini.

Oder auch das Widget Audioplayer.

So wie es oben steht. Website > Einstellungen > CSS

Die Frage ist wie das dann aussieht. Teste mal folgendes CSS, sollte in beiden Layouts greifen.

Einstellungen > CSS

<style>
#footer #xmenu a {
  line-height: 48px;
}
</style>

Eventuell, das: Seitentyp Leer

• Es wird hier aber nur der "Standardbereich: Hauptbereich für Ihre Inhalte" eingeblendet, der Rest wird komplett ausgeblendet.
• Einfach mal probieren, sind ja nur ein paar Klicks und du kannst jederzeit zurück.

Das geht damit leider nicht. Auch schwierig für die Mobile Ansicht.

Zu weiteren Fragen bitte im entsprechenden Forum.

Schau mal HIER.

• Gehe zu den Seiteneigenschaften deiner Startseite.
• Die Startseite ist diese welche angezeigt werden soll wenn deine Domain aufgerufen wird.
• Einfach im Seitenbaum auf der linken Seite Doppelclick darauf. Oder: "Zahnrad > Eigenschaften".
• Wähle hier den Reiter "Google", wähle im Feld "Dateiname" den Namen "index" aus und bestätige mit "OK".
• Anschließend musst du die Seite natürlich veröffentlichen.

Die Startseite muss immer "index" heißen.

Zitat von Fellnase

ich habe kein Backup der Webseite die mit Zeta erstellt wurde, allerdings habe in der Acronis Cloud ein Back up vom PC .

Auf deinem PC befindet sich nach der Installation der Ordner C: \ Users \ Benutzername \ Documents \ Zeta Producer 15, der gleiche Ordner sollte sich auch im Acronis Backup deines Vorgängers befinden.

Wenn du den Inhalts des Ordners Zeta Producer 15 von deinem Vorgänger auf deinem überschreibst hast du alle Projekte inkl. Bilder usw. vom Vorgänger auf deinem PC.

Hallo Marina,

Goneo unterstützt nur noch verschlüsselte Übertragung. LINK

So sehen die Einstellungen für die funktionierende Übertragung bei mir aus. Allerdings ZP16.

• Protokoll: SFTP (SSH File Transfer)
• SFTP, erweitert: Anschluss:2222 / Bevorzugter Algorithmus: Automatisch

Das aufgezeigte CSS muss natürlich wie von elch beschrieben einer CSS-Klasse zugewiesen werden. Je nach dem wo man die Umrandung benötigt.

Hallo Tim,

dieses Widget arbeitet unabhängig vom ZP-Grid-System mit einer anderen Logik.

In ZP werden die Artikel skaliert bevor bei einer vorgegebenen Bildschirmbreite der Umbruch statt findet. In dem Widget wird umgebrochen sobald nicht mehr alle Artikel in voller Breite auf die Seitenbreite passen. Erst bei Einspaltig werden die Artikel skaliert. Daher die Verschiebungen.

Eröffne bitte ein Thema dazu im entsprechenden Forum, dann kann ich dir sicher etwas basteln.