Input o2thinkbig

298 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
298
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
126
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Input o2thinkbig

  1. 1. o2thinkbig.deWie stelle ich Inhalte ein?
  2. 2. Das Einstellen einesPosts mit Teaserbild
  3. 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. 4. Wähle relevante Kategorien aus und speichere den Beitrag
  5. 5. So sieht das jetzt aus, wenn man auf „HTML“ klickt
  6. 6. Formattiere die Unterüberschrift als „Heading 3“
  7. 7. Schreibe deinen Namen in den Beitrag und formattiere „von..., Think Big Jugendredaktion“ als kursiv
  8. 8. So sieht das jetzt aus, wenn man auf „HTML“ klickt
  9. 9. Lade jetzt Bilder hoch
  10. 10. Speichere das Teaserbild immer im Querformat ab, ein kleines und ein großes Bild: klein obere Kante 200px, groß 800px
  11. 11. Klicke auf „Upload Files“
  12. 12. Warte, bis die Seite neu geladen ist und folgendes erscheint
  13. 13. Ansicht des kleinen Bildes
  14. 14. URL des kleinen Bildes: Packe das Bild mit der Maus und ziehe es runter in die Zeile
  15. 15. URL des großen Bildes
  16. 16. Gehe wieder auf „HTML“ und füge den Code direkt vor dem Teasertext ein (kein Leerzeichen!)
  17. 17. Markiere und kopiere die URL
  18. 18. Füge die URL an die richtige Stelle zwischen die Anführungszeichen “ “ ein
  19. 19. Füge auch die URL des großen Bildes und die gewünschte Bildunterschrift / Titel ein
  20. 20. So würde das jetzt im Frontend aussehen
  21. 21. Und so, wenn man das Teaserbild anklickt
  22. 22. Und so, wenn man wieder auf „edit“ klickt. Stelle nun auf „published“ um und veröffentliche den Beitrag
  23. 23. Wie füge ich einenMore-Button ein?
  24. 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. 25. Variationen beimEinstellen von Bildern und Bildergalerie
  26. 26. So funktioniert HTMLHTML ist keine Programmiersprache, sondern formatiert Inhalte.Mit sogenannten HTML-Tags teilt man dem Browser mit, wie er etwasanzeigen 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. 27. So funktioniert HTMLLinks:<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, derangezeigt wird, wenn das Bild nicht lädt oder angezeigt werden kann,z.B. für Blinde.“ />
  28. 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. 29. Bild links und hochkant
  30. 30. So sieht das dann aus
  31. 31. Bild rechts und hochkant
  32. 32. So sieht das dann aus
  33. 33. Bildergalerie
  34. 34. So sieht das dann aus
  35. 35. Deshalb sind Bildunterschriften so wichtig!
  36. 36. Wenn der Text nicht neben der Galerie, sondern darunterweitergehen soll, füge nach den Bildern folgenden Code ein: <div class=“clearfix“></div>
  37. 37. Das Einstellen eines Videos
  38. 38. Im Frontend: Klicke auf „News“, verwende bitte Firefox zum Hochladen eines Videos
  39. 39. Klicke auf „Video hochladen“
  40. 40. Schreibe den Titel und die Beschreibung in die Felder und klicke auf „veröffentlichen“
  41. 41. Klicke auf „Durchsuchen“ und wähle die Datei aus(die du Adobe Premiere für YouTube Widescreen HD exportiert hast)
  42. 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. 43. Schau dir den Beitrag im Frontend an und klick auf „Youtube“
  44. 44. Kopiere dir den Youtube-Code, alles nach dem = (bzw. manchmal zwischen zwei =)
  45. 45. Klicke auf Admin, stelle den Beitrag im Backend auf Draft
  46. 46. Stelle den Beitrag um auf „Text“
  47. 47. Füge den Code ein mit dem Youtube-Code zwischen den Anführungszeichen “ “
  48. 48. Wähle die relevanten Kategorien aus und vergesse nicht zu speichern
  49. 49. Schau dir deinen Post nochmals an und klick auf „edit“
  50. 50. Veröffentliche den Beitrag
  51. 51. Und jetzt:Viel Spaß!

×