Einfaches Infofeld / banner das man weg klicken kann

Oder mit dem Code kannst du das überall einbauen.

Code:

<style type="text/css">
/* The alert message box */
.alert {
  padding: 20px;
  color: #000;
  margin-bottom: 15px;
}

/* The close button */
.closebtn {
  margin-left: 15px;
  color: #000;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
  color: blue;
}

.alert {
    border: 1px solid #000;
    opacity: 1;
    transition: opacity 1.6s; /* 600ms to fade out */
}
</style>


<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  Hier kommte der Inhalt rein!
</div>

<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // When someone clicks on a close button
  close[i].onclick = function(){

    // Get the parent of <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;

    // Set the opacity of div to 0 (transparent)
    div.style.opacity = "0";

    // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

 

Im StyleEditor einfach eine Sektion mit HTML-Widget anlegen und dann den Code rein.
Du kannst das auch in einem Content reinpacken und auch bei einem beliebigen Artikel.
Also eigentlich überall wo du es haben willst.