Beiträge von Mario

Probier mal folgendes:

<style>
#fancybox-title-over {
font-family: vivaldi;
}
</style>

Hallo Marcus.

du kannst die Bilder alle nebeneinander in einem Textartikel platzieren. Diese werden dann ohne Abstand nebeneinander angezeigt.

Um etwas Abstand zwischen den Bildern zu bekommen kannst du im Textwidget auf HTML-Ansicht umschalten und dem jeweiligen IMG-Tag ein style="padding-left:10px" hinzu fügen.

Das würde dann ungefähr so aussehen:

<a href="https://www.deinlink.de/"><img title="" class="singleImage" style="padding-left:10px" alt="" src="deinbild.png"></a>

Somit würde dem Bild "deinbild.png" links ein Abstand von 10 Pixeln hinzu gefügt.

Auch bedenken, bei Änderungen dauert es immer eine Weile bis Google deine Seite neu crowlt.

Bei meinem letzten Versuch dauerte es ca. 3 Wochen bis ein neues Wort in den Suchindex aufgenommen wurde.

Mit diesem Wort stehe ich jetzt nicht nur ganz oben sondern auch ganz alleine. Die Frage ist eben nur wer sucht nach Pumuckelpfurz.

Wie bereits vermutet fehlt in "http://sarto-akva.dk/test/" der CSS-Code.

Diesen fügst du unter Einstellungen > CSS ein.

<style>
#video_background {
position: fixed;
top: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
</style>

Oder die Datei dem Projekt hinzufügen und dann die Okjekt-ID verlinken. LINK

Wenn du ein neues Projekt erstellst und den Quellcode einfügst könnte es sein das du den dazugehörigen CSS-Code noch einfügen musst.

Gut möglich das es dieser hier ist. LINK

Hallo Thomas,

du hast die Trennlinie scheinbar in der gleichen Spalte wie der Artikel "casa-al-fango".

Die Trennlinie nochmal anpacken, über den Artikel "casa-al-fango" oder einen daneben führen und loslassen. Dann auf das untere Kästchen mit dem breiteren Strich klicken.

https://docs.zeta-producer.com/widgets-verschieben.html#a2269

Hallo Michael,

dieses war lediglich ein Beispiel für einen Verbesserungsvorschlag des Sliders, deshalb steht da auch kein Code dabei.

Einen Code hierfür wird es nicht geben weil der Zeta-Slider besser ist. Hierbei ging es nur um die Bildübergänge.

Hallo Michael,

du hattest geschrieben das du den Slider selbst ganz nach oben bekommst. Deshalb habe ich diesen Teil weg gelassen.

Füge dem Slider hierzu folgendes Inline-CSS hinzu und passe es an:

margin-top:-263px;

PS: das Video funktioniert nicht. Aber wenn alles passt brauchen wir das ja nicht.

Thomas,

der Michael hatte doch geschrieben der Slider soll nicht Seitenfüllend sein. Ich gehe davon aus das er das genau so haben will wie du schreibst. (Flach und Breit)

zu1. Gib dem Textartikel im Banner-Bereich mal folgendes Inline-CSS:

position:relative; z-index:100;

zu 2. Der Slider behält immer das Bildverhältnis bei. Am einfachsten wäre es also wenn du das Bild mit Hilfe eines Grafikprogrammes auf dein gewünschtes Format beschneidest.

Hier ein Beispiel.

Eine Alternative zu 2. wäre das du im Slider folgendes Inline-CSS eingibst:

height:80vh;

Das bewirkt dann das dein Bild immer so dargestellt wird das dein Bild 80% des Bildschirmes ausfüllt. BEISPIEL

Ich würde aber die erste Variante bevorzugen.

Audio-Player manuell einfügen und eine Breite zuweisen sollte funktionieren. LINK

Füge per Widget > Quelltext folgendes ein:

<audio controls style="width:100%">  <source src="DEINE OBJEKT-ID" type="audio/mpeg">  Your browser does not support the audio element.</audio>

Das Rot markierte tauschst du gegen die Objekt-ID deiner Audio-Datei aus.

Wie du diese kopieren kannst findest du HIER.

Ich habe mal grob nur die Responsiven Layouts der HOME-Version durchgeklickt.

In folgernden Layouts lässt sich die Seitenbreite einstellen:

• Clean Style Responsive
• Kommunal Responsive
• Square Responsive
• Swiss Responsive
• Technical Responsive
• Textile Responsive
• Tweet Responsive
• Album Responsive

