Standard-Block-Einstellungen
Hier findest du die grundlegenden Gestaltungsoptionen, die für alle Blöcke verfügbar sind. Diese Einstellungen helfen dir dabei, das Aussehen und die Positionierung deiner Blöcke anzupassen.
Voraussetzungen
- Du bearbeitest gerade einen Block im Website-Editor
- Die Block-Konfiguration ist geöffnet
Aufbau der Seite
Die Standard-Einstellungen sind in mehrere Bereiche unterteilt:
Abstände
- Padding (Innenabstand): Abstand zwischen Block-Rand und Inhalt
- Margin (Außenabstand): Abstand zu anderen Blöcken
Farben
- Hintergrundfarbe: Farbauswahl für den Block-Hintergrund
- Textfarbe: Farbe für den gesamten Text im Block
Hintergrundbild
- Bild-Upload: Möglichkeit, ein Hintergrundbild hochzuladen
- Bild-Einstellungen: Position, Größe und weitere Optionen
CSS-Klasse
- Eigene Klassen: Feld für individuelle CSS-Klassen
So arbeitest du mit dieser Seite
Abstände einstellen
- Padding anpassen: Verwende die Abstand-Einstellungen für den Innenbereich
- Oben, rechts, unten, links einzeln einstellbar
- Werte in Pixeln oder anderen CSS-Einheiten
- Margin anpassen: Stelle die Außenabstände zu anderen Blöcken ein
- Verhindert, dass Blöcke zu dicht beieinander stehen
- Sorgt für bessere Lesbarkeit
Farben auswählen
- Hintergrundfarbe wählen: Klicke auf das Auswahlfeld
- Wähle aus vordefinierten Farben
- "Kein Hintergrund" für transparente Blöcke
- Textfarbe festlegen: Bestimme die Farbe für alle Texte im Block
- "Standardfarbe" übernimmt die Theme-Farbe
- Achte auf guten Kontrast zum Hintergrund
Hintergrundbild einrichten
- Bild hochladen: Verwende den Bild-Editor
- Position einstellen: Bestimme, wo das Bild positioniert wird
- Größe anpassen: Wähle, wie das Bild skaliert werden soll
- Weitere Optionen: Wiederholung, Anheftung, Animation
CSS-Klassen verwenden
- Klassenname eingeben: Trage den Namen deiner CSS-Klasse ein
- Mehrere Klassen: Trenne mehrere Klassen mit Leerzeichen
- Beispiel: "my-custom-class highlight-box"
Tipps und Hinweise
- Konsistente Abstände: Verwende einheitliche Abstände für ein professionelles Aussehen
- Farbharmonie beachten: Wähle Farben, die zu deinem Website-Design passen
- Kontrast prüfen: Stelle sicher, dass Text gut lesbar ist
- Hintergrundbilder sparsam einsetzen: Zu viele können die Seite unruhig wirken lassen
- CSS-Klassen dokumentieren: Notiere dir, wofür du welche Klassen verwendest
- Mobile Ansicht testen: Prüfe, wie die Einstellungen auf kleinen Bildschirmen wirken
Empfohlene Abstände
- Kleine Abstände: 8-16px für enge Layouts
- Mittlere Abstände: 24-32px für normale Layouts
- Große Abstände: 48-64px für luftige Layouts
Farbauswahl-Tipps
- Primary: Hauptfarbe deiner Website
- Secondary: Ergänzungsfarbe
- Success: Für positive Aktionen (grün)
- Warning: Für Warnungen (gelb/orange)
- Danger: Für Fehler oder Löschaktionen (rot)
- Light/Dark: Für neutrale Bereiche