Mon "Jimdo design roundup"

On peut personnaliser Jimdo avec quelques connaissances en HTML et CSS. On peut aussi se contenter des templates de base proposés et néanmoins les agrémenter de quelques idées pour obtenir un site élégant, sobre, clair et original. J'en ai croisé quelques uns au fil de mes errances, que je répertorie dans cette galerie.

http://www.oreeducapsizun.com/

http://www.oreeducapsizun.com [fr]

Site-vitrine pour des chambres d'hôtes en Bretagne.

 

Le header affiche des photos qui changent. L'effet est réalisé grâce à l'insertion d'un javascript rotator [?] qui fait tourner 5 images de la Bretagne.

 

 

http://www.soumato.com/

http://www.soumato.com [fr]

Portfolio de David De Sousa, vidéaste, motion designer et infographiste multimedia.

 

Pas de mise en page personnalisée ; l'auteur a tiré partie d'un template natif qu'il a personnalisé grâce à une typographie originale et à un header au graphisme percutant. Surtout, l'insertion de modules Flash "électrisent" les pages.

http://www.metteurenscenedeterritoire.com

http://www.metteurenscenedeterritoire.com [fr]

Campagne pour les offices de tourisme d'Aquitaine

 

 

Une mise en page personnalisée avec un jeu de transparence et de reflet dans le header.

 

 

http://mytemplates.jimdo.com/

http://mytemplates.jimdo.com [fr/en]

Téléchargez des mises en pages personnelles et des templates pour votre site Jimdo

 

Un template personnalisé et pro. A noter l'excellente implémentation du bilinguisme sur le site (je suppose que c'est réalisé avec un jeu de pages cachées/montrées ?)

http://www.artotheques-adra.com/

http://www.artotheques-adra.com [fr]

Site institutionnel de l'ADRA, réseau des professionnels des artothèques françaises

 

Un menu en images colorées à la place du menu traditionnel de Jimdo pour un site coloré et épuré.

http://www.m-moshi.com/

http://www.m-moshi.com [fr]

Portfolio de Moshi.Moshi : édition, graphisme et webdesign

 

Mise en page personnalisée avec une superbe typographie (faite avec des images).

http://www.laurencebentz.com/

http://www.laurencebentz.com [fr]

Portfolio de Laurence Bentz

 

Outre son menu original, agrémenté dans la marge de pictos en guise de puces, le site vaut le détour pour sa page de garde, presque vide. L'effet est réalisé au moyen de styles en ligne insérés dans le header : une fois qu'on a repéré l'ID (ou n° de "matrix") de la page, on reprend tous les éléments du layout de cette page (header, navigation, footer, content... ) auxquels on adjoint un attribut {display: none;} pour empêcher leur affichage.

http://oliviaboutrou.jimdo.com

http://oliviaboutrou.jimdo.com [fr]

Portfolio d'Olivia Boutrou

 

Le même effet de page de garde presque vide est réalisé sur ce site avec la même technique que celle exposée ci-dessus. On arrive ensuite sur une page vide, bizarrement (alors qu'il y a bien du contenu en place, par exemple ici)

http://www.argill.eu

http://www.argill.eu [fr]

Site de l'architecte Gilles Frankignoulle

 

Sobriété absolue, réalisée avec un template natif et beaucoup de goût ;-)

http://www.dominiqueherbillon.com/

http://www.dominiqueherbillon.com [fr]

Portfolio de Dominique Herbillon - designer industriel produit-service et espace

 

Réalisé avec un template natif n'ayant subi aucune modification, le site, avec ses couleurs harmonieuses, est clair et bien structuré.

Capture du site de Peter Diem

http://www.diempeter.com [de]

Portfolio de Peter Diem, graphiste-designer

 

