17 zeitsparende CSS-Tipps für WordPress-Benutzer

Veröffentlicht: 2023-03-13

WordPress bietet endlose Möglichkeiten zum Entwerfen und Anpassen Ihrer Website. In diesem Artikel geben wir einige praktische CSS-Tipps speziell für WordPress-Benutzer, von der Gestaltung Ihres Headers bis zur Optimierung Ihrer Schriftarten.

Während WordPress viele vorgefertigte Themes und Vorlagen bietet, müssen Sie manchmal die Dinge selbst in die Hand nehmen und Anpassungen mit CSS vornehmen.

Wenn Sie bei der Arbeit an Ihrer WordPress-Site jemals eine dieser Fragen gestellt haben:

„Wie entferne ich die Schaltfläche „Weiterlesen“?“
„Wie kann ich die Farbe dieses Links ändern?“
„Wie kann ich diesen Link nicht anklickbar machen, aber den Text auf der Seite behalten?“

…dann lesen Sie weiter, um einige wertvolle CSS-Tricks für Ihre Website zu erfahren.

In diesem Tutorial behandeln wir Folgendes:

WordPress-CSS-Tipps
1. Zentrieren Sie ein Element horizontal und vertikal
2. Ändern Sie die Linkfarbe
3. Entfernen Sie einen Link
4. Deaktivieren Sie einen Link (der Link bleibt sichtbar, aber Benutzer können nicht darauf klicken)
5. Ändern Sie die Farbe der Links beim Hover
6. Stillinks
7. Gestalten Sie eine Schaltfläche
8. Ändern Sie die Schriftart eines Abschnitts
9. Erstellen Sie einen Sticky-Header
10. Erstellen Sie einen Sticky-Header mit Schatteneffekt
11. Fügen Sie einem Abschnitt eine Hintergrundfarbe hinzu
12. Ändern Sie die Hintergrundfarbe des Körpers
13. Ändern Sie die Farbe eines bestimmten Wortes oder einer bestimmten Phrase
14. Erstellen Sie einen Rahmen um ein Bild
15. Erstellen Sie einen Hover-Effekt auf einem Bild
16. Gestalten Sie ein Formular
17. Erstellen Sie ein responsives Layout
Bringen Sie Ihre CSS-Kenntnisse auf die nächste Stufe

WordPress-CSS-Tipps

Die einzigen zwei Dinge, die Sie wissen müssen, um diese Tipps umzusetzen, sind:

Wie CSS funktioniert
So fügen Sie CSS zu WordPress hinzu

Hinweis: CSS ist nicht riskant. Wenn Sie also einen Fehler machen, können Sie Ihren Code einfach löschen oder ändern. Es wird nichts kaputt machen :)

Nachdem das erledigt ist, beginnen wir gleich mit einigen praktischen CSS-Tipps mit Beispielen, damit Sie es auf Ihrer eigenen WordPress-Site ausprobieren können:

Zentrieren Sie ein Element horizontal und vertikal

Um ein Element (z. B. ein Bild, einen Text oder ein Div) sowohl horizontal als auch vertikal zu zentrieren, verwenden Sie den folgenden CSS-Code:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

In diesem Code wird die Eigenschaft position: relative verwendet, um das Element relativ zu seinem nächstgelegenen positionierten Vorgänger zu positionieren. Die Eigenschaften top: 50% und left: 50% verschieben das Element in die Mitte seines Containers. Schließlich zentriert die Eigenschaft transform: translate(-50%, -50%) das Element sowohl horizontal als auch vertikal, indem es es um 50 % seiner eigenen Breite und Höhe zurückbewegt.

Ändern Sie die Linkfarbe

.item-class{
color : blue;
}

Sie können Farben wie Weiß, Schwarz, Blau, Rot usw. verwenden, vielleicht möchten Sie aber auch bestimmte Farben verwenden.

In diesem Fall können Sie es so machen:

.item-class{
color : #F7F7F7;
}

Wenn Sie eine Farbpalette für Ihr Website-Design erstellen möchten, versuchen Sie es mit dem Paletton-Tool. Es ist sehr hilfreich!

Hinweis: Wenn Sie Elemente kombinieren möchten, ist das ziemlich einfach.

Angenommen, Sie möchten den Klick deaktivieren und den Link wieder schwarz anzeigen.

Sie können diesen Code verwenden:

.item-class{
pointer-events : none;
color : black;
}

Entfernen Sie einen Link

.item-class{
display : none;
}

Hinweis: Manchmal müssen Sie möglicherweise ein a nach Ihrem Kurs einfügen, damit es funktioniert, etwa so:

.item-class a{
display : none;
}

Versuchen Sie, das a hinzuzufügen oder ohne es zu experimentieren, um zu sehen, ob Ihr Code funktioniert oder nicht. Fügen Sie einfach Ihr CSS hinzu, speichern Sie es und überprüfen Sie Ihr Frontend.

Deaktivieren Sie einen Link (der Link bleibt sichtbar, aber Benutzer können nicht darauf klicken)

Hinweis: Es ist immer besser, HTML zu ändern, um dies zu erreichen. Wenn CSS jedoch einfacher oder die einzig mögliche Lösung ist, verwenden Sie diesen Code:

.item-class{
pointer-events: none;
}

Ändern Sie die Farbe der Links beim Hover

Mithilfe des folgenden CSS-Codes können Sie dafür sorgen, dass Links ihre Farbe ändern, wenn ein Benutzer mit der Maus darüber fährt:


a:hover {
color: red;
}

In diesem Code zielt der a:hover Selektor auf alle Links auf der Seite ab, über die der Benutzer gerade fährt. Die Eigenschaft color: red ändert die Farbe des Texts in Rot.

Stillinks

Um Links auf Ihrer Website zu gestalten, verwenden Sie den folgenden CSS-Code:


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

In diesem Code wird a Selektor verwendet, um alle Links auf der Seite zu formatieren. Die Eigenschaft color legt die Farbe der Links fest und die Eigenschaft text-decoration entfernt die Standardunterstreichung. Die Eigenschaft border-bottom fügt einen subtilen Unterstreichungseffekt hinzu. Die Eigenschaft transition erzeugt einen sanften Übergangseffekt, wenn der Benutzer mit der Maus über den Link fährt. Der a:hover Selektor wird verwendet, um den Link zu formatieren, wenn der Benutzer mit der Maus darüber fährt.

Gestalten Sie eine Schaltfläche

Verwenden Sie den folgenden Code, um eine Schaltfläche zu formatieren:


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

In diesem Code werden die verschiedenen Eigenschaften zum Gestalten einer Schaltfläche verwendet, darunter die Eigenschaften background-color und color für das Erscheinungsbild der Schaltfläche, die Eigenschaft padding für die Größe der Schaltfläche und die Eigenschaft „ cursor “, um den Mauszeiger zu ändern, wenn der Mauszeiger über der Schaltfläche bewegt wird.

Ändern Sie die Schriftart eines Abschnitts

Ändern Sie die Schriftart eines Abschnitts Ihrer Website mit dem folgenden CSS-Code:


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

In diesem Code legt die Eigenschaft font-family die Schriftart auf „Arial“ oder eine ähnliche serifenlose Schriftart fest, die Eigenschaft font-size legt die Schriftgröße auf 16 Pixel fest und die Eigenschaft line-height legt den Abstand zwischen Textzeilen auf 1,5 fest mal die Schriftgröße.

Erstellen Sie einen Sticky-Header

Wenn Sie eine Kopfzeile erstellen möchten, die beim Scrollen des Benutzers am oberen Rand der Seite fixiert bleibt, können Sie den folgenden CSS-Code verwenden:


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

In diesem Code fixiert die Eigenschaft position: fixed den Header oben im Ansichtsfenster und die Eigenschaft top: 0 positioniert ihn ganz oben auf der Seite. Die Eigenschaft width: 100% stellt sicher, dass sich der Header über die gesamte Breite des Ansichtsfensters erstreckt. Die background-color und color werden zum Formatieren der Kopfzeile verwendet, und die Eigenschaft z-index: 9999 stellt sicher, dass die Kopfzeile über allen anderen Elementen auf der Seite angezeigt wird.

Erstellen Sie einen Sticky-Header mit Schatteneffekt

Um einen Sticky-Header mit Schatteneffekt zu erstellen, der beim Scrollen des Benutzers am oberen Rand der Seite fixiert bleibt, verwenden Sie diesen CSS-Code:


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

In diesem Code wird die position: fixed Eigenschaft verwendet, um die Kopfzeile oben auf der Seite zu fixieren. Die Eigenschaften top: 0 und left: 0 positionieren die Kopfzeile in der oberen linken Ecke der Seite. Die Eigenschaft width: 100% legt die Breite der Kopfzeile auf die gesamte Breite der Seite fest. Die Eigenschaft background-color legt die Hintergrundfarbe der Kopfzeile fest und die Eigenschaft z-index stellt sicher, dass die Kopfzeile über anderen Elementen auf der Seite angezeigt wird. Schließlich fügt die box-shadow Eigenschaft der Kopfzeile einen subtilen Schatteneffekt hinzu. Der .content Selektor wird verwendet, um oben auf der Seite einen Abstand hinzuzufügen, damit der Inhalt nicht durch den festen Header verdeckt wird.

KOSTENLOSES EBOOK

