Zitat von Jasmin

Hallo.

Danke. Welches Layout bietet das an?

Bzw. woher weiß ich das vorher? Dachte Responsive Layout bedeutet, dass es die unterschiedlichen Anforderungen der Endgeräte berücksichtit?

Hallo Jasmin,

das verwendete Layout ist schon ein sehr modernes. Das in der mobilen Ansicht das Bild zugeschnitten wird bietet den Vorteil das mehr vom Bild wahrgenommen werden kann (nicht so klein skaliert wird) und mehr, bzw. besser lesbarer Text angezeigt werden kann. Allerdings sollte dann der Fokus in der Mitte des Bildes liegen.

Eine Übersicht der Layouts findest du HIER. Einfach das Browserfenster in der Breite verkleinern und beobachten was im Header passiert.

Ich würde an deiner Stelle das Widget "Slider" als Header benutzen. Ein paar weitere Infos dazu findest du HIER.

Projektüberwachung deaktivieren

Hallo Walter,

ja in „Flat Responsive" ist der Inhaltsbereich "zpBreakout", also die komplette Breite. Auch die Container sind hier immer "zpBreakout". In den anderen Layouts kann man ja wählen. Deshalb sicher auch der Name "Flat".

Du könntest in diesem Fall also lediglich den einzelnen Artikeln einen Hintergrund geben.

Schön wenn das so passt.

Damit der Inhaltsbereich am Smartphone nicht zu schmal wird am besten noch folgendes dem CSS hinzufügen.

@media (max-width: 920px) {
#content {
  padding: 0 15px;
}}

Das sieht sicher besser aus wenn du dem gesamten Inhaltsbereich und Footer eine Hintergrundfarbe gibst. BEISPIEL

Einstellungen > CSS

<style>
#content { 
  background: rgba(255,255,255,0.8);
  padding: 0 50px;
  border-radius: 10px
}
#footer { 
  background: rgba(255,255,255,0.8);
  margin-top: 50px;
  border-radius: 10px
}
</style>

Oder einfach dem Container eine Hintergrundfarbe zuweisen.

Ich würde hierfür das Widget 'Tabellarische Daten' nutzen. Kann man sehr viel übersichtlicher gestalten und ist Responsive.

Hier ein Beispiel. Ist zwar nicht so ausführlich wie bei dir, kann man aber natürlich erweitern.

Ich habe das mal getestet. Bei mir wird ein Button angezeigt. LINK

Eventuell mal "Erweitert > Erstellen > alle Seiten Erstellen" und dann nochmal komplette Seite veröffentlichen.

Die EN-Seite ist ja da LINK. Nur die Verweise sind alle auf die DE-Seite verlinkt.

Auch hier mal testen "Erweitert > Erstellen > alle Seiten Erstellen" und dann nochmal komplette Seite veröffentlichen.

Erweitert > Erweiterte Einstellungen > Kodierung

Ähnliches Habe ich auf dieser Seite gemacht. LINK

Als Header der Desktop-Seite verwende ich einen Container mit Hintergrundbild. Da dieser am Smartphone nicht sonderlich gut wirkt und ich den mobilen Nutzern auch nicht diese große Grafik "Ladezeit / Pagespeed" zumuten möchte wird dieser ab 699px ausgeblendet. Statt dessen wird ein deutlich kleineres Bild und der Text darunter eingeblendet.

Folgendes CSS blendet meinen Container aus;

     @media (max-width: 698px) {
.cont100 {
         display: none;
}}

Und dieses CSS das kleine Bild mit dem Text ein:

     @media (min-width: 699px) {
   .bild-start-mobile-artikel  {display:none;}
   .text-head-mobile  {display:none;}
}

Ähnlich mit den Kontaktdaten oben Links.

• Am Desktop zum abtippen oder kopieren.
• Am Smartphone klickbare Button

Und zusätzlich noch im Projektordner die neue Startseite als "Wurzelseite" anlegen.

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

<style>
ul.mainmenu li a {
font-weight: bold;
}
</style>

Update-Preis für ZP14 kannst du HIER prüfen

Da sich ZP15 bereits in der Beta-Phase befindet würde ich an deiner Stelle eine e-Mail an support[ät]zeta-producer schreiben und nach deinem Updatepreis für ZP15 fragen wenn du jetzt ZP14 kaufst. Die kommen dir da sicher entgegen.

Gehe mal im geöffneten Widget Carousel unten links auf das Mischpult und dann auf mehr.

Hier trägst du unter CSS-Klasse folgendes ein: zpBreakout

