Einfache CSS-Tipps für Besitzer von DIY-Websites

Einer der größten Vorteile von WordPress ist die Möglichkeit, mit wenig bis gar keinen Programmierkenntnissen eine schöne, überzeugende Website zu erstellen. Mit Hunderten von professionellen Themen und dem flexiblen Drag-and-Drop-Blockeditor ist es eine hervorragende Lösung für Eigentümer von DIY-Websites.

Aber was ist, wenn Sie noch einen Schritt weiter gehen und tiefergehende visuelle Anpassungen vornehmen möchten? CSS ist eine der schnellsten Möglichkeiten, das Erscheinungsbild Ihrer Website zu ändern.

Was ist CSS?

CSS (Cascading Style Sheets) bestimmt das Layout und die visuelle Darstellung Ihrer Website – Farben, Schriftarten, Ränder, Größen usw. Mit ein paar CSS-Grundlagen können Sie das Erscheinungsbild all Ihrer Seiten und Posts ändern oder einzelne Teile verfeinern und einmalige Änderungen vornehmen.

Die grundlegende CSS-Syntax sieht folgendermaßen aus:

Der Selektor ist das Element, das Sie gestalten möchten: eine Überschrift, ein Absatz, eine Seite, ein Bild, ein Link usw.

Die Eigenschaft ist die Kategorie, die Sie ändern möchten: z. B. Schriftfarbe, Größe, Rahmen oder Hintergrund. Sie können jedem Selektor mehrere Eigenschaften zuweisen.

Der Wert definiert die Eigenschaft: die bestimmte Farbe, bestimmte Schriftgröße, genaue Größe der Rahmenbreite usw.

Beachten Sie das Format: Eigenschaft und Wert werden durch einen Doppelpunkt getrennt und in geschweiften Klammern eingeschlossen. Auf jeden Wert folgt ein Semikolon.

In der Praxis würden Sie Folgendes verwenden, um die Farbe der Überschrift oben, bei der es sich um ein <h1>-Tag handelt, von Schwarz auf Orange zu ändern:

• Selektor: h1
• Eigenschaft: Farbe
• Wert: Orange

So wenden Sie CSS auf Ihre Website an

Wenn Sie nicht viel (oder keine) CSS-Erfahrung haben, ist das in Ordnung! Mit einem grundlegenden Verständnis der Grundlagen kann man viel erreichen. Und mit der benutzerdefinierten CSS-Funktion von Jetpack müssen Sie sich keine Gedanken darüber machen, Themendateien zu ändern oder Ihre Website zu beschädigen.

Um benutzerdefiniertes CSS zu aktivieren, navigieren Sie im Dashboard Ihrer Website zu Jetpack → Einstellungen → Schreiben . Scrollen Sie nach unten zum Abschnitt Theme-Verbesserungen und schalten Sie die Option „ CSS-Anpassungsbereich verbessern “ ein.

Um CSS hinzuzufügen, gehen Sie zu Darstellung → Anpassen → Zusätzliches CSS . Hier geben Sie das eigentliche CSS ein, das Sie hinzufügen möchten. Um zu helfen, verwendet der CSS-Editor von Jetpack Farbe, um die Unterscheidung von Selektoren, Eigenschaften und Werten zu erleichtern.

Beim Hinzufügen oder Bearbeiten von CSS können Sie vor dem Speichern eine Vorschau der Änderungen anzeigen, sodass Sie genau wissen, wie sie aussehen werden, bevor Sie sie auf Ihre Live-Website anwenden. Und Jetpack speichert die letzten 25 CSS-Revisionen, sodass Sie zu einem früheren Design zurückkehren können, wenn Ihnen Ihr neuer Look nicht gefällt. Erfahren Sie mehr über die Verwendung von benutzerdefiniertem CSS.

Fünf Möglichkeiten, Ihre Website mit CSS anzupassen

Jedes einzelne Element auf Ihrer Website hat einen Selektor, sodass Sie mit CSS fast alles ändern können. Wenn Sie lernen möchten, wie Sie Selektoren finden, ist dies ein großartiges Tutorial – aber hier sind fünf Änderungen, die Sie sofort mit dem bereits bereitgestellten CSS vornehmen können.

