Alexander Kerscher · 2020. 4. 6. · bei „Modernes Webdesign ohne Programmierer“ bestellen Sie...

Leseprobe PDF-Version: Alle Inhalte urheberrechtlich geschützt – Weitergabe, Vervielfältigung und Weiterverkauf in jeder Form sind untersagt.

Die JIMDO-Handbücher von Alexander Kerscher sind KEIN Produkt der JIMDO GmbH

Alexander Kerscher

Das JIMDO-Codebuch Clevere Design-Anpassungen von Amsterdam bis Zurich - für JIMDO CREATOR. 8. überarbeitete Ausgabe 2021 inkl. Gratis Video-Seminar



Mehr Infos unter: www.Jimdo-Handbuch.de Dieses Buch/E-Book und seine Inhalte sind keine Produkte der Jimdo GmbH sondern made by Fruits & Harvest in Köln. Alle Inhalte sind urheberrechtlich geschützt, jede Verwertung bedarf der Erlaubnis des Autors. Verwendung des JIMDO-Logos mit freundlicher Genehmigung der JIMDO GmbH. Fruits & Harvest Inh. Alexander Kerscher JIMDO · WordPress · Typo3 Hohenstaufenring 62 50674 Köln www.fruits-harvest.de www.jimdo-handbuch.de www.jimjim.de



Gewidmet dem, der immer einen Weg fand Dr. Rudolf Kerscher 1928 - 2018



Lebendiger denn je: Der JIMDO Creator ........................................ 7

Hinweise zur Verwendung............................................................. 9

Einbauanleitung ........................................................................... 10 Hinweis ........................................................................................ 13 Bevor Sie loslegen... .................................................................... 13

Codes für die JIMDO Designs ........................................................ 14 Amsterdam .................................................................................. 14 Barcelona ..................................................................................... 18 Berlin ........................................................................................... 23 Bordeaux ..................................................................................... 27 Cairo ............................................................................................ 31 Cape Town ................................................................................... 36 Chicago .................................... Fehler! Textmarke nicht definiert. Copenhagen ............................ Fehler! Textmarke nicht definiert. Dubai ....................................... Fehler! Textmarke nicht definiert. Dublin ...................................... Fehler! Textmarke nicht definiert. Florence ................................... Fehler! Textmarke nicht definiert. Hamburg .................................. Fehler! Textmarke nicht definiert. Havana ..................................... Fehler! Textmarke nicht definiert. Helsinki .................................... Fehler! Textmarke nicht definiert. Hong Kong ............................... Fehler! Textmarke nicht definiert. Lille .......................................... Fehler! Textmarke nicht definiert. Lima ......................................... Fehler! Textmarke nicht definiert. Madrid ..................................... Fehler! Textmarke nicht definiert. Malaga ..................................... Fehler! Textmarke nicht definiert. Melbourne ............................... Fehler! Textmarke nicht definiert. Miami ...................................... Fehler! Textmarke nicht definiert. Milano ..................................... Fehler! Textmarke nicht definiert. New York ................................. Fehler! Textmarke nicht definiert. Osaka ....................................... Fehler! Textmarke nicht definiert. Paris ......................................... Fehler! Textmarke nicht definiert. Prague ..................................... Fehler! Textmarke nicht definiert. Reykjavik .................................. Fehler! Textmarke nicht definiert. Riga .......................................... Fehler! Textmarke nicht definiert. Rio de Janeiro .......................... Fehler! Textmarke nicht definiert. Rome ....................................... Fehler! Textmarke nicht definiert.



San Francisco ........................... Fehler! Textmarke nicht definiert. Shanghai .................................. Fehler! Textmarke nicht definiert. Singapore................................. Fehler! Textmarke nicht definiert. St. Petersburg .......................... Fehler! Textmarke nicht definiert. Stockholm ................................ Fehler! Textmarke nicht definiert. Sydney ..................................... Fehler! Textmarke nicht definiert. Tokyo ........................................................................................... 41 Verona ......................................................................................... 47 Vienna ......................................................................................... 52 Zurich ........................................................................................... 57

Funktionen für die JIMDO-Page .................................................... 62 Abstände im Bearbeiten-Modus markieren ................................ 63 Codes im Bearbeiten-Modus markieren ..................................... 65 Kingsize Navigations-Bearbeitung ............................................... 67 Jimdo-Lightbox in Weiß ............................................................... 69 Pflegbarer Text im Bild ................................................................ 71 Große Selectbox für Shopvarianten ............................................ 73 Feldhinweise ausblenden ............................................................ 75 Mouseover Bildervergrößerung .................................................. 76 Bildslider ohne Steuerelemente .................................................. 79 Der letzte Punkt ist ….rot! ........................................................... 81

