Button in Header-Foto

Hallo Jörg,
ja das geht mit etwas CSS.

Ich habe HIER mal schnell ein Beispiel hochgeladen. Ist eine Mischung aus DIESEM und DIESEM.

Wenn dir das zusagt kann ich dir den verwendeten Code gern zukommen lassen.

Zitat von Joerg

Ließe sich das auch so mit dem Ein- und Ausblenden von Text und Button über dem jeweiligen Header-Foto verwirklichen wie auf der genannten Dachdecker-Website?

Schwierig, wenn überhaupt geht das nur mit Eingriff in das Layout. Das mache ich grundsätzlich nicht, denn nach jedem Update musst du wieder von vorn beginnen.

Zitat von Joerg

Gerne würde ich mit Deinem Code entsprechende Tests machen.

Einstellungen > CSS

<style>
.button1 {
position: absolute;
top:400px;
margin-left:-110px;
left:50%;
display: inline-block;
width: 220px;
padding: 8px;
color: #3D3D3D;
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid #3D3D3D;
box-shadow: inset 0 0 20px 4px rgba(61, 61, 61, 0.5);
text-align: center;
outline: none;
margin-top: 10px;
text-decoration: none;
transition: background-color 0.2s ease-out,
box-shadow 0.2s ease-out,
color 0.2s ease-out;
z-index:2000;
}




@media (max-width: 1115px) {
.button1 {
top:300px;
}}
@media (max-width: 869px) {
.button1 {
top:200px;
}}
@media (max-width: 469px) {
.button1 {
top:150px;
width: 160px;
padding: 5px;
margin-left:-80px;
}}




.button1:hover,
.button1:active {
background-color: transparent;
color: #F22929;
border: 1px solid #3D3D3D;
box-shadow: inset 0 0 20px 4px rgba(242, 41, 41, 0.5);
text-decoration: none;
transition: background-color 0.3s ease-in,
box-shadow 0.3s ease-in,
color 0.3s ease-in;
}
</style>

Widget > Sonstige > Quelltext

<p style="text-align: center"><a class="button1" href="https://www.google.de/">Button 1</a></p>

Hallo,

das können Sie mit Bordmitteln verwirklichen und benötigen bei dem von Ihnen verwendeten Layout eigentlich nicht einmal zusätzliches CSS.

• Doppelklicken Sie den Header-Artikel, damit er zum Bearbeiten geöffnet wird.
• Nun machen Sie einen Rechtsklick in das 2. Textfeld (das 1. ist die Überschrift) und wählen aus dem Kontextmenü "Erweitert" die Option "HTML-Quelltext"
• Um einen Button im Quelltext einzufügen, fügen Sie den folgenden Code ein:
  <a class="button" href="#"><span class="dmy">DER BUTTONTEXT</span></a>

Beim HREF-Attribut können Sie das "#" durch die Adresse der Seite ersetzen, auf die verlinkt werden soll. Und Statt "DER BUTTONTEXT" können Sie natürlich Ihren gewünschten Text einsetzen.

Hallo Jörg,
ich habe das einfach mal getestet. Hier der LINK.

Wie du schon festgestellt hast werden die Einstellungen aus dem Layout-Designer nicht komplett übernommen.
Folgendes CSS habe ich benutzt:

<style>
.dmy {
 font-size: 20px;
transition: all .2s;
}
.dmy:hover { 
 font-size: 22px;
border-radius: 5px;
background-color: rgba(255,0,0, 0.8);
}
</style>

Beachte das dieser Button aber ab einer bestimmten Bildschirmbreite ausgeblendet wird, was natürlich auch Sinn machen kann.

PS: Ich habe aber hier auch wieder dazu gelernt. Bisher wusste ich nicht das man im Header auch mit HTML-Quelltext arbeiten kann. Somit ergeben sich wieder ganz andere Möglichkeiten. Man könnte also mit CSS auch einen eigenen Button für den Header anlegen und diesen auch für die mobilen Ansichten anpassen.