Beiträge von Mario

Ich bin vom 25.11.22 bis 10.12.22 im Urlaub.

    Das war eigentlich nicht so angedacht, funktioniert aber recht einfach.


    • Die Bilder in entsprechender Größe in die "Bildverwaltung" importieren.
    • Diese Bilder schützen: Zahnrad > Eigenschaften > Weiteres > Bild schützen
    • Folgenden Code im Widget unter "Popup Text" einfügen: <img src="oid://image/dein-bild" alt="AltText">
    • In der Bildverwaltung Zahnrad > Mehr > Objekt-ID kopieren
    • In "Popup Text" den Teil oid://image/dein-bild mit deiner kopierten Ojekt-ID ersetzen.

    zu 1.

    Da sollte folgendes helfen.

    Einstellungen > CSS

    CSS
    <style>
    .header-blur_mobile h1, .header-blur_mobile p {
    margin:0 15px !important;
    }
    </style>


    zu 2.

    Firefox ist scheinbar noch dabei den (backdrop-filter) zu implementieren. LINK

    Bis das funktioniert hilft wohl nur die Hintergrundfarbe zu erhöhen damit der Text besser lesbar ist.


    zu3.

    Hier wird nur sehr wenig Code mit gegeben. Daran kann es nicht liegen.

    Eventuell mal das Bild welches unter "Bild Mobile" angegeben ist weiter komprimieren.

    Nein das ist technisch leider so nicht möglich.

    Man könnte testen die "Profile Card" als HTML-Code in das Widget Tabs einzufügen. Das kann eventuell klappen, ist aber nicht garantiert weil der Editor den Code manchmal automatisch abändert.


    PS: Danke für das leckere Paket. :)

    zpBreakout ist in dem Widget "Headerbild Zoom" bereits integriert was aber nicht in allen Layouts übernommen wird (zB. Stripe), weshalb man hier diese Klasse nochmal zusätzlich hinzufügen muss.

    Deshalb wird das Widget in "Locus" nicht zentriert. Dies kannst du aber manuell entfernen indem du im Widget die entsprechende HTML-Datei anpasst.

    In der "Zoom-In_mit_Scrollfunktion.html" findest du zb. in der Zeile 134 und der Zeile 143 den Eintrag zpBreakout. Wenn du diese entfernst wird das Widget mittig angezeigt.

    Allerdings hat "Locus" weitere spezielle Eigenheiten weshalb hier die Zoomfunktion nicht so gut aussieht.

    • 1vw 1% der Breite des Viewports
    • 1vh 1% der Höhe des Viewports
    • 1vmin 1% der schmaleren Seite
    • 1vmax 1% der breiteren Seite


    Wie ist darüberhinaus der Abstand des ersten Artikels zum Header einstellbar.

    Am einfachsten über Inline-CSS des ersten Artikels unter dem Header.

    Gehe im ersten Artikel unter dem Header unten auf das Mischpult, dann auf Mehr.

    Hier trägst du unter "Inline-CSS" folgendes ein:

    • margin-top:20px; um den Abstand um 20px zu erhöhen
    • margin-top:-20px; um den Abstand um 20px zu verringern

    Natürlich macht es Sinn das Widget "Text Responsive" hierzu zu verwenden.


    Wenn die gleichen Einstellungen aber für mehrere Überschriften oder Texte verwendet werden sollen macht es mehr Sinn dies mit über eine zusätzliche CSS-Klasse zu realisieren, damit das CSS nur ein mal im Code erscheint .


    Wenn du zum Beispiel mehrere "H2 Überschriften" hast welche sich gleich verhalten sollen könntest du das folgendermaßen umsetzen.


    In folgendem Beispiel sollen mehrere Überschriften H2 im Text-Artikel diese Einstellungen erhalten:

    • Schriftgröße: 58px
    • Bildschirmbreite unter 1000px, Schriftgröße: 38px
    • Bildschirmbreite unter 800px, Schriftgröße: 28px
    • Bildschirmbreite unter 600px, Schriftgröße: 22px


    Einstellungen > CSS

    CSS
    <style>
    .textresp h2 {font-size:58px}
    @media (max-width: 1000px) {.textresp h2 {font-size:38px}}
    @media (max-width: 800px) {.textresp h2 {font-size:28px}}
    @media (max-width: 600px) {.textresp h2 {font-size:22px}}
    </style>

    In den entsprechenden Text-Artikeln gehst du unten auf das "Mischpult", dann auf "Mehr" und gibst dort unter CSS-Klasse: textresp ein.

    In dem Widget "WZP Image-Map Poly SVG" selbst sind nur Polygone möglich, die Rechtecke oder Kreise sind also nur Zusatz, wozu auch immer.

    Die Koordinaten werden genau wie bei dem anderen Widget in das Widget "WZP Image-Map Poly SVG" eingefügt.

    Ein Zoom funktioniert in diesem Tool leider nicht.

    Einstellungen > CSS


    Widget > Quelltext

    HTML
    <label class="cambut">
    <input type="file" accept="image/*" capture="camera" />
    Kamera öffnen
    </label>


    Den Button kannst du im CSS unter der Klasse .cambut weiter anpassen.