Elementor Tutorial #3<br>#CSS Styling – Hover Effekte

Elementor Tutorial #3
#CSS Styling – Hover Effekte

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

CSS Styling

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:

Einstellungen Abschnitt Eins

  • Inhaltsbreite Boxes 1200px
  • Höhe auf An Bildschirm angepasst
  • Spaltenposition auf Mitte
  • Für den Hintergrund ein Bild einsetzen
  • Position Mitte Mitte
  • Anhang Fixed
  • Repeat No-Repeat
  • Größe Cover

Einstellung linke Spalte

  • Spaltenbreite 45%
  • Widget Überschrift H2 einfügen
  • Dem Widget Margin-Oben 20 geben
  • Dem Widget Padding-Oben 20 geben
  • CSS ID web

Einstellung rechte Spalte

  • Spaltenbreite 55%
  • Hintergrund Farbe 1: #5D6FD3
  • Hintergrund Farbe 2: rgba(0, 0, 81, 0.71)
  • Margin-Rechts 40
  • Inneren Abschnitt der Spalte hinzufügen
  • Inhaltsbreite auf Boxed
  • Spaltenabstand Keine Lücke
  • Struktur 50 / 50
  • Padding 15
  • Beiden Spalten Icon-Box Widget hinzufügen

Einstellung Icon Box

  • Icon Ausrichtung Oben
  • Titel HTML Tag H3
  • Stil Inhalt Ausrichtung Links
  • Vertikale Ausrichtung Oben
  • Erweitert Margin Rechts / Links 30
  • Padding Unten 30
  • CSS Klasse develop-block
  • Rahmen Breite Unten auf 1

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.

Einstellungen Abschnitt #3

  • Inhaltsbreite Boxes 1200px
  • Höhe auf An Bildschirm angepasst
  • Spaltenposition auf Mitte
  • Für den Hintergrund ein Bild einsetzen
  • Position Mitte Mitte
  • Anhang Fixed
  • Repeat No-Repeat
  • Größe Cover

Einstellung linke Spalte

  • Spaltenbreite 45%
  • Widget Überschrift H2 einfügen
  • Dem Widget Margin-Links 20 geben
  • Dem Widget Padding-Oben 20 geben
  • CSS ID web

Einstellung rechte Spalte

  • Spaltenbreite 55%
  • Hintergrund Farbe 1: #5D6FD3
  • Hintergrund Farbe 2: rgba(0, 0, 81, 0.71)
  • Margin-Rechts 40
  • Inneren Abschnitt der Spalte hinzufügen
  • Inhaltsbreite auf Boxed
  • Spaltenabstand Keine Lücke
  • Struktur 100
  • Padding 15
  • Zwei Icon-Box Widget der Spalte hinzufügen

Einstellung Icon Box

  • Icon Ausrichtung Oben
  • Titel HTML Tag H3
  • Stil Inhalt Ausrichtung Links
  • Vertikale Ausrichtung Oben
  • Erweitert Margin Rechts / Links 70
  • Padding Unten 30
  • Rahmen Breite Unten auf 1

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.

Schreibe einen Kommentar