Ändere dein Design, sonst sterben Nischenseiten aus!

WERBUNG

In diesem Artikel geht es darum, warum dein Design einzigartig sein sollte und wie Du das Design deiner Nischenseite mit CSS verändern kannst.

Viele Nischenseiten sehen gleich aus

Dass viele Nischenseiten gleich aussehen, hat mehrere Ursachen. Eine davon wäre, dass viele Seiten mit den gleichen WordPress-Themes gebaut wurden, denn es gibt viele Leute, die das Standarddesign des Themes nur leicht oder gar nicht anpassen. Das liegt aber auch meist daran, dass die viele Themes sich nur leicht anpassen lassen.

Ein weiteres Problem ist, dass Seiten, die mit demselben Videokurs aufgebaut sind, nahezu identisch aussehen, da diese Menschen das Design 1:1 kopieren, ohne sich dabei bewusst zu sein, welche negativen Folgen dieses mit sich zieht.

Die Folgen

Zur Zeit gibt es zu fast jedem Thema Nischenseiten und die Zahl der „Schrott-Nischenseiten“ (etwas blabla, Affiliate-Link da, Affiliate-Link hier und fertig) steigt. Menschen, die im Internet nach Infos zu einem bestimmten Thema/Produkt suchen, tun das bestimmt nicht nur einmal in ihrem Leben.

Wenn ein Benutzer auf einer schlechten Nischenseite war und danach eine Nischenseite sieht mit demselben Design, dann wird der Nutzer abspringen (obwohl der Content vielleicht gut war).

Die Lösung: CSS

Wie bereits erwähnt, lassen sich viele Themes nur leicht anpassen. Mit CSS kann man dagegen so gut wie alles verändern, sei es Menü, Sidebar oder Footer – alles ist möglich.

Um eigenen CSS Code zu schreiben, benötigst Du zunächst ein Plugin, wie z.B. WP Add Custom CSS.

CSS Crashkurs

Schritt 1: Klasse oder ID des zu bearbeitenden Elements herausfinden
Um ein Element (wie z.B. einem Button oder einem Menü) verändern zu können, benötigen wir dessen ID oder dessen Klasse. Diese findet man wie folgt heraus:

  1. Rechts-Klick auf das Element, welches Du verändern möchtest
  2. Klick auf „Element untersuchen“

Jetzt wird Dir das ausgewählte Element blau markiert (zumindest beim Browser Chrome und Firefox). Du kannst unterschiedliche Zeilen im Code auswählen und siehst dann auf deiner Seite welches Element mit welchem Code verbunden ist. Dem Code kannst Du entnehmen welche ID oder Klasse das ausgewählte Element hat (id=“<hier befindet sich die ID>“ oder class=“<hier befindet sich der Klassenname>“).

Im folgenden Beispiel ist das zu bearbeitende Element ein Menü-Button:

Ändere dein Design, sonst sterben Nischenseiten aus!

Dem Code kann man entnehmen, dass der Menü-Button die ID „menu-item-786“ besitzt. Mit dieser Information können wir den Button so anpassen, wie wir wollen. Dieser Button hat mehrere Klassen, welche mit einem Leerzeichen getrennt werden:

class= "menu-item menu-item-type-post_type menu-item-object-page menu-item-786"

Schritt 2: Das Element mit CSS anpassen
Das Element können wir jetzt im CSS-Editor anpassen, in meinem Fall der Editor vom Plugin WP Add Custom CSS.

Jetzt haben wir zwei Möglichkeiten: Entweder wir verändern nur das Design der ID des Elements (Dann verändert sich nur der Menüpunkt „Akku Gartenschere Test“) oder wir verändern die Klasse des Elements (Dann verändern sich alle Menü-Buttons).

Verändern der ID:
Um IDs zu verändern, startet man die CSS-Anweisung mit einem „#“, gefolgt von der ID. Die Veränderung werden dann in geschweifte Klammern geschrieben. Das ganze sieht dann so aus:

#menu-item-786{
Hier kommen später die Anweisungen rein
}

Verändern der Klasse:
Um Klassen zu designen, ersetzt man das „#“ mit einem Punkt. Das sieht dann so aus:

.menu-item{
Hier kommen später die Anweisungen rein
}
Nischenseiten-Aufbau E-Book

Schritt 3: Die Anweisungen

Damit das Element auch verändert wird, fehlen nur noch die richtigen Anweisungen. Diese setzen sich wie folgt zusammen: Eigenschaft: Wert;

Ein Beispiel:

background: #000000;

