Créer un bandeau sur toute la largeur de votre site

Vous avez été nombreux à nous poser la même question : comment réaliser un arrière plan pour mon site internet qui s’affiche sur toute la largeur de l’écran ? La team WebAcappella a décidé de vous éclairer et vous propose ce tutoriel qui va vous expliquer la marche à suivre pas à pas. Prêts ?

Etape 1 : concevoir votre bandeau

Pour pouvoir créer un bandeau qui prend toute la largeur de votre site et donc de l’écran sur lequel il est affiché, il vous faut en tout premier lieu concevoir une image à l’aide d’un logiciel comme Photoshop par exemple ou alors avec l’application en ligne Pixlr Editor à laquelle nous avions consacré un article il y a quelques temps.

bgLe principe est le suivant : vous créez un nouveau document dont vous allez définir la taille en fonction de vos besoins. Pour les besoins du tutoriel, nous allons partir sur un site avec un bandeau haut répété. Nous allons donc créer une image de 100 pixels de large sur 300 de hauteur sur laquelle nous allons placer des rectangles de couleur :

      • un rectangle orange fin pour positionner nos coordonnées de contact
      • un rectangle gris pour insérer le menu de navigation
      • un rectangle gris clair qui servira comme fond pour le contenu du site

Dans Pixlr Editor par exemple, « créez une nouvelle image » puis définissez la taille en pixels. Pour mieux travailler, agrandissez votre espace de travail. Pour cela, cliquez sur l’onglet « Augmenter » en haut de votre fenêtre de navigation.

dessinDans la fenêtre « Calques » à droite de votre écran, créez un premier calque pour y insérer votre rectangle orange. Cliquez simplement sur l’icône disponible à côté de la « corbeille ». Une fois le calque créé, direction la barre d’outils disponible à gauche de votre écran pour utiliser l’outil « Dessin » représenté par un rectangle et un rond. Cet outil va vous permettre de créer des formes. Ici, des rectangles.

