Banner - "Welle" ändern oder entfernen

[aline.asmus]

Hallo zusammen,

zuerst einmal möchte ich mich bei allen für die schnellen und sehr hilfreichen Antworten bedanken!

Und hier meine nächste Frage:

In unseren Bannern wird immer automatisch eine weiße, transparente "Welle" erzeugt (im unteren Bereich). Gibt es eine Möglichkeit diese entweder anders darzustellen (eckig würde bei unserer Schulhomepage besser passen) oder sie ganz auszustellen?

Gruß und schon mal Danke, Aline

[Alex Zoppel]

Hallo Aline,

Die Welle im Jumbotron(Headerbereich) ist in einer sogenannten .css-Datei definiert. Du findest die Datei unter "Dateiliste" --> website-assets --> ***-custom.css. Klicke in der Datei-Ansicht auf die drei Punkte rechts ("Weitere Optionen..."), dann auf "Inhalt bearbeiten". Du findest im Quellcode zwei Bereiche für das Jumbotron: ".jumbotron" bzw. ".jumbotron:before".

1. Ausblenden/Deaktivieren:
Um die Welle auszublenden bzw. du deaktivieren, reicht es aus, die beiden .jumbotron-Definitionen auszukommentieren. Das machst du, indem du VOR .jumbotron ein /* und AM SCHLUSS ein */ setzt:

Code Auswählen Erweitern

/*
.jumbotron{
  positi...
(...)
...5" fill="%23ffffff"/></svg>');
}
*/

Wenn du das korrekt gemacht hast, wird der auskommentierte Code orange dargestellt. Anschließend speicherst du deine Bearbeitung, löschst den Cache und die Welle ist deaktiviert.

2. Eine andere Form anstatt der Welle einfügen:
Hier ist ein wenig Expertenwissen und ein bisschen Experimentierfreude nötig. Die Welle (eigentlich sind es drei Wellen mit unterschiedlicher Transparenz) ist eine Vektorform im SVG-Format (mathematische Angaben, ähnlich wie Koordinaten). Eine .svg-Datei erhält man beispielsweise mit den Vektor-Programmen Adobe Illustrator oder Inkscape. Das bedeutet, du könntest selbst Formen zeichnen und die Koordinaten dieser Formen in die .css-Datei einbauen (zuvor als .svg-Datei speichern, diese Datei dann mit einem Text-Editor öffnen und den Code kopieren). Alternativ dazu gibt es online unzählige Seiten, die Codes für solche sogenannten Divider anbieten. Beispiel: https://shapedividers.com/

Unter Umständen muss auch noch auf die Darstellung in der mobilen Ansicht geachtet werden:

Code Auswählen Erweitern

@media (min-width:2100px) {
(...)
}

Der Code für ein Zick-Zack-Muster anstatt einer Welle, könnte beispielsweise so aussehen:

Code Auswählen Erweitern

.jumbotron{
position:relative;
}

