Jimdo Homepage Tipps

Die Jimdo Homepage bietet eigentlich alles was man für das erstellen einer Website benötigt, aber manchmal möchte der Benutzer doch Kleinigkeiten ändern um das Layout auf seine Bedürfnisse anzupassen. Auf dieser Seite werden Tipps gegeben wie durch einfache HTML Codes, im Bereich Einstellungen-Head bearbeiten, Anpassungen möglich sind. Getestet wurden die Änderungen auf dem neuen responsiven Jimdo Layout Malaga.

Die Beispiele sind natürlich ohne Gewähr und durch falsche Anwendung kann die Seite unbrauchbar werden. Also vor der Anwendung erst überlegen was man tut. Am besten die Homepage auf einen zweiten Tab noch einmal öffnen um im Notfall alles rückgängig zu machen.

Content breiter machen (Jimdo Layout Malaga)

<style type="text/css">

/*<![CDATA[*/

.content-options

{max-width: 1200px !important;}

/*]]>*/

</style>

 

Die maximale Breite des Contentbereichs wird im Jimdo-Css des Layouts Malaga unter der DIV-Class .content-options bestimmt.

Das Attribut max-width bestimmt die Breite in Pixeln (hier 1200px).

Mit !important wird festgelegt das der Befehl vor den eigentlichen Css Anweisungen gültig ist.

Anmerkung:

Um eine bessere Darstellung für mobile Endgeräte und kleinere Bildschirmgrößen zu erzielen, sollte der Wert nicht in Pixeln sondern in % angegeben werden.

Beispiel: ...{max-width: 120%}

 



Navigation in der Topbar anpassen

Auf Nachfrage von Weingut Haberkern Betz.

Wir haben das Problem wie unten beschrieben gelöst. Es gibt bestimmt elegantere Lösungen aber es funktioniert. Die Werte müßt Ihr nur noch auf eure Website anpassen.

Gruß MySpartester

<style type="text/css">

/*<![CDATA[*/

.topnav-wrapper {max-width: 1600px !important;}

.mainnav {max-width: 1600px !important; margin: 35px 300px 25px 0 !important;}

/*]]>*/

</style>



Um mehr Navigationspunkte auf eine Zeile zu bekommen muß zuerst der .topnav-wrapper verbreitert werden ( hier auf max-width:1600px).

Als nächstes .mainnav anpassen und die Außenabstände mit margin setzen.

Margin-Werte: 1. Wert oben, 2. Wert rechts, 3. Wert unten, 4. Wert links



Abstand Content-Bereich vom oberen Bildschirmrand anpassen.

<style type="text/css">

/*<![CDATA[*/

.content-options

{margin: 150px !important;}

/*]]>*/

</style>

Der Abstand des Contentbereichs vom oberen Bildschirmrand wird unter .content-options mit dem Attribut margin eingestellt. Vorgegeben sind 200px. Bei 150px beginnt der Body genau unter dem Header.




Eigenes Bild im Header einfügen.

<style type="text/css">

/*<![CDATA[*/

 

.topbar{background-image:

url(hier die url des Bildes einfügen)

;background-repeat:no-repeat;}

 

/*]]>*/

</style>

Der Header wird im Layout Malaga mit .topbar angesprochen. Um einen eigenen Hintergrund einfügen zu können muß es erst mit einem Bildbearbeitungsprogramm auf die richtige Größe gebracht werden. Wir empfehlen dafür den Magix-Foto und Grafik Designer.

Im nächsten Schritt wird in Jimdo eine Unterseite für Bilder und Grafiken erstellt und auf nicht sichtbar gespeichert. Auf dieser Seite (Bildarchiv) können später alle eigenen Bilder gespeichert werden.

Um die URL festzustellen wechseln Sie im Bildarchiv auf Ansicht und klicken dann das Bild mit Rechtsklick an. Wählen Sie Bild-Url-Kopieren. Die kopierte Url wird in den grünen Bereich des Codes eingefügt.



