Zeta Producer

Websites erstellen ohne Vorkenntnisse und ohne laufende Kosten

Zeta Producer ist eine moderne Webdesign-Software für Windows mit der wirklich jeder professionelle Websites erstellen kann.

Zeta Procucer

Websites erstellen ohne Vorkenntnisse und ohne laufende Kosten.

Zeta Producer ist eine moderne Webdesign-Software für Windows mit der wirklich jeder professionelle Websites erstellen kann.

Headerbild 6

Hier verwenden wir Animationen für den Text. Diese werden in CSS-Code erstellt.

Manchmal liegt der Focus nicht in der Mitte des Bildes, deshalb positionieren wir den Text hier frei im Bild. Mit den Prozentangaben im CSS könnt ihr bestimmen wo dieser platziert wird.

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 kleinere Bildschirmbreiten etwas verkleinert. Achtet hierbei darauf das der Text auch am Handy noch gut lesbar ist.

Hier habe ich relativ viel Text verwendet. Da man zu viel Text am Smartphone nicht mehr lesbar im Bild darstellen kann wird dieser für die Mobile Ansicht ausgeblendet und unter dem Bild dargestellt.

Bei Bildern ab einem Seitenverhältnis von 19:9 kann man am Smartphone in der Regel nicht mehr viel vom Foto erkennen. Deshalb blenden wir hierfür ein Quadratisches Bild ein. Hierbei kann man wunderbar den Fokus des Bildes einfangen, dieser muss nicht unbedingt in der Mitte des Bildes liegen, man kann aber auch ein ganz anderes Bild verwenden. Außerdem können wir hier ein sehr viel kleineres Bild verwenden welches die Ladezeit am Mobilen Gerät deutlich verkürzt. Ein weiterer Vorteil ist das man den Text im Bild wieder grösser darstellen kann weil dieser dann nicht mehr so viel vom Bild verdeckt.

"Erweitert > Bilder" hier beide Bilder 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, sowie DEIN_BILD_MOBILE durch die kopierte Objekt-ID.
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.
Für den Text der in der Mobilen Ansicht unter dem Bild eingeblendet werden soll erstellst du unter dem Bild einfach ein "Widget > Text" Dieser erhält die CSS-Klasse: header-text-mobile . Somit wirde dieser über einer Bildschirmbreite von 1080px ausgeblendet. Um den Artikel in ZP bearbeiten zu können wechsele mit der Taste "F8" in den Spaltenmodus oder ziehe einfach den Seitenbaum links so weit nach rechts bis der Artikel eingeblendet wird.

CSS-Code

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

.bild_beschriftung  h2{
color: #fff;
font-weight: normal;
text-align: left;
font-size: 58px;
margin: 0px 0 5% 0;
}

.ani0 {
animation-name: ani0;
opacity: 0;
animation-duration: 2s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
    @keyframes ani0 {
        0% {transform: translate(0, -50%);}
        100% {transform: translate(0, 0); opacity: 1;}
	}

.ani1 {
animation-name: ani1;
opacity: 0;
animation-duration: .7s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
    @keyframes ani1 {
        0% {transform: translate(-100px, 0);}
        100% {transform: translate(0, 0); opacity: 1;}
	}

.ani2 {
animation-name: ani2;
opacity: 0;
animation-duration: .7s;
animation-delay: 4s;
animation-fill-mode: forwards;
}
    @keyframes ani2 {
        0% {transform: translate(100px, 0);}
        100% {transform: translate(0, 0); opacity: 1;}
	}

.ani3 {
animation-name: ani3;
opacity: 0;
animation-duration: .7s;
animation-delay: 5s;
animation-fill-mode: forwards;
}
    @keyframes ani3 {
        0% {transform: scale(0, 0);}
        100% {transform: scale(1, 1); opacity: 1;}
	}

.ani4 {
animation-name: ani4;
opacity: 0;
animation-duration: .7s;
animation-delay: 6s;
animation-fill-mode: forwards;
}
    @keyframes ani4 {
        0% {transform: translate(0, 100px);}
        100% {transform: translate(0, 0); opacity: 1;}
	}

@media (max-width: 1479px) {
.bild_beschriftung  h2 {font-size: 38px;}
.bild_beschriftung_text {font-size: 26px;}
}
@media (max-width: 1279px) {
.bild_beschriftung_text {width: 84%;}
}
@media (max-width: 979px) {
.bild_beschriftung  h2 {font-size: 32px;}
.bild_beschriftung_text {font-size: 20px;}
}
@media (max-width: 779px) {
.bild_beschriftung_text {display: none;}
}
@media (min-width: 780px) {
.header-text-mobile {display: none;}
}

@media (max-width: 380px) {.bild_beschriftung {display: none;}}
@media (min-width: 379px) {.bild_beschriftung_mobile {display: none;}}
</style>

markieren & kopieren

Quelltext

Widget > Quelltext am Anfang der Seite

markieren & kopieren

Zeta Producer

Zeta Procucer

Websites erstellen ohne Vorkenntnisse und ohne laufende Kosten.

Zeta Producer ist eine moderne Webdesign-Software für Windows mit der wirklich jeder professionelle Websites erstellen kann.

Headerbild 6

CSS-Code

Quelltext

NEUE BEITRÄGE