Ihre Schritt-für-Schritt-Roadmap zu einem profitablen Webentwicklungsunternehmen. Von der Gewinnung weiterer Kunden bis zur Skalierung wie verrückt.

KOSTENLOSES EBOOK

Planen, erstellen und starten Sie Ihre nächste WP-Site problemlos. Unsere Checkliste macht den Prozess einfach und wiederholbar.

Fügen Sie einem Abschnitt eine Hintergrundfarbe hinzu

Möchten Sie einem Abschnitt Ihrer Website eine Hintergrundfarbe hinzufügen? Dann verwenden Sie den folgenden CSS-Code:


.section {
background-color: #f2f2f2;
padding: 20px;
}

In diesem Code legt die Eigenschaft background-color: #f2f2f2 die Hintergrundfarbe auf ein helles Grau fest und die Eigenschaft padding: 20px fügt 20 Pixel Platz um den Inhalt innerhalb des Abschnitts hinzu.

Ändern Sie die Hintergrundfarbe des Körpers

Fügen Sie diesen Code hinzu, um die Hintergrundfarbe des Hauptteils Ihrer Website zu ändern:


body {
background-color: #f5f5f5;
}

In diesem Code legt die Eigenschaft background-color die Hintergrundfarbe auf ein helles Grau fest.

Ändern Sie die Farbe eines bestimmten Wortes oder einer bestimmten Phrase

Um die Farbe eines bestimmten Worts oder einer bestimmten Phrase innerhalb eines Textblocks zu ändern, können Sie den folgenden CSS-Code verwenden:


p span {
color: red;
}

In diesem Code zielt der p span Selektor auf jedes span Element ab, das innerhalb eines p Elements erscheint. Anschließend können Sie das Wort oder die Phrase, auf die Sie abzielen möchten, wie folgt mit einem span Element in Ihrem HTML umschließen:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Dadurch würde der Ausdruck „consectetur adipiscing elit“ in Rot erscheinen.

Erstellen Sie einen Rahmen um ein Bild

So fügen Sie einem Bild einen Rahmen hinzu:


img {
border: 2px solid #ccc;
}

In diesem Code legt die Eigenschaft border die Breite, den Stil und die Farbe des Rahmens fest. Der Wert 2px legt die Breite des Rahmens auf 2 Pixel fest, solid legt den Stil auf eine durchgezogene Linie fest und #ccc legt die Farbe auf ein helles Grau fest.

Erstellen Sie einen Hover-Effekt auf einem Bild

Verwenden Sie diesen Codeausschnitt, um einen Hover-Effekt auf einem Bild zu erstellen:


img:hover {
opacity: 0.8;
}

In diesem Code zielt der img:hover Selektor auf das Bild ab, wenn der Benutzer mit der Maus darüber fährt. Die Eigenschaft opacity legt die Transparenz des Bildes fest. In diesem Fall ist der Wert auf 0,8 eingestellt, wodurch das Bild leicht transparent wird, wenn der Benutzer mit der Maus darüber fährt.

Gestalten Sie ein Formular

Gestalten Sie ein Formular auf Ihrer Website mit dem folgenden CSS-Code:


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

In diesem Code werden die verschiedenen Eigenschaften verwendet, um ein Formular zu formatieren, einschließlich der Eigenschaften „ background-color , padding “ und border-radius für das Gesamterscheinungsbild des Formulars. Der form label wird verwendet, um die mit jedem Formularfeld verknüpften Beschriftungen zu formatieren. Der form input[type="text"], form input[type="email"], form textarea wird verwendet, um die verschiedenen Eingabefelder im Formular zu formatieren. Der form input[type="submit"] Selektor wird zum Formatieren der Senden-Schaltfläche verwendet.

Erstellen Sie ein responsives Layout

Wenn Sie ein responsives Layout erstellen möchten, das sich an unterschiedliche Bildschirmgrößen anpasst, verwenden Sie den folgenden CSS-Code:


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

In diesem Code wird die @media Regel verwendet, um unterschiedliche Stile für unterschiedliche Bildschirmgrößen anzugeben. Die erste @media Regel zielt auf Bildschirme mit einer maximalen Breite von 768 Pixel ab, und die zweite @media Regel zielt auf Bildschirme mit einer minimalen Breite von 769 Pixel ab. Die verschiedenen Selektoren innerhalb jeder @media Regel werden verwendet, um das Layout und Erscheinungsbild der Seite basierend auf der Bildschirmgröße anzupassen.

Noch ein CSS-Tipp…

Möglicherweise funktioniert Ihr Code nicht, obwohl Sie alles richtig gemacht haben. Dies kann daran liegen, dass es bereits einen CSS-Code gibt, der etwas anderes sagt als Ihr Code.

