¡Hallo, liebe YCLAS-Freunde! Diese Woche teilen wir ein paar Tipps und gute Ideen mit dir, wie deine Website mit CSS-Code besser aussieht.
Eines solltest du wissen: Das Aussehen deiner Website entscheidet darüber, ob Nutzer und Kunden bleiben oder sich auf die Suche nach einer schöneren Seite machen.
Zuerst musst du die Nutzung von CSS im Panel deiner Website aktivieren; Klicke hier, um zu sehen, wie du eigenes CSS in YCLAS aktivierst und hinzufügst.
Los geht's!
Hintergrund
Die besten Websites setzen heute auf Hintergründe mit Farbverlauf, also einen einfachen, sanften Farbwechsel. Wenn du die richtigen Farben wählst, bekommt deine Website einen modernen Look. Hier hast du 3 verschiedene moderne Hintergründe:
Farbverlauf #1 (Pazifikfarben)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Farbverlauf #2 (Kräftige Farben)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Farbverlauf #3 (Sanfte Farben)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Schriften
Die Schrift deiner Website spielt eine entscheidende Rolle. Wir empfehlen dir serifenlose Schriften (Sans-Serif) wie:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Diese Schriften sind angenehm für die Augen.
Rahmen von Elementen
Noch ein Tipp: Verwende abgerundete Ecken für Elemente. So wirkt deine Website schlicht und modern. Dafür nutzt du diesen Code:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Farbe (solid black) und Radius (8px) des Rahmens kannst du anpassen.
Navigationsleiste
Die Navigationsleiste gehört zu den wichtigsten Elementen einer Website. Eine gut gemachte Navigationsleiste hilft den Nutzern, sich auf deiner Website zurechtzufinden. Hier ist eine Sticky-Navigationsleiste mit aktivem/aktuellem Link: Sie bewegt sich je nach Scrollposition mit und bleibt oben haften:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Du kannst die Farben (Hintergrund, Text und aktiver/aktueller Link) ändern und die Größe der Navigationsleiste anpassen (Padding).
Responsive Bilder
¡Bilder! Bilder sind heute auf jeder Website unverzichtbar, und wir sind es gewohnt, überall Bilder zu sehen. Es reicht aber nicht, einfach ein Bild auf deine Website zu stellen: Du musst es als responsives Bild einrichten, damit es auf jedem Gerät gut aussieht. Verwende dafür diesen Code für alle Bilder, die responsiv sein sollen:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
Das X steht für die URL des Bildes, bei IMG Width und IMG Height trägst du die Originalgröße des Bildes ein.
Website-Layout
Das Layout ist die Anordnung der wichtigsten Elemente deiner Website, zum Beispiel des Headers. Der Header ist das Erste, was Nutzer sehen, wenn sie deine Website betreten, deshalb sollte er einfach und leicht verständlich sein. Hier ist ein CSS-Code für einen Bild-Header mit Text:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
Das X steht für die URL des Bildes, mit Padding legst du die Größe des Bild-Headers fest, und bei Header Text schreibst du, was über dem Header-Bild angezeigt werden soll.
Ein weiteres zentrales Element deiner Website ist der Footer am unteren Ende der Seite – er ist genauso wichtig wie der Header. Mit diesem Code bekommst du einen ansprechenden Footer:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Farbe und Größe (Padding) des Footers kannst du ändern.
Probiere diese Tipps aus und sag uns, ob sie bei dir funktionieren!
Hinweis: Für den Einsatz von CSS-Code brauchst du etwas Know-how und Erfahrung. Wenn du noch nie mit CSS gearbeitet hast, empfehlen wir dir ein paar CSS-Tutorials und CSS-Leitfäden, um genau das zu erreichen, was du dir vorstellst. Wenn du kein CSS verwenden möchtest, kannst du unsere Themes nutzen – wir bieten eine Vielzahl anpassbarer Website-Vorlagen an. Klicke hier, um sie anzusehen.
Viele Grüße,
dein YCLAS-Team.
