CSS Elemente herausfinden

Namen von CSS Elementen herausfinden
Teile diesen Beitrag!

In den neuen Versionen der WordPress Software ist eine Funktion enthalten, die mein Webdesignerherz höher schlagen lässt: zusätzliches CSS.
Diese Funktion befindet sich ganz unten im Customizer und hilft dir, deine Webseite auch über die Möglichkeiten deines Themes hinaus deinen Wünschen anzupassen.

Wunderbare Sache, WENN du dich mit CSS auskennst. Dann kannst du nämlich schnell mal eine Schriftgröße, eine Farbe oder eine ganze Schrift ändern, auch wenn das in deinem Theme so nicht vorgesehen war.

Nun ist CSS allerdings kein Hexenwerk – hat man einmal den Aufbau eines CSS-Befehls verstanden, kann man damit viel Spaß haben. Als Hilfestellung kannst du z.B. auf der Seite wiki.selfhtml.org nachsehen, welche CSS Befehle es überhaupt gibt und welche Möglichkeiten der Anpassung sie bieten.

Merke: CSS Befehle sind allgemeingültig!

Beispiel: der Befehl
{font-size: 28px;}
(Schriftgröße 28 Pixel) wird auf allen Webseiten gleich ausgeführt.

Die Schwierigkeit liegt eher darin, herauszufinden, wie des jeweilige CSS Element in deinem Theme heißt, das du verändern möchtest.

Zum Verständnis hier der grundlegende Aufbau eines CSS Befehls
Selektor {Property: Wert;}
also ist das font-size von oben die Property und 28px ist der Wert – was ist aber der Selektor?

Und das ist genau das Problem. Es gibt zwar einige Selektoren, die auf allen Webseiten gleich heißen (z.B. p für normalen Text), aber manchmal ist das Element, das du ändern möchtest, eben auch sehr viel individueller benannt. Das liegt einfach an den Themeentwicklern, die das dann so festgelegt haben.

In meinem nachfolgenden Video zeige ich dir, wie du in Chrome und in Firefox einfach herausfindest, wie das CSS Element heißt, das du ändern möchtest. Sicherlich gibt es in den anderen Browsern da auch Möglichkeiten – wie immer: suchen hilft! Und der grundsätzliche Ansatz ist hier vermutlich gleich.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

PGRpdiBjbGFzcz0iYXN0LW9lbWJlZC1jb250YWluZXIiPjxpZnJhbWUgd2lkdGg9IjE0MDAiIGhlaWdodD0iNzg4IiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUtbm9jb29raWUuY29tL2VtYmVkL1FRVnlKX0t2MkxNP2ZlYXR1cmU9b2VtYmVkIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBlbmNyeXB0ZWQtbWVkaWE7IGd5cm9zY29wZTsgcGljdHVyZS1pbi1waWN0dXJlIiBhbGxvd2Z1bGxzY3JlZW4+PC9pZnJhbWU+PC9kaXY+

Firebug für Firefox

 

Teile diesen Beitrag!

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

 

Der Elementor Basics Mini-Kurs:

Was ist ärgerlicher, als beim Design der eigenen Webseite festzustellen, dass all deine tollen Ideen nicht mit deinem Wordpress Theme umsetzbar sind?

Aber halt! Dafür gibt es ja inzwischen die Wordpress Pagebuilder, mit denen das Webdesign auch für Nicht-Programmierer easypeasy geworden ist. Nur ein paar Elemente per drag-and-drop hin und her geschoben und schon hast du deine super Webseite.

OK, zugegeben, ganz so einfach ist es nun doch nicht…du brauchst vor allem einen Plan, eine Idee, sonst wirst du von den Möglichkeiten vermutlich erschlagen.

Aber!

Um überhaupt erstmal einen Eindruck von den Möglichkeiten zu bekommen, kannst du dich hier für meinen kostenlosen ELEMENTOR BASICS Mini-Kurs anmelden. Elementor ist der Pagebuilder meines Vertrauens … und vielleicht auch bald deiner.

Elementor macht das Design einer Webseite, die genau so aussieht, wie du das möchtest, super einfach! Keine Beschränkungen durch Themevorgaben mehr!

Mini Kurs Elementor Basics

In meinem ELEMENTOR BASICS Mini-Kurs zeige ich dir in vier Videolektionen an vier Tagen die Grundlagen von Elementor, damit du siehst, ob Elementor eine Option für dein Webdesign ist.

Elementor ist in der Grundversion übrigens kostenlos und funktioniert mit jedem Wordpress Theme!

Also melde dich gleich hier an!

 
 

 
 

Ja

Wenn du das Häkchen nicht setzt, bekommst du nur den ELEMENTOR BASICS Kurs, versprochen!

Newsletter

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne: 

Umekos Designletter

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand  meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Das neueste aus dem Blog:

Wordpress Pagebuilder

Bist du mit dem Theme deiner WordPress Webseite unzufrieden, möchtest aber nicht gleich wechseln? Möchtest du mehr Entscheidungsmöglichkeiten für dein Webseitendesign? Brauchst du eine andere Seitenaufteilung als von deinem Theme vorgegeben? Und möchtest du dieses alles, ohne vorher Programmieren zu lernen?

Weiterlesen
Ist Wordpress kompliziert

Immer häufiger stolpere ich im Internet über die Aussage, dass WordPress so kompliziert zu bedienen und unübersichtlich sei, dass man lieber auf Squarespace oder ähnliches ausweichen sollte. Als überzeugter WordPressnutzer wollte ich mal etwas Licht in dieses Dunkel bringen…

Weiterlesen
Newsletter

Umekos Designletter

Du möchtest noch mehr Informationen über Webdesign, Wordpress und Elementor?

Dann abonnier gerne meinen Designletter.

In meinem Designletter informiere ich dich (ungefähr) 1x im Monat über aktuelle Blogartikel, Freebies, Rabattaktionen zu meinen Kursen und dem Launch der neuen 2019er Version meines Webdesign-Kurses “Abenteuer Webseite 2.0”.

Deine Einwilligung in den Versand meines Newsletters ist jederzeit widerrufbar über einen Link am Ende jedes Newsletter oder mit einer Mail an meine E-Mail Adresse (office@umekodesign.de).

Der Versand meines Newsletters erfolgt gemäß meiner Datenschutzerklärung.

Meld dich gleich an: