Background.
In general terms the WYSIWYG editor accepts most HTML, JavaScripts and CSS. This means that you can do a lot of exciting stuff if you code your pages (and headers) manually as you will not be restricted by the functionality of the editor.
Of course the process will be more time consuming and harder to maintain. But if the content is (almost) static it's a one time job...
The internet contains a lot of resources for learning about HTML, JavaScript and Cascading Style Sheets.
An excellent place to start is here:
Read more about HTML, JavaScript and CSS on w3schools.com.
Have fun playin' with code
Example: How to make a slideshow in a header.
The slideshow contains three elements:
- Some HTML code.
- Some JavaScript,
- Some Styles,
Take a look at the below HTML and JavaScript code.
Switch the WYSIWYG editor to "Source Mode" and copy and paste the code into a new header.
You can see the result in the header of this page:
A slide show containing four images that changes every 5.000 millisecond = 5 seconds with a fade duration a 2.5 seconds.
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSouthVegetation.jpg" style="width:100%; max-height: 180px;" />
<div class="text">Forårudsigt fra terrassen</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerMaroma.jpg" style="width:100%; max-height: 180px;" />
<div class="text">Bjerget Maroma mod nord</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSouthOct.jpg" style="width:100%; max-height: 180px;" />
<div class="text">Efterårssolen mod syd</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://casacalma.greenroad.dk/images/casacalma/headers/headerSunsetSouth01.jpg" style="width:100%; max-height: 180px;" />
<div class="text">Solnedgang mod vest</div>
</div>
</div>
<div style="text-align:center; padding-top:8px;">
<span class="dot"> </span>
<span class="dot"> </span>
<span class="dot"> </span>
<span class="dot"> </span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 5000);
}
</script>
After copying the code to your new header you need some styling:
Open the Style Assistant and add the following Custom class:
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1920px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/4 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 2s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2.5s;
animation-name: fade;
animation-duration: 2.5s;
}
@-webkit-keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
Play with the HTML, JavaScript and CSS values in the code. You can vary the number of images by inserting HTML-elements in the "slideshow-container" <div> tag. The captions, the duration/fade and the colors and sizes can also be manipulated by the code.
As the above code is just a mix of HTML, JavaScript and CSS you can easily append it. If you for example want one of the images to be a clickable link with a ToolTip simply surround the image tag <img src="https://casacalma.greenroad.dk/images/..."> with a href tag like:
<a href="https://google.com" title="Search on Google">
<img src="https://casacalma.greenroad.dk/images/...jpg" style="width:100%; max-height: 180px;" />
</a>
and the image will now be an active link.
The same way you can make the image corners rounded simply by adding a style attribute:
<img src="https://casacalma.greenroad.dk/images/...jpg" style="width:100%; max-height: 180px; border-radius:16px;" />