Im letzten Blog haben wir alle benötigten Plugins für die spätere Optimierung installiert und grundlegende Einstellungen vorgenommen. Für unsere zwei Seiten fehlt noch das Menü welches wir als nächstes anlegen. Ein Menü kann ganz klassisch aus unterschiedlichen Seiten URL’s bestehen oder aber auch aus Anker Punkten die man innerhalb einer Seite durch eine ID vergeben kann. Beide Varianten werden wir im Laufe des Tutorials nutzen. Zuerst verbinden wir unsere Home und Blog Seite mit einem Menü.

Ergebnis nach diesem Blog

Unter Design gehen wir auf Menüs, erstellen ein neues Menü und wählen anschließend auf der linken Seite unsere Blog Seite aus und fügen diese dem Menü hinzu. In den Menüeinstellungen legen wir die Position auf Allgemein und Footer fest.

Die restlichen Links erstellen wir über die Individuellen Links um unsere Ankerpunkte anzugeben.

Seite Home mit Elementor bearbeiten

Unter Seiten Alle Seiten gehen wir mit der Maus über die Home Seite und wählen Mit Elementor bearbeiten aus.

Über das Plus erstellen wir einen neuen Abschnitt. Dieser Abschnitt soll ein Bild als Fullscreen darstellen. Für die Struktur wird nur eine Spalte erstellt.

Über das Elementor Dashboard ziehen wir uns eine Überschrift in die Mitte. Pro Seite benötigen wir eine H1 Überschrift und die restlichen Überschriften in den Abschnitten werden als H2 oder kleiner formatiert. Innerhalb eines Abschnittes sollte eine H3 Überschrift auch nicht über einer H2 Überschrift stehen. Das hat einfach nur SEO technische Hintergründe.

Hier ein Beispiel dafür, wenn eine Überschrift über mehrere Zeilen gehen soll.

Webseiten & <br> Entwicklung

CUSTOM PART # Scroll Down Arrow

Der Pfeil soll dem User anzeigen, dass er für weitere Informationen auf den Pfeil klicken oder von selbst nach unten scrollen soll. Dazu kommt eine kleine Animation die den Pfeil hoch und runter bewegt.

In dem nächsten Abschnitt wird ein HTML Block gezogen. In den Block kopieren wir folgendes:
<a href=“#services“><img src=“Pfad zur Datei“></a>

Die Datei stelle ich HIER zur Verfügung. Da der Hintergrund und der PFeil weiß sind, könnt ihr den Pfeil wahrscheinlich nicht im Browser sehen. Mit der rechten Maustaste könnt ihr das Bild speichern.

Wenn ihr den Pfad zur Datei nicht wisst, geht im WordPress Dashboard auf Medien Medienübersicht und klickt auf das Bild. Unter der Information Link kopieren steht der Pfad des Bildes.

https://www.meine-homepage.de/wp-content/uploads/2020/04/arrow-down.svg

Da die angelegte Seite ja bereits unter der Domain läuft, benötigen wir nur diesen Teil des Pfades:
wp-content/uploads/2020/04/arrow-down.svg

Der HTML Block sieht dann so aus:

Um den Block zu stylen, müssen wir unter Erweitert CSS ID noch eine ID „header-scroll-down“ vergeben. Für das Stylen gehen wir nach dem Speichern wieder zurück ins WordPress Dashboard auf Design Customizer Zusätzliches CSS und dort tragen wir folgendes ein.

header-scroll-down {
width: 100%; min-height: 30px; text-align: center; padding-
header-scroll-down {
width: 100%; min-height: 30px; text-align: center; padding-top: 10px; padding-bottom: 75px; margin: 0 auto; position: absolute; z-index: 3; right: 0; bottom: 0; left: 0;
}
header-scroll-down img {
height: 65px; transition: all 0.8s ease-in-out; -webkit-animation: scrollDown 1s infinite alternate; animation: scrollDown 1s infinite alternate;
}
@keyframes scrollDown{
0% {
transform: translateX(0%);
}
100% {
transform: translateY(-30%);
}
}

Nach dem veröffentlichen sollte sich der Pfeil nun langsam hoch und runter bewegen und der erste Abschnitt der Seite ist fertig. Allerdings hat der Pfeil noch kein Ziel und das gehen wir als nächstes an.

CUSTOM PART # Fixed Menu

Leider ist es in den Optionen nicht möglich, das Menü so einzustellen, dass dieses beim Scrollen mitscrollt. Um das zu ändern, müssen wir die CSS Klasse vom Menü abändern.

#site-header {
position: fixed !important;
}

Der Code wird auch wieder ins zusätzliche CSS kopiert und anschließend veröffentlicht. Durch die Positionierung auf fixed, wird die eingestellte Höhe vom Menü nicht mehr bei den Abschnitten berücksichtigt. Daher müssen wir später bei unserer Blog Seite hier noch Anpassungen machen. Da wir auf der Startseite den ersten Abschnitt in kompletter Höhe des Bildschirms eingestellt haben, müssen wir an der Stelle keine Änderungen vornehmen.

Mobile Anpassungen

.custom-section {
min-height: 100vh;
vertical-align: middle;
align-content: center;
display: flex;
}

Wird wieder ins zusätzliche CSS kopiert.

Weiter geht es dann mit dem nächsten Abschnitt.