WordPress: Design eines Elementes oder einer Seite ändern

YouTube

Mit dem Laden des Videos akzeptierst Du die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Du möchtest ein Element einer speziellen Seite ändern? In diesem Video zeige ich Dir, wie Du herausfindest, welchen CSS-Code Du im Customizer eingeben musst, um Dein Design ein wenig anzupassen. Das ist gar nicht so schwer – probier’s einfach mal aus! In vier aufeinander aufbauenden Abschnitten erkläre ich dir, wie’s geht:

Zunächst erkläre ich Dir kurz,

  • welche »Selektoren« es in CSS gibt (ab 2:58). Keine Sorge: das klingt nur »nerdig«, ist aber eigentlich ein sehr logisches Konzept, das Du kennen solltest, wenn Du mit CSS arbeitest. Hier die Tabelle, die ich im Video zeige:

CSS-Selektoren

SelektorartBeispieleBesonderheit
HTML-Element / Tagp, h1, img, asideElementselektoren sind Teil der HTML-Spezifikation und können daher nicht selbst vergeben / benannt werden
Klasse.post, .zitatKlassen können selbst vergeben / benannt werden und dürfen beliebig oft pro HTML-Seite eingesetzt werden
ID#content, #vorlauftextIDs können selbst vergeben / benannt werden und dürfen nur ein einziges Mal pro HTML-Seite eingesetzt werden

Anschließend lernst Du,

  • wie Du den Footer und den Footer-Text auf allen Seiten umfärbst (ab 5:40)
  • wie Du den Header auf einer einzigen Seite umfärbst (ab 14:50)
  • wie Du die Überschrift eines Blogbeitrages stylst (ab 22:40)

Hier der CSS-Code, den ich im Tutorial entwickle:

/* gilt fuer alle Seiten und Beitraege */
#colophon {
 background: lightgray;
}

#colophon .site-info {
 color: white;
}

/* gilt nur fuer Blog-Seite */
.blog .site-header {
 background: lightgray;
}

/* gilt nur fuer einen bestimmten Beitrag */
.post-1031 .entry-title {
 color: lightgray;
 text-transform: uppercase;
}

Hier die erwähnten Tools, die ich neben WordPress und Firefox im Videotutorial nutze:

Hilft Dir das Video und die Infos darin? Ich freue mich über jeden Kommentar!

Porträtfoto Grafikdesigner und Webdesigner Karsten Geisler

Karsten Geisler

Grafik-/Webdesigner, InDesign-Freak, WordPress-Enthusiast, Fachbuchautor, Dozent und Software-Coach aus Köln. Hier, auf meinem Blog, schreibe ich über das, was mich im beruflichen Alltag so umtreibt: InDesign, Illustrator und WordPress. Wenn Du eine Frage zu diesen Themen hast, versuche ich gerne, Dir weiterzuhelfen. Melde Dich einfach per Kommentar oder Social Media bei mir!

Schreibe einen Kommentar