Home » Jimdo Tutorials » Jimdo Tutorial – Design

Jimdo Tutorial – Design

Jimdo Tutorial: Intro-Seite erstellen

1. Introseite erstellen

Zuerst einmal müsst ihr eine neue Seite auf eurer Page erstellen: Nennt sie am Besten „Intro“ und schiebt sie ganz nach oben in der Navigation, noch vor die Startseite. Diese neue Seite stellt ihr jetzt auf „verstecken“ durch ein Klick auf das Augen-Icon dahinter (diese Option müsst ihr zuvor in den Einstellungen aktivieren).

 

2. HTML-Code

Jetzt müsst ihr folgenden HTML-Code in ein neues HTML-Objekt auf dieser versteckten Introseite einfügen:

 

<div>
&lt;div style="width:100%; height:100%; background-color:white; z-index:10; position:fixed; top:0px; left:0px; border:0px; margin:0px; padding:0px;"&gt;<br>
&lt;center&gt;<br>
&lt;a&gt;INHALT&lt;/a&gt;<br>
&lt;/center&gt;<br>
&lt;/div&gt;&lt;div style="position: fixed; z-index:11; bottom: 5px; right: 5px;"&gt;&lt;a style="color:white;" onmouseover="javascript:document.getElementById('x').style.color='#00c6ff'" onmouseout="javascript:document.getElementById('x').style.color='white'" onclick="javascript:document.getElementById('intro').style.visibility='hidden'"&gt;&lt;b&gt;[Edit]&lt;/b&gt;&lt;/a&gt;&lt;/div&gt;
</div>

 

3. Erst einmal alles speichern…

Jetzt speichert ihr das ganze erst einmal ab und klickt auf „Ansicht“ unten auf eurer Page, um das vorläufige Ergebnis zu sehen. Wie könnt ihr die Seite jetzt bearbeiten, wo sie und alle Buttons ja überdeckt sind? Auch daran habe ich natürlich gedacht und ein Script in das Intro eingefügt. Ganz unten rechts in der Ecke befindet sich ein kleiner „Edit“-Button, der erst beim Darüberfahren mit der Maus sichtbar wird. Einfach anklicken und schon wird das Introfenster ausgeblendet! Das müsst ihr dann vor dem Bearbeiten immer ein bis zwei Mal machen…

 

4. Inhalt und Aussehen

Zuerst einmal die Hintergrundfarbe: Hier ist „white“ eingestellt, ihr könnt die Farbe durch jede beliebige HTML-Farbe ersetzen (Die haben folgendes Format: #000000). Jetzt muss das Ganze nur noch mit reinem HTML-Inhalt gefüllt werden, das geschieht an der Stelle <a>INHALT</a> im Code von oben. Der Inhalt wird automatisch zentriert, hier findet ihr mal die wichtigsten HTML-Befehle:

Text: Ein Textabsatz steht in einem

<div>
&lt;p&gt;Text&lt;/p&gt;
</div>

Fett: Den Text innerhalb des <p> könnt ihr fett schreiben durch

<div>
&lt;b&gt;Text&lt;/b&gt;
</div>

Neue Zeile:

<div>
&lt;br&gt;
</div>

Link: Im <p> das hier einfügen

<div>
&lt;a href="www.dagehtshin.de"&gt;Linktext&lt;/a&gt;
</div>

„Weiter zur Seite“-Link: (Den Link mit eurer Startseite ersetzen)

<div>
&lt;a href="http://deineseite.jimdo.com/startseite"&gt;Weiter zur Seite&lt;/a&gt;
</div>

Bild: Das Bild ladet ihr auf einer versteckten Seite hoch, geht in den Ansichtsmodus, Rechtsklick auf das Bild, Eigenschaften, Adresse rauskopieren.

<div>
&lt;img src="rauskopierte-Adresse.jpg" alt="Bildname"&gt;
</div>

 

Fertig!

 

Tutorial: Design-Tipps

Dieses Tutorial ist anders, als die, die ihr sonst so für Jimdo findet. Hier geht es nicht um spezielle Features oder Codes, sondern um Design-Fehler, die ihr unbedingt vermeiden solltet.

 

  • Sinnlose Widgets: Es gibt nichts schlimmeres, als eine Website, die versucht, ihren fehlenden Inhalt durch sinnlose und meist designerisch grausame Widgets aufzuwerten. Wetter, Musikplayer, etc. Füllt eure Seiten mit eigenen Texten, Bildern und Videos, nur das macht sie spannend und interessant. Die Widgets erhöhen die Ladezeiten enorm und stören Besucher, die sich wirklich für den Inhalt eurer Seite interessieren.

 

  • Gleich nach den Widgets stehen die „Animationen“, die es den Hobby-Homepagebauern irgendwie angetan haben müssen. Funkelnde Grafiken, blinkende und hüpfende Texte, einen super-hyper-mega Newssticker, usw. Nicht nur, dass diese Effekte nach Word 1995 aussehen, sie sind auch noch langsam und machen die Seite unübersichtlich. Keep decent! Weniger ist wirklich mehr.

 

  • Autoplay-Hintergrundmusik oder -Videos. Nervt eure Besucher nicht mit einer automatisch startenden Hintergrundmusik, oder bietet zumindest gut sichtbar einen Button zum Stummstellen an. Viele Surfer hören nebenher selbst Musik, durch die Überlagerung mit eurer Homepagemusik sind sie genervt und verlassen die Seite frühzeitig. Auf geschäftlichen und professionellen Webseiten hat Autoplay sowieso nichts verloren, da diese Seiten auch öfter einmal in Büros geöffnet werden. Dort gibt es entweder keine Lautsprecher, oder der Besucher schließt die Seite wegen des plötzlichen Lärms schnell.

 

  • Fette, bunte oder zu kleine Texte. Der Text eurer Webseite sollte einheitlich sein, das bedeutet: eine Schriftgröße, eine Schriftfarbe, eine Schriftart. Bei der Textgröße gilt es ein gutes Mittelmaß zu finden. Während 10px meist zu klein sind, ist 14px die Obergrenze. Verzichtet auf knallbunte, rote, blaue oder grüne Texte, für wichtige Meldungen gibt es hier in der Tutorialsammlung eine Anleitung, für alles andere ist die Standardfarbe optimal.

 

  • Ihr habt gerade eine Kopie von Photoshop „erworben“ und wollt der Welt mal richtig zeigen, was ihr drauf habt? Also schnell mal ein paar fette Verläufe über 143 Farben erstellen mit buntem Text darauf. Falsch. Vermeidet, wenn möglich, zu effektreiche Grafiken, einen übertriebenen Web 2.0 Look z.B. bei Buttons und vor allem Farbverläufe. Unter den Webdesignern heißt es: Was sich nicht durch bloße Farbflächen erreichen lässt, ist auch kein gutes Design. Wieder einmal heißt es: Keep decent!

 

  • Besucherzähler. Ein Besucherzähler ist letztendlich nur Angeberei und erfüllt keinen Zweck. Seiten mit wenigen Besuchern können dadurch sogar neue Besucher vergraulen, große Seiten haben die Counter nicht nötig und verzichten ganz darauf. Tipp: Die Besucher müssen nicht wissen, dass erst wenige hundert Leute auf eurer Seite waren. Manchmal ist kein Besucherzähler das bessere Marketinginstrument. Falls ihr selbst wissen wollt, wie viele Besucher auf eurer Seite waren: Dafür gibt es die Statistiken im Bearbeiten-Modus eurer Jimdo-Page oder das kostenlose Tool „Google Analytics“.
Subscribe
Subscribe