Andere Hintergrundfarbe für Überschriften H1 bis H3

<style type="text/css">

/*<![CDATA[*/

h1

{background-color:#cfc;}

h2

{background-color:#fff;}

h3

{background-color:#ffd65e;}

/*]]>*/

</style>

Auch in den neuen Layouts kann der Hintergrund der Überschriften nicht verändert werden. Wer trotzdem eigene Farben verwenden möchte, braucht nur diesen einfachen Code in sein HTML eingeben.

Die Farbwerte sind individuell anpassbar.

Wer nur eine oder zwei der Überschriften farblich hinterlegen will muß nur die gewünschte Überschrift im Code eingeben.


Größe des Logobereichs ändern

<style type="text/css">

/*<![CDATA[*/

 

.jtpl-logo

{

width:120px;

height:120px;

padding:0 5px;

margin:15 0 0 -300px;

}

/*]]>*/

</style>

 

Das Logo oder der Logobereich wird mit .jtpl-logo angesprochen.

Mit width und height lässt sich die Größe in Breite und Höhe verändern.

Natürlich muß dann auch das Bild auf diese Größe angepasst werden.

Mit margin bestimmt man den Standort des Logos.

Die Angaben in Pixel (px) können auch in Prozentwerten (%) gemacht werden.


Trennlinie bearbeiten

.j-hr hr

{

border: 0;

height: 3px;

width: 60%;

background: #333;

background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);

background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);

background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);

background-image: -o-linear-gradient(left, #ccc, #333, #ccc);

}


Die Trennlinie wird mit .j-hr hr angesprochen. Mit width und height lässt sich die Breite und Höhe verändern.

Auch die Farbe oder der Farbverlauf kann angepasst werden. Mit Background-Image sind auch Bilder als Trennlinie möglich.

Mit Margin kann der Linie ein genauer Standort zugewiesen werden.


Vertikale Trennlinien in Spalten mit Column

div .trennspalt {
   -moz-column-count: 3;
-moz-column-gap: 20px; -webkit-column-count: 3;
-webkit-column-gap: 20px; -o-column-count: 3;
-o-column-gap:
20px;
-ms-column-count: 3;
-ms-column-gap: 20px;
-moz-column-rule: 2px solid red; -webkit-column-rule: 2px solid red; -o-column-rule: 2px solid red; -ms-column-rule: 2px solid red; }

Im unteren Beispiel seht ihr eine vertikale Trennung in drei Spalten.

Spaltentrennlinie mit Column erzeugen um eine bessere Lesbarkeit zu ermöglichen. wie verhält sich der Trennstrich. Spaltentrennlinie mit Column erzeugen um eine bessere Lesbarkeit zu ermöglichen.Spaltentrennlinie mit Column erzeugen um eine bessere Lesbarkeit zu ermöglichen. Spaltentrennlinie mit Column erzeugen um eine bessere Lesbarkeit zu ermöglichen. Spaltentrennlinie mit Column erzeugen um eine bessere Lesbarkeit zu ermöglichen. Spaltentrennlinie mit Colum erzeugen um eine bessere Lesbarkeit zu ermöglichen. 

Mit dem CSS3 Befehl Column lassen sich Textblöcke in Spalten übersichtlicher darstellen.


Verschiedene Hintergrundbilder im Content-Bereich einfügen

<style type="text/css">

/*<![CDATA[*/

    

.content-options

{background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=1127x10000:format=png/path/s3db73477274d4045/image/i614badda40e1ccc6/version/1456071455/image.png);

background-repeat: no-repeat;

background-size:100% 300px;} 

    

/*]]>*/

</style>

Im Header der Seite ganz oben wurde ein Hindergrundbild eingefügt und auf Höhe und Breite skaliert. Das Bild wurde vorher, damit die Schrift besser lesbar ist, mit dem Magix Foto Designer aufgehellt.

Wie immer wurde das Bild in das Archiv abgelegt damit eine Jimdo-Url vorhanden ist.

