Full-width Full-height Slider
folgendes in ein HTML Modul einbinden: Achtung: Row muss fluid sein, ohne irgendwelchen spacings, margins oder sonstigem Folgendes kommt in die Global HTML Tags: .row-full-home{ width: 100vw; max-width: 100%; position: relative; margin-left: -50vw; height: 100vh; margin:0px; background: url(HIER KOMMT DER BILDPFAD REIN, AM EINFACHSTEN AUS DEM FILEMANAGER KOPIEREN); background-position: center; (falls du das Bild zentriert haben willst) background-repeat: no-repeat; (je nachdem ob es sich wiederholen soll oder nicht) background-size: cover; box-shadow:inset 0 0 0 2000px rgba(0, 31, 81, 0.5) (DIESEN BEREICH KANNST DU LÖSCHEN WENN DU KEINE FARBÜBERLAGERUNG HABEN WILLST) } Wenn du einen Text haben willst, wäre folgendes die Art wie du es horizontal und vertikal zentrieren kannst: .row-full-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; }
Das komplette Div „row-full-text“ kannst du löschen wenn du keinen Text haben willst
Button Color-Grading
folgendes in ein Settings -> Global HTML einbinden: .button{ background-image: linear-gradient(to right, #e57c25 0%, #e52526 51%, #e57c25 100%); background-size: 200% auto; transition: 0.5s; } .button:hover{ background-position: right center; }
Image greyscale zoom in
folgendes in ein Settings -> Global HTML einbinden: #ID img { transition: transform .5s, filter 1.5s ease-in-out; filter: grayscale(100%); } #ID:hover img { filter: grayscale(0); transform: scale(1.1); }