Um dies zu überschreiben, fügen Sie einfach !important wie folgt hinzu:

.item-class{
pointer-events: none !important;
}

Dies sind nur einige Beispiele für praktische Möglichkeiten, wie Sie CSS zur Verbesserung Ihrer WordPress-Website verwenden können.

Mit CSS sind die Möglichkeiten zur individuellen Gestaltung des Erscheinungsbilds Ihrer Website nahezu unbegrenzt. Indem Sie diese Tipps lernen und anwenden, können Sie eine Website erstellen, die nicht nur optisch ansprechend ist, sondern auch für ein besseres Benutzererlebnis optimiert ist.

Bringen Sie Ihre CSS-Kenntnisse auf die nächste Stufe

Ganz gleich, ob Sie Anfänger oder erfahrener Profi-Webentwickler oder Webdesigner sind: Wenn Sie tiefer in die Verwendung von CSS mit WordPress eintauchen möchten, helfen Ihnen diese zusätzlichen CSS-Tutorials dabei, Ihr Wissen und Ihre Fähigkeiten zu erweitern:

10 einfache Tipps zum Erlernen von CSS für WordPress – Praktische Tipps für Anfänger, die CSS speziell für die Verwendung mit WordPress lernen möchten. Es deckt alles ab, vom Verständnis der CSS-Syntax bis zur Verwendung von CSS-Frameworks.
CSS für WordPress lernen und referenzieren – Eine umfassende Anleitung zum Erlernen und Referenzieren von CSS speziell für die Verwendung mit WordPress. Es behandelt Themen wie die Verwendung des WordPress Customizers, das Verständnis von CSS-Selektoren und die Arbeit mit untergeordneten Themen.
Die 7 besten Websites zum Finden von CSS-Snippets und Inspiration – Suchen Sie nach Inspiration für Ihren CSS-Code? Dieser Artikel listet sieben Websites auf, die CSS-Snippets und Beispiele anbieten, die Sie in Ihrer eigenen WordPress-Website verwenden können.
So gestalten Sie Bilder auf Ihrer WordPress-Website mit CSS – Bilder sind ein wichtiger Bestandteil jeder Website und dieser Artikel bietet Tipps, wie Sie sie mit CSS gestalten. Sie erfahren, wie Sie Rahmen hinzufügen, Bildgröße und -ausrichtung ändern und vieles mehr.
So fügen Sie benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzu – Dieser Artikel führt Sie durch den Prozess des Hinzufügens von benutzerdefiniertem CSS zu Ihrer WordPress-Website, indem Sie sowohl den integrierten Customizer als auch Plugins verwenden.
Kostenlose CSS-Plugins für die Live-Bearbeitung Ihrer WordPress-Website – In diesem Artikel werden einige kostenlose CSS-Plugins aufgeführt, mit denen Sie Ihre WordPress-Website live bearbeiten können, sodass Sie die Auswirkungen Ihrer CSS-Änderungen einfacher in Echtzeit sehen können.
14 coole CSS-Animationstools für WordPress – Wenn Sie mithilfe von CSS einige Animationen zu Ihrer WordPress-Website hinzufügen möchten, listet dieser Artikel einige coole Tools auf, die Sie dafür verwenden können.
Fügen Sie Ihrer WordPress-Website Mauerwerks- und Rasterlayouts mithilfe von CSS hinzu – In diesem Artikel wird erläutert, wie Sie mithilfe von CSS Mauerwerks- und Rasterlayouts zu Ihrer WordPress-Website hinzufügen und so ein optisch ansprechenderes Design erstellen.
25 Expertentipps für eine sauberere CSS-Codierung für WordPress – Wenn Sie die Sauberkeit und Lesbarkeit Ihres CSS-Codes verbessern möchten, bietet dieser Artikel 25 Expertentipps dafür.
25 Profi-Tipps zur Verbesserung Ihres CSS-Workflows – Tipps zur Verbesserung Ihres CSS-Workflows, von der Verwendung von CSS-Präprozessoren bis hin zur Verwendung von Browser-Entwicklertools zum Debuggen Ihres Codes.

Klicken Sie auf die Links, um mehr zu erfahren und noch heute mit der Verbesserung Ihrer WordPress-Website zu beginnen.

Mitwirkende

Weihrauch Vielen Dank an WPMU DEV-Mitglied Antoine von Incensy, der die Idee für diesen Beitrag und mehrere der oben verwendeten CSS-Beispiele beigesteuert hat. Weitere Informationen finden Sie im Agenturpartnerprofil von Incensy.

Haben wir irgendwelche raffinierten CSS-Tricks verpasst, die Sie unterwegs gelernt haben? Wir würden gerne in den Kommentaren mehr darüber erfahren!