weboffice.digital - Dokumentation
Branche Beauty Branche Gastro Branche Handel
PDF

Markdown-Block bearbeiten

Markdown-Block bearbeiten

Der Markdown-Block ist ein vielseitiges Werkzeug für die Erstellung von formatierten Textinhalten. Mit Markdown kannst du schnell und einfach strukturierte Texte mit Überschriften, Listen, Links und anderen Formatierungen erstellen. Der Block eignet sich perfekt für Artikel, Dokumentationen, FAQ-Bereiche oder andere textlastige Inhalte.

Voraussetzungen

  • Du befindest dich im Website-Editor
  • Ein Markdown-Block ist auf deiner Seite eingefügt
  • Du hast die Berechtigung, Website-Inhalte zu bearbeiten
  • Grundkenntnisse in Markdown sind hilfreich, aber nicht erforderlich

Aufbau der Bearbeitungsseite

Die Bearbeitungsseite enthält einen Hauptbereich:

Markdown

Hier findest du den Markdown-Editor:

  • Großes Textfeld: Hier gibst du deinen Markdown-formatierten Text ein
  • Bildupload-Funktion: Bilder können direkt eingefügt werden
  • Live-Vorschau: Zeigt das Ergebnis deiner Formatierung an

So arbeitest du mit dieser Seite

Grundlagen der Markdown-Eingabe

  1. Klicke in das große Textfeld
  2. Gib deinen Text ein und nutze Markdown-Syntax für Formatierungen
  3. Die Vorschau zeigt dir sofort, wie der Text aussehen wird
  4. Deine Änderungen werden automatisch gespeichert

Markdown-Syntax verstehen

Überschriften:

# Hauptüberschrift (H1)
## Unterüberschrift (H2)
### Kleine Überschrift (H3)
#### Sehr kleine Überschrift (H4)

Textformatierung:

**Fettgedruckter Text**
*Kursiver Text*
~~Durchgestrichener Text~~
`Code oder technische Begriffe`

Listen:

- Erster Listenpunkt
- Zweiter Listenpunkt
  - Unterpunkt
  - Noch ein Unterpunkt
- Dritter Listenpunkt

1. Nummerierte Liste
2. Zweiter Punkt
3. Dritter Punkt

Links:

[Linktext](https://example.com)
[Interne Seite](/kontakt)
[E-Mail senden](mailto:info@beispiel.de)

Zitate:

> Dies ist ein Zitat
> Es kann über mehrere Zeilen gehen

Trennlinien:

---

Tabellen:

| Spalte 1 | Spalte 2 | Spalte 3 |
|----------|----------|----------|
| Wert 1   | Wert 2   | Wert 3   |
| Wert 4   | Wert 5   | Wert 6   |

Bilder einfügen

  1. Drag & Drop: Ziehe Bilder direkt in den Editor
  2. Kopieren & Einfügen: Kopiere Bilder aus anderen Anwendungen
  3. Upload-Schaltfläche: Nutze die Upload-Funktion des Editors
  4. Bilder werden automatisch optimiert und in die Website-Mediathek hochgeladen
  5. Die Markdown-Syntax für das Bild wird automatisch eingefügt

Erweiterte Formatierungen

Code-Blöcke:

```javascript
function beispiel() {
    console.log("Hallo Welt");
}

**Checklisten:**
  • Erledigte Aufgabe
  • Offene Aufgabe
  • Weitere Aufgabe

## Tipps und Hinweise

- **Live-Vorschau nutzen**: Überprüfe deine Formatierung in der Vorschau
- **Strukturierte Inhalte**: Nutze Überschriften für bessere Lesbarkeit
- **Kurze Absätze**: Teile lange Texte in übersichtliche Abschnitte
- **Konsistente Formatierung**: Verwende einheitliche Markdown-Syntax
- **Mobile Optimierung**: Der Block passt sich automatisch an verschiedene Bildschirmgrößen an
- **SEO-Vorteile**: Überschriften und strukturierte Inhalte verbessern die Suchmaschinenoptimierung
- **Barrierefreiheit**: Gut strukturierte Markdown-Inhalte sind für Screenreader optimiert

### Verwendungszwecke

**Blog-Artikel:**
- Strukturierte Artikel mit Überschriften
- Formatierte Listen und Zitate
- Eingebettete Bilder und Links

**Dokumentationen:**
- Technische Anleitungen
- FAQ-Bereiche
- Schritt-für-Schritt-Anleitungen

**Produktbeschreibungen:**
- Detaillierte Produktinformationen
- Spezifikationstabellen
- Vorteile und Features

**Rechtliche Texte:**
- Impressum und Datenschutz
- AGB und Nutzungsbedingungen
- Strukturierte Rechtsinformationen

### Häufige Markdown-Fehler vermeiden

**Leerzeilen vergessen:**
- Füge Leerzeilen zwischen verschiedenen Elementen ein
- Besonders wichtig vor und nach Listen, Überschriften und Code-Blöcken

**Falsche Syntax:**
- Achte auf korrekte Anzahl von Rauten (#) für Überschriften
- Verwende die richtige Anzahl von Sternchen (*) für Formatierungen

**Unvollständige Links:**
- Stelle sicher, dass alle Links vollständig sind
- Teste Links regelmäßig auf Funktionsfähigkeit

### Keyboard-Shortcuts

- **Strg+B**: Fettgedruckter Text
- **Strg+I**: Kursiver Text
- **Strg+K**: Link einfügen
- **Strg+Z**: Rückgängig
- **Strg+Y**: Wiederholen

## Verwandte Seiten

- [Header-Text bearbeiten](/help/9ab44839-33fa-40ad-92ff-62726df6092a)
- [Zentrierter Hero bearbeiten](/help/150b33bb-19f7-41e8-90d1-eb00ea083864)
- [Header mit Beschreibung und Bild bearbeiten](/help/4614dcce-67e9-450e-9937-b48ca0b70637)