Last Updated on 11/10/2021 by MTE Leben
In diesem Tutorial erfahren Sie, wie Sie vorgefertigte Kopf-/Fußzeilen an Ihre Bedürfnisse anpassen.
So passen Sie ein Logo an
Jedes Widget im Abschnitt kann individuell angepasst werden. Bewegen Sie den Mauszeiger über ein Widget (wir haben mit dem Site-Logo begonnen) und klicken Sie auf das Symbol Widget bearbeiten.
Wählen Sie den Logotyp aus, entweder Text, Bild oder Text und Bild.
Wenn Sie Text-Logo-Typ auswählen, sehen Sie eine neue Option – Logo-Text von, wo Ihnen angeboten wird, entweder Ihren Site-Namen zu verwenden oder einen benutzerdefinierten Text anzugeben und ihn in das Feld unten.
Wählen Sie Bild, um zusätzliche Optionen anzuzeigen: Logo-Bild und Retina-Logoname. Hier können Sie Bilder hochladen und einstellen, die in Ihrer Kopf-/Fußzeile angezeigt werden sollen.
Im Einstellungsblock können Sie auswählen, ob das Logo mit Ihrer Site verknüpft werden soll oder nicht. Außerdem können Sie den Link auf der Startseite entfernen.
Navigieren Sie zur Registerkarte Stil, um den Textteil Ihres Logo. Hier können Sie die Optionen Logoausrichtung, Farbe und Typografie auswählen. Im Screenshot unten sehen Sie die von uns ausgewählten Einstellungen.
Hier ist, was wir haben.
So passen Sie ein Menü an
Fahren wir mit der Anpassung des Navigationsmenü-Widgets fort.
Auf der Registerkarte Inhalt sehen Sie einen Menüblock mit mehreren Optionen zur Anpassung. Hier können Sie Menü für Ihre Kopf-/Fußzeile auswählen, Dropdown-Symbol aus der Liste auswählen, die Menüausrichtung festlegen und den mobilen Auslöser aktivieren oder deaktivieren.
Um die Wirkung der Option Mobile Trigger zu sehen, müssen Sie im unteren Bereich von Elementor auf der linken Seite den Mobile-Vorschaumodus auswählen.
Auf der rechten Seite sehen Sie einen Bildschirm, der ein mobiles imitiert. Mobile Trigger verwandelt das Navigationsmenü in ein Hamburger-Menü, das nach unten rollt und eine Liste von Menüpunkten anzeigt.
Lass uns dieses Menü aufpeppen! Wechseln Sie zum Stilblock, um alle verfügbaren Stileinstellungen anzuzeigen. Im folgenden Block finden Sie ein Beispiel für die Gestaltung eines Menüs.
Klicken Sie im Block Elemente der obersten Ebene auf die Schaltfläche Normal, um die Farben der Menüelemente festzulegen. Legen Sie die Hintergrundfarbe mit dem Farbauswahlwerkzeug fest (wir haben rgba (45,190,226,0,37) eingestellt. Stellen Sie auch die Textfarbe ein (wir haben die HEX-Farbe #4054b2 verwendet).
Ändern Sie die Typografieeinstellungen bis zu Für dieses Tutorial haben wir die folgenden verwendet:
Setzen Sie Ihre Paddings und Margins bei Bedarf.
Wenn Sie einen Rahmen hinzufügen möchten zu Ihren Menüschaltflächen, wählen Sie Randtyp aus der Dropdown-Liste. Wir setzen den Randtyp auf 1 px und wählen seine Farbe (#6ec1e4). Geben Sie den Randradiuswert in den Randradius-Block ein, um die Menüwinkel abgerundeter zu machen (in unserem Beispiel: 7Pixel.
Die nächste Option hilft Ihnen, die Größe des Dropdown-Symbols und die Lücke vor dem Dropdown-Symbol zu ändern. Unsere Einstellungen sind entsprechend 19 und 4.
Die Einstellungen im Hover- und Aktiv-Modus für Top-Level-Gegenstände sind ähnlich wie im Normal-Modus. Sie können sie also stylen.
Hier ist, was wir in dieser Phase haben.
So passen Sie das Erscheinungsbild von Dropdown-Menüelementen an
Lassen Sie uns nun Dropdown-Menüelemente gestalten. Hier können Sie einstellen Rahmentyp und wählen Sie ihn aus der Liste aus (in unserem Tutorial haben wir den Solid-Typ verwendet). Legen Sie außerdem die Breite (z. B. 1px) und Farbe (#0fa3e2) fest.
Sie können Box Shadow zu Ihren Dropdown-Menüelementen hinzufügen. Verschieben Sie einfach die folgenden Schieberegler oder geben Sie in den Feldern rechts eine Zahl ein.
Als nächstes ändern wir den Wert von Gap Before 1st und 2nd Level Sub. Sie können auch einen Randradius festlegen, wenn Sie in den vorherigen Schritten einen Rand hinzugefügt haben.
Lass uns Dropdown-Menüelemente gestalten. Navigieren Sie zum Block Artikelstile. Hier können Sie auch Einstellungen in drei Modi ändern: Normal, Hover und Aktiv. In diesem Tutorial haben wir Hintergrundfarbe (rgba(110,193,228,0.46)), Textfarbe (#213c5e) eingestellt und den Padding-Wert auf 8 px geändert.
In diesem Block ändern wir auch die Typografieeinstellungen auf die gleiche Weise wie in Schritt 12.
Die nächsten Einstellungen, die Sie ändern können, sind Dropdown-Symbolgröße und Lücke Vor dem Dropdown-Symbol. Wir haben 11px und 2 px entsprechend eingestellt.
Passen Sie Ihren Teiler an, indem Sie Rahmentyp auswählen, wenn Sie Ihrem Menü mehr Stil hinzufügen möchten.
Das haben wir nach der Anpassung.
Navigieren wir zum Mobile Trigger-Block, um das Hamburger-Menü bei der Anzeige im mobilen Modus zu gestalten. Es gibt Normal- und Hover-Modi mit Einstellungen zur Anpassung.
So sieht unsere Hamburgerkarte nach dem Styling aus.
So passen Sie das Erscheinungsbild der Schaltflächen an
Das nächste Widget, das wir anpassen werden, ist die Schaltfläche. Klicken Sie auf das Symbol Widget bearbeiten und navigieren Sie zum Inhaltsblock. Hier sehen Sie zwei Modi: Normal und Hover mit identischen Einstellungen, die Sie ändern können.
Navigieren Sie als Nächstes zum Einstellungsblock, um den Hover-Effekt, die Symbolverwendung und die Symbolposition auszuwählen.
Es ist Zeit, das Button-Widget zu stylen! Navigieren Sie zur Registerkarte Stil und finden Sie vier Blöcke, von denen jeder Anpassungseinstellungen enthält.
Der allgemeine Block ermöglicht die Einstellung der benutzerdefinierten Symbolgröße, die Auswahl der benutzerdefinierten Breite und Höhe, die Auswahl des Ausrichtungstyps und die Änderung der Ränder bei Bedarf.
Die Einstellung für den Hintergrundtyp hat zwei Optionen: Klassisch und Verlauf.
Im klassischen Modus können Sie entweder Farbe auswählen (wir haben rgba (110.193.228.0.49) verwendet) oder ein Bild aus Ihrer Medienbibliothek einfügen.
Im Verlaufsmodus können Sie zwei Farben auswählen, um einen Verlauf zu erstellen, deren Position, Typ und Winkel festlegen.
Die nächsten Einstellungen, die Sie sehen können, sind: Randtyp, Breite, Farbe, Randradius, Padding und Box Shadow – sie alle werden auf die gleiche Weise wie in den vorherigen Schritten eingestellt.
Ebenen- und Symbolblöcke ermöglichen es, die Ebene und das Symbol der Schaltfläche mit den gleichen Einstellungen wie in den vorherigen Schritten entsprechend anzupassen.
Der Etikettenblock enthält Einstellungen für die Textanpassung der Schaltfläche.
So sieht unser Button nach dem Styling aus!
Wir haben alle Anpassungseinstellungen erfolgreich behandelt, und jetzt können Sie Ihre eigenen Kopf- und Fußzeilen erstellen!
