Jimdo erlaubt mittels CSS Eingriffe in das Design. Damit kann man in vielerlei Hinsicht seine eigene Webseite den Wünschen entsprechend anpassen. Außerdem kann man auch störende Elemente ausblenden. In diesem Beitrag wird beschrieben wie zwei Elemente ausgeblendet werden können, weil sie einfach stören:
- Breadcrumps: Manche Jimdo Templates beinhalten besitzen Breadcrumps. Ob man bei einer Webseite mit maximal 3 Ebenen Breadcrumps benötigt sei dahingestellt. Auf jeden Fall kann es sein, dass einem die Darstellung nicht gefällt und man diese ausblenden möchte.
- Leerer Warenkorb: Verwendet man den Webshop von Jimdo so wird der Warenkorb immer auf der Webseite angezeigt. Gerade in der mobilen Ansicht kann das sehr störend sein.
|
Wie identifiziere ich das auszublendende Element? |
Um ein Element auszublenden muss man dieses zunächst identifizieren. Dazu bietet der Google Chrome mit den Entwicklertools ein sehr hilfreiches Werkzeug. Die Entwicklertools verwendet man indem man im Google Chrome auf das Menü öffnet und dort "Weitere Tools" öffnet. In dem Untermenü findet man die Entwicklertools. Wählt man diese aus, dann öffnet sich am rechten Rand der Webseite ein Fenster. Wenn man dies auf der eigenen, öffentlichen Jimdo Webseite macht, dann kann man darüber die auszublendenden Elemente identifizieren. Dazu bewegt man einfach den Cursor über das gewünschte Element auf der Seite und es öffnet sich ein Fenster das einen über die Details des Elements informiert - unter anderem auch den Namen. Ebenso lässt einem die Anzeige im rechten Bereich das Element jeweilige Element identifizieren.
Google Chrome Entwicklertools: weitere Informationen
|
|
Wie blende ich die Breadcrumps aus? |
Nachdem man das auszublendende Element identifiziert hat kann man ganz einfach im Head der Webseite (siehe dazu auch "Wie bearbeite ich den Head der Webseite?") den entsprechenden CSS Code hinzufügen. Dieser lautet im Fall von esecon.at - webseiten leicht gemacht:
<style type="text/css">
/*<![CDATA[*/
.jtpl-breadcrumb {display: none;}
/*]]>*/
</style>
TIPP: Hilfreich ist in so einem Fall immer wenn man auch auskommentiert was man da gemacht hat. Das macht man immer in dem man den Beschreibung zwischen /* und */ schreibt. Dann würde der CSS Code so aussehen.
<style type="text/css">
/*<![CDATA[*/
/* Hide btreadcrumps */
.jtpl-breadcrumb {display: none;}
/*]]>*/
</style>
Das Resultat sieht dann wie folgt aus (voher-nachher-Vergleich):
|
|
Wie blende ich den leeren Warenkorb aus? |
Analog zu den Breadcrumps kann man auch den leeren Warenkorb ausblenden. Das geht üblicherweise mit folgenden CSS Code
<style type="text/css">
/*<![CDATA[*/
/* Hide cart if empty */
.j-cart.is-empty {display:none;}
/*]]>*/
</style>
TIPP: Möchte man nun die Breadcrumps und den leeren Warenkorb gemeinsam ausblenden, dann kann man dies im Code zusammenfassen:
<style type="text/css">
/*<![CDATA[*/
/* Hide btreadcrumps */
.jtpl-breadcrumb {display: none;}
/* Hide cart if empty */
.j-cart.is-empty {display:none;}
/*]]>*/
</style>
Mit dieser Vorgehensweise kann man eine Jimdo Webseite zu einem großen Teil optimal seinen Wünschen entsprechend individualisieren. Beispielsweise kann dies auch verwendet werden um die Navigation auszublenden. Die Möglichkeiten gehen sogar so weit, dass man Elemente nur in der normalen Ansicht am PC sieht, diese aber im Responsive Design am Smartphone nicht angezeigt werden.
Ich hoffe der Beitrag hat dir geholfen und wünsche dir viel Spaß beim Anpassen deiner Jimdo Webseite! Hinterlasse gerne einen Kommentar wenn du Fragen zu dem Beitrag hast.
Kommentar schreiben