In diesem Teil setzen wir für unseren vorher angelegten Pfeil den Anker und für unser Menü unseren ersten Navigationspunkt.

Ergebnis nach diesem Blog #1

Elementor Anchor Menu

Bei dem nächsten Abschnitt stellen wir die Horizontale Ausrichtung auf Center und machen ein Margin-Top auf 30. Da unser Menü fixed ist, würde es sonst von der Position nach dem Scroll down nicht passen.

In dem Abschnitt fügen wir noch die Widgets Menü-Anker, Überschrift, Text-Editor und noch einen Menü-Anker hinzu.

Die Überschrift sollte in H2 formatiert sein da wir bereits oben eine H1 Überschrift haben. Im Anker geben wir als ID service an. Mit der ID weiß nun unser Pfeil, an welche Stelle gesprungen werden muss.

Im Text-Editor wird die Ausrichtung auf center gestellt und der zweite Anker bekommt den Link webentwicklung. Zurück im Dashboard in den Menüeinstellungen und individuelle Links vergeben wir https://domain/#webentwicklung als URL und noch den Link-Text Web.

Ein Abschnitt im Abschnitt

Die Struktur in diesem Abschnitt wird am Ende so aussehen:

CSS Code develop-block

.develop-block >.elementor-widget-container {
min-height: 300px;
max-width: 260px;
}

Je nach Inhalt der Box muss die Größe angepasst werden.

Ist der Innere Abschnitt in der linken Spalte fertig gestyled, kann man mit rechter Maustaste den Abschnitt duplizieren.

Rahmen hinter Überschrift

Für den Rahmen brauchen wir wieder eigenes CSS. Hier muss der Rahmen VOR dem Inhalt erstellt werden.

web:before {
content: ''; 
display: table; 
width: 300px; 
height: 200px; 
position: absolute; 
border: 8px solid rgba(243,243,243,0.18); 
left: 10%; 
top: -26%;
}

Im nächsten Abschnitt erstellen wir Blöcke, die beim Überfahren der Maus eine Animation machen und wir werden Inhalte aus diesem Blog in anderer Weise erneut umsetzen.

Leider bietet Elementor in der Free Variante keine Blöcke mit Hover Effekten an. Daher werden wir uns die Blöcke mit dem Text-Editor und Custom CSS selber erstellen.
Anschließend erstellen wir einen Abschnitt der auf der Basis des vorherigen Blockes aufbaut.

Ergebnis nach diesem Blog #2

Ergebnis nach diesem Blog #3

Verwendete Widgets und Abschnitte

Wie bei den anderen Abschnitten müssen wir auch hier wieder beachten, dass die Anker weiter oben platziert werden. Unser Menü ist fixed und würde ansonsten den Einstiegspunkt des Links verdecken.

Den ersten Abschnitt stellen wir auf Boxed und die Horizontale Ausrichtung der Spalte auf Center. Die ID vom Anker ist projektablauf, Überschrift auf H2 mit einem Margin Top von 50.
Im Text-Editor setzen wir die Ausrichtung auf Center. Für abgerundete Ecken setzen wir beim Rahmen den Eckenradius auf 6px.

CUSTOM PART # Hover Effect

In CSS erstellen wir nun den Effekt, dass sich beim Mouse Hover die Schriftfarbe ändert und sich der Textblock vergrößert. Damit das ganze Animiert ist, nutzen wir noch eine Transition.

.custom-card {
transform: scale(1);
transition: transform 0.6s ease-in-out;
max-width: 320px;
}
.custom-card:hover{
transform: scale(1.1);
color: #ffffff !important;
}
.custom-card:hover h3 {
color: #ffffff !important;
}
.custom-card >.elementor-widget-container {
min-height: 350px;
}

Auch hier gilt wieder, je nach Inhaltsgröße muss min-height angepasst werden.

Wie im vorherigen Abschnitt für Software erstellen wir wieder einen Abschnitt mit den selben Einstellungen.

Im nächsten Blog werden wir eine kleine Galerie, ein Formular zum versenden von Nachrichten und den Footer erstellen mit einem WhatsApp Button der direkt Die WhatsApp Seite mit der hinterlegten Telefonnummer öffnet.