Anleitung: So passen Sie den HTML-Code an (für Einsteiger)

Wenn Sie die von uns bereitgestellten HTML-Code-Blöcke in Ihr Jimdo-Widget eingefügt haben, können Sie den Inhalt und das Aussehen ganz einfach selbst anpassen. Diese Anleitung erklärt, wie Sie dabei vorgehen können.

1. Texte ändern

Die Texte im HTML-Code sind von sogenannten "Tags" umgeben, die dem Browser sagen, wie der Text dargestellt werden soll. Sie müssen nur den Text zwischen den Tags anpassen.

• Überschriften (<h2>, <h3>):
  • Im Code finden: <h2>Wann Sie ernten sollten</h2>
  • So ändern Sie es: Ersetzen Sie den Text Wann Sie ernten sollten durch Ihren eigenen Text, zum Beispiel: <h2>Wann ernte ich am besten?</h2>
• Absätze (<p>):
  • Im Code finden: <p>Da Ihre Oliven bereits schwarz sind, ...</p>
  • So ändern Sie es: Ersetzen Sie den Text zwischen <p> und </p> durch Ihren gewünschten Text.
• Listenelemente (<li>):
  • Im Code finden: <li><b>Farbe:</b> Die Oliven sollten...</li>
  • So ändern Sie es: Ändern Sie den Text zwischen <li> und </li>.

2. Das Design anpassen (Inline-CSS verstehen)

Die Darstellung der Boxen (Farbe, Rahmen, Abstand) wird direkt im HTML-Code durch das sogenannte style-Attribut beeinflusst. Auch hier können Sie einfache Änderungen vornehmen.

• Der umschließende Container (<div>):
  • Der Bereich, der alles umgibt, ist mit dem Tag <div> gekennzeichnet.
  • style="...": Dies ist der Bereich, in dem Sie die Darstellung anpassen können.
• Eigenschaften im style-Attribut:
  • font-family: Arial, sans-serif;: Legt die Schriftart fest.
  • padding: 20px;: Regelt den Innenabstand des Textes zum Rand der Box. Ändern Sie den Wert 20px, um den Abstand zu verändern.
  • border: 1px solid #ccc;: Definiert den Rand der Box. Ändern Sie die Werte für Dicke, Stil und Farbe.
  • border-radius: 10px;: Macht die Ecken der Box rund. Ändern Sie den Wert, um die Rundung anzupassen.
  • background-color: #f5f5f5;: Definiert die Hintergrundfarbe. Ändern Sie den Farbcode für eine andere Farbe.

3. Links bearbeiten

In der Link-Box finden Sie Verweise zu anderen Websites. Auch diese lassen sich anpassen.

• Der Link selbst (<a href="...">):
  • Im Code finden: <a href="https://www.example.com" ...
  • So ändern Sie es: Ersetzen Sie die Beispiel-Adresse **https://www.example.com** durch die URL Ihrer Wahl.

So verwenden Sie den Code in Jimdo

1. Im Jimdo Editor navigieren Sie zum Bereich, in dem Sie die Anleitung einfügen möchten.
2. Klicken Sie auf **"Inhalt hinzufügen"** oder wählen Sie ein bestehendes Widget aus.
3. Wählen Sie das **"Widget/HTML"**-Element.
4. **Kopieren Sie den gesamten Code** aus dieser Antwort und fügen Sie ihn in das Code-Feld ein.
5. **Speichern Sie die Änderungen**, um das Ergebnis auf Ihrer Seite zu sehen.