Styleguide für die Formatierung von Texten

Allgemeine HTML-Formatierungen

Mit der Verwendung von HTML-Code kannst du deine Beiträge individuell gestalten
Um deine Veröffentlichungen (Artikel, Fragen und Chats) schöner zu gestalten, stehen dir HTML-Tags zur Verfügung, die vom ProDuck-System erkannt und entsprechend formatiert werden. Zur Erleichterung der Eingabe werden oberhalb der meisten Texteingabefelder "Short-Cut"-Buttons angezeigt, über die der passende Formatierungscode in den Text eingefügt werden kann.
Folgende Tags können verwendet werden:

Tag	Beschreibung
`<h2>`	Headline importance level 2 Example: `<h2>H2-Headline</h2>`
`<h3>`	Headline importance level 3 Example: `<h3>H3-Headline</h3>`
`<h4>`	Headline importance level 4 Example: `<h4>H4-Headline</h4>`
`<h5>`	Headline importance level 5 Example: `<h5>H5-Headline</h5>`
`<h6>`	Headline importance level 6 Example: `<h6>H6-Headline</h6>`
`<br/>`	Defines a line break
`<strong>`	Converts text in bold Example: `<strong>bold Text</strong>` Shortcut: Mark word(s) and press Ctrl + b
`<em>`	Converts text in italic Example: `<em>italic text</p>` Mark word(s) and press Ctrl + i
`<span>`	Used as an inline element to mark up parts of a text Allowed classes: `teal-text`, `red-text` Example: `<span class="teal-text">teal colored Text</span>`
`<a> not allowed`	`a`-tags are not allowed on ProDuck. However, the system automatically converts link-patterns into clickable links. Beyond, you can insert a link like this `[url="https://link.de",name="verlinkter Link",title="Dieser Link führt Sie zu link.de"]` Shortcut: Copy link to clipboard, go to textarea on ProDuck, click into textarea to choose a position and press Ctrl + k to insert the link at this position. You can also mark a word and click Ctrl + k to link this word.
`<blockquote>`	Used for citations Example: `<blockquote><p>Cited text or paragraph</p></blockquote>`
`<p>`	Used to define a paragraph Example: `<p>Paragraph</p>` Shortcut: Mark paragraph and press Ctrl + p
`<s>`	Crosses out text Example: `<s>strike through text</s>`
`<u>`	Underlines Text Example: `<u>underlined text</u>`
`<hr/>`	Horizontal Line
`<ol>`	Ordered list
`<ul>`	Unordered list
`<li>`	List element
`<img>`	Defines an image, requires `src`-attribute, optional: `alt`, `data-caption`-attribute Allowed classes: "materialboxed" - allows to zoom in on images Example: `<img src="https://www.image-source.de/img.jpg" class="materialboxed" alt="alternative description of the picture" />` Shortcut: Copy image src-link or ASIN to clipboard, go to textarea on ProDuck, click into textarea to choose a position and press Ctrl + g to insert the image embedded in html code
`<i>`	Can be used to implement icons with class `material-icons` and the appropriate icon-name. Please find further information here: https://developers.google.com/fonts/docs/material_icons Example Star-Icon: `<i class="material-icons" >star</i>`
`<iframe>`	Only allowed to embed youtube videos in the form of: `<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/Lyr_qNrSZpI" title="VIDEO-TITEL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
`<table>`	Defines a table
`<th>`	Defines a header cell in a table
`<tr>`	Defines a row in a table Allowed attributes: `colspan`, `rowspan`
`<td>`	Defines a cell in a table Allowed attributes: `colspan`, `rowspan`
`<caption>`	Defines a table caption
`<colgroup>`	Specifies a group of one or more columns in a table for formatting
`<col>`	Specifies column properties for each column within a `<colgroup>` element
`<thead>`	Groups the header content in a table
`<tbody>`	Groups the body content in a table
`<tfoot>`	Groups the footer content in a tableTag

Weiterführende Infos zu HTML findest du unter https://www.w3schools.com/html/

Zum Artikelbereich

Pro- und Contra

Um Vor- und Nachteile eines Produktes aufzuzeigen, bietet sich eine Pro-Contra Gegenüberstellung an, die ihr mit folgendem Code erstellen könnt.

              
                <outerBox class="comparison-wrapper" >
                  <innerBox class="pro-box">
                    <ul>
                      <li>hohe Saugkraft erzielt sehr gute Reinigung von Hart- und Teppichböden</li>
                      <li>gute Wischfunktion mit vibrierender Wischplatte</li>
                      <li>Wischen und Saugen von Teppichen und Hartböden in einem Gang</li>
                      <li>sehr gute Navigation und Kartierung</li>
                      <li>...</li>
                    </ul>
                  </innerBox>
                  <innerBox class="contra-box">
                    <ul>
                      <li>schlechte Reinigung in Ecken</li>
                      <li>Trockenfunktion für Wischmopp nicht im Lieferumfang</li>
                      <li>lautes Vorderrad</li>
                      <li>mäßige Hinderniserkennung</li>
                      <li>...</li>
                    </ul>
                  </innerBox>
                </outerBox>

Tabellen erstellen

Tabellen könnt ihr nach üblichen HTML-Format erstellen. Nachfolgend ein Beispiel:

              
                <table>
                  <thead>
                    <tr><th>Eigenschaft</th><th>Bewertung</th><th>Kommentar</th></tr>
                  </thead>
                  <tbody>
                    <tr><td>Reinigungsleistung</td><td>⭐⭐⭐⭐⭐</td><td>sehr saugstark und gründlich, gute Reichweite</td></tr>
                    <tr><td>Design und Verarbeitung</td><td>⭐⭐⭐⭐⭐</td><td>modern, hochwertig, klares Display</td></tr>
                    <tr><td>Handhabung</td><td>⭐⭐⭐⭐⭐</td><td>gute Führung, recht schwer</td></tr>
                    <tr><td>Lieferumfang</td><td>⭐⭐⭐⭐</td><td>gute Ausstattung, Pro Ex Version mit weiteren Komponenten bisher nicht verfügbar</td></tr>
                    <tr><td>Steuerung</td><td>⭐⭐⭐⭐⭐</td><td>einfach, App ermöglicht weitere Einstellungen</td></tr>
                    <tr><td>Lautstärke</td><td>⭐⭐⭐⭐⭐</td><td>angenehm leise</td></tr>
                    <tr><td>Gerätereinigung</td><td>⭐⭐⭐⭐</td><td>einfach, leider bleibt Dreck hinter Nachschiebemechanismus hängen</td></tr>
                    <tr><td>Preis-Leistung</td><td>⭐⭐⭐</td><td>hochpreisig</td></tr>
                  </tbody>
                </table>

Aufklappbare Textblöcke - Toggles - einbinden

Um aufklappbare Textblöcke, die sich zum Beispiel für FAQs anbieten, einzubinden (auch unter den Namen Collapsible, Akkordeon oder Toggle zu finden), könnt ihr folgenden Code nutzen.

              
                <ul class="collapsible">
                  <li>
                    <innerBox class="collapsible-header"><i class="material-icons">help</i><h3>TEXT</h3></innerBox >
                    <innerBox class="collapsible-body"><p>TEXT</p></innerBox >
                  </li>
                  <li>
                    <innerBox class="collapsible-header"><i class="material-icons">help</i><h3>TEXT</h3></innerBox >
                    <innerBox class="collapsible-body"><p>TEXT</p></innerBox >
                  </li>
                  <li>
                    <innerBox class="collapsible-header"><i class="material-icons">help</i><h3>TEXT</h3></innerBox>
                    <innerBox class="collapsible-body"><p>TEXT</p></innerBox >
                  </li>
                </ul>

Bilder formatieren

Um Bilder in den Text einzufügen, könnt ihr folgenden Code verwenden.

              
                <figure>
                  <img class="materialboxed" src="https://www.image-source.de/img.jpg" alt="Alternative Beschreibung zum Bild" />
                  <figcaption>UNTERTITEL ZUM BILD</figcaption>
                </figure>

Um mehrere Bilder nebeneinander zu positionieren, könnt ihr folgenden Code verwenden.

              
                <outerbox class="comparison-wrapper">
                  <figure>
                    <img class="materialboxed" src="https://www.image-source.de/img.jpg" alt="Alternative Beschreibung zum Bild" />
                <figcaption>UNTERTITEL ZUM BILD 1 </figcaption>
                  </figure>
                  <figure>
                    <img class="materialboxed" src="https://www.image-source.de/img.jpg" alt="Alternative Beschreibung zum Bild" />
                <figcaption>UNTERTITEL ZUM BILD 2 </figcaption>
                  </figure>
                </outerbox>

Hervorheben von Text

Um einen Text herzuvorheben (z.B. Hinweise auf weiterführende Quellen), verwendet folgenden Code.

              
                <outerBox class="highlight-box">
                  <p>TEXT</p>
                </outerBox>

Um einen Text in eine Info-Box einzubetten, verwendet folgenden Code.

              
                <outerBox class="info-box">
                  <p>TEXT</p>
                </outerBox>

Anzeigen eines Inhaltsverzeichnis

Um ein Inhaltsverzeichnis in eurem Text anzeigen zu lassen, könnt ihr einfach den Code [tableofcontent] oder [toc] an die Stelle schreiben, an der das Inhaltsverzeichnis erscheinen soll. Das Inhaltsverzeichnis wird aus allen H2-Überschriften gebildet.

Amazon Produkt Widget anzeigen

Um ein Produkt mit Infos und Bild zum Produkt plus Amazon Link im Text anzeigen zu lassen, bindet einfach den Code [asin="B08C1KN5J2",type="standard"] in euren Text ein. Die ASIN (z.B. "B08C1KN5J2" für den Fire TV Stick) ist die Amazon-ID des jeweiligen Produktes. Ihr findet sie sowohl im Amazon-Link zum Produkt, als auch auf der Produktseite bei den Produktdaten.
Es gibt neben dem kleinen standard-Widget, das Widget large für ein großes Widget und blank für ein Widget ohne Text, bei denen das Bild jeweils 100% der Textblockbreite einnimmt.

Anzeigen aktueller Deals in eurem Text

Um aktuelle Deals passend zum Inhalt (falls passende Angebote vorhanden sind) in einem Text anzeigen zu lassen, könnt ihr in einfach den Text [topdeals] schreiben. Passende Deals werden später an dieser Stelle geladen.

ProDuck Styleguide