.jumbotron::before{
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 29px;
background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 -0.6 2003.4 89.5"><g fill="%23ffffff"><path d="M2001 42l-12-21-12-21-12 21-12 21-4 6-8 14-6 11-6-11-12-20-12-21-12-21-12 21-12 21-8 14-4 7-8 13-8-14-12-20-12-21-12-21-12 21-12 21-8 14-4 6-6 11-6-11-12-20-12-21-12-21-12 21-12 21-12 20-8 14-8-14-12-20-12-21-12-21-12 21-12 21-12 21-6 10-6-11-12-20-12-21-12-21-12 21-12 21-8 14-4 6-8 14-8-14-12-20-12-21-12-21-12 21-12 21-4 7-8 13-6 11-6-11-12-20-12-21-12-21-12 21-12 21-12 21-8 13-8-14-12-20-12-21-12-21-12 21-12 21-12 21-6 10-6-11-12-20-12-21-12-21-12 21-12 21-12 21-7 13-8-14-12-20-12-21-12-21-12 21-12 21-4 7-8 13-6 11-6-11-12-20-12-21-12-21-12 21-12 21-13 21-8 13-7-14-12-20-12-21-12-21-12 21-12 21h-1l-12 21-5 10-6-11-12-20-12-21-13-21-12 21-12 21-4 7-8 13-8 14-7-14-12-20-12-21-12-21-12 21-12 21-4 7-8 13-6 11-6-11-12-20-12-21-12-21-12 21-12 21h-1l-12 21-7 13-8-14-12-20-12-21-12-21-12 21-12 21-8 14-4 7-6 10-6-11-12-20-12-21-12-21-12 21-12 21-4 7-8 13-8 14-8-14-12-20-12-21-12-21-12 21-12 21-12 21-6 10-6-11-12-20-12-21-12-21-12 21-12 21-8 13-4 7-8 14-8-14-12-20-12-21-12-21-12 21-12 21-8 14-4 6-6 11-6-11-12-20-12-21-12-21-12 21-12 21-12 20-8 14-8-14-12-20-12-21L86 0 74 21 62 42 50 63l-6 10-6-11-12-20-12-21L2 42l12 20-4-7-5-8-3-5 12-21L2 0 0 3v80h2003V46zM6 76l1-2 2-3 2-3-5 8zm252-34l8-14-8 14-12 20zm947 0l8-14-8 14-12 20zm344 0l7-14-7 14-12 20z" opacity=".5"/><path d="M1991 69l-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-10 16-2 4-8 13-7-13-13-20-12-21-12 21-12 20 12-20 12-21-12-20-12 20-12 21-9 16-3 4-6 10-6-10-12-20-12-21-12-20-12 20-12 21-2 4-10 16-8 13-7-13-12-20-12-21-12-20-12 20-12 21h-1l-12 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-12 20-7 13-8-13-12-20-12-21-12-20-12 20-12 21-3 4-9 16-6 10-6-10-12-20-12-21-13-20-12 20-12 21-12 20-7 13-8-13-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12 21-12 20 12-20 12-21-12-20-12 20-12 21h-1l-12 20-7 13-8-13-12-20-12-21-12-20-12 20-12 21-3 4-9 16-6 10-6-10-12-20-12-21-12-20-12 20-12 21-12 20-8 13-8-13-12-20-12-21-12-20-12 20-12 21-10 16-2 4-6 10-6-10-12-20-12-21-12-20-12 20-12 21-3 4-9 16-8 13-8-13-12-20-12-21-12-20-12 20-12 21-2 4-10 16-6 10-6-10-12-20-12-21-12-20-12 20-12 21-10 16-2 4-8 13-8-13-12-20-12-21-12-20-12 20-12 21-9 16-3 4-6 10-6-10-12-20-12-21-12-20-12 20-12 21-3 4-9 16-8 13-8-13-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-9 16-3 4-8 13-7-13-12-20-13-21-12 21-12 20 12-20 12-21-12-20-12 20-12 21-9 16-3 4-6 10-6-10-12-20-12-21-12-20-12 20-12 21-12 20-8 13-7-13-12-20-12-21L65 8 53 28 41 49h-1L28 69l-6 10-6-10-1-3-3-4v-1l-2-3-4-7-2-2-1-3-3-5v48h2003l-12-20z" opacity=".75"/><path d="M1999 10l-12 21-12 20v1l-12 20-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-4 6-8 14-8 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-4 6-8 14-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-12 20-8 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-12 20-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-4 6-8 14-8 14-7-14-12-21-12-20-13-21-12 21-12 20v1l-4 6-8 14-6 11-6-11-12-21-12-20-12-21-12 21-12 20-8 14-4 7-8 14-7-14-12-21-12-20-12-21-12 21-12 20-8 14-5 7-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-12 20-7 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-12 20-6 11-6-11-12-21-12-20-12-21-13 21-12 20-8 14-4 7-7 14-8-14-12-21-12-20-12 20-12 21 12-21 12-20-12-21-12 21-12 20-8 14-4 7-6 11-6-11-12-21-12-20-12-21-12 21-12 20-1 1-12 20-7 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-12 20-6 11-6-11-12-21-12-20-12 20-12 21 12-21 12-20-12-21-12 21-12 20-8 14-4 7-8 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-12 20-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-12 20-8 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-12 20-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-4 7-8 13-8 14-8-14-12-21-12-20-12-21-12 21-12 20v1l-4 7-8 13-6 11-6-11-12-21-12-20-12-21-12 21-12 20v1l-12 20-8 14-8-14-12-21-12-20-12-21-12 21-12 20-8 14-4 7-6 11-6-11-12-21-12-20-12-21-12 21L0 51l9 16-5-8-2-5-2-3v38h2l1-1-1 1h2001V17l-4-7z" opacity=".7"/><path d="M1995 49l-12 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-12 20-8 13-8-13-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12 21-12 20 12-20 12-21-12-20-12 20-12 21-12 20-8 13-8-13-12-21-12-20-12-20-12 20-12 20v1l-2 4-10 16-6 10-6-10-12-20-12-21-12-20-12 20-12 21-12 20-8 13-8-13-12-21-12-20-12-20-12 20-12 20-9 17-3 4-6 10-6-10-12-20-12-21-12-20-12 20-12 21-2 4-10 16-8 13-8-13-12-21-12-20-12-20-12 20-12 20v1l-2 4-10 16-6 10-6-10-12-21-12-20-12-20-12 20-12 20-9 17-3 4-8 13-8-13-12-21-12-20-12-20-12 20-12 20-9 17-3 4-6 10-6-10-12-20-12-21-12-20-12 20-12 21-2 4-10 16-8 13-7-13-12-21-12-20-12-20-12 20-12 20v1l-13 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-9 16-3 4-8 13-7-13-12-20-12-21-12 21-12 20 12-20 12-21-12-20-12 20-12 21-13 20-5 10-6-10-12-20-12-21-12-20-12 20-12 21h-1l-2 4-10 16-7 13-8-13-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-13 20-7 13-8-13-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12-20-12 20-12 21-12 20-8 13-8-13-12-20-12-21-12-20-12 20-12 21-12 20-6 10-6-10-12-20-12-21-12 21-12 20 12-20 12-21-12-20-12 20-12 21-3 4-9 16-8 13-8-13-12-20-12-21-12-20-12 20-12 21-2 4-10 16-6 10-6-10-12-20-12-21L44 8 32 28 20 49 8 69l-1 2H6l-4 7-2 4v7h20l-1-1 1 1h1975v-1h8V34l-8 15zM9 71l-1-1 1 2zm1983 14l-9-16z"/></g></svg>');
}

