Design Clean
    >> Tipps zum anpassen

News gestalten

Eine News-Seite erstellen


    Auf Beschreibung mit Baukasten-Extra "News" habe ich verzichtet. Das Extra lässt sich schwerer anpassen

  • Live Demo hier : So kann es aussehen
  • oder Beispielgrafik Rechts anklicken ->

  • auf "Seiten" gehen
  • neue Seite mit Titel "News" erstellen
  • oben links im Editor auf "Quellcode" klicken
  • nun ist die Seite in HTML-Code-Ansicht
  • folgende Codes im Seiteninhalt einfügen

<style type="text/css">
<!--
.news { width:560px; margin:10px 0px 30px 0px; overflow:hidden; }
.newstitle { float:left; font-weight:bold; }
.newsdate { padding:2px 10px 2px 10px; float:right; font-family:verdana; font-size:10px; }
.newspic { width:250px; float:left; padding:5px; border:1px solid #c9c9c9; }
.newstext {width:290px; float:right; font-family:arial!important; }
-->
</style>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 1</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 1" alt="Bildtitel 1" />
<p class="newstext"> Hier Dein News-Text 1 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 2</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 2" alt="Bildtitel 2" />
<p class="newstext"> Hier Dein News-Text 2 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 3</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 3" alt="Bildtitel 3" />
<p class="newstext"> Hier Dein News-Text 3 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 4</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 4" alt="Bildtitel 4" />
<p class="newstext"> Hier Dein News-Text 4 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

<div class="news">
<h3 class="newstitle"> Hier Überschrift 5</h3> 
<p class="newsdate"> Hier Datum</p>
<br style="clear:both;" />
<img class="newspic" src="HIER GRAFIKADRESSE 5" alt="Bildtitel 5" />
<p class="newstext"> Hier Dein News-Text 5 einfügen </p>
<br style="clear:both;" />
</div>
<hr>

Bilder werden (siehe CSS-Code bei .newspic ) automatisch auf 250 Pixel Breite verkleinert.
Im Code nur noch Überschriften, Datum, Grafikadressen und gewünschten Text einfügen.
Die GRAFIKADRESSE findet Ihr im Baukasten wie folgt:

  • auf "Bilder" gehen
  • suche das Hochgeladene Bild
  • Bild mit der Maus anklicken
  • das Bild wird nun vergrößert dargestellt
  • mit Rechtsklick auf das Bild
  • auswählen: "Grafikadresse kopieren"
  • und nun im Code einfügen

Tipp für Deine News :

Das Textfeld neben dem Bild habe ich bewusst klein gehalten. Füge einen "weiterfrührenden Link" ein, wenn die News mehr Text benötigen. Erstelle eine neue Seite, wo die News ausführlicher beschrieben wird. Diese neue Seite kannst Du in der Navigation verstecken, so das sie nur von deinen News aus erreicht werden kann.

Gerade bei vielen News wird es der Besucher Dir danken, wenn er aus der kürzeren Übersicht heraus entscheiden kann, welche News ihn interessieren. Damit wird auch ein "endlos-scrollen" vermieden.

Wer auch auf anderen Seiten im Seiteninhalt gerne "Texte neben Bilder" platzieren möchte, sollte sich die Beschreibung Text neben Bild anschauen. Dazu benötigt Ihr keinen Code. Es geht mit dem Editor.






Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :16 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben