Einstellungen

Seitenressourcen-Leitfaden

Notizen

Befolgen Sie die Schritte 1–7 in der richtigen Reihenfolge, um ein Design zu erstellen, das Ihren Bedürfnissen entspricht.

Stellen Sie sicher, dass Hello Elementor als aktives Theme festgelegt ist.

Sie müssen die Standardfarben und -schriftarten von Elementor deaktivieren. Suchen Sie im Admin-Dashboard unter Elementor – Einstellungen – Allgemein und stellen Sie sicher, dass beide Standardfarben deaktivieren und Standard-Schriftarten deaktivieren sind beide Überprüft, Klicken Sie dann auf Änderungen speichern. Wenn Sie diese deaktivieren, wird auch verhindert, dass eine redundante CSS-Datei im Frontend geladen wird.

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Layout ]. Unter Layout-Einstellungen finden Sie die Option für Standard-Seitenlayout und setzen Sie es auf Elementor Full Width. Sobald abgeschlossen, klicken Sie auf unten links.

1. Seitenlogo

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Seitenidentität. Klicken Sie unter “Seitenlogo” auf [ ] und laden Sie das bereitgestellte Firmenlogo hoch. Klicken Sie anschließend auf unten links und dann klicken ZURÜCK ZUM EDITOR ] im Popup oder klicken Sie auf das [ ] in der oberen rechten Ecke der Website-Einstellungen. Das Bild unten sollte nun automatisch das Website-Logo anzeigen.

2. Website-Favicon

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Seitenidentität ]. Unter “Seiten-Favicon” klicken Sie auf [ ] und laden Sie das bereitgestellte Favicon hoch. Sobald Sie fertig sind, klicken Sie unten links und dann aktualisieren Sie die Seite. Das Favicon sollte nun im Browser-Tab angezeigt werden.

3. Globale Farben

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Globale Farben. Klicken Sie auf die Farbfelder rechts neben den HEX-Farbcodes, um den Farbwähler aufzurufen. Hier können Sie den HEX-Code und/oder die Transparenz bearbeiten. Sie können auch auf die Namen wie “Standard 3” klicken, um sie umzubenennen. Stellen Sie sicher, dass alle nicht benötigten benutzerdefinierten Farben entfernt werden. Sobald abgeschlossen klicken unten links. (Die folgenden Felder zeigen alle Änderungen in Echtzeit an, außer den Namen. Sie können auf jedes Feld klicken und es, falls gewünscht, korrekt beschriften. Es ist nicht notwendig, Felder zu entfernen, falls nicht alle benutzerdefinierten Farben verwendet werden.)

Standard 1

Standard 2

Standard 3

Standard 4

Benutzerdefiniert 1

Benutzerdefiniert 2

Benutzerdefiniert 3

Benutzerdefiniert 4

Kundenspezifisch 5

Benutzerdefiniert 6

Benutzerdefiniert 7

Benutzerdefiniert 8

4. Hintergrund

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Hintergrund ] um Änderungen vorzunehmen. Änderungen werden in Echtzeit auf dieser Seite angezeigt. Wenn Sie fertig sind, klicken Sie auf unten links.

5. Typografie (Standard)

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Typografie ] um Änderungen vorzunehmen. Wenn Sie Änderungen vornehmen, werden diese in Echtzeit auf dieser Seite angezeigt. Wenn Sie fertig sind, klicken Sie auf unten links. (Nicht alle Überschriften müssen festgelegt werden und können auf Standard belassen werden. Wenn Sie die Linkstile anpassen, beachten Sie, dass dies Menüs, Schaltflächen und mehr beeinträchtigen kann. Stellen Sie sicher, dass Sie die Farben für Links in jedem betroffenen Widget nach Bedarf einstellen. Normalerweise ändere ich die Linkfarbe pro Spalte beim Erstellen, indem ich die Spalte auswähle und sie im Reiter "Stil" festlege.)

H1 Überschrift

H2 Überschrift

H3 Überschrift

Überschrift H4

H5 Überschrift
H6 Überschrift

Verknüpfung Farbe und Art gefunden innerhalb des Textes.

Lorem ipsum Dolor Sitz am, consectetur Adipiscing Elit. Ut Elit Tellus, Luctus Nec ullamcorper Mattis, Pulvinar Dapibus Leo. Lorem ipsum Dolor Sitz am, consectetur Adipiscing Elit.

Wie Elfenbein, die sie auf der Haut tragen, die sie anziehen, um sich anzuziehen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Wie Elfenbein, die sie auf der Haut tragen, die sie anziehen, um sich anzuziehen.

5.1 Typografie (Alt oder Dunkler Hintergrund)

Falls erforderlich; nachdem die Typografieeinstellungen angepasst wurden, verwenden Sie das untenstehende HTML-Widget, um alle ALT-Klassen zu erstellen. Speichern Sie die Stile im Elementor Custom Code mit dem Namen “Custom Styles” unter der Zeile /*Custom Typography Styles*/. Stellen Sie sicher, dass Sie “alt-h1”, “alt-p” usw. für jedes Widget unter Erweitert – Klasse von Widgets hinzufügen, während Sie Seiten und Vorlagen erstellen.

H1 Überschrift

H2 Überschrift

H3 Überschrift

Überschrift H4

H5 Überschrift
H6 Überschrift

Verknüpfung alt Farbe und Art gefunden innerhalb des Textes.

Lorem ipsum Dolor Sitz am, consectetur Adipiscing Elit. Ut Elit Tellus, Luctus Nec ullamcorper Mattis, Pulvinar Dapibus Leo. Lorem ipsum Dolor Sitz am, consectetur Adipiscing Elit.

Wie Elfenbein, die sie auf der Haut tragen, die sie anziehen, um sich anzuziehen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Wie Elfenbein, die sie auf der Haut tragen, die sie anziehen, um sich anzuziehen.

6. Knopf (Standard)

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Buttons, um Änderungen vorzunehmen. Änderungen werden in Echtzeit auf dieser Seite angezeigt. Klicken Sie nach Abschluss auf unten links.

6.1 Schaltfläche (Alt oder Dunkler HG)

Falls nötig; nachdem Sie die Schaltflächeneinstellungen angepasst haben, verwenden Sie das unten stehende HTML-Widget, um beliebige ALT-Klassen zu erstellen. Speichern Sie die Stile im Elementor Custom Code mit dem Namen “Custom Styles” unterhalb der Zeile /*Custom Button Styles*/. Stellen Sie sicher, dass Sie “alt-btn” zu jedem Schaltflächen-Widget unter Erweitert – Klasse hinzufügen, wenn Sie Seiten und Vorlagen erstellen. Dies funktioniert mit jedem Elementor-Widget, das eine Schaltfläche hat, wie z. B. dem Formular-Widget.

7. Formularfelder

Klicke auf [ ] oben links und dann [ Seiteneinstellungen ], [ Formularfelder. Änderungen werden in Echtzeit auf dieser Seite angezeigt. Klicken Sie nach Abschluss auf unten links. (Bitte beachten Sie, dass einige Einstellungen nur pro Formular im Formular-Widget selbst geändert werden können.)