Zitat von Hanabi

Da Du Widgets angepasst hast, stelle sicher, dass diese sich im Projektordner befinden. Nur dann können diese beim Konvertieren in die 14 übernommen werden.

Dies gilt wenn du die Widgets im "Web-Projekt" abgelegt hast.

Solltest du die Widgets für "Benutzer" angelegt haben kopiere den Kompletten Ordner "widgets" aus "C:\Users\Benutzer\Documents\Zeta Producer 13" in "C:\Users\Benutzer\Documents\Zeta Producer 14". Das ganze natürlich vor dem konvertieren.

Zitat von Hanabi

F8 Spaltenmodus

Zitat von Zetahufi

Hatte ich schon probiert, aber ich kriege den Bug nicht raus.

Soll heißen der Artikel lässt sich im Spaltenmodus nicht öffnen?

Das kann ich nicht so recht glauben. Was passiert denn wenn du den Artikel im Spaltenmodus öffnen willst?

Ich wöllte mich der Sache gerade annehmen. Allerdings konnte ich im Layout "Swiss Responsive" einen solchen Abstand nicht feststellen.

https://hosting.zeta-producer.com/6165844738/index.html

Translate Flag / Translate Select

Flat schaltet das Mobile Menü erst zu wenn der Platz nicht mehr aisreicht und nicht ab einer bestimmten Breite wie bei älteren Layouts.

Ich habe in einer Seite das so gelöst das die Abstände verringert werden wenn der Platz eng wird damit das Mobile Menü so spät wie möglich eingeblendet wird.

https://www.zella.de/v18-2/

Das entsprechende CSS kann ich wenn gewünscht Anfang nächtser Woche Preis geben da ich unterwegs bin.

Einstellungen > CSS

<style>
p, h1, h2, h3{
text-align: left;
}
@media (max-width: 600px) {
p, h1, h2, h3{
text-align: center;
}}
</style>

Somit sollten ab einer Bildschirmbreite von 600px alle Überschriften und Text zentriert dargestellt werden.

Nun musst du noch schauen ob sich dies auch auf andere Sachen wie zB. Logo Navigation usw. auswirkt die eigentlich nicht zentriert werden sollen.

Sollte das der Fall sein musst du so vorgehen.

Einstellungen > CSS

<style>
.meintext {
text-align: left;
}
@media (max-width: 600px) {
.meintext {
text-align: center;
}}
</style>

Nun gibst du allen Artikeln die zentriert werden sollen die CSS-Klasse meintext.

Im Layout Top-Responsive musst du der Klasse .flucht noch ein z-index: 5025; hinzu fügen sonst wird der Button von der "Topline" und dem "Header" verdeckt.

Mit den Werten einfach etwas rum spielen. Dann siehst du schon was passiert.

Wenn du margin-right: -690px; etwas erhöhst rutscht der Butten in der Desktopansicht etwas mehr nach rechts. Entsprechend musst du media (max-width: 1400px) auch etwas erhöhen weil der Button sonst aus dem Sichtfeld rutscht. usw.

Zitat von bits

Wäre es möglich, dass der Button nicht oben aus dem Fenster raus scrollt, sondern immer sichtbar bleibt? Nur nicht im Menu.

Hier ein Beispiel wie man das machen kann. LINK

Einstellungen > CSS:

<style>
.flucht {
position: fixed;
top:150px;
margin-right: -690px;
right: 50%;
}

@media (max-width: 1400px) {
.flucht {
width:100px;
top: 70px;
margin-right: 0;
right: 20px;
}}

@media (max-width: 550px) {
.flucht {
width: 80px;
}}
</style>

Widget > Quelltext auf der Wurzelseite und vererben:

<div class="flucht">
<a href="https://www.google.de/" target="_self"><img title="flucht" alt="" src="oid://image/flucht"></a></div>

Das Bild fügst du in der Bildverwaltung hinzu und fügst es in den Quellcode ein wie HIER beschrieben.

Das Bild würde ich in der Bildverwaltung noch schützen: Bildverwaltung > Eigenschaften > Weiteres

Grün wird es erst ab ca. 50 Zeichen, eine gute Beschreibung der Seite auch im Dateinamen. Aber 50 Zeichen finde ich auch ganz schön heftig. Lieber kurz und dafür eindeutig.

loire-02 heißt die Seite wahrscheinlich weil du die Seite schon mal kopiert hast und das schon 2x. Wenn du diese beiden Seiten gelöscht hast und es somit keine weitere Seite gibt die loire heißt kannst du das -02 löschen. Bist du dir nicht sicher am besten vorher alle Seiten mal durch schauen.

