Beiträge von Mario

Habe das gerade im Layout Campfire Responsive getestet. Ist dies das richtige?

Bei mir wird alles korrekt angezeigt.

Ab der Seitenbreite welche im Feld "Mobile Breakpoint" angegeben wird werden Bild und Text wie gewünscht untereinander angezeigt. Wenn im Feld "Mobile Bild Ausrichtung" "Zentriert" gewählt wird so wird dieses auch Zentriert dargestellt.

Eventuell mal die Einstellungen in der Gruppe "Mobile" kontrollieren, hier den Wert "Breakpoint" herabsetzen und "Bild Ausrichtung" auf Zentriert setzen.

Update ist raus. In Version 1.1 kann aus den Schriftarten monospace und Courier New gewählt werden.

Ja, ich könnte ein weiteres Feld zur Schriftart Auswahl hinzufügen.

Wäre das gleiche welches die ZP-Widgets nutzen.

Fortführung des Themas aus dem ZETA PRODUCER FORUM.

Das Widget Modal Onload ist jetzt verfügbar.

Das Widget CSS-Fenster bietet bereits die Option nach einer bestimmten Zeit einzublenden.

Ich bin gerade dabei dieses zu überarbeiten, das wird bald als Madal Onload mit weiteren Optionen erscheinen.

Zitat von Pete

Gibt es auch die Möglichkeit, die breadcrumbs zu fixieren, also dass diese beim Scrollen unter der Navi stehen bleiben?

Davon würde ich auf jeden Fall abstand nehmen.

1. Bleibt dann gerade am Smartphone nicht mehr viel vom Inhalt zu sehen.
2. Hat die breadcrumbs keine Hintergrundfarbe, das würde dann sehr bescheiden aussehen wenn der Inhalt darüber scrollt.

Zitat von Pete

Die Navi-Leiste wird jetzt korrekt angezeigt, leider verschwinden aber die "Breadcrumbs" unter der Navileiste.

Und wie verkleinere ich die Distanz zum ersten Text (zwischen Breadcrumbs und "Gestelle für jeden Zweck..."?

Sollte das noch aktuell sein kannst du das mit mit folgendem Code anpassen.

• Der erste Teil verschiebt die breadcrumbs um 30 Pixel nach unten.
• Der zweite Teil verringert den Abstand zum darunter liegenden Artikel um 30 Pixel.

#breadcrumb {
  margin-top:30px;
  margin-bottom:-30px;
}

Dazu müsste ich wissen mit welchem Code du das umgesetzt hast.

Mit dem obigen Code tritt das nicht auf.

Ah jetzt habe ich verstanden.

• Für den Fall würde ich das Bild als Hintergrundbild einbinden.
• Hierfür kann man einen Container mit einer festen Höhe einbinden in welchem dann das Hintergrundbild platziert wird.
• Was nicht in Container passt wird vom Bild abgeschnitten.
• Hierfür kann man dann auch dynamische Werte wie vw, vh, vmin oder vmax nutzen.

Das wird zB. in folgenden Widgets so genutzt:

• https://www.widget-zp.de/2022/header-animiert.html
• https://www.widget-zp.de/header-feuerwerk.html
• https://www.widget-zp.de/headerbild-parazoom.html
• https://www.widget-zp.de/container-blur.html
• https://www.widget-zp.de/fixed-background.html

Du kannst ja mal folgenden Code testen ob das ein besseres Ergebnis liefert.

CSS:

<style>
.wzp_test {
background-image:url("https://www.widget-zp.de/media/images/header-full.jpg");
position: relative;
width: 100%;
margin:auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height:480px;
}


@media (max-width: 620px) {
.wzp_test {
background-image:url("https://www.widget-zp.de/media/images/header-380px.jpg");
height:380px;
}}
</style>

Quelltext:

<div class="wzp_test"></div>

PS: Bevor die Frage später aufkommt. Für ein Hintergrundbild kann man keine Bild-Attribute wie "Alt" oder "Title" vergeben.

Im übrigen bin ich etwas verwirrt.

In ZP gibt es weder ein Layout Cumulative noch Shift oder Score.

Weiteres Update ist raus, V1.2 hat nun 6 Spalten.

Zitat von cuchi

Ist es evtl. möglich, noch eine 6 Spalte im Top-Bar einzubauen---würde gerne neben 2 Standorten, 2 Telefonnummern und 1 Mail noch eine Map-Verlinkung integrieren.

Platz hätte ich (Fiat-Responive -Basis)

Gruß

cuchi

Das ist nicht immer so wie es auf den ersten Blick aussieht.

Du hast da ja 2 Telefonnummern eingebunden. Diese sollten nach Möglichkeit am Tablet noch lesbar sein, denn die meisten Tablets habe keine Telefon-Funktion.

Weitere Funktionen werde ich hier nicht einbinden, diese würden das Widget mächtig aufblasen.

zu 1.

Das Alt- und Title-Attribut werden so übernommen wie es in der Bldverwaltung vergeben wurde. Das Title-Attribut nennt sich in ZP "Beschreibung".

zu 2.

Das Bild passt sich ja automatisch der Bildschirmbreite an, deshalb steht da auch im Quelltext style="width: 100%". Die Höhe passt sich automatisch dem Seitenverhältnis des Bildes an. Würde man dem Bild feste Werte zuweisen wäre das in keinster Weise mehr Responsive. Das ist somit der modernste Code den man da verwendet.

zu 3.

Deses Widget verwendet äußerst wenig Code. Ich kann mir nicht vorstellen das es hier zu Verzögerungen kommt. Außer die eingebunden Bilder wurden nicht ordentlich komprimiert.

Mit dem JS meine das welches vom Layout genutzt wird um die Navi anders abzubilden wenn diese nach oben gescrollt ist.

Da wird sich auch mit dem Widget nichts daran ändern.

Zitat von cuchi

Gibt es eigentlich so etwas wie eine allg. Übersicht, was jedes der Widgets kann

Auf der Seite WIDGETS gibt es eine Filterfunktion, mehr gibt es dazu nicht.

Zitat von cuchi

Wie und in welcher Form wird gewünscht, dass ich auf der Homepage den Einsatz Ihrer Tools nachweise oder darauf verweise?

Reicht etwas im Impressum in der Art wie: "für die Umsetzung des Layouts wurden Widgets der Seite https://www.widget-zp.de" oder so ähnlich?

Wie in den Lizenzbedingungen unter Namensnennung steht genügt ein Link zu https://www.widget-zp.de im Imressum.

Muss ich mal überlegen. Genau wegen Platzes hatte das auf 5 begrenzt.

Update ist raus, in "Top Bar V1.1" kann man unter dem Reiter "Spalten" die Schriftart einstellen.

Ist in diesem Layout gerade mit dieser Einstellung etwas tricky.

• Der erste Teil des untenstehenden Codes rutscht Logo und Navi 30px nach unten, brauchst du eventuell gar nicht..
• Der 2. Teil platziert die Navi 30px nach unten wenn nach oben gescrollt wurde. Allerdings erst wenn die Navi ganz nach oben gescrollt wurde. Das wird sicher mit JS angesprochen. Welches ich allerdings nicht gefunden habe.

<style>
#header #webdescription #logo img {
margin-top:30px !important;
}
#header #nav.fixed {
top:30px;
}
</style>

TOP BAR

HEADER ANIMIERT

Ich habe gerade 4 neue Widgets veröffntlicht, darunter auch das CARD CAROUSEL.