Beiträge von Mario

    Ist das eigentlich so wichtig die CSS auszulagern ? Ich habe 850 Zeilen CSS nicht ausgelagert. Was würde es für ein Unterschied machen ?

    Gruß Markus

    Die Frage ist hier ob die 850 Zeilen nur auf einer Seite stehen oder auf allen deinen Seiten das gleiche CSS. Das würde Bedeuten das der Browser wie auch Google auf jeder Seite erst mal alles durchrattern muss bevor der eigentliche Inhalt gelesen werden kann. Dadurch wird Traffic erhöht und die Seitenladenzeiten verlängert.

    Ich würde aber auch wenn die 850 Zeilen nur auf einer Seite stehen dieses auslagern.

    Mixed Content.

    Nutze anstatt:

    CSS
    .inhalt {
    background:url(http://www.test.design-of-carthy.de/img/hg-grau-frau.png) no-repeat right top
    }

    dieses:

    CSS
    .inhalt {
    background:url(https://test.design-of-carthy.de/img/hg-grau-frau.png) no-repeat right top
    }


    Ich würde aber eher den einfacheren Weg über die Bildverwaltung gehen und die "Objekt-ID" nutzen.

    PS: Steffen T. war schneller. :)

    Ich habe das gerade mal getestet, sobald man ein style="" oder class="" nutzt tritt das auf obwohl der Code richtig im Quelltext ausgegeben wird.

    Als Fehler kann man das aber sicher nicht sehen da dieses ja eigentlich nicht so angedacht ist.

    Da Zeta Producer aber nur die Überschriften H1 bis H4 nutzt kannst du auch die H5 missbrauchen.

    Einstellungen > CSS:

    CSS
    <style>
    h5 {
      color:red;
      font-weight:bold;
    }
    </style>

    Und als Seitenname dann: <h5>Aktuell</h5>

    Kurze Info dazu.

    Grundsätzlich braucht man eine Seite nicht in der "Search Console" anmelden damit diese indexiert wird. Google durchforstet ja das ganze Netz und findet auch irgendwann deine Seite.

    Mit der Anmeldung deiner Seite in der "Search Console" gibst du Google den Auftrag deine Seite Zeitnah zu indexieren. Das geschieht nach meiner Erfahrung in einer Zeitspanne von 3 bis 8 Tagen. Bei meinem letzten Test vor ein paar Wochen hatte es 4 oder 5 Tage gedauert bist mein (Test-Suchbegriff) gefunden wurde LINK.

    Da du ja nur ein Bild und keinen weiteren Text nutzt würde ich nur ein Bild mit dem gewünschten Link per HTML einbinden. BEISPIEL

    • Kopiere untenstehenden Code und füge diesen temporär im Windows-Text-Editor ein.
    • Erweitert > Bilder > Rechtsklick auf dein Bild > Mehr > Objekt-Id kopieren.
    • Tausche im Quelltext das oid://image/123 mit dem Inhalt der Zwischenablage.
    • Passe Link und Linktext unter href="https://www.widget-zp.de/">Link Copyright an.
    • Erstelle als ersten Artikel der Seite das Widget "Quelltext" und füge hier den Code aus dem Windows-Text-Editor ein.
    • Gehe im Widget "Quelltext" unten auf das Mischpult, und dann auf Mehr. Trage unter CSS-Klasse: zpBreakout und unter Inline-CSS: margin-top:-30px; ein.
    • Lösche den Header.
    • Anschließend kannst du im Widget-Quelltext weiter Anpassungen vornehmen.
    • Nun kannst du den Header auf die anderen Seiten kopieren und brauchst nur noch die ID-Adresse für das Bild austauschen.
    HTML
    <div style="margin-bottom:30px; position:relative;">
    <img style="width:100%; display:block; border:0; box-shadow:none;" src="oid://image/123" alt="Boote" title="Boote">
    <a style="position:absolute; right:16px; bottom:8px; font-size:0.8em; color:#FFFFFF;" href="https://www.widget-zp.de/">Link Copyright</a>
    </div>

    Dann kaufe ich jetzt also ein Offline CMS mit einem größeren Umfang für 49,00 Euro (einmalig) damit ich Wasserzeichen machen kann und füge die Bilder wieder in Zeta ein....mhhh... okay.

    Wenn du eine Website mit Bildern erstellst benötigst du sowieso ein gutes Grafikprogramm um diese zuzuschneiden, optisch zu verbessern, zu formatieren und vor allem gut zu komprimieren.

    .. in einzelnen Elementen ...

    Dazu müsste man wissen welche Elemente genau das sind und welches Widget hierzu genutzt wurde. Am besten wie schon von Steffen T. geschrieben mit Link.


    Hallo Sunny,

    vielen lieben Dank für deine schnelle Hilfe!

    Leider hat es mit dem Code-Schnipsel noch nicht so geklappt; der Tipp mit dem eigenen CSS war aber zielführend -> border-bottom:none!important hat es dann gerichtet :thumbup:

    Viele Grüße

    Lisa

    Das ist richtig, "Flat Responsive" nutzt zur Link-Unterstreichung nicht text-decoration sondern border-bottom.

    Die Frage ist aber eigentlich eine andere: Warum wird in der Vorschau von ZP die Tablet-Darstellung zweispaltig angezeigt (was eigentlich richtig und von der Lesbarkeit sinnvoll ist), aber dann in der Realität vierspaltig umgesetzt bzw. belassen...

    Vermutlich weil der Bildschirm (bzw. die Bildschirmauflösung) deines Tablets sehr viel größer ist als die Tablet-Vorschau von ZP.

    Kurz zur Verständigung.

    • "Responsive Layout" bedeutet ja nicht das erkannt wird ob es sich um ein Tablet, Smartphone handelt und schaltet dann um. Würde ja bei der Vielfalt der Bildschirmgrößen (bzw. Auflösungen der Bildschirme) keinen Sinn machen.
    • "Responsive Layout" passt sich dynamisch der Bildschirmgröße an. Das kannst du ganz einfach beobachten indem du die Seite am Desktop öffnest (oder die Browservorschau) und dann Das Browserfenster in der Größe veränderst. Nichts anderes macht ZP in der "Smartphone- Tablet-Vorschau" hier werden halt die gängigsten Bildschirmauflösungen verwendet.

    Das liegt am Grid-System welches ZP verwendet. Die einzelnen Artikel werden hier "seitlich zusammengeschoben" bis bestimmte Breakpoints erreicht werden und dann erst umgebrochen. Das ist in der Regel auch gut so aber bei manchen Widgets etwas unvorteilhaft.

    Schau dir mal die "Link Cards" auf Widget ZP an. Denen vergibst du eine feste Breite, wenn die Bldschirmbreite nicht mehr ausreicht um alle nebeneinander darzustellen wird umgebrochen. Erst wenn diese auf kleinen Bildschirmen einspaltig dargestellt werden und der Platz nicht ausreicht werden diese schmaler dargestellt.

    Code
    h4 {
    font-size: 1.25rem;
    color: #D9452B;
    font-weight: normal
    }

    Schriftgröße, Schriftfarbe und Schriftgewicht für alle H4-Überschriften, außer diese sind extra definiert.


    Code
    #headerslider{
    z-index: 1;
    }

    z-index für den Header. Wenn du nicht weist was das bedeutet am besten mal googeln.


    Code
    .flex-caption h2{
    line-height: 1.1;
    }

    Zeilenhöhe für H2 Überschriften im Header.


    Ich weiß im Moment auch nicht, ob es "serienmäßig" dabei war.

    Das glaube ich nicht.

    Hallo Wolfgang,

    das geht leider nicht. Zeta Producer ist ein Offline CMS, alle Änderungen können nur über die Prorgammoberfläche von Zeta Producer durchgeführt werden.

    Wenn die IT-Firma Änderungen auf dem Server durchführen würde und du anschließend weitere Änderungen aus Zeta Producer hochlädst werden alle Änderungen der IT-Firma wieder mit der alten Variante überschrieben.

    Hallo Mirco,

    um da helfen zu können fehlen ein paar Infos und wenn möglich ein Link zur Seite.

    Ich habe das jetzt versucht raus zu finden.

    Top Responsive, und der Text "aus Düsseldorf, ..." wurde über den "Bannerbereich" eingefügt?

    Ich habe das mit diesen Einstellungen getestet und im "Bannerbereich" einen Text-Artikel eingefügt. Da erhalte ich keine Linie. Wie wurde denn der der Text "aus Düsseldorf, ..." eingbunden?

    Wenn es nur um ein Bild geht kannst du das Widget dazu nutzen.

    • Wenn es auf der ganzen Seitenbreite angezeigt werden soll einfach den entsprechenden Hacken setzten.
    • Um es ganz oben anzuzeigen als erstes Widget auf der Seite einfügen und unter Inline-CSS margin-top:-35px eintragen (-35px ist Layoutabhängig).
    • Über Automatisierte Verknüfungen kannst du das Widget einfach und schnell auf allen Seiten einbinden.
    • Im Texteditor auf "Quelltext-Ansicht" umschalten.
    • Folgenden Code einfügen: <p><a class="button" href=""><span>Button</span></a></p>
    • Zurück zur Normal-Ansicht, Den Text "Button" markieren, und deine Formatierung auf zentriert stellen sowie deinen Link vergeben.

    Sollte in der Linkbox ebenso funktionieren.

    So lange sich Google und Apple nicht auf einen breiten Browser-Support einigen können gestaltet sich das schwierig.

    Zufälligerweise habe ich gerade ein Widget veröffentlicht in welchem das WebP-Format für ein einfaches Bild verwendet werden kann. Zusätzlich muss hier eine JPEG-Datei als Fallback eingebunden werden.

    Jetzt weiß ich auch warum mich dass so beschäftigt hat. In in der interen Zeta Vorschau im Browser .. wenn man da auf Smartphone klickt, dann funktiniret der Hoover Effekt!

    Evtl. doch ne Chance :)

    Klar du sitzt ja auch vor einem Dekstop der "MouseOver" unterstützt. An einem Touchgerät kann das nicht funktionieren.

    Also keine Chance, und wenn man das so bauen würde das der Button ausfährt (was durchaus möglich wäre) müsste man ja extra noch einen Link im Button unterbringen. Dazu ist hier zu wenig Platz, außerdem müsste der Nutzer dann 2x klicken.

    So wie jetzt ist es sicher die beste Lösung.

    Schau dir mal das Widget Headerbild an.

    Hier kannst du für Desktop und Mobile 2 verschiedene Bilder mit unterschiedlichem Seitenverhältnis und Auflösungen einbinden.

    Somit fällt auch das automatische seitliche abschneiden weg und kannst selbst bestimmen was du vom Bild abschneidest.

    • Erweitert > Bilder das gewünste Bild importieren.
    • Führe den Mauszeiger über das Bild > oben rechts auf das Zahnrad > mehr > Objekt-ID kopieren.
    • Füge den Inhalt der Zwischenablage in deinen Quelltext als URL des Bildes ein.

    Hallo Ela,

    1. Werden Fremdwidgets im Projekt verwendet, zB.: von mir? Diese temporär deaktivieren. (mit "F8" in den Spaltenmodus > Widget markieren > Rechtsklick > Ein-/Ausblenden. Wenn das hilft liegt der Fehler bei mir. Dann bitte im entsprechenden Forum melden.
    2. Hilft das nicht könntest du das Projekt temporär in einen Unterordner auf den Server laden, dann kann man schon etwas mehr sehen.
    3. Siehe Beitrag 5

    Danke für eure Infos.

    Hanabi: Der Ordner und die Datei existieren genauso auf der Festplatte, wie auch auf dem Server.

    Ja aber sicher nicht an der Stelle wo ZP sie nach dem Pfad sucht, das wäre C:\Users\User\Documents\Zeta Producer xx\Projects\deinProjekt\output\dat.

    Die Datei dorthin zu kopieren würde aber keinen Sinn machen weil diese nach jedem Erstellen wieder gelöscht würde.

    Es gäbe noch die Möglichkeit den Ordner dat in den Ordner assets zu packen und den Pfad entsprechend anzupassen. Dann käme in ZP keine Fehlermeldung und das Hochladen würde auch ZP erledigen.

    Ich weiss allerdings nicht ob zu deinem Vohaben noch weitere Dateien benötigt werden. Das könnte dann zu neuen Problemen führen. Wenn es online so passt würde ich es wohl eher so lassen.

    Was das Update betrifft, Zeta Producer 16 wird parallel zu "Zeta Producer 14" installiert. Anschließend kannst du deine Projekte von ZP14 in ZP16 konvertieren.

    Nun kannst du das Ergebnis betrachten indem du die Datei C:\Users\DeinWindowsBenutzername\Documents\Zeta Producer 16\Projects\DeinPrjektname\output\index.html öffnest.

    Eine Lizenz benötigst du erst wenn du die Seite veröffentlichen möchtest.