Was genau soll denn dann mit dem Text passieren wenn der Platz im Bild nicht mehr ausreicht?

• Der Header beschneidet das Bild so damit der Text noch komplett angezeigt werden kann. Hierbei sollte der Focus des Bildes im Zentrum liegen. Beispiel
• Der Slider blendet den Text unterhalb ein sobald der Platz nicht mehr ausreicht. Man kann den Slider mit folgendem Inline-CSS nach oben an die Navi rutschen-: margin-top:-50px. Beispiel
• Wenn man dies nicht tut und der Platz nicht ausreicht passiert DAS.
• Nun könnte man den Text am Smartphone kleider darstellen. Das kann dann aber keiner lesen und Google wird das auch nicht gefallen. Beispiel

Zitat von Janni

Zunächst einmal vielen Dank für Eure Antworten.

"Localhost befindet sich nicht in der Liste der unterstützten Domains für diesen Websiteschlüssel"

Dieses Bild: https://www.gebr-loeliger.ch/media/images/c…ock_fs27_02.jpg

Welches auf diesen Artikel verlinkt ist: https://www.gebr-loeliger.ch/canyon-mountai…ge-id=520#a2529

Also: Canyon Rock FS27

Grundsätzlich wäre ein solches Widget für die meisten Nutzer wahrscheinlich nicht zufriedenstellend. Weil eben ZP bei einer freien Positionierung nicht weiß wo der Platz vorhanden ist, wie groß ist das Logo wie lang das Hauptmenü ...

Deshalb habe ich eine CSS-Lösung erstellt. Allerdings sollte man die Muse haben sich ein wenig mit CSS und HTML auseinander zu setzen. LINK

Ja das funktioniert mit der Artikel-ID.

• Öffne deinen Text-Artikel.
• Gehe hier unten links auf das Mischpult > dann auf "Mehr" > dann auf das + neben "Inline-CSS" > dann auf + neben "Sichtbar bis".
• Langer Weg, aber hier findest du die Artikel-Id.
• Nehmen wir mal an diese lautet "0815"

Ersetze diesen HTML-Code:

<em>Menschen</em>
<span>770</span>

Mit diesem wenn sich der Text-Artikel auf der gleichen Seite befindet wie das Diagramm:

<a href="#a0815"><em>Menschen</em></a>
<a href="#a0815"><span>770</span></a>

Befindet sich der Artikel auf einer anderen Seite, hier zB. auf der Seite "kontakt.html" sieht der HTML-Code so aus:

<a href="kontakt.html#a0815"><em>Menschen</em></a>
<a href="kontakt.html#a0815"><span>770</span></a>

Zitat von axelwestdoerp

Wann kommt eigentlich das AKKORDION, was man unter "Zeta Codeschnipsel" findet, offiziell

in ZETA ? https://www.zella.de/code/accordion.html ! Ich finde das echt klasse und noch besser als

das TAB-Widget.

Bitte die Codeschnipsel nicht falsch verstehen. Diese sollen keinesfalls als Vorlage für ZP Entwickler dienen, sondern lediglich als Alternative für denjenigen dienen der eben etwas sucht was mit den ZP-Widgets schwer umsetzbar ist. Widgets erstelle ich aus diesen Schnipseln nicht weil man hier immer fest an die Vorgaben des Widgets gebunden ist. Somit ist der Nutzer viel flexibler, auch wenn man sich eventuell erst mal in die Materie einarbeiten muss.

Zitat von jjonline

Könnte ich mir im Vergleich zum TAB-Widget nützlich vorstellen bezgl. der Darstellung auf mobilen Endgeräten, wenn Inhalte umfangreicher sind, da hier ggf. weniger Probleme bei der Breite entstehen.

Das ist Quatsch. Das Widget "TAB" schaltet ja in der mobilen Ansicht auf "Akkordion" um. Somit ist der Platz der gleiche. Der Platz im Inhaltsbereich ja sowieso. Und Tabellen sind hier eh Tabu.

Zitat von MAX1

Ps.: Eigentlich sollte das Ganze so aussehen (siehe Bild)

Versuch es mal hiermit. LINK

Hallo Jörg,

als Bug würde ich das nicht bezeichnen und mit dem Grid-System hat das sicher nichts zu tun.

Der Container und die darin befindlichen Widgets haben alle ihre vorgegebenen Padding- und Margin-Werte.

Ich habe das gerade mal getestet und bei meinem Test war es genau umgekehrt. Hier war unten mehr Raum als oben.