Gutes Gelingen!
Alex

[aline.asmus]

Hallo Alex,

vielen Dank für deine Antwort. Dank deiner guten Erklärung konnte ich beide Vorschläge umsetzen - sowohl mit als auch ohne ZickZack-Muster.

Mir persönlich gefällt das ohne aktuell besser.


Jetzt habe ich aber das Problem, dass auf einem Smartphone die Banner (Jumbotron), welche nur auf einer bestimmten Unterseite auftauchen, verkürzt dargestellt werden.

Ich habe die Einstellung mit

@media all and (min-width:2100px) {
(...)
}

gemacht, trotzdem funktioniert es nicht. Der eigentliche Banner, welcher auf fast allen Seiten angezeigt wird, der ist richtig. Nur die Banner in den Fachbereichen (hier sind andere Bilder) werden wie bereits erwähnt abgeschnitten.

Hast du da auch eine Lösung dazu?

Vielen Dank für alles,

Gruß, Aline

[Alex Zoppel]

Hallo Aline,

toll, wenn alles geklappt hat! Wichtig: Die @media-Abfrage bezieht sich nur auf die Welle. Wenn du diese nicht nutzt, sollte auch diese Abfrage gelöscht bzw. auskommentiert werden.

Ich habe dir diesbezüglich noch eine PM gesendet.

LG Alex