„background“ ist die Eigenschaft und bedeutet Hintergrund. Mit dem Farbcode #000000 sage ich, dass der Hintergrund schwarz sein soll. Geschlossen wird die Anweisung mit einem Semikolon.

Das sind weitere wichtige Anweisungen:

margin: eine Zahl px; Der Abstand zum benachbarten Element
padding: eine Zahl px; Der Abstand Elementen innerhalb dieses Elements (padding engl.= „Polsterung“)
color: ein HTML-Farbcode; Bestimmt die Textfarbe
width: eine Zahl px; Die Breite des Objekts (statt eine Pixelanzahl, kann man auch „auto“ verwenden. Dann passt sich das Element an die zur Verfügung stehende Breite an.

Solltest Du eine andere Eigenschaft mal benötigen, dann schau mal bei w3schools.com oder selfhtml.org nach. Da findet man so gut wie jede CSS-Anweisung mit Praxis-Beispielen.

Schritt 4: Die Praxis
Wir wollen jetzt folgendes erreichen: Der Menü-Punkt „Akku Gartenschere Test“ soll einen grünen Hintergrund haben und soll 300 px breit sein. Das ist der CSS-Code:

#menu-item-786{
background: #5eaa34;
width: 300px;
}

Und das ist das Ergebnis:

Ändere dein Design, sonst sterben Nischenseiten aus!

Zugegebenermaßen war diese Designänderung nicht wirklich sinnvoll, aber es sollte zeigen, dass man mit CSS alles ändern kann. Das komplette Design zu ändern geht auch nicht innerhalb einer Stunde. Und da wären wir bei den Vor-und Nachteilen, wenn man selbst CSS-Code schreibt.

Nachteile:

  • Es ist sehr zeitintensiv
  • Es sind Programmierkenntnisse notwendig

Vorteile:

  • Man erhält am Ende ein individuelles Design
  • Geringere Absprungrate
  • Deine Seite besitzt Wiedererkennungswert
  • Du hebst dich von anderen ab

Ich will Dir mal anhand meiner Seite akku-heckenschere-test.net zeigen, welche Auswirkungen CSS hat.

Ohne CSS:

Ändere dein Design, sonst sterben Nischenseiten aus!

Mit CSS:

Ändere dein Design, sonst sterben Nischenseiten aus!

Fazit

In Zukunft wird es immer wichtiger sein, dass man auf individuelles Design setzt, damit man sich von anderen Seiten abhebt, und somit nicht mehr den Ruf von „Schrott-Nischenseiten“ trägt.

Du willst mehr zum Thema CSS lernen?

Eine Sammlung zu vielen CSS-Anweisungen findest Du hier. Wenn Du eine Frage zum Thema CSS/HTML hast, kannst Du sie hier stellen.

Autor

Fabian Sawischa

Du hast Interesse einen Gastartikel hier auf nischenseiten-guide.de zu veröffentlichen?
Schick mir eine Mail an info@nischenseiten-guide.de mit deinen Themen-Vorschlägen.

Amazon Affiliate WordPress Plugin - Produktboxen + Bestseller-Listen für Blogs und Nischenseiten
WERBUNG 

WERBUNG

