Zeta Producer

Websites erstellen ohne Vorkenntnisse und ohne laufende Kosten

Headebild 3

Dieses Headerbild wird in voller Seitenbreite angezeigt. Wenn die Bildschirmbreite grösser ist als das Bild wird dieses auf die Seitenbreite skaliert. Der Text im Bild wird für die Mobile Ansicht etwas verkleinert. Achtet hierbei darauf das der Text auch am Handy noch gut lesbar ist.

"Erweitert > Bilder" hier dein Bild Importieren
Anschließend mit der Maus über das Bild fahren und auf das Zahnrad-Symbol klicken "Eigenschaften > Weiteres > Haken bei Bild schützen setzen".
Anschließend mit der Maus über das Bild fahren und auf das Zahnrad-Symbol klicken "Mehr > Objekt-ID kopieren"
Ersetze im Quelltext DEIN_BILD durch die kopierte Objekt-ID.
Den Pfeil musst du nicht als Grafik importieren, dieser wurde mit CSS integriert.
Um Pfeil mit dem ersten Artikel zu verlinken öffne diesen, Gehe unten auf das Mischpult > Mehr > unten rechts "+" > nochmal unten rechts "+" . Hier die Objekt-ID kopieren und das DEIN-LINK im Quelltext mit dieser ersetzen.
Das "Widget > Quelltext erhält die "CSS-Klasse: zpBreakout" sowie das "Inline-CSS: margin-top: -85px". Den Wert -85px musst du je nach Layout noch anpassen.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

.bild_beschriftung  h1{
color: #fff;
text-align: center;
font-size: 58px;
margin: 0px 0 5px 0;
}

i {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 15px;
  margin: -10px 0 30px 0;
  transform: rotate(45deg);
	   animation: sdb 2.5s infinite;
	   box-sizing: border-box;
}

@keyframes sdb {
        0% {opacity: 0;}
        50% {opacity: 1;}
        100% {transform: translate(0px, 22px) rotate(45deg); opacity: 0;}
	}
´
@media (max-width: 1100px) {}
@media (max-width: 1099px) {
.bild_beschriftung  h1 {font-size: 38px;}
.bild_beschriftung span {font-size: 26px; padding-bottom: 15px;}
.pfeil {display: none;}
}
@media (max-width: 899px) {
.bild_beschriftung  h1 {font-size: 32px;}
.bild_beschriftung span {font-size: 22px; padding-bottom: 10px;}
}
@media (max-width: 749px) {
.bild_beschriftung  h1 {font-size: 28px;}
.bild_beschriftung span {font-size: 16px;}
}
@media (max-width: 449px) {
.bild_beschriftung span {padding:100% 10px 10px 10px;}
}
</style>

markieren & kopieren

Quelltext

Widget > Quelltext am Anfang der Seite

markieren & kopieren

Zeta Producer

Headebild 3

CSS-Code

Quelltext

NEUE BEITRÄGE