{"id":995,"date":"2012-11-28T18:04:14","date_gmt":"2012-11-28T16:04:14","guid":{"rendered":"http:\/\/www.info-groupe.com\/blog\/?p=995"},"modified":"2017-05-17T15:29:57","modified_gmt":"2017-05-17T13:29:57","slug":"tutoriel-arriere-plan","status":"publish","type":"post","link":"https:\/\/www.info-groupe.com\/blog\/tutoriel-arriere-plan\/","title":{"rendered":"Tutoriel : Arri\u00e8re plan"},"content":{"rendered":"<p>Bonjour et bienvenue dans le manuel d&rsquo;utilisation du module \u00ab\u00a0Arri\u00e8re plan\u00a0\u00bb. Ci-dessous vous d\u00e9couvrirez comment utilisez cette fonctionnalit\u00e9.<br \/>\n<span style=\"text-decoration: underline;\"><strong>Ce qu&rsquo;il faut savoir<\/strong><\/span><\/p>\n<p>Voici la premi\u00e8re page de ce nouveau module:<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_1.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"\/images\/tuto_bg_1.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p>Dans un premier temps il est possible que vous vous demandiez :<\/p>\n<p>\u00ab\u00a0<span style=\"font-style: italic;\">Pourquoi la page est elle plus petite chez moi?<\/span>\u00a0\u00bb<\/p>\n<p>Et bien c&rsquo;est une question de r\u00e9solution d&rsquo;\u00e9cran. Il est important de bien comprendre qu&rsquo;il y a beaucoup de r\u00e9solutions diff\u00e9rentes et que tout le monde ne voit pas www.info-groupe.com de la m\u00eame fa\u00e7on (ici la r\u00e9solution est de 1920 x 1080). Certains verrons cette m\u00eame page avec beaucoup moins d&rsquo;espace sur les cot\u00e9s droit et gauche du site. Je vais donc vous donner deux petites astuces pour voir le site sous diff\u00e9rentes formes.<\/p>\n<p>La premi\u00e8re est de (si votre \u00e9cran vous le permet) changer la r\u00e9solution de votre \u00e9cran en passant par le \u00ab\u00a0Panneau de configuration\u00a0\u00bb de Windows ou par les \u00ab\u00a0Pr\u00e9f\u00e9rences Syst\u00e8me\u00a0\u00bb de Mac.<\/p>\n<p>La deuxi\u00e8me solution, consiste \u00e0 \u00ab\u00a0zoomer\u00a0\u00bb ou \u00ab\u00a0d\u00e9-zoomer\u00a0\u00bb sur votre page internet en appuyant sur la touche Ctrl de votre clavier (touche g\u00e9n\u00e9ralement en bas \u00e0 gauche) puis en m\u00eame temps sur la touche \u00ab\u00a0+\u00a0\u00bb ou \u00ab\u00a0-\u00ab\u00a0. Pour revenir \u00e0 la position d&rsquo;origine vous devez appuyer sur la touche Ctrl et la touche 0 (z\u00e9ro) en m\u00eame temps.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Les bases<\/strong><\/span><\/p>\n<p>Maintenant que nous avons r\u00e9gl\u00e9 les probl\u00e8mes d&rsquo;affichages, passons aux fonctionnalit\u00e9s. Le module \u00ab\u00a0Arri\u00e8re plan\u00a0\u00bb vous permet de personnaliser votre fiche Info-groupe de trois mani\u00e8res diff\u00e9rentes. Vous pouvez remplacer l&rsquo;arri\u00e8re plan d&rsquo;Info-groupe par :<\/p>\n<p>&#8211; Une image<\/p>\n<p>&#8211; Une couleur<\/p>\n<p>&#8211; Une image ET une couleur.<\/p>\n<p>Je m&rsquo;explique, gr\u00e2ce au bouton \u00ab\u00a0Parcourir\u00a0\u00bb je peux choisir une image provenant de mon ordinateur, et gr\u00e2ce au \u00ab\u00a0S\u00e9lecteur de couleur\u00a0\u00bb je peux modifier la couleur qui se trouve en arri\u00e8re plan.<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_2.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"\/images\/tuto_bg_2.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p>Vous avez remarqu\u00e9 que l&rsquo;image d&rsquo;Info-groupe se trouve en arri\u00e8re plan et c&rsquo;est normal. Si vous remplacez l&rsquo;image d&rsquo;info-groupe par la votre elle sera plac\u00e9e avec des param\u00e8tres par d\u00e9faut qui sont les suivants :<\/p>\n<p>&#8211; Centr\u00e9 horizontalement et verticalement<\/p>\n<p>&#8211; R\u00e9p\u00e9t\u00e9e (Mosa\u00efque total)<\/p>\n<p>&#8211; Fixe (l&rsquo;image ne bougera pas avec votre page)<\/p>\n<p>et la couleur de votre arri\u00e8re plan sera noir, voyons tout cela en image. Je remplace l&rsquo;image d&rsquo;Info-groupe gr\u00e2ce au bouton \u00ab\u00a0Parcourir\u00a0\u00bb par mon image qui est la suivante. Je vous donne une astuce, la page central du site Info-groupe fais 975px. C&rsquo;est donc ici la taille de l&rsquo;espace noir au milieu de mon image :<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/Concert_tuto.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.info-groupe.com\/images\/Concert_tuto.jpg\" alt=\"\" width=\"275\" height=\"88\" \/><\/a><\/p>\n<p>Ce qui me donne comme r\u00e9sultat :<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_3.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_3.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p>Mon image apparait bien avec les options par d\u00e9faut\u00a0 (r\u00e9p\u00e9t\u00e9e, centr\u00e9e et elle ne bouge pas lorsque l&rsquo;on descend dans la page). Malheureusement elle n&rsquo;est pas positionn\u00e9e comme je le souhaite. Mais en modifiant les option qui me sont propos\u00e9es je peux par exemple annuler la r\u00e9p\u00e9tition de l&rsquo;image en d\u00e9-cochant Mosa\u00efque -&gt; Total &#8230;<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_4.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_4.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p><em>\u00ab\u00a0MAIS! Notre image a disparue???\u00a0\u00bb<\/em><\/p>\n<p>En r\u00e9alit\u00e9, si nous regardons de plus pr\u00e8s nous voyons plus bas que notre image est en dessous de notre fiche &#8230;<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_5.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_5.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p>Et finalement toutes les images que vous ajouterez se placeront comme ci dessus, la notre ici d\u00e9passe un peu car elle est grande, mais si l&rsquo;image \u00e9tait plus petite elle serait alors compl\u00e8tement cach\u00e9e.<\/p>\n<p><em>\u00ab\u00a0Mais alors comment faire pour la voir?\u00a0\u00bb<\/em><\/p>\n<p>Et bien, vous pouvez d\u00e9placer votre image gr\u00e2ce aux fl\u00e8ches se trouvant en dessous du s\u00e9lecteur de couleur. Les grandes fl\u00e8ches servent \u00e0 bouger votre image tout \u00e0 droite, tout en haut, tout en bas ou tout \u00e0 gauche. Alors que les petites fl\u00e8ches servent \u00e0 d\u00e9placer votre image petit \u00e0 petit.<\/p>\n<p>Maintenant pla\u00e7ons notre image tout en haut de notre page, je clique donc sur la grande fl\u00e8che du haut &#8230;<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_6.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_6.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p>Hmm, pas mal mais nous pouvons faire mieux. En cochant la case \u00ab\u00a0\u00c9tir\u00e9\u00a0\u00bb notre image va s&rsquo;\u00e9tendre sur toute la largeur de la page. Essayons &#8230;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_7.jpg\" rel=\"lightbox[995]\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.info-groupe.com\/images\/tuto_bg_7.jpg\" alt=\"\" width=\"500\" height=\"281\" \/><\/a><\/p>\n<p>Super! Je peux m\u00eame changer la couleur d&rsquo;arri\u00e8re plan mais le noir qui est la couleur d&rsquo;origine va bien avec cette image. On aurait aussi tr\u00e8s bien pu mettre une couleur unique, \u00e0 vous de voir. Une galerie des meilleurs arri\u00e8re plans sera disponible incessamment sous peu.<\/p>\n<p>Et voila comment cr\u00e9er un fond d&rsquo;\u00e9cran pour votre fiche Info-groupe! Il est ensuite libre \u00e0 vous de cr\u00e9er un arri\u00e8re plan refl\u00e9tant au mieux votre fiche. Il y a quelques autres options que je vous laisse d\u00e9couvrir, faites des tests, amusez vous, nous faisons confiance \u00e0 votre imagination.<\/p>\n<p>&nbsp;<\/p>\n<p>L\u2019\u00e9quipe d&rsquo;Info-groupe.<\/p>\n<div style=\"padding-bottom:20px; padding-top:10px;\" class=\"hupso-share-buttons\"><!-- Hupso Share Buttons - https:\/\/www.hupso.com\/share\/ --><a class=\"hupso_toolbar\" href=\"https:\/\/www.hupso.com\/share\/\"><img decoding=\"async\" src=\"https:\/\/static.hupso.com\/share\/buttons\/lang\/fr\/share-medium.png\" style=\"border:0px; padding-top: 5px; float:left;\" alt=\"Share Button\"\/><\/a><script type=\"text\/javascript\">var hupso_services_t=new Array(\"Twitter\",\"Facebook\",\"Google Plus\",\"Pinterest\",\"Linkedin\",\"StumbleUpon\",\"Digg\",\"Reddit\",\"Bebo\",\"Delicious\");var hupso_background_t=\"#EAF4FF\";var hupso_border_t=\"#66CCFF\";var hupso_toolbar_size_t=\"medium\";var hupso_image_folder_url = \"\";var hupso_twitter_via=\"InfoGroupe\";var hupso_url_t=\"\";var hupso_title_t=\"Tutoriel%20%3A%20Arri%C3%A8re%20plan\";<\/script><script type=\"text\/javascript\" src=\"https:\/\/static.hupso.com\/share\/js\/share_toolbar.js\"><\/script><!-- Hupso Share Buttons --><\/div>","protected":false},"excerpt":{"rendered":"<p>Bonjour et bienvenue dans le manuel d&rsquo;utilisation du module \u00ab\u00a0Arri\u00e8re plan\u00a0\u00bb. Ci-dessous vous d\u00e9couvrirez comment utilisez cette fonctionnalit\u00e9. Ce qu&rsquo;il faut savoir Voici la premi\u00e8re page de ce nouveau module: Dans un premier temps il est possible que vous vous &hellip; <a href=\"https:\/\/www.info-groupe.com\/blog\/tutoriel-arriere-plan\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n<div style=\"padding-bottom:20px; padding-top:10px;\" class=\"hupso-share-buttons\"><!-- Hupso Share Buttons - https:\/\/www.hupso.com\/share\/ --><a class=\"hupso_toolbar\" href=\"https:\/\/www.hupso.com\/share\/\"><img src=\"https:\/\/static.hupso.com\/share\/buttons\/lang\/fr\/share-medium.png\" style=\"border:0px; padding-top: 5px; float:left;\" alt=\"Share Button\"\/><\/a><script type=\"text\/javascript\">var hupso_services_t=new Array(\"Twitter\",\"Facebook\",\"Google Plus\",\"Pinterest\",\"Linkedin\",\"StumbleUpon\",\"Digg\",\"Reddit\",\"Bebo\",\"Delicious\");var hupso_background_t=\"#EAF4FF\";var hupso_border_t=\"#66CCFF\";var hupso_toolbar_size_t=\"medium\";var hupso_image_folder_url = \"\";var hupso_twitter_via=\"InfoGroupe\";var hupso_url_t=\"\";var hupso_title_t=\"Tutoriel%20%3A%20Arri%C3%A8re%20plan\";<\/script><script type=\"text\/javascript\" src=\"https:\/\/static.hupso.com\/share\/js\/share_toolbar.js\"><\/script><!-- Hupso Share Buttons --><\/div>","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/posts\/995"}],"collection":[{"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/comments?post=995"}],"version-history":[{"count":41,"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/posts\/995\/revisions"}],"predecessor-version":[{"id":1307,"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/posts\/995\/revisions\/1307"}],"wp:attachment":[{"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/media?parent=995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/categories?post=995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.info-groupe.com\/blog\/wp-json\/wp\/v2\/tags?post=995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}