Das Dokument beschreibt Schritt für Schritt, wie man Inhalte auf der Website o2thinkbig.de einfügt, einschließlich der Erstellung von Posts, dem Hochladen von Bildern und Videos sowie der Formatierung mit HTML-Tags. Es werden spezifische Anweisungen zur Verwendung von Bildern, Teasertexten und dem Einfügen von Links gegeben. Außerdem wird erläutert, wie ein More-Button hinzugefügt und Videos hochgeladen werden können.

1. o2thinkbig.de
Wie stelle ich Inhalte ein?

2. Das Einstellen eines
Posts mit Teaserbild

3. Lege im Backend ein Draft an, füge die Überschrift bei
„Titel“ ein, tippe den Text ein oder verwende „aus Text-
Datei einfügen“

4. Wähle relevante Kategorien aus und speichere den
Beitrag

5. So sieht das jetzt aus, wenn man auf „HTML“ klickt

6. Formattiere die Unterüberschrift als „Heading 3“

7. Schreibe deinen Namen in den Beitrag und formattiere
„von..., Think Big Jugendredaktion“ als kursiv

8. So sieht das jetzt aus, wenn man auf „HTML“ klickt

9. Lade jetzt Bilder hoch

10. Speichere das Teaserbild immer im Querformat ab, ein kleines
und ein großes Bild: klein obere Kante 200px, groß 800px

11. Klicke auf „Upload Files“

12. Warte, bis die Seite neu geladen ist und folgendes
erscheint

13. Ansicht des kleinen Bildes

14. URL des kleinen Bildes: Packe das Bild mit der Maus
und ziehe es runter in die Zeile

15. URL des großen Bildes

16. Gehe wieder auf „HTML“ und füge den Code direkt vor
dem Teasertext ein (kein Leerzeichen!)

17. Markiere und kopiere die URL

18. Füge die URL an die richtige Stelle zwischen die
Anführungszeichen “ “ ein

19. Füge auch die URL des großen Bildes und die
gewünschte Bildunterschrift / Titel ein

20. So würde das jetzt im Frontend aussehen

21. Und so, wenn man das Teaserbild anklickt

22. Und so, wenn man wieder auf „edit“ klickt. Stelle nun auf
„published“ um und veröffentliche den Beitrag

23. Wie füge ich einen
More-Button ein?

24. Um einen More-Button einzufügen, muss sich der Cursor
hinter dem Teaser befinden. Man braucht keine extra
Leerzeilen vor oder nach dem More-Button.

25. Variationen beim
Einstellen von Bildern
und Bildergalerie

26. So funktioniert HTML
HTML ist keine Programmiersprache, sondern formatiert Inhalte.
Mit sogenannten HTML-Tags teilt man dem Browser mit, wie er etwas
anzeigen soll:
<HTML-Tag>Inhalt</HTML-Tag beenden>
<b>Dieser Text ist fett</b>
<i>Dieser Text ist kursiv</i>
„Hier soll die Formatierung aufhören“
„Setze alles danach kursiv“
Ausnahme: Ein Bild ist keine Formatierung - der abschließende
Schrägstrich steht deshalb direkt im HTML-Tag:
<img src=”Quelle - Die Bildadresse” />

27. So funktioniert HTML
Links:
<a href=”Hier soll der Link hinführen”>Dieser Text ist verlinkt</a>
<a href=”http://www.o2thinkbig.de”>Link zu o2thinkbig.de</a>
<a href=”http://www.o2thinkbig.de” title=“Dieser Text wird angezeigt,
wenn man über den Link fährt.“>Link zu o2thinkbig.de</a>
Bilder:
<img src=”Quelle - Die Bildadresse” />
<img src=” http://www.o2thinkbig.de/bild.jpg” />
<img src=” http://www.o2thinkbig.de/bild.jpg” alt=“Alternativtext, der
angezeigt wird, wenn das Bild nicht lädt oder angezeigt werden kann,
z.B. für Blinde.“ />

28. Bildergalerien: „Der Link soll auf
das große Bild
führen“
<a „Setze einen Link“
href="HIER_URL_DES_GROßEN_FOTOS_EINSETZEN"
title="HIER_TITEL_EINSETZEN" „Bildbeschreibung“
rel="gallery[you]" „Das Bild gehört zur Galerie ,you‘ “
> „Öffne den Link als
Lightbox“ „Zeige das kleine
<img „Zeige ein Bild“ Bild“
src="HIER_URL_DES_KLEINEN_FOTOS_EINSETZEN"
alt="HIER_TITEL_EINSETZEN" „Bildbeschreibung“
width="200" „Zeige das Bild mit einer Breite von 200 Pixeln“
align="left" „Richte das Bild links aus“
style="margin-right: 10px;" „Halte rechts von dem
/> „Hier hört das Bild Bild 10 px Abstand frei“
auf“
</a> „Hier hört der Link auf“

29. Bild links und hochkant

30. So sieht das dann aus

31. Bild rechts und hochkant

32. So sieht das dann aus

33. Bildergalerie

34. So sieht das dann aus

35. Deshalb sind Bildunterschriften so wichtig!

36. Wenn der Text nicht neben der Galerie, sondern darunter
weitergehen soll, füge nach den Bildern folgenden Code ein:
<div class=“clearfix“></div>

37. Das Einstellen eines
Videos

38. Im Frontend: Klicke auf „News“, verwende bitte Firefox
zum Hochladen eines Videos

39. Klicke auf „Video hochladen“

40. Schreibe den Titel und die Beschreibung in die Felder
und klicke auf „veröffentlichen“

41. Klicke auf „Durchsuchen“ und wähle die Datei aus
(die du Adobe Premiere für YouTube Widescreen HD
exportiert hast)

42. Das Video lädt auf Youtube hoch, warte ... Wenn es fertig
ist, wird es automatisch veröffentlicht und auf
o2thinkbig.de als Video angezeigt

43. Schau dir den Beitrag im Frontend an und klick auf
„Youtube“

44. Kopiere dir den Youtube-Code, alles nach dem =
(bzw. manchmal zwischen zwei =)

45. Klicke auf Admin, stelle den Beitrag im Backend auf
Draft

46. Stelle den Beitrag um auf „Text“

47. Füge den Code ein mit dem Youtube-Code zwischen
den Anführungszeichen “ “

48. Wähle die relevanten Kategorien aus und vergesse nicht
zu speichern

49. Schau dir deinen Post nochmals an und klick auf „edit“

50. Veröffentliche den Beitrag

51. Und jetzt:
Viel Spaß!