OnePage

Hier der Link zu einer OnePage-Seite.

Zum Nachbau geht ihr folgendermaßen vor:

Verwendet wurde das Layout "Stripe Responisve".

Zuerst solltet ihr folgendes CSS einfügen.

CSS-Code

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

@media (max-width: 1280px) {
.navi{
	left: 97%;
	margin-left: 0;
}}
@media (max-width: 980px) {
.navi{
	display: none;
}}
/*#################################*/
.container-top {
height:100vh;
margin-top:-110px;
}
@media (max-width: 920px) {
.container-top {
height:100%;
margin-top:0;
}}
/*#################################*/
.container100 {
height:100vh;
}
@media (max-width: 920px) {
.container100 {
height:100%;
}}
/*#################################*/
.titel {
	margin-top:50px; 
}
.titel H1{
	color:#fff;
	font-size: 3em;
	    text-shadow:1px 1px #333,2px 2px #333,3px 3px #333,4px 4px #333,5px 5px #333,6px 6px #333;
	transition: all 0.2s ease;
}
/*#################################*/
.inhalt {
	margin-top:10%; 
	margin-bottom:10%; 
	color:#fff;
	background: rgba(0,0,0,0.8); 
	padding:20px;
	border-radius: 10px;
	transition: all 0.4s ease;
}
.inhalt:hover {
	background: rgba(0,0,0,0.95); 
}
@media (max-width: 1400px) {
.inhalt  {
	margin-top:3%; 
	margin-bottom:5%; 
}}
@media (max-width: 920px) {
.inhalt  {
	margin-top:0; 
	margin-bottom:0; 
}}
/*#################################*/
.schweben {margin:0 10px 25px 0;}
.hovering {
animation-name: hovering;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes hovering {
from {transform:translate(0, 0px);}
20% {transform:translate(0, -25px);}
80% {transform:translate(0, -25px);}
to {transform: translate(0, -0px);}
}
</style>

Quellcode markieren & kopieren

Nun erstellt ihr einen Textartikel als Übereschrift H1 für den ersten Container. Dieser Artikel erhält die CSS-Klasse "titel".
Darunter wiederum einen Textartikel mit dem Inhalt des ersten Containers. Dieser Artikel erhält die CSS-Klasse "inhalt".
Darunter wieder einen Textartikel. Hier fügt ihr eine Grafik eurer Wahl als Pfeil zum scrollen zum nächsten Container ein. Dieser Artikel erhält die CSS-Klasse "schweben hovering".
Nun packt ihr diese Artikel in einen Container. Wählt euer Hintergrundbild, setzt dieses auf Cover, Fix und Randlos. Dieser Container erhält die Klasse "container-top"
Mit dem nächsten Container geht ihr genau so vor. Allerdings erhält nur der erste Container die Klasse "container-top" alle weiteren erhalten die Klasse "container100"
Wenn ihr mit dem Aufbau des Inhalts fertig seid (alle Container erstellt habt) verlinkt ihr die eingefügten Pfeile jeweils mit dem ersten Artikel des darauffolgenden Containers.
Um die Navigation am rechten Bildschirmrand einzufügen erstellt ihr am unteren Ende der Seite wiederum einen Textartikel. Hier habe ich folgende Symbole eingefügt "🔺🌑🔻" und mit den entsprechenden Artikeln Verlinkt. Dieser Artikel erhält die CSS-Klasse "navi".
Damit das ganze auch scrollt erstellt ihr darunter ein Widget Quelltext mit folgendem Inhalt.

Script

Diesen Code am Ende der Seite per Widget > Quelltext einfügen.

Quellcode markieren & kopieren

Jetzt könnt ihr wenn gewollt die Hauptnavigation auf die Container verlinken. Erstellt eine neue Hauptseite, gebt ihr einen Namen und unter dem Punkt "Umleitung" verlinkt ihr den ersten Artikel des gewünschten Containers.
Je nach dem wie viel Inhalt ihr in einem Container habt muss eventuell der CSS-Code angepasst werden.

OnePage

CSS-Code

Script

NEUE BEITRÄGE