Unter Einstellungen Head bearbeiten muss die Option ausgewählte Unterseite gewählt werden damit der Hintergrund nur auf dieser Seite aktiv ist.

Mit der DIV .content-options kann der Hintergrund auf der jeweiligen Seite oder der ganzen Website eingefügt werden.

Mit der Anweisung background-repeat: no-repeat wird eine Wiederholung des Bildes vermieden.

Mit background-size wird der Hintergrund skaliert, in diesem Fall auf 100% Breite und 300 Pixel Höhe.


Dein WordPress Blog - günstig, mit Domain und E-Mails!

Wenn wir euch mit unseren Tipps helfen konnten würden wir uns über ein Facebook like oder G+ freuen.

Bitte bei Fragen eure Website angeben, dann können wir eure Seite besuchen und Fehler besser eingrenzen.


Kommentar schreiben

Kommentare: 34
  • #1

    weingut-haberkern-betz (Mittwoch, 04 Februar 2015 14:28)

    Hallo,
    geht das auch mit dem content von der Navigationsseite? bei mir fängt bei zu vielen Navigationsbuttons eine zweite Reihe an. Das finde ich nicht gut.

    Vielen Dank im Vorraus!

  • #2

    Kevin Retlich (Freitag, 22 Mai 2015 19:21)

    Kann man auch die Größe des Logobereichs ändern?

  • #3

    MySpartester (Samstag, 23 Mai 2015 05:18)

    Der Code für die Änderung der Logogröße wurde als neuer Tipp hinzugefügt.

  • #4

    Manfred (Dienstag, 04 August 2015 18:32)

    Die Tips haben mich ein ganzes Stück weitergebracht. Danke!

  • #5

    Kerstin (Montag, 07 September 2015 22:22)

    Hallo, Ich möchte auch die Menüzeile breiter machen weil sie mir zweizeilig überhaupt nicht gefällt Nutze auch das Theme Malaga, kann aber den passenden Ort/die passende Zeile für den html Code nicht finden! Würde mich echt sehr über eure detailierte Hilfe freuen!

    Liebe Grüße aus Österreich! Kerstin

  • #6

    MySpartester (Dienstag, 08 September 2015 04:01)

    Hallo Kerstin, nutze die Anleitung Navigation in der Topbar anpassen. Verwende anstatt der Pixelangaben (1600px) die Prozentangabe 100 % für max-width.
    <style type="text/css">
    /*<![CDATA[*/
    .topnav-wrapper {max-width: 100% !important;}
    .mainnav {max-width: 100% !important;margin: 25px 390px 25px 0px !important;}
    /*]]>*/
    </style>
    Wenn du einen Rechts-Klick auf das Menü machst wird bei Google ein Fenster geöffnet. Wähle hier Element untersuchen und du kannst die einzelnen Punkte deines HTML-Codes ansehen.

  • #7

    Heinz (Freitag, 02 Oktober 2015 16:48)

    Gibt es eine Möglichkeit allen Bildern in der Webseite einen leichten Schatten zu verpassen?

  • #8

    Oliver (Donnerstag, 25 Februar 2016 11:31)

    Größe des Logobereichs ändern

    Leider funktioniert das überhaupt nicht! Habe alles befolgt. Mache ich dennoch etwas falsch? Danke und Grüße!!!

  • #9

    Harald (Donnerstag, 25 Februar 2016 18:08)

    Hallo Oliver, normal muß das so funktionieren, hast du ein anderes Layout?
    Wenn du den link zu deiner Seite schreibst kann ich es mal nachsehen.

  • #10

    Oliver (Freitag, 26 Februar 2016 06:13)

    Hallo Harald, nein, ich habe kein anderes Layout. Es ist Malaga.

    http://pma-concept.jimdo.com/

    Seite befindet sich noch im Aufbau!

    Danke für Deine Hilfe

  • #11

    Harald (Samstag, 27 Februar 2016 06:33)

    Hallo Oliver,
    versuch mal im Head-bereich deiner Webseite den logobereich nach links zu verschieben.
    .jtpl-logo {margin: 0 0 0 -130px}
    Um die Navigation weiter zu straffen könntest du auch die Abstände zwischen den einzelnen Buttons verkleinern.
    Gruß Harald

  • #12

    Oliver (Samstag, 27 Februar 2016 11:07)

    Diesen Befehl nimmt das System leider nicht an!

  • #13

    Harald (Samstag, 27 Februar 2016 14:48)

    Hallo Oliver,
    wenn ich die margin werte über Google prüfen in deine Website eingebe funktioniert es einwandfrei.
    .jtpl-logo {
    padding: 0 2rem;
    width: 250px;
    width: 25rem;
    box-sizing: border-box;
    margin: 0 0 0 -130px;
    } das ist eine Kopie aus deiner Seite.

  • #14

    Frank (Montag, 23 Mai 2016 20:45)

    Hallo Oliver,

    vielen Dank für die hilfreichen Tipps, da ich genau das Problem hatte, daß mir der Contentbereich im Design "Malaga" zu weit oben beginnt und somit den Hintergrund zu sehr verdeckt.
    Ich habe allerdings das Problem, wenn ich nun diesen auf meinen gewünschten Abstand anpasse, dann "schrumpft" in dem Zuge die recht mittig platzierte Headline in der Breite.
    Hast du da einen Tipp, wie ich diese, ähnlich wie bei "Content verbreitern" auch diese dazu bewege, in ein von mir geünschtes Format gebracht zu werden?

    Viele Grüße und recht herzlichen Dank schonmal

    Frank

  • #15

    Harald (Dienstag, 24 Mai 2016 03:56)

    Hallo Frank,
    mit .content-options wird der Inhaltsbereich nach unten verschoben. Das dürfte eigentlich keine Auswirkungen auf den Header haben.
    Ansprechpartner für den Header sind:
    .jtpl-header
    .jtpl-navigation
    .jtpl-logo
    Wenn du deine Webseite angibst lässt sich dein Problem besser untersuchen.

    Gruß Harald

  • #16

    Frank (Dienstag, 24 Mai 2016 10:47)

    Hallo Harald (wie kam ich nur auf Oliver?),

    hab mal die Adresse eingefügt. Im Moment bastel ich noch an der Startseite.
    Ich meinte aber nicht den Header/Navigationsbereich, sondern die "Headline/Überschrift" mit dem Sinnspruch.

    Viele Grüße

  • #17

    Frank (Dienstag, 24 Mai 2016 10:51)

    Wenn ich über die Zeilen zur horizontalen Anpassung des Content einfüge, hat das zwar Auswirkungen auf die Breite dieser Headline (dunkel transparent), der "Hintergrund" des Content (weiß) bleibt aber in der Ursprungsbreite bestehen,wie ich gerade feststellte.

  • #18

    Harald (Dienstag, 24 Mai 2016 17:28)

    Hallo Frank,
    du hast in .content-options einen margin-wert von 300px angegeben, wenn du nur einen wert eingibst gilt dieser für alle seiten...also oben,rechts,unten und links.
    die werte rechts und links addieren sich zu 600px dazu kommt noch die breite deines textfeldes. wenn dies breiter wird wie dein contentbereich springt der text um.
    für den abstand zum header brauchst du eigentlich nur den wert für oben.
    entweder mit dem befehl: margin-top: 120px; oder mit der angabe von vier werten:
    margin: 120px 0 0 0;
    Gruß Harald

  • #19

    Frank (Sonntag, 05 Juni 2016 11:01)

    Supper, vielen Dank, das hilft weiter. Was müsste ich noch zusätzlich einfügen, wenn Genanntes nur für die Startseite aber nicht für alle anderen Seiten zutreffen soll? Das geht dann sicher erst, wenn ich die Freischaltung auf zumindest pro habe.

  • #20

    Frank (Sonntag, 05 Juni 2016 17:13)

    Da bin ich wieder. Noch immer habe ich allerdings das Problem, dass die Überschriftenzeile sozusagen mit dem Einleitungstextes des Contents scheinbar verbunden und entsprechend mit verschoben wird. Gibt es für diese keine separate Bezeichnung?

  • #21

    Frank (Sonntag, 05 Juni 2016 17:38)

    Ich will also damit ausdrücken, daß ich auf der Startseite die Headline h2 gerne in der horizontalen mittig zwischen Navigation und Content platziert haben möchte. Die Abstände sollen gleich groß sein.

  • #22

    Harald (Sonntag, 05 Juni 2016 18:11)

    Hallo Frank,
    zu deiner ersten Frage:
    Ja das geht erst ab der Version Pro. Du kannst aber trotzdem jede Unterseite einzeln ansprechen. Jede Seite hat eine eigene ID. Wenn deine Einstellungen nur für die Startseite gelten sollen musst du die ID für die Startseite verwenden. Deine ID für die Startseite ist:
    #page-2345097987

  • #23

    Harald (Sonntag, 05 Juni 2016 18:33)

    Zur Frage zwei:
    Du hast in den content-options für diesen Bereich ein margin-left von 250px gesetzt.
    wenn du das rausmachst oder margin: auto setzt kommt es in die Mitte.

    Gruß Harald

  • #24

    Frank (Sonntag, 05 Juni 2016 19:09)

    Danke Harald. Ich habe das auf meiner ursprünglichen Seite (nochmal neu hinterlegt, da ich parallel mehrere Optiken ausprobieren wollte) nochmal umgeschmissen sozusagen und auch unnötige CSS-Einträge wieder rausgeschmissen.
    Könntest du dir diese nochmal anschauen, ausgehend vom Istzustand?
    Das müsste sich doch über das "Ansprechen" von den Größenwerten oder Platzierungen von h2 lösen lassen?
    Das Problem ist die noch immer nicht mittige Platzierung, hinzu kommt, wenn ich die Startseite durchscrolle, liegt dann die Überschrift h2 hinter der Navigation, was einfach schlecht ist - säße diese jetzt eben entsprechend weiter oben (also auf Höhe der Zierelemente des Tors), würde sie beim herunterscrollen auch nicht mehr hinter der Navigation, sonder "darüber" liegen, sozusagen. Den Content-Beginn würde ich von der Höhe her an der Stelle positioniert lassen wollen.

  • #25

    Nicole (Dienstag, 12 Juli 2016 08:01)

    Hallo Harald,
    ich habe .content options {max-width: 75 %;} genutzt, um die Breite des Contents zu reduzieren. Das klappt in der PC-Version auch wunderbar, Content und Sidebar werden schön nebeneinander dargestellt. Aber in der mobilen Ansicht ist der Content dann ebenfalls nur auf 75 % der Bildschirmbreite und der Rest ist frei, denn die Sidebar wird darunter angezeigt. Hast Du hierfür einen Lösungsvorschlag?

  • #26

    wolfgang (Donnerstag, 29 September 2016 14:31)

    hallo harald! hätte ebenfalls eine frage:
    würde gerne im warenkorb-bereich meiner jimdo-seite unterhalb der versandkosten (nur sichtbar wenn ein produkt gewählt wurde und man dann auf warenkorb bzw. kasse geht) einen zusätzlichen verweis reingeben, sprich unterhalb des punktes versandkosten noch einen satz einfügen.

    wie kann ich das denn bewerkstelligen, hast du vielleicht dazu einen tipp?

    vielen dank & lg
    wolfgang

  • #27

    Harald (Samstag, 01 Oktober 2016 04:53)

    Hallo Wolfgang,
    das Problem kannst du bestimmt mit Div Zuweisungen lösen.

  • #28

    Joe Kern (Sonntag, 02 Oktober 2016 14:17)

    Hallo,
    ich baue gerade eine HP im Design Barcelona. Das Content-Fenster kann ich ja mit dem obigen CSS locker auf eine gewünschte Größe bringen, leider aber nicht die Navigationsleiste genauso breit machen...
    Gibt es da eine Lösungsmöglichkeit?

  • #29

    Harald (Sonntag, 02 Oktober 2016 16:05)

    Hey Joe,
    wenn du mir den link zu deiner Webseite angibst kann ich mir das genauer ansehen. Eine Möglichkeit wäre das Logo weiter nach links zu schieben und der Navigation einen margin-left Wert mitzugeben.

    Gruß
    Harald

  • #30

    Hara (Donnerstag, 05 Januar 2017 12:42)

    Hallo, ich habe gestern auf das Design Rom umgestellt und versuche schon seit Stunden unter Einstellungen/Header bearbeiten/Gesamte Seite mit dem diesem Code den Header (der weiße Balken wo das Menü drauf sitzt) mit meinem eigenem Bild zu ersetzen. Leider erfolglos. Was mache ich falsch?
    <style type="text/css">
    /*<![CDATA[*/

    .topbar{background-image:
    url(https://image.jimcdn.com/app/cms/image/transf/dimension=940x10000:format=jpg/path/s7ee536152f6735d7/image/i063f5738851cd191/version/1483614618/image.jpg)
    ;background-repeat:no-repeat;}

    /*]]>*/
    </style>

    Für einen Denkanstoß wäre ich sehr dankbar
    mfG
    Hara

  • #31

    Lutz Loescher (Mittwoch, 15 Februar 2017 19:38)

    Hallo,
    ich würde gerne im neuen Jimdo im Layout Miami in der Funktion Wechselbild (Hintergrund) die Bilder nicht in Vollbreite anzeigen lassen, sondern Höhe und Breite selbst definieren.
    Ist mir leider per CSS im Header nicht gelungen. Vorschlag willkommen :-)
    Danke, Lutz

  • #32

    Frank (Donnerstag, 09 März 2017 17:40)

    Hallo, ich habe das auch vergeblich versucht, damit ich mir die zweite zeile sparen kann. Sobald ich mit der selben Schriftgröße 18 auf reine Großbuchstaben gehe, erhalte ich eine neue Zeile. Über Element untersuchen und dortiger Abstandseingaben klappt das zwar, mit dem Befehl im CSS passiert aber leider nichts (auch der Versuch, den Logobereich zu verkleinern, scheiterte). Eine andere Frage zum Hintergurnd des Contents:
    Ich möchte diesen nur unterschiedlich auf manchen Unterseiten einfärben, also keinen Bildverweis einfügen. Was muss ich ändern? Danke

  • #33

    Chris (Donnerstag, 23 März 2017 17:28)

    Hallo
    ich habe ein Problem mit meinem Jimdo Shop und hoffe Ihr könnt mir helfen.
    Wie verringere ich den Abstand vom Header also der oberen Zeile mit Logo und Navigation wenn ich das richtig verstanden habe zu der Slideshow bzw zu dem anfangs Content meiner seite. Ich habe es schon mit dem Code
    <style type="text/css">
    *<![CDATA[*/
    .content-options
    {margin: 150px !important;}
    /*]]>*/
    </style>
    versucht allerdings ist dann die Slideshow nur kleiner geworden und die Shop Produkte haben sich von vier auf zwei nebeneinader geändert.
    Bin totaler Neuling was Html und co angeht und verzweifele noch.

    Liebe Grüße

  • #34

    Helmut (Sonntag, 09 April 2017 18:27)

    Hallo Joe, könntest du mir bitte bezüglich des Header Bereich meiner Website helfen? Ich möchte gerne zusätzlich über das aktuelle Hintergrundbild eine Zeile einfügen um dort einen gewissen Text an den Kunden zu kommunizieren. Die Zeile soll über dem Logo meiner Website erscheinen.
    Außerdem wollte ich dich noch fragen, ob du mir sagen kannst, wie ich den Body und die Kopfzeile meiner Website verbreitern kann ohne das Design zu wechseln?

    Vielen lieben Dank! :) Du wärst mir eine riesen Hilfe!

    LG,
    Helmut