Cliquez une fois sur l’outil, une barre de paramètres s’affiche alors en haut de votre écran. Choisissez l’outil « rectangle à bord non arrondis », modifiez la taille de la bordure selon vos besoins (mettre à 0 pour ne pas avoir de bordure) puis sélectionnez la couleur de votre choix en cliquant sur le rectangle de couleur. Une roue chromatique s’affiche et va vous permettre de choisir une couleur ou de rentrer le code RVB ou hexadécimal (#FFFFFF) de la couleur de votre charte. Une fois vos paramètres définis, vous pouvez utiliser la souris pour créer votre rectangle. Tirez votre souris vers la droite pour créer votre rectangle sans jamais lâcher le clic gauche. Votre premier rectangle est créé. Répétez l’opération autant de fois que nécessaire.

Dès que vous avez fini de concevoir votre image, enregistrez la. Pour cela, allez dans « Fichier » puis faites « Enregistrer ». Donnez lui un nom (par défaut c’est sans titre), choisissez le format JPEG et augmentez la qualité en fonction de la taille finale du fichier. Le plus souvent, vous pourrez augmenter jusqu’à 100. Cliquez sur OK pour valider l’enregistrement et définir l’emplacement de votre choix.

Passons maintenant à l’étape 2.

Etape 2 : une maquette avec un bandeau répété

Ouvrez votre site dans WebAcappella puis direction les maquettes pour créer l’arrière plan de votre site.

Pour cela, créez une nouvelle maquette puis double-cliquez sur l’espace de travail pour accéder aux « Propriétés de la page » également disponible depuis le menu de WebAcappella à l’onglet « Pages/Maquettes ».

bandeauDéfinissez maintenant une largeur et une hauteur pour votre page puis, dans la section « Image et couleur d’arrière plan », ajoutez l’image que vous venez de créer à l’aide de Pixlr Editor. Cliquez sur l’icone « Image » à côté du carré de couleur puis ajoutez votre image. Une fois l’image sélectionnée, cliquez à droite sur « Répéter horizontalement ». Ne cochez pas « Répéter verticalement » sous peine d’avoir un effet mosaïque comme arrière plan.

Cliquez ensuite sur le carré de couleur pour définir le fond de votre site, ici, le gris clair. Utilisez l’outil pipette pour sélectionner votre couleur exacte. Cliquez ensuite sur « OK » pour valider les modifications.

siteVous avez alors votre bandeau de couleur qui se répète tout le long de votre site. Vous n’avez plus qu’à construire votre site et à placer les éléments : logo, navigation, etc.

A noter : sachez que vous pouvez également créer de la même manière un arrière plan avec un espace pour le footer en concevant par exemple une image de 1000 pixels de large sur 1300 de haut.

Nous espérons avoir répondu à vos questions. A vous maintenant de créer votre propre bandeau. Faites chauffer votre imagination et vos souris !

20 Comments

  1. sebastien

    Bonjour,
    Merci pour cette article.
    J’aurais une question sur la partie footer. Est-il possible de répéter un image horizontalement directement en créant un footer ? et non en passant par un arrière plan comme indiqué dans l’article ?
    Bien à vous.

    • Team WebAcappella

      Bonjour Sébastien !
      Ce n’est pas possible directement en répétant un footer, il faut passer par la création d’un arrière plan. 🙂

  2. Haicault de la Regontais

    Bonjour,

    j’utilise google doc formulaire pour l’auto-questionnaire présent sur mon site. Connaitriez-vous une méthode ou un moyen pour réaliser le même auto-questionnaire. Les outils de WA4 permettent-ils d’en créer un ?

    • Team WebAcappella

      Bonjour !
      Les outils intégrés dans WebAcappella ne permettent pas de créer d’auto-questionnaire.
      Nous ne connaissons pas d’autres outils à part celui que vous mentionnez. On vous tient au courant si l’on trouve d’autres outils ! 😉

  3. Ludovic LAURENT

    Bonjour,

    Voici quelques exemples en javascript réalisés avec WA :
    http://www.kristiangavoille.com
    http://www.lapetitemaisondanslagalerie.com

    1 – Vous condamnez une page (non référencée) en y plaçant seulement votre image : « votreimage.jpg » afin qu’elle soit publiée.

    2 – Vous allez chercher son adresse url via votre navigateur :
    http://www.votresite.com/votrepage.html

    3 – Vous vérifiez bien le nom et l’url de votre image en faisant un clique droit
    sous Chrome® « Copier l’Url de l’image » (exemple : http://www.votresite.com/votreimage.jpg?v=18geb01xfwgc87pk) pour l’insérer dans le code ci-dessous…

    4 – Vous insérez le code suivant dans le HEAD de votre page :

    jQuery(function($){
    $.supersized({
    //Background image
    slides : [ { image : ‘http://www.votresite.com/votreimage.jpg?v=18geb01xfwgc87pk’ } ] });
    });

    window.onload = maxWindow;
    function maxWindow()
    {window.moveTo(0,0);
    if (document.all)
    {top.window.resizeTo(screen.availWidth,screen.availHeight);}
    else if (document.layers||document.getElementById)
    {if(top.window.outerHeight<screen.availHeight||Top.window.outerWidth<screen.availWidth)
    {top.window.outerHeight = screen.availHeight;
    top.window.outerWidth = screen.availWidth;}}}

    Let’s Rock !

    • Team WebAcappella

      Merci Ludovic pour cette astuce pour créer un fond d’écran avec une image ! 😉

    • Patrice

      Bonjour ludovic
      j’ai suivi ton tuto à la lettre mais cela ne fonctionne pas.

      J’ai uploadé les 2 fichiers JS à la racine, télécharger l’image elle aussi à la racine pour pouvoir en récupérer l’adresse web, mais rien à faire.
      Help !

  4. Ros

    Merci pour le tuto !

    Serait il possible d’avoir, en détails, les étapes de création d’un Footer également ?

    Merci !

    • Team WebAcappella

      Bonjour Ros,
      Pour créer le footer, vous l’ajoutez directement dans l’image que vous créez comme fond de page, par contre cela veut dire que toutes les pages auront la même hauteur à savoir dans l’exemple 1300 pixels ce qui peut être contraignant pour certains cas.
      Pour des pages avec des hauteurs différentes la meilleure technique reste de travailler sur une maquette avec un footer appliqué à une maquette pour que le footer vienne s’ajouter automatiquement en dessous du dernier élément positionné sur la page.
      🙂

  5. J-P-Gag.

    Bonjour, utilisateur de WebAcappella depuis maintenant quelques années, je trouve que
    sont développement par rapport à la concurrence tarde un peu, il manque encore énormément de fonctions par rapport à des logiciels comme par exemple Serif WebPlus X6, et bien d’autres, (les prix sont également sensiblement les mêmes) après avoir commencé à comparer les fonctionnalités de chacun, j’ai constaté ce retard, je pense maintenant m’orienter vers la concurrence.
    Cordialement,

  6. Touareg

    Bonjour et merci pour cette article et vos messages. C’est bien beau tout ça mais je préfèrerais plutôt que vous développiez WA pour que la gestion des sites se fasse automatique au format mobile… Ou encore, un minimum, que WA permette de créer de vrais slides avec lien direct. Chez la concurrence on propose des slides animées 3D… 😀

    • Team WebAcappella

      Bonjour Touareg, bonjour JP Gag,
      Nous comprenons vos questionnements !
      Nos équipes ont beaucoup travaillé sur le nouveau e-commerce de WebAcappella, mais un nouveau travail sur WebAcappella a commencé. Alors restez connectés au blog pour découvrir les évolutions du logiciel !
      Bonne journée ! 😉

  7. Josélito

    Bonjour, merci pour ce tuto très intéressant. si vous avez un tuto sur « page peel avec WA4 », je suis également preneur !

    • Team WebAcappella

      Bonjour Josélito,
      Nous n’avons pas testé l’intégration de page peel sur WebAcappella 4, mais nous transmettons à l’équipe technique en vue d’un test !
      😉

  8. Imhof Markanda

    Merci, c’est bien de pouvoir créer un bandeau sur toute la largeur. Mais toujours problème avec le footer. Si on crée un arrière plan avec une image répétée comprenant un footer, la hauteur de la page restera toujours la même. Cela ne convient pas dans tous les cas

    • Team WebAcappella

      En effet Imhof Markanda, cela peut ne pas convenir à tous les cas ! Comme expliqué si les hauteurs des différentes pages du site ne sont pas les mêmes le mieux c’est d’appliquer un footer à la maquette. Dans ce cas le footer ne pourra pas prendre toute la largeur de la page.

  9. Gagnard Jean-Philippe

    Bonjour,

    J’ai une totale confiance dans les évolutions futures de WebAcappella car toutes vos équipes font le maximum afin de contenter et satisfaire au mieux les diverses exigences des clients, je suis conscient que le développent de logiciel n’est pas chose facile et demande beaucoup de travail.
    Serait-il possible d’avoir une rubrique spécifique sur le blog, afin que les utilisateurs de WA puissent proposer leurs idées sur les prochains modules et éléments qu’ils souhaiteraient avoir dans les prochaines fonctionnalités du logiciel.
    Convaincu que tous ensembles nous pourront mener à bien l’évolution de WebAccapella,

    Merci,
    Cordialement,

    • Team WebAcappella

      Bonjour Jean-Philippe,
      Merci pour votre message.
      Pour proposer vos idées et contacter directement l’équipe technique vous pouvez vous connecter sur le support client. C’est la façon la plus simple et rapide de pouvoir proposer vos idées !
      Un blog ne permet pas la création d’espaces d’échange comme peut le permettre un forum. Alors n’hésitez pas à nous écrire via le support client ! 🙂

  10. Gagnard Jean-Philippe

    Bonjour,
    tous ensembles (sans le s de ensemble) nous pourront avec un s à la place du t,
    désolé pour les 2 fautes de frappe,
    Cordialement,

Commentaires fermés