Einbauvideo ................................................................................. 81

GRATIS: JIMDO Creator Video-Seminar ........................................ 83



Lebendiger denn je: Der JIMDO Creator Seitdem es JIMDO Dolphin gibt – der auch gar nicht wirklich so genannt werden möchte – führt der JIMDO Creator auf der Webseite des Hamburger Webbaukastens ein echtes Nischen-Dasein. Sehr zur Verwunderung einer großen JIMDO Creator Fan- und Agenturszene, die den smarten Webbaukasten als seriöses Einsteigertool und vollwertige Web- und Shoplösung für kleine Unternehmen und Mittelstand schätzt. Gut zu wissen, dass es JIMDO Creator weiterhin gibt und mit vielseitiger Anpassbarkeit Designs und Detailelemente (auch via CSS und Design-Schnittstelle) glänzt. Der JIMDO Creator verfügt über 40 - mit den Namen von Weltstädten versehene - responsive Layouts, die in Verbindung mit dem Jimdo Style-Tool den Usern für ihre individuellen Designwünsche bereitstehen. Unter

https://jimdo.design/ lässt sich eine kluge Auswahl des richtigen Designs treffen und unter unserer Hilfs-Domain

https://www.jimdo-creator.de/ können Sie ohne größere Suchaktionen Ihre Webseite sofort mit dem JIMDO-Creator erstellen, ohne über eine Anmeldung zum JIMDO Dolphin zu stolpern. Mit zusätzlichen CSS-Codes lassen sich im JDIMO Creator viele individuelle Ideen umsetzen. Dieses Buch ist der Schlüssel dazu. Als JIMDO Expert bin ich – neben Arbeiten mit Systemen wie WordPress oder Typo3 – täglich mit der Umsetzung individueller Designwünsche und kompletten Projekten von JIMDO Nutzern



beschäftigt. Hier entstand die Idee für beliebte JIMDO Codebuch das hier bereits in der 8. Auflage erscheint. Es liefert für jedes der 40 Creator-Designs kurze, hilfreiche Codes, die sich in wenigen Sekunden kinderleicht in die Seite einbauen lassen und damit neue Gestaltungsvarianten liefern, die bisher mit den Style-Funktionen nicht eingestellt werden können. So ergeben sich andere Template-Größen, verbesserte Mobilansichten und zusätzliche Designideen für Ihr Projekt – und das ist mit Sicherheit ein großer Gewinn an neuen Möglichkeiten. Auch wird das JIMDO Codebuch gerne als Einstieg in das Thema „CSS mit JIMDO“ verwendet. In dieser Version des JIMDO Codebuchs wurden alle Codes für JIMDO Creator erneut überarbeitet und wieder viel Augenmerk auf mobile Anpassung und gängige Screenformate gelegt. Auch haben wir wieder weitere erfolgreiche Funktionen aus unserer Plattform JimJim.de hinzugefügt. Auf geht’s und viel Erfolg mit Ihrer JIMDO Creator-Seite. Alexander Kerscher P.S. Wenn Sie Ihr Detailwissen rund um Dolphin und Creator erweitern möchten, freuen sich folgende Seiten auf Ihren Besuch:

https://www.fruits-harvest.de/dolphin https://www.fruits-harvest.de/creator/



Hinweise zur Verwendung Auf den nachfolgenden Seiten finden Sie von A bis Z alle derzeitigen JIMDO Creator-Designs, sowie ausgewählte Inhaltselemente - darunter die für dieses jeweilige Design oder Funktion geltenden Codes. Mit diesen Codes (die Sie aus diesem lizenzierten PDF herauskopieren und in Ihre JIMDO-Page einfügen können) bewirken Sie die beschriebenen Veränderungen. Für die Verwendung unserer Codes des JIMDO-Codebuches sollten Sie folgende Informationen zur Kenntnis nehmen.

• Die Codes für die Designs funktionieren nur in Verbindung mit dem genannten Design. Wenn Sie das Design gegen ein anderes tauschen, sollten Sie die Codes des alten Designs entfernen und gegen die des neuen austauschen.

• Sofern Sie noch andere CSS-Codes in Ihre JIMDO-Page