Le site est réalisé avec un template natif de JimdoFree légèrement "tweaké" : d'abord, le fond de page a été personnalisé avec une image (manip assez aisément réalisable). Ensuite, le template est embelli par l'ajout de 3 images en positionnement absolu sur la page (1. à gauche, la tasse de café ; 2. en haut, la code-barre ; 3. à droite, l'Ipod). Il est facile d'ajouter ces images via un widget-html inséré dans la barre latérale, par exemple. Inutile de passer par la mise en page personnelle qui peut s'avérer complexe.

 

Voici donc le morceau de code qui a servi à créer cet entête très stylisé :

<img src="http://www101.jimdo.com/usertemplates/*****/img/center.png" style="position:absolute; left: 56px; top: 1px;" />
<div style="position:absolute; margin-left: -399px; top: 1px;">
<img src="http://www101.jimdo.com/usertemplates/*****/img/left.png" />
</div>
<div style="position:absolute; margin-left: 826px; top: 1px;">
<img src="http://www101.jimdo.com/usertemplates/*****/img/right.png" />
</div>

Dans ce code apparaissent :

  • en vert, le code CSS qui positionne l'image du haut
  • en orange, le code CSS qui positionne l'image de gauche
  • en bleu, le code CSS qui positionne l'image de droite

Le résultat est assez bluffant avec un minimum de modifs apportées ; celles-ci sont à la portée tous, à condition d'avoir un talent de graphiste pour bricoler les images de départ. Enregistrées avec transparence au format .png, les images sont ensuite chargées dans l'espace Fichiers de la mise en page personnelle.

TO BE CONTINUED...

Des sites déjà repérés :

Courrier des lecteurs

Écrire commentaire

Commentaires : 15
  • #1

    Artdeos (lundi, 21 mars 2011 14:15)

    Hélas, tout le monde n'est pas informaticien...

  • #2

    Jitti (dimanche, 05 juin 2011 12:20)

    Bonjour ,
    En pleine confection de mon site , je serais interressé pour integrer la technique utilisé dans le dernier exemple.
    Toutefois , je ne sais pas ou l'intégrer ( lorsque je le met dans le head il est effacé lorsque je reviens ) ni quel sont champs à remplir.

    Merci pour vos réponses , et pour ce site qui m'est bien utile.

  • #3

    Isa (admin) (dimanche, 05 juin 2011 13:14)

    Bonjour,
    Tout dépend du template que vous utilisez (l'adresse de votre site serait utile pour vous aider... ) Par ailleurs, comme je l'indique, ce n'est pas dans le head qu'il faut copier/coller le code, mais dans la barre latérale du site, grâce à un widget/html. Avant, il faut charger les images sur Imageshack par exemple (ou un autre hébergeur d'images) et récupérer leur URL.
    Cordialement,
    Isa

  • #4

    Quentin Lavalette (dimanche, 05 juin 2011 22:09)

    Le site internet sur le quel je travail est cmsa-club.jimdo.com
    J'ai integré un widget/html dans la barre latérale. Maintenant , j'aimerais savoir ou mettre les URLs des images.

  • #5

    Isa (admin) (dimanche, 05 juin 2011 22:25)

    Dans l'ordre :
    - Hébergez vos images sur Imageshack.
    - Récupérez leurs URLs
    - Ecrivez-les dans le code que j'ai donné à la place des URL actuelles
    - Modifiez les positions des images en jouant sur le code écrit en vert, bleu et orange (attention ! des connaissances CSS sont requises pour positionner au pixel près les images)
    - Enregistrez.

    Gardez cependant en tête que, vu le template que vous avez choisi, le cadre noir du "porte-document" restera présent, quelles que soient les images que vous ajouterez en bordure.

    Bon courage !

    Isa

  • #6

    reseda (jeudi, 03 novembre 2011 19:00)

    Bonjour

    de beaux exemples de belles réalisations... comment fait on pour modifier la navigation native par celle en couleur ?
    avez vous les codes comme pour l'exemple du site de diempeter ?

    merci

    flavien

  • #7

    Gerd (mardi, 17 juillet 2012 18:29)

    Many thanks for details

  • #8

    Dominique BRUYNEEL (mercredi, 05 septembre 2012 21:28)

    Bonjour

    encore merci pour ces tutos
    le dernier ayant ma préférence
    Voici déjà 3 sites où je l'utilise
    www.mapetiteentreprise.mobi
    www.safirgem.com
    www.lacaseboischeri.com

    2 autres sont en préparation

    Voici mon ASTUCE pour héberger les images
    dans le site

    J'insère mes images dans "Design personnel"
    et dans Firefox, Outils > Informations sur la page
    une fenêtre s'ouvre et en cliquant sur le 2è bouton
    la liste des images s'affichent avec leur adresse (URL).

    Il n'a plus qu'à copier/coller celle-ci dans TON CODE

    Bien cordialement

    Dominique

  • #9

    bahia (mercredi, 07 novembre 2012 16:21)

    bonjour,
    je suis en train d'essayer d'intégrer des images à mon template, comme indiqué dans le dernier site que vous montrez.
    J'ai intégré la ligne de code que vous mentionnez:
    - 1er essai (visible en bas à droite de ma page): insertion d'un photo de deux glands: pas de pb
    - 2e essai (visible en bas aussi): insertion d'une photo d'oiseau. Là, j'ai un pb, jarrive bien à caler la position de l'oiseau sur l'axe droite-gauche, mais pas en vertical: quelle que soir la valeur entrée, le satané oiseau ne bouge pas. quand j'essaye de regarde ce qui se passe avec firebug, il me semble
    que l'info concernant la position vertical n'est pas prise en compte. voilà ce que je lis:
    element.style {
    margin-left: 715px;
    position: absolute;
    }
    Pourriez vous svp m'aider à cerner le pb? Merci!

    (en fait dans l'exemple que vous montrez, 3 images sont insérées, mais le code utilisé pour insérer la première image n'est pas le même que celui utilisé pour insérer les deux autres (pas de <div .... </div>. Pourquoi?

    Merci et bien cordialement

  • #10

    Le Petit Conjugueur (mercredi, 07 novembre 2012 16:34)

    Bonjour,
    Je pense que votre code n'est pas correctement écrit. Je viens de tester avec le "Firebug" de Chrome et voici comment je procéderais plutôt :

    <div style="position: absolute; left: 30px; bottom: 250px;">
    <img src="http://imageshack.us/a/img715/1961/sittelletrrrrr4.png" alt="Birdie">
    </div>

    Testez et tenez-moi au courant !

    Isa

  • #11

    bahia (vendredi, 09 novembre 2012 23:46)

    bonjour,
    merci bcp pour votre aide. je viens de tester votre code, ça marche beaucoup mieux! mais j'ai encore un pb: suivant la page du site sélectionnée, le manuscrit 'se ballade', il n'e se maintient pas à une position fixe par rapport au bandeau du site... ça fait un peu bizarre ...
    cordialement
    Bahia

  • #12

    bahia (dimanche, 11 novembre 2012 00:19)

    bonjour - j'ai mis en place toutes les images, tout est beau sur la page d'accueil... pas sur les autres pages car les images bougent. faut-il que je référence plutôt les images à partir du haut de page (instruction 'top' à la place de bottom et coordonnées modifiées?) ou bien faut-il seulement modifier l'option 'absolute'?
    cordialement
    Bahia

  • #13

    Lagarde (dimanche, 05 mai 2013 18:20)

    Merci pour votre site si clair, explicite, bien présenté. Particulièrement adapté pour nous autres "informaticien" lamda :)
    Bravo et c'est avec plaisir que je m'inscris à votre newsletter.

    Bruno Lagarde

  • #14

    santealoevera (vendredi, 21 juin 2013 13:35)

    Super le site de Argill,
    comment faire une grand barre comme lui en haut de page?

  • #15

    Isabelle (jeudi, 04 juillet 2013 18:10)

    @lagarde : merci beaucoup ツ
    @santealoevera : c'est le template qu'il a choisi (un pro, mais lequel, je ne sais plus... ) qui est comme cela : son header est très large.

Ruban