SlideShare ist ein Scribd-Unternehmen logo
o2thinkbig.de
Wie stelle ich Inhalte ein?
Das Einstellen eines
Posts mit Teaserbild
Lege im Backend ein Draft an, füge die Überschrift bei
„Titel“ ein, tippe den Text ein oder verwende „aus Text-
                     Datei einfügen“
Wähle relevante Kategorien aus und speichere den
                     Beitrag
So sieht das jetzt aus, wenn man auf „HTML“ klickt
Formattiere die Unterüberschrift als „Heading 3“
Schreibe deinen Namen in den Beitrag und formattiere
    „von..., Think Big Jugendredaktion“ als kursiv
So sieht das jetzt aus, wenn man auf „HTML“ klickt
Lade jetzt Bilder hoch
Speichere das Teaserbild immer im Querformat ab, ein kleines
  und ein großes Bild: klein obere Kante 200px, groß 800px
Klicke auf „Upload Files“
Warte, bis die Seite neu geladen ist und folgendes
                      erscheint
Ansicht des kleinen Bildes
URL des kleinen Bildes: Packe das Bild mit der Maus
          und ziehe es runter in die Zeile
URL des großen Bildes
Gehe wieder auf „HTML“ und füge den Code direkt vor
       dem Teasertext ein (kein Leerzeichen!)
Markiere und kopiere die URL
Füge die URL an die richtige Stelle zwischen die
          Anführungszeichen “ “ ein
Füge auch die URL des großen Bildes und die
   gewünschte Bildunterschrift / Titel ein
So würde das jetzt im Frontend aussehen
Und so, wenn man das Teaserbild anklickt
Und so, wenn man wieder auf „edit“ klickt. Stelle nun auf
    „published“ um und veröffentliche den Beitrag
Wie füge ich einen
More-Button ein?
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.
Variationen beim
Einstellen von Bildern
  und Bildergalerie
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” />
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.“ />
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“
Bild links und hochkant
So sieht das dann aus
Bild rechts und hochkant
So sieht das dann aus
Bildergalerie
So sieht das dann aus
Deshalb sind Bildunterschriften so wichtig!
Wenn der Text nicht neben der Galerie, sondern darunter
weitergehen soll, füge nach den Bildern folgenden Code ein:
           <div class=“clearfix“></div>
Das Einstellen eines
      Videos
Im Frontend: Klicke auf „News“, verwende bitte Firefox
            zum Hochladen eines Videos
Klicke auf „Video hochladen“
Schreibe den Titel und die Beschreibung in die Felder
           und klicke auf „veröffentlichen“
Klicke auf „Durchsuchen“ und wähle die Datei aus
(die du Adobe Premiere für YouTube Widescreen HD
                  exportiert hast)
Das Video lädt auf Youtube hoch, warte ... Wenn es fertig
     ist, wird es automatisch veröffentlicht und auf
            o2thinkbig.de als Video angezeigt
Schau dir den Beitrag im Frontend an und klick auf
                    „Youtube“
Kopiere dir den Youtube-Code, alles nach dem =
       (bzw. manchmal zwischen zwei =)
Klicke auf Admin, stelle den Beitrag im Backend auf
                        Draft
Stelle den Beitrag um auf „Text“
Füge den Code ein mit dem Youtube-Code zwischen
           den Anführungszeichen “ “
Wähle die relevanten Kategorien aus und vergesse nicht
                     zu speichern
Schau dir deinen Post nochmals an und klick auf „edit“
Veröffentliche den Beitrag
Und jetzt:
Viel Spaß!

Weitere ähnliche Inhalte

Andere mochten auch

Aviso convocatoria licitacion aseo
Aviso convocatoria licitacion  aseoAviso convocatoria licitacion  aseo
Aviso convocatoria licitacion aseo
mcriverah
 
26 enero valencia_ericka
26 enero valencia_ericka26 enero valencia_ericka
26 enero valencia_ericka
Ericka Valencia
 
4. Community Treffen ITmitte.de - open network
4. Community Treffen ITmitte.de - open network4. Community Treffen ITmitte.de - open network
4. Community Treffen ITmitte.de - open network
Community ITmitte.de
 
Frauen lieben Stiefel!
Frauen lieben Stiefel!Frauen lieben Stiefel!
Frauen lieben Stiefel!
HighHeels-Boutique.com
 
