Zeta Producer

Websites erstellen ohne Vorkenntnisse und ohne laufende Kosten

Headerbild 2

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.
Mit der Grafik für den Pfeil gehst du genau so vor, hier den Text DEIN-PFEIL mit der Objekt-ID ersetzen.
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.

figure.hov2 img {
    transition: .5s;
}
figure.hov2:hover img {
    opacity: .4;
}
figure.hov2 h4 {
    padding-top: 15%;
    transition: .5s;
    transform: translate3d(0,-190px,0);
}
figure.hov2 p {
    max-width: 100%;
    text-transform: none;
    opacity: 0;
    transition: .5s;
    transform: translate3d(0,20px,0);
}
figure.hov2 p:after {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: .25em;
    content: '';
}
figure.hov2:hover figcaption:before,
figure.hov2:hover figcaption:after {
    opacity: 1;
    transform: scale(1);
}
figure.hov2:hover h4,
figure.hov2:hover p {
    opacity: 1;
    transform: translate3d(0,0,0);
}

@media (max-width: 1269px) {
figure.hov2 h4 {transform: translate3d(0,-120px,0);}
.pfeil {display:none;}
}
@media (max-width: 799px) {
figure h4 {font: 800 1.5em Arial;}
figure p {font-size: 1em;}
figure.hov2 h4 {transform: translate3d(0,-80px,0);}
}
@media (max-width: 549px) {
figure h4 {font: 800 1.2em Arial;}
figure p {font-size: .9em;}
figure.hov2 h4 {transform: translate3d(0,-50px,0);}
}
@media (max-width: 399px) {
figure.hov2 h4 {padding: 1% 0 0 0;transform: translate3d(0,5px,0);}
}
</style>

markieren & kopieren

Quelltext

Widget > Quelltext am Anfang der Seite

markieren & kopieren

Zeta Producer

Headerbild 2

CSS-Code

Quelltext

NEUE BEITRÄGE