{"id":2719,"date":"2021-05-20T11:05:52","date_gmt":"2021-05-20T09:05:52","guid":{"rendered":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/"},"modified":"2021-07-19T17:12:15","modified_gmt":"2021-07-19T15:12:15","slug":"gestion-du-responsive","status":"publish","type":"docs","link":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/","title":{"rendered":"Gestion du responsive"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Le responsive vous permet de g\u00e9rer l\u2019affichage de votre site internet sur toutes les tailles d\u2019\u00e9crans. Il s\u2019agit d\u2019une fonctionnalit\u00e9 tr\u00e8s utile lorsque votre contenu poss\u00e8de plusieurs colonnes, afin qu\u2019il s\u2019adapte \u00e0 la taille de l\u2019\u00e9cran du visiteur et que rien ne soit coup\u00e9.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour g\u00e9rer le responsive de votre contenu, ouvrez les param\u00e8tres du plugin Colonne.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous nous int\u00e9ressons \u00e0 la ligne \u201cColumn size\u201d.\u00a0 Si vous ne remplissez que la case tout \u00e0 gauche, c\u2019est cette taille qui s\u2019appliquera \u00e0 tous les types d\u2019\u00e9cran.\u00a0<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#c8eaff\"><strong>Note :<\/strong>\u00a0Il y a deux choses primordiales \u00e0 conna\u00eetre pour utiliser le responsive avec les colonnes :<br>1 \u2013 Le responsive est g\u00e9r\u00e9 sur 12 colonnes (la valeur maximale est donc 12).<br>2 \u2013 Les cases sont organis\u00e9es de gauche \u00e0 droite en fonction de la taille d\u2019\u00e9cran : la plus petite \u00e0 gauche, jusqu\u2019\u00e0 la plus grande \u00e0 droite. Tout \u00e0 gauche, c\u2019est la taille \u201cxs\u201d : celle d\u2019un smartphone, et \u00e0 droite c\u2019est la taille \u201cxl\u201d, qui correspond \u00e0 la taille d\u2019un t\u00e9l\u00e9viseur.<br><br>Nous pouvons \u00e9tablir des correspondances de tailles d\u2019\u00e9cran avec les cases comme suit : mobile, tablette, ordinateur portable, ordinateur fixe, et enfin t\u00e9l\u00e9viseur. Si vous ne saisissez une valeur que dans la premi\u00e8re colonne, elle s\u2019appliquera \u00e0 sa taille d\u2019\u00e9cran, et \u00e0 toutes les autres plus grandes.<br>Inversement, si vous n\u2019entrez de valeur que dans la derni\u00e8re colonne, elle ne s\u2019appliquera que sur une t\u00e9l\u00e9vision.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Afin de r\u00e9gler la taille attribu\u00e9e \u00e0 vos colonnes, vous devez choisir une valeur entre 1 et 12, et r\u00e9gler ces param\u00e8tres sur chaque colonne. N\u2019oubliez pas que la taille totale de l\u2019\u00e9cran est de 12. Si une colonne contient &#8220;12&#8221; sur chaque case, l\u2019autre aura 0 et passera \u00e0 la ligne au-dessous.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il est int\u00e9ressant de choisir la valeur 12 pour les 3 premi\u00e8res cases, qui correspondent aux petits \u00e9crans. Pour les deux derni\u00e8res cases, libre \u00e0 vous de jouer sur le responsive afin d\u2019adapter votre mise en forme et de jouer sur la disposition des \u00e9l\u00e9ments.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png\" alt=\"responsive settings du plugin colonne\"\/><\/figure>\n\n\n\n<p class=\"note has-background wp-block-paragraph\" style=\"background-color:#c8eaff\"><strong>Note :<\/strong>\u00a0\u00a0Il faut savoir que modifier la valeur d\u2019une colonne va modifier la taille de vos images selon l\u2019espace qui est attribu\u00e9 \u00e0 celle \u00e0 laquelle elle appartient. Si vous voulez rogner l\u2019image, il vous faut aller dans ses param\u00e8tres.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nous vous proposons de regarder trois vid\u00e9os pour vous aider : g\u00e9rer le responsive d\u2019une colonne, modifier la largeur d\u2019une colonne gr\u00e2ce au responsive et une vid\u00e9o pour voir comment s\u2019appliquent les param\u00e8tres de responsive.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Tutoriel Vid\u00e9o &#8211; G\u00e9rer le responsive<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/giant.gfycat.com\/EagerSizzlingArgali.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Tutoriel Vid\u00e9o &#8211; Modifier la taille des colonnes avec le responsive<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/giant.gfycat.com\/CarefreeThankfulInchworm.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Tutoriel Vid\u00e9o &#8211; Application du responsive<\/h3>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1526\" style=\"aspect-ratio: 2656 \/ 1526;\" width=\"2656\" controls src=\"http:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-avec-les-container.mov\"><\/video><\/figure>\n","protected":false},"author":2,"featured_media":0,"parent":2646,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"doc_tag":[],"class_list":["post-2719","docs","type-docs","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Gestion du responsive dans Django CMS - Kapt Support<\/title>\n<meta name=\"description\" content=\"La gestion du responsive permet d&#039;adapter votre contenu aux diff\u00e9rentes tailles d&#039;\u00e9cran mais aussi de choisir la place que prendra votre contenu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gestion du responsive dans Django CMS - Kapt Support\" \/>\n<meta property=\"og:description\" content=\"La gestion du responsive permet d&#039;adapter votre contenu aux diff\u00e9rentes tailles d&#039;\u00e9cran mais aussi de choisir la place que prendra votre contenu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Kapt Support\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-19T15:12:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/\",\"url\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/\",\"name\":\"Gestion du responsive dans Django CMS - Kapt Support\",\"isPartOf\":{\"@id\":\"https:\/\/support.kapt.mobi\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png\",\"datePublished\":\"2021-05-20T09:05:52+00:00\",\"dateModified\":\"2021-07-19T15:12:15+00:00\",\"description\":\"La gestion du responsive permet d'adapter votre contenu aux diff\u00e9rentes tailles d'\u00e9cran mais aussi de choisir la place que prendra votre contenu.\",\"breadcrumb\":{\"@id\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#primaryimage\",\"url\":\"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png\",\"contentUrl\":\"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/support.kapt.mobi\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide utilisateur\",\"item\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ajout de mise en forme\",\"item\":\"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Gestion du responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/support.kapt.mobi\/#website\",\"url\":\"https:\/\/support.kapt.mobi\/\",\"name\":\"Kapt Support\",\"description\":\"La Documentation en ligne de vos outils KAPT\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/support.kapt.mobi\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gestion du responsive dans Django CMS - Kapt Support","description":"La gestion du responsive permet d'adapter votre contenu aux diff\u00e9rentes tailles d'\u00e9cran mais aussi de choisir la place que prendra votre contenu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/","og_locale":"en_US","og_type":"article","og_title":"Gestion du responsive dans Django CMS - Kapt Support","og_description":"La gestion du responsive permet d'adapter votre contenu aux diff\u00e9rentes tailles d'\u00e9cran mais aussi de choisir la place que prendra votre contenu.","og_url":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/","og_site_name":"Kapt Support","article_modified_time":"2021-07-19T15:12:15+00:00","og_image":[{"url":"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/","url":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/","name":"Gestion du responsive dans Django CMS - Kapt Support","isPartOf":{"@id":"https:\/\/support.kapt.mobi\/#website"},"primaryImageOfPage":{"@id":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#primaryimage"},"image":{"@id":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png","datePublished":"2021-05-20T09:05:52+00:00","dateModified":"2021-07-19T15:12:15+00:00","description":"La gestion du responsive permet d'adapter votre contenu aux diff\u00e9rentes tailles d'\u00e9cran mais aussi de choisir la place que prendra votre contenu.","breadcrumb":{"@id":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#primaryimage","url":"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png","contentUrl":"https:\/\/support.kapt.mobi\/wp-content\/uploads\/2021\/05\/Gestion-du-responsive-parametres-colonnes.png"},{"@type":"BreadcrumbList","@id":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/gestion-du-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/support.kapt.mobi\/"},{"@type":"ListItem","position":2,"name":"Guide utilisateur","item":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/"},{"@type":"ListItem","position":3,"name":"Ajout de mise en forme","item":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/"},{"@type":"ListItem","position":4,"name":"Gestion du responsive"}]},{"@type":"WebSite","@id":"https:\/\/support.kapt.mobi\/#website","url":"https:\/\/support.kapt.mobi\/","name":"Kapt Support","description":"La Documentation en ligne de vos outils KAPT","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/support.kapt.mobi\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"comment_count":0,"_links":{"self":[{"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/docs\/2719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/comments?post=2719"}],"version-history":[{"count":9,"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/docs\/2719\/revisions"}],"predecessor-version":[{"id":3778,"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/docs\/2719\/revisions\/3778"}],"up":[{"embeddable":true,"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/docs\/2646"}],"prev":[{"title":"Modification de l'ordre des plugins","link":"https:\/\/support.kapt.mobi\/index.php\/docs\/kapt-doc\/ajout-de-mise-en-forme\/modification-de-lordre-des-plugins\/","href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/docs\/2718"}],"wp:attachment":[{"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/media?parent=2719"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/support.kapt.mobi\/index.php\/wp-json\/wp\/v2\/doc_tag?post=2719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}