Machine Automation Outline
Machine Automation OutlineMachine Automation Outline
Machine Automation Outline
Tulsa Community College
 
kitchens x2
kitchens x2kitchens x2
kitchens x2
jwardcontracts
 
OpenNetwork Event ITmitte.de: Summer byte Universität Halle
OpenNetwork Event ITmitte.de: Summer byte Universität HalleOpenNetwork Event ITmitte.de: Summer byte Universität Halle
OpenNetwork Event ITmitte.de: Summer byte Universität Halle
Community ITmitte.de
 
ROOTING ANDROID
ROOTING ANDROIDROOTING ANDROID
ROOTING ANDROID
Bayu Rosyad
 
Ingeniería genética
Ingeniería genéticaIngeniería genética
Ingeniería genética
merchealari
 
Manejo de alimentos
Manejo de alimentosManejo de alimentos
Manejo de alimentos
yineth1002
 
Presentación1
Presentación1Presentación1
Presentación1
skrivilla
 
Programa Lista B "Convergencia" /// FEUV Santiago 2016
Programa Lista B "Convergencia" /// FEUV Santiago 2016Programa Lista B "Convergencia" /// FEUV Santiago 2016
Programa Lista B "Convergencia" /// FEUV Santiago 2016
Darío Andrés Ahrens
 
El Inaceptable costo de los malos jefes
El Inaceptable costo de los malos jefesEl Inaceptable costo de los malos jefes
El Inaceptable costo de los malos jefes
Angel Humberto Becerra
 
Twitter (1)
Twitter (1)Twitter (1)
Twitter (1)
luztorres190896
 
O 01. cristina de la osa barrachina
O 01. cristina de la osa barrachinaO 01. cristina de la osa barrachina

Andere mochten auch (20)

Aviso convocatoria licitacion aseo
Aviso convocatoria licitacion  aseoAviso convocatoria licitacion  aseo
Aviso convocatoria licitacion aseo
 
26 enero valencia_ericka
26 enero valencia_ericka26 enero valencia_ericka
26 enero valencia_ericka
 
9_Open-Space_und_Bildmaterial
9_Open-Space_und_Bildmaterial9_Open-Space_und_Bildmaterial
9_Open-Space_und_Bildmaterial
 
4. Community Treffen ITmitte.de - open network
4. Community Treffen ITmitte.de - open network4. Community Treffen ITmitte.de - open network
4. Community Treffen ITmitte.de - open network
 
Frauen lieben Stiefel!
Frauen lieben Stiefel!Frauen lieben Stiefel!
Frauen lieben Stiefel!
 
Acuerdo
 Acuerdo Acuerdo
Acuerdo
 
Machine Automation Outline
Machine Automation OutlineMachine Automation Outline
Machine Automation Outline
 
Tp. herramientas informáticas
Tp. herramientas informáticasTp. herramientas informáticas
Tp. herramientas informáticas
 
Alaser
AlaserAlaser
Alaser
 
kitchens x2
kitchens x2kitchens x2
kitchens x2
 
3DUVIS - EN
3DUVIS - EN3DUVIS - EN
3DUVIS - EN
 
OpenNetwork Event ITmitte.de: Summer byte Universität Halle
OpenNetwork Event ITmitte.de: Summer byte Universität HalleOpenNetwork Event ITmitte.de: Summer byte Universität Halle
OpenNetwork Event ITmitte.de: Summer byte Universität Halle
 
ROOTING ANDROID
ROOTING ANDROIDROOTING ANDROID
ROOTING ANDROID
 
Ingeniería genética
Ingeniería genéticaIngeniería genética
Ingeniería genética
 
Manejo de alimentos
Manejo de alimentosManejo de alimentos
Manejo de alimentos
 
Presentación1
Presentación1Presentación1
Presentación1
 
Programa Lista B "Convergencia" /// FEUV Santiago 2016
Programa Lista B "Convergencia" /// FEUV Santiago 2016Programa Lista B "Convergencia" /// FEUV Santiago 2016
Programa Lista B "Convergencia" /// FEUV Santiago 2016
 
El Inaceptable costo de los malos jefes
El Inaceptable costo de los malos jefesEl Inaceptable costo de los malos jefes
El Inaceptable costo de los malos jefes
 