Typografie

Eine der häufigsten Verwendungen von CSS ist die Gestaltung Ihrer Website-Typografie oder Schriftarten. Um sowohl die Farbe als auch die Größe von Titeln (Überschrift 1, Überschrift 2 usw.) auf Ihrer Website zu ändern, verwenden Sie diesen Code und ändern Sie die Werte wie gewünscht:

Das obige Beispiel ändert nur Überschrift 1. Wenn Sie die Farbe und Schriftgröße einer anderen Überschrift wie Überschrift 3 ändern möchten, tauschen Sie den h1 -Selektor mit h3 aus und nehmen Sie die entsprechenden Anpassungen an Größe und Farbe vor:

Um die Farbe mehrerer Überschriften zu ändern, trennen Sie die Selektoren durch Kommas:

Und um alle Ihre Überschriften in Großbuchstaben zu schreiben, verwenden Sie Folgendes, um mehr Wirkung zu erzielen:

Verknüpfungen

Hyperlinks sollten sich von normalem Text abheben, damit Seitenbesucher sofort wissen, welcher Text anklickbar ist. Lassen Sie Ihre Links hervorstechen, indem Sie ihre Farbe bearbeiten und eine Unterstreichung hinzufügen:

(Sie möchten Ihre Links nicht unterstreichen? Löschen Sie einfach „text-decoration: underline;“ unten.)

Wenn Sie möchten, dass Ihr Link die Farbe ändert, wenn jemand mit der Maus darüber fährt, fügen Sie „:hover“ zum Selektor hinzu:

Listen

Wenn Sie viele Listen mit Aufzählungszeichen in Ihren Blog-Beiträgen und Seiten verwenden, versuchen Sie es mit ein wenig CSS, um sie noch mehr vom Rest Ihrer Inhalte abzuheben.

Verwenden Sie diesen Code, um das Aufzählungszeichen zu einem Kreis zu machen und die Schriftstärke, -farbe und -größe zu ändern:

Wenn Sie nur eine dieser Eigenschaften ändern möchten, schließen Sie nur die Zeile ein, die sich auf das bezieht, was Sie ändern möchten.

Möchten Sie noch mehr Optionen? CSS-Tricks.com umreißt alle Stiloptionen für Listen (wie die Verwendung von Quadraten oder Bildern für die Aufzählungszeichen) zusammen mit zusätzlichen Tipps und Abkürzungen.

Menüpunkte

Viele Themen bieten mehrere Hauptmenüoptionen, sodass Sie die für Ihre Website am besten geeignete auswählen können. Aber was ist, wenn Sie Ihren Menüstil noch weiter anpassen möchten?

Im obigen Beispiel haben wir CSS verwendet, um Menüelementen einen benutzerdefinierten grünen Hintergrund hinzuzufügen und die Textfarbe zu ändern, wenn ein Benutzer mit der Maus darüber fährt:

Sidebar-Widgets

Seitenleisten-Widgets sind eine großartige Möglichkeit, hilfreiche Inhalte zu präsentieren, sodass Sie sie möglicherweise vom Rest Ihrer Website abheben möchten. Verwenden Sie den folgenden Code, um einen Hintergrund hinter Seitenleisten-Widgets und Auffüllungen (zusätzlicher Abstand) um den Text hinzuzufügen:

Wenden Sie CSS auf bestimmte Seiten anstatt auf Ihre gesamte Website an:

Alle oben genannten CSS-Snippets gelten für die gesamte Website – sie ändern diese Elemente auf jeder Seite und an jedem einzelnen Ort, an dem sie erscheinen. Was ist, wenn Sie CSS nur auf eine bestimmte Seite oder einen bestimmten Beitrag anwenden möchten?

WordPress weist jeder Seite und jedem Post eine eindeutige ID zu, die Sie in Ihrem WordPress-Dashboard finden:

1. Navigieren Sie zu der Seite oder dem Beitrag, den Sie anpassen möchten, und klicken Sie in der schwarzen Leiste oben im Dashboard auf Seite bearbeiten .
2. Suchen Sie in der URL-Leiste etwas, das wie „?post=74“ aussieht. Die Nummer
   „74“ ändert sich jedoch, da es spezifisch für Ihre Beitrags- oder Seiten-ID ist.

Um CSS auf die bestimmte Seite oder den Beitrag anzuwenden, fügen Sie die Nummer zusammen mit „.page-id-“ zu Ihrem CSS hinzu. Um die Schriftfarbe von Kopfzeile 1 nur auf dieser Seite zu ändern, würden Sie Folgendes verwenden:

Denken Sie daran: Vorschau ist Ihr Freund!

Wenn Sie nicht viel Erfahrung mit CSS haben, könnten Sie nervös sein, wenn Sie Änderungen vornehmen, die Ihre Website durcheinander bringen könnten. Mach dir keine Sorgen! Eine Vorschau der Änderungen wird während der Bearbeitung in Echtzeit angezeigt.

Spielen Sie mit dem Code herum und nehmen Sie alle gewünschten Änderungen vor. Klicken Sie auf Speichern und veröffentlichen , wenn Sie mit dem Aussehen Ihres aktualisierten CSS zufrieden sind!

Es gibt auch eine CSS-Verlaufsfunktion, die jedes Mal aufzeichnet, wenn Sie Änderungen speichern. Das heißt, wenn Sie Ihre Meinung ändern, können Sie schnell zurückkehren. Klicken Sie dazu unten im Customizer auf Vollständigen Verlauf anzeigen. Wählen Sie das Datum und die Uhrzeit aus, zu denen Sie zurückkehren möchten, und klicken Sie auf die Schaltfläche Diese Revision wiederherstellen.

Zusätzliche CSS-Ressourcen

• Ein Hex-Code gibt die Farbe an, die Sie beim Ändern von Schriftarten oder Hintergründen verwenden möchten. Wenn Sie sich nicht sicher sind, welche Sie verwenden sollen, bieten HTML-Farbcodes eine großartige Lösung. Erkunden Sie den Farbwähler, um den perfekten Farbton zu finden, kopieren Sie dann den generierten Hex-Code und fügen Sie ihn ein.
• CSS-Tricks.com bietet CSS-Codeschnipsel mit unterschiedlichen Schwierigkeitsgraden vom Anfänger bis zum Experten. Sie können auch Tutorials, Videos und Leitfäden finden, um noch mehr zu erfahren.
• W3Schools ist eine praktische Ressource für CSS-Beispiele und exemplarische Vorgehensweisen.
• WordPress.com bietet Informationen zu CSS-Grundlagen und zur Verwendung von Medienabfragen, um CSS basierend auf bestimmten Geräten festzulegen.
• Upwork.com ist ein WordPress-Partner, der freiberufliche Spezialisten anbietet, die bei CSS-Projekten helfen können.

Beginnen Sie mit der Anpassung Ihrer WordPress-Site

Der beste Weg, grundlegendes CSS zu lernen, ist, mit dem Experimentieren anzufangen. Der gesamte oben aufgeführte Code kann an Ihre Bedürfnisse angepasst oder angepasst werden – verwenden Sie ihn als Basis und beginnen Sie dann, die Farben zu ändern, die Schriftgröße zu ändern oder andere gewünschte Änderungen vorzunehmen!

Mit dem benutzerdefinierten CSS-Editor von Jetpack können Sie dank Vorschau-Tools und Rollback-Funktionen kopfüber in die Anpassung eintauchen, ohne sich Sorgen machen zu müssen, dass Ihre Website beschädigt wird. Aktivieren Sie für zusätzlichen Schutz Jetpack Backup, das Ihre Arbeit automatisch in Echtzeit sichert und Wiederherstellungen mit einem Klick beinhaltet.

Erfahren Sie mehr über andere Jetpack-Designfunktionen und beginnen Sie mit Jetpack Custom CSS.