Du kannst das aber recht einfach anpassen in dem du dem Container ein margin-bottom: 60px oder dem darin befindlichen Text-Widget ein padding-bottom: 60px als Inline-CSS vergibst LINK. Den Wert 60px musst du entsprechend anpassen.

Die Button in eine Spalte verschieben wie HIER beschrieben, dann sollte das passen.

Sollte das nicht ausreichen kann man sicher mit etwas CSS nachhelfen.

Hallo Stefan S ,

ich habe das mit Bella Resp. getestet. Schaut bei mir auch so aus wie bei kfz-sv-team

Hallo kfz-sv-team ,

wenn du etwas Zeit für Einarbeitung in CSS und HTML hast würde ich das einbinden per Position Absolute empfehlen. LINK

Das ließe sich sehr gut mit dem Google-Formular umsetzen.

Allerdings muss der Nutzer ein Googlekonto besitzen.

Beispiel

Zitat von eimer

Wo kann ich diese Icons (z.B. das Download Icon) downloaden?

Auf dieser Seite das gewünschte Icon markieren. Anschließend findest du unten Links einen Download-Button für eine SVG sowie eine Button "selected Icon" hier kannst du noch Einstellungen vornehmen und den Icon anschließend als SVG oder PNG downloaden.

Viele frei verfügbare Vector Icons findest du auch HIER.

Stefan S ,

Super Anleitung, ich habe dazu noch Fragen, Anregungen...

• Der Link öffnet die Online-Hilfe unter den Reitern "Tipps > Datenschutz" wenn ich aber die Seite https://docs.zeta-producer.com/datenschutz.html aufrufe finde ich keinen Link zu der Anleitung. Ist aber auch gut möglich das ich mal wieder Blind bin.
• Das CSS wird ja so direkt in den HEAD der HTML-Datei geschrieben. Solcher Code würde sich sicher besser in der "blundle.css" machen. Ich hatte ja schon vor einiger Zeit den Wunsch geäußert den ZP-Nutzern die Möglichkeit zu geben längeren CSS-Code direkt in die "blundle.css" schreiben zu können ohne dazu ein Layout kopieren zu müssen. Eventuell nochmal darüber nachdenken.

Zitat von mayer

Die sicherste und beste Möglichkeit ist, einfach den Code umschreiben und eigene Grafiken oder Bilder auf dem Server ablegen und einbinden. Dann ist alles nur im Project .html, .css, grafik.

So ist es. Auf der verlinkten Seite kann man ja auch alle Icons als SVG oder PNG downloaden.

Hallo mayer,

das zusätzliche Untermenü (mini-menu) welches du für die Mobile Ansicht einblendest ist an meinem Android-Phone (Galaxy S8) nicht lesbar. Weil die Schrift sehr klein ist und zusätzlich oben abgeschnitten ist. Um an alle Menüpunkte zu gelangen muss man dann auch mächtig viel seitlich scrollen.. Das ist dann nicht wirklich Responsive und auch nicht Nutzerfreundlich.

Hier ein Screenshot der verkleinerten Ansicht am Desktop-PC.

Uh wie ich diese Online-Kataloge hasse.

Ich bin ja ein Animations-Fan, und diese Blätter-Animationen gefallen mir eigentlich richtig gut.

Aber diese Kataloge sind alle einfach absolut Nutzer-Unfreundlich und umständlich zu bedienen.

Nach dem Laden der Seite ist erst mal zoomen angesagt da man sonst nichts lesen kann. Das gilt für für Desktop genau so wie für Smartphone. Anschließend ist man nur am hin und her scrollen um den Inhalt irgendwie einzufangen. Weiterblättern und das ganze von vorn, das kann echt nerven.

Dann doch lieber den Inhalt in eine responsive HTML-Seite kopieren. Das ist ja gerade mit ZETA sehr schnell umgesetzt.

Probiere mal, Einstellungen > CSS

<style>
   .shariff li .fab, 
   .shariff li .far, 
   .shariff li .fas, 
   .shariff .orientation-horizontal li .share_text {
      color: #fff;
   }
</style>

Zitat von andima

Hallo Stephan!

Auf den Seiten von http://www.skiclub-koengen.de sind in der letzten Zeile die Links nicht immer Richtig.

Startseite Kontakt Änderungsantrag AGB Impressum Datenschutzerklärung

Das ist mir auch schon bei einer Zeta Seite von mir auch aufgefallen, das diese Links nicht immer passen.

Dann wurden sie vermutlich vom Nutzer nicht richtig gesetzt.

Einstellungen > Links