„eingeschleust“ haben, kann es (bei gleichlautenden Codeklassen) theoretisch zu Konflikten kommen.

• Durch (unangekündigte) Veränderungen der Designs

vonseiten des Systemanbieters JIMDO können die Codes theoretisch ihre Wirkung verlieren. Es wird demnach keine uneingeschränkte Funktionalität zugesichert.

• Die Codes finden nur eine Anwendung beim Produkt

JIMDO Creator. Beim sogenannten JIMDO Dolphin können kaum Veränderungen (schon gar nicht über CSS-Codes) integriert werden.



Einbauanleitung Idee und Vorgehensweise sind spielend einfach:

1. Codes zum gewählten Design aus diesem PDF in Ihre JIMDO-Page (Bereich ‚Head bearbeiten‘) hineinkopieren

2. Speichern 3. Fertig!

So wird z.B. aus dem Design „Dubai“ mit diesem Aufbau

folgendes Full-Screen Web



Der Einsatzort für die Codes des JIMDO-Codebuches ist der Bereich „Head bearbeiten“: Diesen finden Sie auf Ihrer Jimdo-Page eingeloggt unter den „Einstellungen“ > im Bereich „Head bearbeiten“

Beim Klick auf „Head bearbeiten“ öffnet sich ein Texteingabe-Bereich, den Sie (unterhalb des Kartenreiters „Gesamte Webseite“) für die Code-Eingabe und das Abspeichern nutzen können. Eventuell befinden sich bereit in diesem Bereich Codes die wir Ihnen empfehlen zu sichern. Siehe dazu den Absatz „Bevor Sie loslegen…“ auf Seite 13 dieses Codebuchs.



Sobald Sie unter DESIGNS das entsprechende Layout (auf das sich der Code bezieht) eingestellt haben, können Sie hier

• unsere Codes zu diesem Design einkopieren, • abspeichern und unten • rechts auf Ihrer JIMDO-Page die Besucher-Ansicht

aktivieren oder sich abmelden.

Beim neuen Laden Ihrer JIMDO-Page werden die hinterlegten Codes aktiviert und das Design wird in Sekunden „umgebaut“. Fertig! Ein kurzes detailliertes Einbauvideo finden Sie unter

https://www.jimdo-handbuch.de/einbau/

https://www.jimdo-handbuch.de/einbau/



Hinweis Seit dieser Ausgabe enthält das JIMDO-Handbuch seine Codes ausschliesslich in CSS-Version (und nicht mehr als externen CSS-Aufruf). Die Gründe dafür

• Die Codes lassen sich so einfacher bearbeiten und auf ausgewählten Unterseiten individualisieren

• Die Ladegeschwindigkeit wird zugunsten der Suchmaschinenoptimierung deutlich verbessert – insbesondere mobil

• Konflikte mit ggf. bereits vorhandenen Codes lassen sich besser identifizieren.

Die Codes werden aus diesem Handbuch für das entsprechende Design herauskopiert und im Bereich ‚ Head bearbeiten‘ Ihrer JIMDO-Page platziert.

Bevor Sie loslegen... Vielleicht befinden sich in Ihrer JIMDO-Page im Bereich „Head bearbeiten“ bereits andere Codes. Zum Beispiel Google-Codes oder JavaScript-Aufrufe.

1. Machen Sie von diesen vorhandenen Codes eine Sicherheitskopie, indem Sie alle Inhalte kopieren und diese in einer – schlau benannten - Text-Datei abspeichern.

2. Löschen Sie nichts, was sie nicht löschen wollen. Alle Codes die Sie einfügen, sollten Sie zu den vorhandenen Codes hinzufügen. Also unsere Codes bitte davor oder dahinter einfügen. Am besten dahinter.



Codes für die JIMDO Designs

Amsterdam 01 Verbreiterung Inhaltsbereich, Umpositionierung Sidebar, Verbreiterung Trennstrich auf 100% Ansicht Standard

Ansicht mit Code-Erweiterung



Der Inhaltsbereich ist auf volle Breite (1255px) gezogen – hier hat Jimdo das Basis-Design bereits selbst vergrößert. Die Sidebar – die in den größeren Bildschirmansichten rechts neben dem Content platziert ist - wird nun unter den Inhaltsbereich verlagert und kann als pflegbarer Footer verwendet werden. Dadurch ergibt sich insbesondere in Tablets (hochkant) eine harmonischere Ansicht. Der Horizontale Trennstrich wurde von 80% Breite auf 100% erhöht. In der Tablet- und Mobilversion wird ein verwendetes Logo mit einem minimalen Seitenabstand links etwas gefälliger platziert. 01 AMSTERDAM CSS-CODE

