Kurz zur Info. Ich hatte damals einige Widgets die FA verwenden mit der Version 5.x laufen. Die FA5-Datei wurde damals mit dem Widget implantiert.
Nach der Einführung von FA4 in ZP bin ich dann zurück zu FA4 weil die FA4-Icons ja somit sowieso schon in ZP implantiert waren.
Einfach mal hiermit testen.
Gehe zu "Einstellungen > CSS" und füge dort folgendes CSS ein:
<style>
.mein_artikelabstand {
margin-top: 20px;
margin-bottom: 20px;
}
@media (max-width: 920px) {
.mein_artikelabstand {
margin-top: 5px;
margin-bottom: 5px;
}}
</style>Nun gehst du zu einem Artikel wo diese Abstände gelten sollen und klickst und auf das Mischpult > Mehr und trägst unter CSS-Klasse mein_artikelabstand ein. Nun sollten am Desktop oben und unten 20 Pixel Abstand hinzu gefügt worden sein. Auf Bildschirmen die schmaler als 920 Pixel sind verringert sich der zusätzliche Abstand auf 5 Pixel. Generell kann man hier auch mit Minuswerten arbeiten um die Abstände zu verringern. Zum Beispiel margin-top: 5px;.
... Du gehst in die Bearbeitungsansicht des Buttons, klickst links unten auf das Reglersymbol, dann auf „Mehr“ und gibst schließlich unter „Inline-CSS“ „margin-top: -5px“ ein. ..
Genau so löse ich das immer mit den Abständen. Wenn du die gleichen Abstände öfter brauchst oder/und für die Mobile Ansicht andere Abstände benötigst kannst du das auch mit einer CSS-Klasse lösen.
Vielleicht lasse ich das auch sein und nutze Linkboxen dafür.
Wenn du auf die Linie verzichten kannst würde ich hierfür das Widget Ani Card empfehlen.
es soll also kein Zeilenumbruch stattfinden
Wie soll das denn funktionieren? 3 Textblöcke nebeneinander am Smartphone hochkant müsste man so klein darstellen das es niemand lesen kann.
Wenn ich etwas optimal für Desktop und Mobile darstellen möchte lege ich 2 oder auch 3 verschiedene Widgets an die für die jeweilige Darstellung optimiert sind und je nach Seitenbreite blende ich das entsprechende Widget ein.
Ich habe das CSS nicht getestet weil ich deine Voraussetzungen nicht kenne.
Vielen Dank !!
Überlagert das CSS jetzt auch die Einstellungen, die ich in "Darstellung-Einstellungen" bereits (notdürftig) vorgenommen habe?
Was du mit überlagert meinst weiß ich nicht. Aber genau da sollst du ja das CSS einfügen. Wenn du eine CSS-Klasse nutzt die sonst nicht vorkommt hat das keine Auswirkungen auf den Rest der Seite.
Ich kann nämlich noch keinen großen Unterschied feststellen. Oder muss "importent" in die CSS rein?
Zum testen am besten erst mal größere Abstände nutzen. Ob "important" nötig ist hängt immer vom Layout und dem genutzten Widget ab.
Wenn du mir Layout und das verwendete Widget nennst kann ich das heute Abend testen.
Die Frage war nicht so eindeutig um sie deutlich zu beantworten.
zu1.
Bei der Erstellung musst du natürlich immer die Mobile Ansicht im Hinterkopf haben. Dese kannst du ja in ZP immer in der Browservorschau testen.
zu2.
Das kannst du mit etwas CSS an deine Bedürfnisse anpassen. Indem du dem gewünschten Widget zB. die CSS-Klasse: meinabstand hinzu fügst. Und der Seite folgendes CSS hinzufügst;
<style>
.meinabstand {
margin-top: 30px;
margin-bottom: 30px;
}
@media (max-width: 990px) {
.meinabstand {
margin-top: -20px;
margin-bottom: -20px;
}}
</style>Das Layout "Poster-Responsive" ist in der Darstellung "Absolute/Fixed" sehr speziell.
Probiere mal das Widget im "Header-Bereich" zu platzieren (Wireframe > Headerbereich).
Nein gab es nicht. Eventuell kann phil-web im Zuge der Updates ein weiteres Feld Button hinzufügen. Kann dann halt ne Weile dauern.
"Info Koordinaten": Ich meine nicht einen i-Kreis, sondern das Feld unter "Karte": da steht nur ein Teil eines HTML-Codes drin.
Genau das meinte ich auch.
Copy and Paste: Natürlich weiß ich das, es geht aber nicht.
Bei mir geht das.
Hallo,
wenn du auf die Beispiele auf der Widgetseite verlinken würdest. Man könnte erkennen, wie der Kartentyp aussieht, statt alle Möglichkeiten durchzugehen und jeweils erst nach der Fertigstellung zu sehen, was man da eigentlich gewählt hat
An dieser Stelle kann man leider keinen Link setzen. Eventuell könnte man ganz unten im Fenster einen Link dazu setzen.
Außerdem interessiert mich, was das Feld "Info Koordinaten" zu bedeuten hat: Ich sehe keinen Sinn darin, zumal ich auch nichts ändern kann.
Da steht eigentlich drin wie du die Koordinaten einfügst, in einem Info-Feld kann man natürlich nichts ändern. Mit V16 hat sich da vermutlich etwas geändert das der Text nicht mehr korrekt dargestellt wird. Aber das ist eh doppelt gemoppelt weil die Hinweise auf der Karte (Koordinaten finden) auch zu finden sind.
Beim Feld der Pins, in dem man den Text für ein Popup eintragen kann, verlinkst du auf die Optionen. Leider ist es nicht möglich, diese Formatierungen per Copy und Paste in die Zeile einzufügen, so dass ich nur den Text ändern müsste. Das wäre sehr hilfreich!
Tastenkombination "Strg + V"
Warum bindest du auch Google Maps ein, wenn das Widget doch OpenStreetMap heißt?
Das Widget basiert auf LEAFLET. Alle hier Möglichen Optionen der Kartendarstellung habe ich ausgenutzt.
Eventuell kann phil-web bei einem zukünftigen Update hier ein paar Anpassungen vornehmen.
Hallo Alter Kerl ,
ich hatte dir in einem älteren Beitrag schon einmal aufgezeigt wie du den Hinweis entfernen kannst. Damals schon mit Bauchschmerzen weil ich weiß das du schon öfter nach irgendwelchen Codes gesucht hast die du eingefügt hast und nicht wieder findest. Damit das Widget eindeutig sofort erkennbar ist wird der Hinweis auch so dominant dargestellt.
Die Arbeit an der Seite wird dadurch keineswegs beeinträchtigt. Um zu sehen wie die Seite abgebildet wird solltest du grundsätzlich die Browservorschau nutzen denn die Live-Vorschau ist hier oftmals nicht korrekt.
Die "GOOGLE-Rezensionen-Laufleiste" wurde hier mit dem Widget Scroller umgesetzt. Die einzelnen Rezessionen als Screenshot eingefügt und mit der Google-Seite verlinkt.
Die Pfeile werden erst eingeblendet wenn sie nötig sind. Du hast 4 Cards eingebunden, in der Desktop-Ansicht werden auch 4 Cards angezeigt, deshalb werden da die Pfeile nicht angezeigt. Wird der Bildschirm kleiner und kann nicht alle 4Cards anzeigen werden auch die Pfeile angezeigt.
Ich habe das für dein Layout etwas angepasst. BEISPIEL
Das CSS austauschen und den Abstand nach oben margin-top sowie die Farben wie gewünscht anpassen.
Website > Einstellungen > CSS:
<style>
.slider100 {
height:100vh;
margin-top:-180px;
}
@media (max-width: 1330px) {
.slider100 {
height: auto;
margin-top: -100px;
}
.zp13slider-caption a {
display:none !important;
}
}
.zp13slider-caption a {
border-radius: 10px;
display: inline-block;
color: rgba(255,255,255,0.7) !important;
text-shadow:
0 4px 4px rgba(0,0,0,0.6),
0 15px 6px rgba(255,255,255,0.7);
font-size: 42px;
transform: scaleX(3.5);
text-decoration: none;
transition: all 0.3s ease-in-out;
text-decoration: none !important;
}
.zp13slider-caption a:hover {
color: rgba(0,0,0,0.7);
text-shadow:
0 4px 4px rgba(0,0,0,0.6),
0 24px 4px rgba(255,255,255,0.7);
}
</style>Scheinbar greift in diesem Layout das Scrollscript nicht für die internen Links. Das kannst du aber nachreichen.
Website > Erweitert > Attribute > footer_script:
<script>
// Smooth Scroll
$(document).ready(function() {
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 550);
return false;
}
}
});
});
</script>Das CSS !important von @V I V I D sollte eigentlich greifen. Gehe mal in das Widget und öffne die Datei mit Button.html mit einem Texteditor. In Zeile 41 ändere das headstyle += 'margin:30px 0;'; in headstyle += 'margin:30px 0 !important;'; und speicher die Datei ab. Anschließend Extras > Entwickler > Änderungen übernehmen. Funktioniert das?
Mir ist auch aufgefallen das deine Bilder am Desktop für die Standard 16/9 Bildschirme ziemlich hoch sind.
Da ist mir etwas in Erinnerung geraten womit du beides lösen kannst. LINK