Leitfaden für Website-Assets
Anmerkungen
Führen Sie die Schritte 1-7 der Reihe nach aus, um ein Thema nach Ihren Wünschen zu gestalten.
Stellen Sie sicher, dass Hello Elementor als aktives Theme eingestellt ist.
Sie müssen die Standardfarben und -schriftarten von Elementor deaktivieren. Schauen Sie im Admin Dashboard unter Elementor - Einstellungen - Allgemein und stellen Sie sicher, dass beide Standardfarben deaktivieren und Standard-Schriftarten deaktivieren sind beide Geprüft, und klicken Sie dann auf Änderungen speichern. Durch die Deaktivierung wird auch verhindert, dass eine überflüssige CSS-Datei auf dem Frontend geladen wird.
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Layout ]. Unter Layout-Einstellungen finden Sie die Option für das Standard-Seitenlayout und stellen diese auf Elementor Full Width. Sobald Sie fertig sind, klicken Sie auf unten links.
1. Logo der Website
2. Website-Favicon
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Website-Identität ]. Klicken Sie unter "Website-Favicon" auf [ ] und laden Sie das bereitgestellte Favicon hoch. Sobald Sie fertig sind, klicken Sie auf unten links und aktualisieren Sie dann die Seite. Das Favicon sollte nun in der Browser-Registerkarte angezeigt werden.
3. Globale Farben
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Globale Farben ]. Klicken Sie auf die Farbfelder rechts neben den HEX-Farbcodes, um den Farbwähler aufzurufen. Hier können Sie den HEX-Code oder die Transparenz bearbeiten. Sie können auch auf die Namen wie "Standard 3" klicken, um sie umzubenennen. Stellen Sie sicher, dass Sie alle nicht benötigten benutzerdefinierten Farben entfernen. Sobald Sie fertig sind, klicken Sie auf unten links. (Die Kästchen unten zeigen alle Änderungen in Echtzeit an, mit Ausnahme der Namen. Sie können auf jedes Kästchen klicken und es korrekt beschriften, wenn Sie möchten. Wenn nicht alle benutzerdefinierten Farben verwendet werden, brauchen Sie die Kästchen unten nicht zu entfernen).
Voreinstellung 1
Voreinstellung 2
Voreinstellung 3
Voreinstellung 4
Benutzerdefiniert 1
Zoll 2
Benutzerdefiniert 3
Benutzerdefiniert 4
Benutzerdefiniert 5
Benutzerdefiniert 6
Benutzerdefiniert 7
Benutzerdefiniert 8
4. Hintergrund
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Hintergrund ], um Änderungen vorzunehmen. Die Änderungen werden auf dieser Seite in Echtzeit angezeigt. Sobald Sie fertig sind, klicken Sie auf unten links.
5. Typografie (Standard)
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Typografie ], um Änderungen vorzunehmen. Die Änderungen werden auf dieser Seite in Echtzeit angezeigt. Sobald Sie fertig sind, klicken Sie auf unten links. (Nicht alle Überschriften müssen eingestellt werden und können als Standard belassen werden. Wenn Sie die Link-Stile anpassen, sollten Sie sich bewusst sein, dass dies Menüs, Schaltflächen und andere Elemente durcheinander bringen kann. Stellen Sie sicher, dass Sie die Farben für Links in allen betroffenen Widgets nach Bedarf einstellen. Normalerweise ändere ich nur die Linkfarbe pro Spalte beim Erstellen, indem ich die Spalte auswähle und sie auf der Registerkarte Stil einstelle).
H1 Überschrift
H2 Überschrift
H3 Überschrift
H4 Überschrift
H5 Überschrift
H6 Überschrift
Link Farbe und Typ im Text gefunden.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
5.1 Typografie (Alt oder Dark BG)
Falls erforderlich, verwenden Sie nach der Anpassung der Typografie-Einstellungen das HTML-Widget unten, um ALT-Klassen zu erstellen. Speichern Sie die Stile im benutzerdefinierten Elementor-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 "Advanced - Class of widgets" hinzufügen, wenn Sie Seiten und Vorlagen erstellen.
H1 Überschrift
H2 Überschrift
H3 Überschrift
H4 Überschrift
H5 Überschrift
H6 Überschrift
Link alt Farbe und Typ im Text gefunden.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
6. Taste (Standard)
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Schaltflächen ] können Sie Änderungen vornehmen. Die Änderungen werden auf dieser Seite in Echtzeit angezeigt. Sobald Sie fertig sind, klicken Sie auf unten links.
6.1 Schaltfläche (Alt oder Dark BG)
Falls erforderlich, verwenden Sie nach der Anpassung der Button-Einstellungen das HTML-Widget unten, um ALT-Klassen zu erstellen. Speichern Sie die Styles im Elementor Custom Code unter dem Namen "Custom Styles" in der Zeile /*Custom Button Styles*/. Stellen Sie sicher, dass Sie "alt-btn" zu jedem Button-Widget unter "Advanced - Class" hinzufügen, wenn Sie Seiten und Templates erstellen. Dies funktioniert mit jedem Elementor-Widget, das eine Schaltfläche hat, wie zum Beispiel das Formular-Widget.
7. Formularfelder
Klicken Sie auf [ ] oben links und dann [ Website-Einstellungen ], [ Formularfelder ]. Die Änderungen werden auf dieser Seite in Echtzeit angezeigt. Sobald Sie fertig sind, klicken Sie auf auf der linken Seite unten. (Bitte beachten Sie, dass einige Einstellungen nur pro Formular im Formular-Widget selbst geändert werden können).