Alternativ sollte unten stehender Code funktionieren. Die Werte musst du je nach Logo-Größe und Seitenbreite noch anpassen.

Gehe zu Einstellungen > CSS und gib dort folgendes ein:

<style>
#logo {
text-align:left;
left:50%;
margin-left:-600px;
top: 5em;
}
@media (max-width: 1270px) {
#logo {
left:25px;
margin-left:0;
}}
</style>

• Wenn du einen Slider einfügst werden die Bilder auf die vorgegebene Seitenbreite skaliert.
• Wenn du den Slider auf "Randlos" stellst werden die Bilder auf den Wert skaliert den du unter "Erweitert > Erweiterte Einstellungen > Bilder > Max Importbreite" angegeben hast.

Wenn dem nicht so ist bitte mal schreiben welches Layout du verwendest.

Supi.

Für eine zukünftige Version wäre ein Schalter zum ein/aus schalten sicher nicht verkehrt.

Was sofort ins Auge fällt, "Termine und Aktuelles" ist schlecht lesbar.

Gehe mal in dem Artikel und gib folgendes als Inline-CSS an:

border-radius:10px; padding:10px; background:rgba(0,0,0,.6);

Deine Überschriften haben eine Transparenz "rgba(253, 183, 33, 0.88)". Diese solltest du im Layoutdesigner auf 1 (ohne Transparenz) setzen.

• Erweitert > Erstellen > alle Seiten erstellen
• Veröffentlichen > komplette Website veröffentlichen

Hast du das gemacht?

Eventuell mal die Sonderzeichen aus den Dateinamen entfernen.

Fehlen die Bilder und Texteinträge nur online oder auch in Zeta-Producer?

Zitat von sseiz

Aber so sollte es ja schon mal wesentlich besser sein, als aktuell in ZP 13, oder?

Auf jeden Fall, wirkt viel harmonischer.

Zitat von Mario

• Wenn der Mauszeiger über dem Slider verweilt stoppt ja der Slider. Dieses sollte man abschalten können oder ganz entfernen.

Wird es dazu etwas geben?

• Diese Überlappung ist auch bei Android, sowie am Desktop (verkleinerte Ansicht) vorhanden.
• Den Übergang finde ich so schon deutlich besser. Ich würde diesen aber noch erweitern. Der Übergang sollte schon eingeleitet werden wenn das Bild noch zoomt So wirkt das ganze viel harmonischer.
• Wenn der Mauszeiger über dem Slider verweilt stoppt ja der Slider. Dieses sollte man abschalten können oder ganz entfernen.

Was noch gut wäre:

Wenn der Mauszeiger über dem Slider verweilt stoppt ja der Slider. Dieses sollte man abschalten können oder ganz entfernen.

Wenn du das "#text-align: left;" raus nimmst und und das "Center" klein schreibst sollte das passen.

<style>
.flex-caption {
    text-align: center;
}
</style>

Beides richtig.

Passt alles sehr gut, bis auf den Moment der Überblendung.

Ich finde die Bildüberblendungen im Slider (Ken Burns Effekt) zu schnell. Das passt nicht so recht zu diesem Effekt. Erst das sanfte einzoomen und dann die schnelle Bildüberblendung.

Zum besseren Verständnis habe ich den Slider mal unter ein Fremd-Script gepackt. LINK

Eventuell kann man ja da noch etwas verfeinern.

Wenn du mal verrätst welches Layout mit welcher Breite du verwendest. Und welche ZP-Version. Dann könnte man mal schauen was man da machen könnte.

Das Zoomen ist der Übergangseffekt im Wigdet Slider. Wenn du im Widget unten auf das "Mischpult" klickst kannst du den "Ken-Burns-Effekt" auswählen. Dieser zoomt die Bilder beim Übergang zum nächsten Bild. Das funktioniert natürlich nur mit mehreren Bildern.

Ich habe ein Beispiel hochgeladen wie das realisieren könntest. LINK

Die Werte im Code musst du sicher noch an deine Page anpassen.

Zitat von fotora

Und beim header hab ich auch gesehen...das man das bild ranzoomen kann...ich finds nicht mehr auf Deiner Seite.

Diesen Teil habe ich nicht verstanden.

Ich kann nachher mal schauen.

Welche Breite hast du dem Layout gegeben?

