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); }
Typing Effect
// Folgendes in Settings -> Global HTML einbinden: .typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; } @keyframes typing { from { width: 0 } } @keyframes blink { 50% { border-color: transparent } } // Das dazu passende Div / bzw einem Text einfach die Klasse typing-demo geben
This is a typing demo.
Header Drop-Shadow
// Folgendes in Settings -> Global HTML einbinden: #r5000 { -webkit-box-shadow: 0px 5px 5px 0px rgba(230,230,230,0.75); -moz-box-shadow: 0px 5px 5px 0px rgba(230,230,230,0.75); box-shadow: 0px 5px 5px 0px rgba(230,230,230,0.75); }