18 Gedanken zu „Ändere dein Design, sonst sterben Nischenseiten aus!“

  1. Ich ändere WordPress-Themes und Designvorlagen auch immer sehr stark mit CSS ab. Das meiste habe ich mir dafür mit diversen Tutorials selbst beigebracht.

    Allerdings muss man auch zugeben, dass viele moderne (Premium)Themes inzwischen extrem gut individuell konfigurierbar sind.
    Ich nutze zum Beispiel die Sachen von ElegantThemes und da lässt sich direkt im WordPress Editor jeder Button und jedes Textfeld komplett frei anpassen.

    So kommt man auch ohne CSS-Kenntnisse auf gute Ergebnisse.

    Adrian

    1. Da hast Du vollkommen recht! Aber wie Du bereits sagtest braucht man dafür ein „Premium“-Theme, welches meistens Geld kostet. CSS ist da die kostengünstigste Variante.

  2. Ich finde den Artikel sehr interessant und auch durchaus zutreffend. Viele Seiten sehen aus wie die von denen ein Kurs, Buch oder andere Form des Coaching stammt. Allerdings sollte man hier auch erwähnen, dass es zu Beginn alles neu ist und man sich natürlich besagtes Info-Material kauft, um es dann auch anzuwenden. Habe ich genauso gemacht, aber ich baue nach und nach mehr CSS etc. ein, um mich auch von anderen Abzuheben. Ich finde das ist aber ein langwieriger Prozess, denn man hat ja auch noch andere Dinge zu tun.
    Das Design der Beispielseite gefällt mir sehr gut und ich habe mich hier auch ein wenig inspirieren lassen für zukünftige optische Veränderungen. Natürlich nicht eins zu eins, versteht sich ja 🙂

    1. Ich lasse mich immer von mehreren Seiten inspirieren und picke mir immer die besten Sachen raus. Mit ein wenig Kreativität dazu erhält man ein individuelles Design, welches auch noch gut aussieht.

  3. Ich bin jetzt seit einem Jahr dabei Nischenseiten zu erstellen und das ist mir auch schon ziemlich schnell aufgefallen, dass man sich da abheben muss.
    Wenn man jetzt aber sein Design über dieses CSS Plugin anpasst, kann es doch bei einem Update passieren, dass alle individuellen Änderungen futsch sind oder?

    1. Eben gerade nicht. Dadurch, dass man es nicht direkt in den Theme-Dateien ändert, sondert mit Hilfe eines CSS Plugins, bleiben die Änderungen auch bei Updates erhalten.

  4. Mich würde interessieren, wie du es geschafft hast, dass die Tabelle sich bei der Ansicht mit einem mobilen Gerät in Blocks darstellt. Lässt sich das auch mit Hilfe von CSS lösen?

    1. Auf jeden Fall. Das war für mich der größte Anreiz CSS zu lernen. So schwer war es dann gar nicht. Ich habe zunächst in meine Seite den Code für beides stehen (den Code für die Tabelle sowie für die Blöcke).
      Dann habe ich es mit dem Befehl @media only screen and (max-width: ) so geregelt, dass unter einer bestimmten Höhe die Blöcke angezeigt werden und alles was darüber ist in Form einer Tabelle angezeigt werden soll.
      Das Thema ist recht komplex, vielleicht sollte ich ja kurz ein eBook dazu machen. ;D

  5. Mir ist auch schon aufgefallen, dass viele Nischenseiten sehr ähnlich aussehen. Da müssen viele Leute (mich eingeschlossen) wohl noch an ihren CSS Kenntnissen arbeiten. :s

    Schöner Artikel – hat zum Nachdenken angeregt.

  6. Da hast Du völlig recht Peer, viele Nischenseiten sehen ziemlich gleich aus. Meine wohl oder übel auch. Wir sollten uns alle die Mühe machen und unsere Nischenseiten verändern.

  7. Echt ein sehr hilfreicher Artikel Fabian, danke dafür!
    Ich stehe gerade noch am Anfang was CSS angeht und kann nur sagen, dass es mega viel Spaß macht jeden Tag etwas neues zu lernen. Wenn man an etwas rumprobiert und es irgendwann dann endlich so aussieht wie es aussehen soll, das ist einfach so ein gutes Gefühl.
    Deine Heckenscheren Seite finde ich übrigens sehr ansehnlich, Respekt! Leider ist das ganze, wie du schon sagtest, ziemlich zeitaufwendig.

    Liebe Grüße
    Mario

  8. Sehr guter Beitrag! Dem stimme ich vollkommen zu. Durch den massenhaften Anstieg an Nischenwebsites muss man sich klar von der Konkurrenz abgrenzen und abheben. Immer mehr Besucher meiden Nischenseiten aus Prinzip.

    Das Design und die gesamte Erscheinung einer Nischenseite muss sich grundlegend von den bisherigen Standard 0815 Designs abgrenzen, sonst geht man unter.

    Nur mit ein paar Farbanpassungen hier und da ist es allerdings noch nicht erledigt! Man braucht ein komplett neues Design:)

    LG
    Werner

  9. Toller Beitrag,
    Mittlerweile ist das zu einem sehr großen Problem geworden das fast alle Nischenseiten gleich ausschauen.
    Ich habe meistens Probleme die passende Farbe für meine Nischenseite zu finden dafür verwende ich diese Seite hier
    https://coolors.co/

    1. Tatsächlich eine schöne Seite, um passende Farben für die Website zu finden. Wer mit Google mal nach „Color Palette“ sucht, findet weitere solche Seiten, die ich sogar teilweise bedienungsfreundlicher finde.

      – Pascal

  10. Ich bin schon so weit, dass ich jegliche Seiten mit „Test“, „Vergleich“ und ähnlichen Keywords in der Domain meide. Ich warte nur darauf, dass Google mit diesen Seiten das Gleiche macht wie mit den alten Adsense-Seiten.

Schreibe einen Kommentar

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