Ja das ist richtig. Zeta benennt die Seiten nur um um wenn etwas doppelt vor kommt.

Aber du kannst da einfach Abhilfe schaffen.

Doppelklick auf die entsprechende Seite, hier wird der Name der Seite angezeigt. Gehe in diesem Fenster auf "Google", hier kannst du unter "Dateiname" den gewünschten Dateinamen angeben.

Es ist vielleicht etwas etwas verwirrend das man diese Option unter "Google" findet. Aber natürlich ist der "Dateiname" für Google durchaus relevant.

Super, so passt das

Was ich noch etwas suboptimal finde ist die Darstellung für mobile Geräte.

• Das Pagepeel solltest du hier abschalten. Du könntest ja dafür einen Butten einblenden lassen sobald das Pagepeel ausgeblendet wird.
• Die Container mit dem Hintergrundbild und 9x Umbruch sehen am Desktop gut aus. Am Smartphone werden diese allerdings viel zu hoch.

Ich habe mal etwas zusammen gefasst wie ich das umsetzten würde. LINK

• Sobald das Pagepeel ausgeblendet wird blenden wir am Ende der Seite einen Button ein.
• Die Container mit dem Hintergrundbild erhalten einen leeren DIV dessen Höhe du im CSS für die mobilen Bildschirmbreiten anpassen kannst.

Das kommt von der Animation des Containers "Restaurant". Hier einfach mal einen anderen Effekt wählen. Zoom in oder von oben, von unten einfaden sollte passen. Von der Seite einfliegen bekommt den selben Effekt.

Das kann man am Desktop ganz gut testen indem man beim nach unten scrollen auf die seitliche Scrolleiste achtet.

Gehe mal zu Einstellungen > CSS und gib dort folgendes ein:

<style>
.navbar {
   border-bottom: 1px solid #01509d;
}
</style>

Du könntest auch den Slider als Header missbrauchen.

Ich habe mal ein Beispiel hochgeladen. LINK

• Die Bilder haben eine breite von 1200 Pixeln.
• Gehe im Widget auf das Mischpult dann auf mehr und trage unter Inline-CSS unten stehenden Code ein.
• "max-width: 1200px" gibt die maximale Darstellungs-Breite der Bilder an.
• "margin: 0 auto" zentriert die Bilder falls du sie kleiner als die Seitenbreite einbinden willst.
• "margin-top: -60px" rutscht den Slider etwas nach oben, somit wird er dort platziert wo der Header sitzen würde.

max-width: 1200px; margin: 0 auto; margin-top: -60px;

Laut Quellcode geht der Artikel im Grid-System bis Spalte 8. Volle Breite wäre Spalte 12.

Am besten nochmal überprüfen.

Youtube finde ich nicht so gut als Header. Da weiß man nie was da so alles passiert und Werbung wird auch eingeblendet.

Ich würde das dann eher so machen LINK.

Funktioniert natürlich auch mit Youtube. Hier ein BEISPIEL.

Ja das geht schon. Aber davon würde ich abraten,

• Die Ladezeit verdoppelt sich weil ja 2 Bilder geladen werden.
• Dein 2.Bild das angezeigt werden soll läd erst beim überfahren mit der Maus, so lange wartet dann keiner.
• Also muss man die Bilder vorladen, so kommt dann eines zum anderen.

Hier mal ein Beispiel wie es gehen könnte. LINK

Hallo,

unter "Erweitert > Erweiterte Einstellungen > Bilder" kannst du eine Größe angeben. In diese Größe werden deine Bilder dann von Zeta skaliert.

Ich habe zuerst das Bild entsprechend verkleinert.

Da der Code hier im neuen Forum noch nicht optimal dargestellt wird habe ich diesen auch dort hochgeladen.

Das Bild und den CSS-Code findest du HIER.

• Den CSS-Code trägst du unter Einstellungen > CSS ein.
• Anschließend kannst du einfach das Bild per Widget-Bild einfügen.
• Im Widget unten links auf das Mischpult und anschließend auf MEHR.
• Hier trägst du unter CSS-Klasse folgendes ohne die Gänsefüßchen ein: "cocker"

Den Wert top:990px; musst du noch an deine Seite anpassen. Die Breite sollte so passen.

Der Abschnitt media (max-width: 1732px) blendet den Cocker aus sobald der Bildschirm so klein ist das das Auge nicht mehr zu sehen ist.

Hier die BEISPIELSEITE