/* JIMDO Codebook



02 Umpositionierung des Logos – auch aus der mobilen Bildmitte Mobilansicht neuer Code Mobilansicht erweitert

Leider sind Logo (und eventuell vorhandener Seitentitel) bei der mobilen Version von AMSTERDAM mittig über die Hintergrundgrafik gelegt. Das wird je nach Bildmotiv als störend empfunden – auch in der horizontalen Ansicht. Mit dem nachfolgenden zweiten Code werden Logo und Bildtitel optional deutlich angehoben und oben positioniert, so daß sich eine insgesamt bessere Bildoptik ergibt. Das gilt für alle Ansichten, nicht nur für die mobile.



02 AMSTERDAM CSS-CODE

/* JIMDO Codebook

Um diese Design-Änderungen vorzunehmen, bitte den gewünschten Code im Bereich ‚Head bearbeiten‘ Ihrer JIMDO Creator-Seite platzieren. Anleitung, siehe Seite 11 oder online unter https://www.jimdo-handbuch.de/codebuch/

https://www.jimdo-handbuch.de/codebuch/



Barcelona 01 Verbreiterung Inhaltsbereich Ansicht Standard




Änderungen Unser Code macht aus Barcelona eine Webseite mit einem Inhaltsbereich der bei 1600 Pixeln Breite gedeckelt ist. Insgesamt steht so deutlich mehr Raum in den Desktop und Notebook-Varianten zur Verfügung. Mobil trennen wir uns vom nicht gestaltbaren oberen Balken und lösen in Richtung einer eleganten Burger-Navigation für Smartphones und Tablets auf. Dabei wird der übermäßige Raum oben und unten für das Logo reduziert – mobil entdeckt man so den Content (etwa eine Überschrift) früher.



01 BARCELONA CSS-CODE

/* JIMDO Codebook



02 Mobile Vergrößerung des Hintergrundbereiches Mobilansicht neuer Code Mobilansicht erweitert

Änderungen Eine zusätzliche Variante mit der in der Mobilversion Platz geschaffen wird für eine bessere Wirkweise des Hintergrundbildes. Unterhalb des Seitentitels werden 390 Pixel zusätzlicher Platz geschaffen.



02 BARCELONA MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 02 BARCELONA MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Berlin Ansicht Standard




Änderungen Der Inhaltsbereich wird auf 1280 Pixel Breite deutlich erhöht, wodurch sich bessere Möglichkeiten der Inhaltsgestaltung ergeben. Zwischen Logo und Titelzeile wurden die Abstände minimal erhöht. 01 BERLIN CSS-CODE

/* JIMDO Codebook




Änderungen In der mobilen Version von BERLIN wird dem Hintergrundbild im Grunde überhaupt kein Platz eingeräumt. Daher ergänzen wir hier um einen zusätzlichen Code der in der mobilen Version in Kombination mit der Verbreiterung genutzt werden kann.



02 BERLIN MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 BERLIN MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Bordeaux Ansicht Standard


Änderungen In unserer Verbreiterung wird der Inhaltsbereich auf eine anteilige Inhaltsbreite von mindestens 75% des Contents gesetzt und für größere Bildschirme auf 1280px deutlich vergrößert. Im Gegenzug zu älteren Versionen wird dem Headerbild wieder etwas mehr Raum gewährt. Kleinere Tablets verschieben die sogenannte Sidebar unter den Content. Gleichzeitig werden überdimensionierte Abstände zwischen Kopfbereich und Start des Contents reduziert.



01 BORDEAUX CSS-CODE

/* JIMDO Codebook




Änderungen Bordeaux schafft auf Smartphones mit einer Höhe von 800 Pixeln plus im Portrait-Modus bereits ordentlich Platz (ca. 50%). Wenn Ihre Webseite mehr Bild zeigen möchte, wählen Sie Sie zusätzlich die nachfolgenden Codes. Sie können durch Verändern des Wertes 610px den Bildanteil erhöhen oder verringern. Daher ergänzen wir hier um einen zusätzlichen Code der in der mobilen Version in Kombination mit der Verbreiterung genutzt werden kann.



02 BORDEAUX MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 BORDEAUX MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Cairo Ansicht Standard




Änderungen Cairo ist ein ideales Design für eine Headerinszenierung mit wenig Bildinhalt. Hintergründe wie Wolken, Wasser, Farben, Strukturen etc. sind hier gut gut aufgehoben. Mit dem nachfolgenden Code wird Cairo deutlich verbreitert. Mehr Contentfläche und bessere Verwendbarkeit durch Abstufungen für Notebooks und Tablets. Auch wurde die Mindesthöhe des Logos ausgehebelt, so dass Sie hier nun getrost kleinere oder flache Grafikelemente im Logobereich integrieren können. Der Inhaltsbereich wird anstelle der ursprünglichen 960 Pixel auf die eine Bildschirmbreite von 1280 Pixel gesetzt.



01 CAIRO CSS-CODE

/* JIMDO Codebook



02 Mobile Änderung des Hintergrundbereiches Mobilansicht neuer Code Mobilansicht erweitert

Änderungen In der Originalversion gibt es eine sichtbare Kopflastigkeit des Logos, was im Zusammenhang mit einer Logo-Inszenierung vor reduziertem Hintergrund unschön wirkt. Das Logo wird mit dem integrierten Code in der Position vermittelt indem der sichtbare Kopfbereich verkleinert wird.

Sollte Cairo doch mit einerm wirkungsvollen Hintergrundbild eingesetzt werden, ergänzen wir hier um einen zusätzlichen Code der in Kombination mit der Verbreiterung genutzt werden kann und das Hintergrundbild mobil in der Höhe deutlich vergrößert.



02 CAIRO MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 CAIRO MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Cape Town Ansicht Standard




Änderungen Cape Town ist als ‚fluid‘ und auf viel Fläche ausgelegt. Mit dem nachfolgenden Code wird die Breite der Seite noch einmalk deutlich auf bis zu 1360 Pixel vergrößert. Im Mobilbereich gibt es einige Fixes für bessere Abstände zwischen Logo, Titel und dem Schliessen-X für geöffnetes Menü.



01 CAPE TOWN CSS-CODE

/* JIMDO Codebook



02 Mobile Veränderungen Mobilansicht neuer Code Mobilansicht mit gefixter Navi

Änderungen Cape Town ist ein mobiles Schmuckstück. Da gibt es nichts zu vergrößern und keinen Hintergrund zu inszenieren, da dieses Design für einen semitransparenten Hintergrund gemacht wurde. Mit dem erweiterten Mobilcode haben wir in der Portraitansicht mobil den Navigationsheader fixiert. Der Code #000000 kann gegen jede beliebige Farbe getauscht werden.



02 CAPE TOWN MOBIL CSS-CODE

/* JIMDO Codebook





. . . weitere 160 Seiten Codes . . .



Tokyo Ansicht Standard




Änderungen Auch Tokyo ist eines der JIMDO-Designs mit (sofern gewünscht, sprich in den Design-Varianten einstellbar) imposantem Bildeinstieg und ausgeprägter Höhe. Da das Standard-Design diese Möglichkeiten bietet haben wir hier eine Codeanpassung für alle, die auf den Bildeinstieg verzichten möchten. So stehen die darunter platzierten Inhalte und Teaser viel früher im Mittelpunkt der Seite. Der Inhalt wurde zudem auf 1180 Pixel Breite erhöht.



01 TOKYO CSS-CODE

/* JIMDO Codebook




Änderungen TOKYO ergänzen wir hier um einen zusätzlichen Code der in der mobilen Version in Kombination mit der Verbreiterung genutzt werden kann. Den beispielhaften Wert von 593px können Sie mit einem beliebigen Wert variieren.



02 TOKYO MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 TOKYO MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Verona Ansicht Standard




Änderungen Verona ist ein Design, das – wie im Screenshot - am besten mit einem großen einfarbigen Logo funktioniert. Es verträgt sehr gut die zusätzliche Breite (1280 Pixel) und eignet sich in dieser Größe sehr gut für textlastige Webs.



01 VERONA CSS-CODE

/* JIMDO Codebook




Änderungen Sollte VERONA mit einem wirkungsvollen Hintergrundbild eingesetzt werden, ergänzen wir hier um den zusätzlichen Code der in oder ohne Kombination mit der Verbreiterung genutzt werden kann und das Hintergrundbild mobil in der Höhe deutlich vergrößert.



02 VERONA MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 VERONA MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Vienna Ansicht Standard




Änderungen Vienna wirkt sehr harmonisch mit großen Schriften und seiner – optimal für jüngere Zielgruppen - permanenten Burger-Navigation. Im großen Screen sind Navigation (links) und Warenkorb (rechts) erfrischend auf den äußersten Positionen gesetzt. Es empfiehlt sich grafisches Logo und Schrifttitel nicht gleichzeitig zu verwenden. Die erweiterte Breite auf 1280 Pixeln und die reduzierte Höhe passen sich harmonisch in die Wirkung des Designs ein.



01 VIENNA CSS-CODE

/* JIMDO Codebook




Änderungen VIENNA mit der abgesetzten Burger-Navigation in der oberen linken Ecke finden wir noch schmucker mit einem ca. 50%igen Hintergrund der auf beliebigen Seite gespielt werden kann. Hier also der entsprechende Zusatzcode dafür.



02 VIENNA MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 VIENNA MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Zurich Ansicht Standard




Änderungen Zurich wirkt sehr edel, aber bereits die Hälfte der Screen geht im Bildeinsatz verloren. Das haben wir für die kleineren Bildschirmformate mit unserer Codeanpassung auf die Hälfte reduziert und den Inhaltsbereich für Desktop auf 1280 Pixel verbreitert.



01 ZURICH CSS-CODE

/* JIMDO Codebook




Änderungen ZURICH mit seiner flotten mobilen Navigations-Ansicht (inkl. kleinem Hüpf-Effekt) kann etwas mehr Hintergrundbild gut vertragen. Bekommt es …mit unserem Zusatz-Code.



02 ZURICH MOBIL CSS-CODE

/* JIMDO Codebook

Variante Wenn Sie diese Änderung für das Hintergrundbild nur auf der Startseite stattfinden lassen möchten, wählen Sie stattdessen bitte diese Version des zusätzlichen Mobilcodes. 03 ZURICH MOBIL CSS-CODE (VARIANTE)

/* JIMDO Codebook





Funktionen für die JIMDO-Page Kleine CSS-Codes, die das Arbeiten mit der JIMDO-Page leichter und den Besuch attraktiver machen. Folgende Codes haben wir für Sie erarbeitet und stellen sie Ihnen in dieser aktualisierten Version des JIMDO Codebooks zur Verfügung:

• Abstände im Bearbeiten-Modus markieren • Code-Areale im Bearbeiten-Modus markieren • KingSize Navigationsbearbeitung • Jimdo Lightbox in Weiß • Pflegbarer Text im Bild • Große Selectbox für Shop-Varianten • Feldhinweise ausblenden • Mouseover Bildervergrößerung • Bildslider ohne Steuerelemente • Der letzte Punkt ist …ROT!

Die Integration erfolgt – ganz einfach – genau wie bei den Designanpassungen.

1. CSS-CODE-Schnippsel kopieren 2. Unter Einstellungen > Head bearbeiten einkopieren 3. Speichern

Auch hierfür gilt natürlich die Einbauanleitung auf Seite 11 oder online unter https://www.jimdo-handbuch.de/codebuch/




Abstände im Bearbeiten-Modus markieren Machen Sie die großen und kleinen Abstände im Bearbeiten-Modus sichtbar und behalten Sie den Überblick

Effekt Kleines Problem im Jimdo-Backend. Die gesetzten Abstände (egal ob groß oder klein) sind schlichtweg unsichtbar. Mit unserem Script werden alle verwendeten Abstände (und zwar ausschließlich im Bearbeiten-Modus) mit einer schicken grauen Schraffur markiert. Sehr hilfreich! Und sehr übersichtlich.



CSS-CODE FÜR DIESE FUNKTION

Diesen Code zum Kopieren und Einfügen finden Sie im Handbuch bei www.jimdo-handbuch.de > JIMDO Codebook



Codes im Bearbeiten-Modus markieren Machen Sie Widgets, integrierte HTML- und Script-Codes im Bearbeiten-Modus sichtbar

Effekt Wissen Sie immer genau wo Sie Codes, HTML und Widgets in Ihrer Seite platziert haben? Leider sieht man die Codes im Backend erst beim Draufklicken - man löscht oder verschiebt sie versehentlich. Mit diesem Script werden alle platzierten HTML-Codes und Skripte (ausschließlich im Bearbeiten-Modus) mit einer blauen Schraffur markiert.



Kingsize Navigations-Bearbeitung Sind wir hier beim Sehtest? Mit diesem Code wird die Navigationsbearbeitung deutlich vergrößert!

Effekt Bei umfangreichen Webseiten und Shops kann das „Grau in Grau“ der Navigationsbearbeitung recht anstrengend werden. Mit diesem Code wird die Navigation auf 800 Pixel Breite aufgeblasen, alle Einträge vergrößert und einfach mehr Komfort in die Ansicht gezaubert.



Jimdo-Lightbox in Weiß Es muss ja nicht immer Schwarz sein – erleben Sie die Vergrößerungen von Bildern in einer edlen weißen Lightbox

Effekt Sie möchten vergößerbare Bilder nicht auf einem brutal schwarzen Hintergrund, sondern lieber auf edlem Weiß in der sogenannten "Lightbox" sehen? Dieses kleine Skript funktioniert mit allen Jimdo-Designs und ist in wenigen Sekunden eingebaut.



Pflegbarer Text im Bild Wer sagt denn, dass ein Bildtitel immer brav und langweilig unter dem Bild stehen muss?

Effekt Für Bilder, die etwas zu sagen haben. Bei Bild, Text mit Bild, Blogeinträgen etc. werden die (optional) pflegbaren Untertitel auf stylebaren Hintergründen abgebildet. Allerdings nur in der Desktop-Version, und bei linksbündigen oder Fullsize-Bildern.



Große Selectbox für Shopvarianten Im Shop werden Varianten oft nicht erkannt - hier ist die Lösung!

Effekt Leider fällt die Selectbox für Variantenartikel im Jimdo-Shop recht klein aus. Unsere 'Große' schafft hier Abhilfe und macht klar: bei diesem Artikel kann man unterschiedliche Größen oder Varianten des Artikels auswählen. Reduziert somit auch Retouren und verringert Warenkorb-Abbrüche.



Feldhinweise ausblenden Kleines Problem mit nerviger Präsenz – der Hinweis für benötigte Formular-Felder (Pflichtfelder)

Effekt Der kleine Hinweis unter Formularen nervt leider sehr. Daher hier ein kurzes Skript, mit dem dieser Hinweis einfach ausgeblendet wird . Da man unverändert Pflichtfelder* im Formular mit „Sternchen“ hinterlegen kann (und da eine Fehlermeldung bei fehlenden Eingaben erfolgt) merken Besucher auch auch mit Sicherheit, welche Felder auszufüllen sind. CSS-CODE FÜR DIESE FUNKTION




Mouseover Bildervergrößerung Bilder (verlinkt) mit Mouseover-Vergrößerung

Effekt Es ist okay, wenn der Mauszeiger zur Hand wird. Viel schöner ist eine Mouseover-Vergrößerung bei allen Bildern des Inhaltsbereiches die verlinkt sind oder mit einer Bildvergrößerung versehen sind. Ein (optionaler) leichter Schattenwurf sorgt für zusätzliche Aufmerksamkeit. Ein Effekt der die gesamte Jimdo-Page ein wenig animiert und niemals langweilig wird. Den Code gibt es hier natürlich auch ohne den Schattenwurf.



CSS-CODE FÜR DIESE FUNKTION MIT SCHATTENWURF




CSS-CODE FÜR DIESE FUNKTION OHNE SCHATTENWURF




Bildslider ohne Steuerelemente Ausgeblendete Slider-Navigation bei Bildergalerie-Slider

Effekt Die Bedienelemente Vor / Zurück / Grossansicht sind zwar ein Standard bei Bildslidern (Bildergalerie-Element), aber sie stören gelegentlich gewaltig. Zum Beispiel wenn man hübsch ein paar Logos von Referenzen oder kleinere Slider anlegen und durchlaufen lassen möchte. Dieses Script entfernt die vor- und zurück-Pfeile und aktiviert das Vollansichts-Symbol auf die Mouseover-Situation.



Der letzte Punkt ist ….rot! Featuren Sie besondere Menüpunkte - zum Beispiel Ihren Newsletter!

Effekt Mit diesem kleinen Script wird der letzte sichtbare Menüpunkt Ihrer Hauptnavigation (Level 1) in einer Farbe Ihrer Wahl angezeigt. Sie stellen einfach nur die Farbe ein (Standard hier rot = #FF0000) und bestimmen per Navigation welches der letzte Navigationspunkt sein soll (Newsletter, Sale-Bereich, Kontaktformular etc.) und so hervorgehoben wird. CSS-CODE FÜR DIESE FUNKTION




Einbauvideo

Unter der URL

• https://www.jimdo-handbuch.de/codebuch/

finden Sie ein kurzes Video, welches Ihnen Funktion und Einbau der Codes aus diesem Handbuch erläutert.




GRATIS: JIMDO Creator Video-Seminar Exklusiv für die Käufer des JIMDO Codebooks gibt es in dieser Ausgabe ein großes Geschenk: Das knapp 7-stündige JIMDO Creator Video-Seminar von und mit Alexander Kerscher.

Zum ansehen rufen Sie bitte die Adresse

• Adresse im Buch // auf und geben • den Zugangscode ZUGANGSCODE IM BUCH // ein



Sie erhalten kostenlos und zeitlich unbegrenzt Zugang zu den nachfolgenden moderierten Schulungsinhalten rund um JIMDO-Creator

• 00:00:00 Start • 00:00:40 Intro • 00:02:02 Inhaltsübersicht • 00:07:32 JIMDO pro & contra • 00:17:41 Webstrategie, Zielgruppe und Konversion • 00:22:54 Funktionales Konzept • 00:23:27 Webprojekt vorbereiten • 00:29:05 Bildformate/Größen • 00:31:06 JIMDO CREATOR vs. JIMDO DOLPHIN • 00:37:30 JIMDO Setup, Konzept-Tools, Hilfen, Fehler • 00:40:37 Konzepthilfe jimdo.design • 00:52:30 Vermeidbare Fehler Übersicht • 00:55:39 JIMDO Pakete richtig wählen • 00:57:42 Möglichkeiten des JIMDO-Accounts • 01:04:12 Gesperrte Seiten • 01:05:00 Layouts, Elemente und Einstellungen • 01:06:56 Die 40 Layouts • 01:12:30 Hintergründe • 01:13:12 Funktionen der Edit-Sidebar • 01:31:40 Seitenanlage / Navigation • 01:35:00 Die JIMDO-Elemente • 02:14:07 Styling, Schriften, Gestaltung, Hintergründe • 02:34:06 Google Fonts • 03:20:14 Wirkung von Hintergründen • 03:23:45 Content und Anlage der Einzelseiten • 03:42:32 Preview Funktion • 03:55:22 Konzeptbeispiele Content • 03:57:54 Die Layout-Schnittstelle • 04:23:28 Layouts und Einzelelemente per CSS beeinflussen • 04:39:37 Eigene HTML-Container stylen • 04:51:09 Empfehlungen zu Sprachen, Suche, Onepager



• 05:07:34 JIMDO-Blog, Blog-Eigenheiten • 05:24:29 SEO-Basics mit JIMDO • 05:43:28 Google Search Console und sitemap.xml • 05:49:15 Widgets und POWR.io • 05:59:11 JIMDO als Shopsystem, Shopartikel, Tags • 06:29:47 Zahlungsoptionen, Versandkosten • 06:42:30 Webseite gelauncht - und nun? • 06:43:45 Outro

Wann und wo und welche Inhalte Sie erschließen möchten – das bestimmen Sie selbst. Den direkten Link zum Erstellen einer Jimdo Creator-Seite haben wir für Sie unter www.jimdo-creator.de hinterlegt. Viel Spaß und Erfolg mit dem JIMDO Creator.

Alexander KerscherDas JIMDO-CodebuchClevere Design-Anpassungen von Amsterdam bis Zurich - für JIMDO CREATOR.1928 - 2018Lebendiger denn je: Der JIMDO CreatorHinweise zur VerwendungEinbauanleitungHinweisBevor Sie loslegen...

Codes für die JIMDO DesignsAmsterdamBarcelonaBerlinBordeauxCairoCape TownTokyoVeronaViennaZurich

Funktionen für die JIMDO-PageAbstände im Bearbeiten-Modus markierenCodes im Bearbeiten-Modus markierenKingsize Navigations-BearbeitungJimdo-Lightbox in WeißPflegbarer Text im BildGroße Selectbox für ShopvariantenFeldhinweise ausblendenMouseover BildervergrößerungBildslider ohne SteuerelementeDer letzte Punkt ist ….rot!

EinbauvideoGRATIS: JIMDO Creator Video-Seminar

Alexander Kerscher · 2020. 4. 6. · bei „Modernes Webdesign ohne Programmierer“ bestellen Sie...

Documents

Transcript of Alexander Kerscher · 2020. 4. 6. · bei „Modernes Webdesign ohne Programmierer“ bestellen Sie...