Mobile Footer-Men├╝ in Elementor erstellen

Elementor-Mobile-Footer-Men├╝

Mobile Footer-Men├╝ in Elementor

Die gel├Ąufigste Men├╝-Darstellung auf Handys ist das folgende Symbol – meist am oberen rechten Bildschirmrand:

Mit einem Klick auf das Symbol ├Âffnet sich dann eine Auflistung der Men├╝punkte.

Heute m├Âchte ich aber mal ein ganz anderes Men├╝ vorstellen Und zwar ein Footer-Men├╝, das sich am unteren Bildschirmrand befindet. Ich nutze es auf dieser Website f├╝r Handys – solltest du also gerade mit deinem Handy diese Seite aufrufen, kannst du es schon sehen.

Das Men├╝, das ich beispielhaft anlege, wird im Ergebnis so aussehen:

F├╝r die Erstellung ben├Âtigst du die Pro-Version von Elementor (├╝ber Umwege und einem zus├Ątzlichen Plugin l├Ąsst sich das auch mit der Free-Version realisieren, darauf gehe ich vllt. sp├Ąter mal ein).

Du solltest bereits Elementor-Kenntnisse besitzen. Zur n├Ąheren Erl├Ąuterung werde ich bald noch eine Video-Anleitung hochladen.

Ansonsten kannst du mich auch gern mit der Erstellung eines solchen Menüs auf deiner Website betrauen: 

Footer-Men├╝ erstellen

Footer im Theme-Builder anlegen

Lege zun├Ąchst einen Footer im Theme-Builder an. Solltest du bereits einen angelegt haben, rufe diesen auf.

Spalten-Struktur anlegen

Lege als n├Ąchstes einen Abschnitt mit 5 Spalten an (ben├Âtigst du weniger Men├╝punkte, gehen auch weniher Spalten):

Wechsle anschlie├čend in den „Responsive Modus“ f├╝r Handys und lege f├╝r jede Spalte eine Spaltenbreite von 20 % fest (bei weniger Spalten muss die Angabe entsprechend angepasst werden: 100 / Anzahl der Spalten):

Das Ergebnis sollte so aussehen, dass alle Spalten nebeneinander dargestellt werden:

Men├╝punkte anlegen

Jetzt k├Ânnen die Spalten mit den entsprechenden Men├╝punkten bef├╝llt werden. Ich nutze daf├╝r das Elementor-Element „Icon Box“:

  1. Element in Spalte ziehen
  2. Icon ausw├Ąhlen
  3. Titel festlegen
  4. Beschreibung l├Âschen
  5. Link einf├╝gen

Um das Ganze stylisch passend zu gestalten, wechsle in den Reiter Stil und passe die Icon-Gr├Â├če und Farbe an. Und nat├╝rlich auch die Textgr├Â├če und Farbe. In meinem Beispiel verwende ich:

Icon:

  • Farbe: #565656
  • Gr├Â├če: 28
  • Abstand: 0 (= Abstand zum Text)

Titel:

  • Farbe: #565656
  • Gr├Â├če: 14
  • Schriftschnitt: 600
  • Schriftart: Montserrat
  • Ausrichtung: Center

Anschlie├čend f├╝r die anderen Spalten genauso vorgehen:

Design aufwerten

Wer m├Âchte, kann zwischen den Spalten noch eine d├╝nne Linie anlegen, daf├╝r muss f├╝r Spalte 2 bis 5 ein Rahmen (nur) auf der linken Seite mit der Farbe „#E9E9E9“ angelegt werden:

Rahmen anlegen

Das Ergebnis kann sich sehen lassen:

Jetzt noch den Box-Schatten in den Abschnittsoptionen aktivieren:

Dadurch hebt sich das Men├╝ dann auch vom Rest der Website ab:

Um den Abstand noch oben etwas zu vergr├Â├čern, sollte in den Abschnitts-Optionen „Padding“ mit „5“ bei „Oben“ eingestellt werden:

Anschlie├čend noch die Hintergrundfarbe f├╝r den Abschnitt einstellen. Ich habe wei├č (‚FFFFFF) verwendet:

Men├╝ positionieren

Es folgt einer der wichtigsten Schritte: Damit das „Mobile Menu“ dann auch dauerhaft auf dem Handy am unteren Bildschirmrand angezeigt wird, muss noch die Sticky-Option in den Abschnittsoptionen aktiviert werden:

Damit das Men├╝ auch nur f├╝r Handys angezeigt wird, stellen wir dies auch f├╝r den Abschnitt ein, indem wir es f├╝r Desktop und Tablet ausblenden:

Ergebnis

Fertig ist das Men├╝:

Damit ist die Erstellung abgeschlossen ­čÖé

Schreibe einen Kommentar

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und ├╝ber diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. F├╝r dich ver├Ąndert sich der Preis nicht.┬á

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
()
x
Newsletter abonnieren

Erhalte regelm├Ą├čig Informationen zu neuen Tipps und Tutorials.