Twitter (1)
Twitter (1)Twitter (1)
Twitter (1)
 
O 01. cristina de la osa barrachina
O 01. cristina de la osa barrachinaO 01. cristina de la osa barrachina
O 01. cristina de la osa barrachina
 

Ähnlich wie Input o2thinkbig

090525 Howto Wordpress
090525 Howto Wordpress090525 Howto Wordpress
090525 Howto Wordpress
stegreif
 
Wordpress Custom Theme Development
Wordpress Custom Theme DevelopmentWordpress Custom Theme Development
Wordpress Custom Theme Development
Daniela Wibbeke
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPress
Skill Day
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen
Notes IT
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
Nicolai Schwarz
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
wdbmh
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
Wordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW BerlinWordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW Berlin
Hagen Kohn
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
Nicolai Schwarz
 
Bloggerguidelines Innsbruck Tourismus; Mag. Renate Leitner
Bloggerguidelines Innsbruck Tourismus; Mag. Renate LeitnerBloggerguidelines Innsbruck Tourismus; Mag. Renate Leitner
Bloggerguidelines Innsbruck Tourismus; Mag. Renate Leitner
SocialWeb
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD
 
Bilder SEO Vortrag Missfeldt Campixx 2010
Bilder SEO Vortrag Missfeldt Campixx 2010Bilder SEO Vortrag Missfeldt Campixx 2010
Bilder SEO Vortrag Missfeldt Campixx 2010
DUPLICON
 
Wissen das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen das du für die Arbeit mit Wordpress mindestens brauchst.Wissen das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen das du für die Arbeit mit Wordpress mindestens brauchst.
Sabine Kronenberger
 
JSN ImageShow Konfigurationshandbuch
JSN ImageShow KonfigurationshandbuchJSN ImageShow Konfigurationshandbuch
JSN ImageShow Konfigurationshandbuch
JoomlaShine
 
Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.
Sabine Kronenberger PR für Nachhaltigkeit und Werte
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
Nicolai Schwarz
 
Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)
Thanh Nguyen
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
Benjamin Zekavica Projects
 

Ähnlich wie Input o2thinkbig (20)

090525 Howto Wordpress
090525 Howto Wordpress090525 Howto Wordpress
090525 Howto Wordpress
 
Joomla
JoomlaJoomla
Joomla
 
html grundlagen
html grundlagenhtml grundlagen
html grundlagen
 
Wordpress Custom Theme Development
Wordpress Custom Theme DevelopmentWordpress Custom Theme Development
Wordpress Custom Theme Development
 
Website erstellen mit WordPress
Website erstellen mit WordPressWebsite erstellen mit WordPress
Website erstellen mit WordPress
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen
 
WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)WYSIWYG-Editoren (für Drupal 7)
WYSIWYG-Editoren (für Drupal 7)
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Wordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW BerlinWordpress Praxisseminar HW Berlin
Wordpress Praxisseminar HW Berlin
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Bloggerguidelines Innsbruck Tourismus; Mag. Renate Leitner
Bloggerguidelines Innsbruck Tourismus; Mag. Renate LeitnerBloggerguidelines Innsbruck Tourismus; Mag. Renate Leitner
Bloggerguidelines Innsbruck Tourismus; Mag. Renate Leitner
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
Bilder SEO Vortrag Missfeldt Campixx 2010
Bilder SEO Vortrag Missfeldt Campixx 2010Bilder SEO Vortrag Missfeldt Campixx 2010
Bilder SEO Vortrag Missfeldt Campixx 2010
 
Wissen das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen das du für die Arbeit mit Wordpress mindestens brauchst.Wissen das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen das du für die Arbeit mit Wordpress mindestens brauchst.
 
JSN ImageShow Konfigurationshandbuch
JSN ImageShow KonfigurationshandbuchJSN ImageShow Konfigurationshandbuch
JSN ImageShow Konfigurationshandbuch
 
Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.
Wissen, das du für die Arbeit mit Wordpress mindestens brauchst.
 
Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7Medienmanagement mit Drupal 7
Medienmanagement mit Drupal 7
 
Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)Joomla 2.5 made easy (Englisch)
Joomla 2.5 made easy (Englisch)
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 

Input o2thinkbig