{"id":1380,"date":"2016-04-12T11:41:59","date_gmt":"2016-04-12T11:41:59","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=1380"},"modified":"2017-01-23T18:25:54","modified_gmt":"2017-01-23T18:25:54","slug":"ajouter-des-tabs-dans-une-page-cms-astuce-prestashop","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/ajouter-des-tabs-dans-une-page-cms-astuce-prestashop\/","title":{"rendered":"Ajouter des tabs dans une page cms | Astuce Prestashop 1.6"},"content":{"rendered":"

Ce tutorial va vous permettre d’ins\u00e9rer des tabs dans vos pages cms<\/p>\n

Astuce Prestashop 1.6<\/p>\n

————————————–<\/p>\n

1) Ins\u00e9rer une tab horizontal sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n

1.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n

\"Ajouter<\/a><\/p>\n

<\/p>\n

1.2 Ins\u00e9rez le code suivant<\/p>\n

<div class=\"tabbable\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#one\">One<\/a><\/li>\r\n<li><a href=\"#two\">Two<\/a><\/li>\r\n<li><a href=\"#three\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"one\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"two\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"three\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
1.3 Enregistrer et visualiser<\/p>\n
\"Ins\u00e9rer<\/a><\/p>\n
1.4 Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
2) Ins\u00e9rer une tab sur le c\u00f4t\u00e9 gauche sur la page cms de Prestashop\u00a0<\/span><\/strong><\/h3>\n
2.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
2.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-left\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
2.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-left > .nav-tabs > li {\r\n\tfloat: none;\r\n}\r\n.tabs-left > .nav-tabs > li > a {\r\n\tmin-width: 74px;\r\n\tmargin-right: 0;\r\n\tmargin-bottom: 3px;\r\n}\r\n.tabs-left > .nav-tabs {\r\n\tfloat: left;\r\n\tmargin-right: 19px;\r\n\tborder-right: 1px solid #ddd;\r\n\tborder-bottom:none\r\n}\r\n.tabs-left > .nav-tabs > li {\r\n\tdisplay: block\r\n}\r\n.tabs-left > .nav-tabs > li > a {\r\n\tmargin-right: -1px;\r\n\t-webkit-border-radius: 4px 0 0 4px;\r\n\t-moz-border-radius: 4px 0 0 4px;\r\n\tborder-radius: 4px 0 0 4px;\r\n}\r\n.tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus {\r\n\tborder-color: #eeeeee #dddddd #eeeeee #eeeeee;\r\n}\r\n.tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus {\r\n\tborder-color: #ddd transparent #ddd #ddd;\r\n *border-right-color: #ffffff;\r\n}<\/pre>\n
2.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
2.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
3) Ins\u00e9rer une tab sur le c\u00f4t\u00e9 droite\u00a0<\/span><\/strong>sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n
3.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
3.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-right\">\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
3.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-right > .nav-tabs > li {\r\n\tfloat: none;\r\n}\r\n.tabs-right > .nav-tabs > li > a {\r\n\tmin-width: 74px;\r\n\tmargin-right: 0;\r\n\tmargin-bottom: 3px;\r\n}\r\n\r\n.tabs-right > .nav-tabs {\r\n\tfloat: right;\r\n\tmargin-left: 19px;\r\n\tborder-left: 1px solid #ddd;\r\n\tborder-bottom:none\r\n}\r\n.tabs-right > .nav-tabs > li > a {\r\n\tmargin-left: -1px;\r\n\t-webkit-border-radius: 0 4px 4px 0;\r\n\t-moz-border-radius: 0 4px 4px 0;\r\n\tborder-radius: 0 4px 4px 0;\r\n}\r\n.tabs-right > .nav-tabs > li {\r\n\tdisplay: block\r\n}\r\n.tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus {\r\n\tborder-color: #eeeeee #eeeeee #eeeeee #dddddd;\r\n}\r\n.tabs-right > .nav-tabs .active > a, .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus {\r\n\tborder-color: #ddd #ddd #ddd transparent;\r\n *border-left-color: #ffffff;\r\n}\r\n<\/pre>\n
3.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
3.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
<script>\r\n$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
<\/h2>\n
4) Ins\u00e9rer une tab en bas\u00a0<\/span><\/strong>sur la page cms de Prestashop\u00a0<\/strong><\/span><\/h3>\n
4.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Ajouter<\/a><\/p>\n
4.2 Ins\u00e9rez le code suivant<\/p>\n
<div class=\"tabbable tabs-below\">\r\n<div class=\"tab-content\">\r\n<div class=\"tab-pane active\" id=\"a\">Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.<\/div>\r\n<div class=\"tab-pane\" id=\"b\">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.<\/div>\r\n<div class=\"tab-pane\" id=\"c\">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.<\/div>\r\n<\/div>\r\n<ul class=\"nav nav-tabs myTabs\">\r\n<li class=\"active\"><a href=\"#a\">One<\/a><\/li>\r\n<li><a href=\"#b\">Two<\/a><\/li>\r\n<li><a href=\"#c\">Three<\/a><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\n
4.3 Ajouter le code suivant dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.tabs-below > .nav-tabs, .tabs-right > .nav-tabs, .tabs-left > .nav-tabs {\r\n\tborder-bottom: 0;\r\n}\r\n.tab-content > .tab-pane, .pill-content > .pill-pane {\r\n\tdisplay: none;\r\n}\r\n.tab-content > .active, .pill-content > .active {\r\n\tdisplay: block;\r\n}\r\n.tabs-below > .nav-tabs {\r\n\tborder-top: 1px solid #ddd;\r\n\t margin-top: 25px;\r\n}\r\n.tabs-below > .nav-tabs > li {\r\n\tmargin-top: -1px;\r\n\tmargin-bottom: 0;\r\n}\r\n.tabs-below > .nav-tabs > li > a {\r\n\t-webkit-border-radius: 0 0 4px 4px;\r\n\t-moz-border-radius: 0 0 4px 4px;\r\n\tborder-radius: 0 0 4px 4px;\r\n}\r\n.tabs-below > .nav-tabs > li > a:hover, .tabs-below > .nav-tabs > li > a:focus {\r\n\tborder-top-color: #ddd;\r\n\tborder-bottom-color: transparent;\r\n}\r\n.tabs-below > .nav-tabs > .active > a, .tabs-below > .nav-tabs > .active > a:hover, .tabs-below > .nav-tabs > .active > a:focus {\r\n\tborder-color: transparent #ddd #ddd #ddd;\r\n}\r\n<\/pre>\n
4.4 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
4.5Si vos tabs ne fonctionnent pas, il sera n\u00e9cessaire d’ajouter le code suivant dans ..Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<script><\/span><\/p>\n
$('.myTabs a').click(function (e) {\r\n    e.preventDefault()\r\n    $(this).tab('show')\r\n  });\r\n<\/script><\/pre>\n
———————————–<\/p>\n
Attention: lorsque vous touchez les fichiers .tpl .css, si vous ne voyez pas de changements, n’oubliez pas de nettoyer votre cache Prestashop !<\/strong><\/span><\/p>\n
Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Astuce : Centrer votre menu dans Prestashop 1.6  
views 4133<\/div><\/a>\n\t\t\t\t\t\t\t\tVoici un petit tuto qui va vous permettre de centrer votre menu dans prestashop\r\n\r\nCette astuce Prestashop est valable pour la version 1.6\r\n\r\n\r\n\r\nComment centrer le menu sur ma boutique Prestashop ?\u00a0\r\nIl y a q'un seul fichier \u00e0 modifier : superfish-modified.css\u00a0 qui appartient au module blocktopmenu\r\n\r\n\r\n\r\n1) Dans .sf-menu, ajouter text-align:center\r\n\r\n2) Dans .sf-menu > li, remplacer float:lef...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Comment les Hashtags Facebook peuvent-ils aider vos actions marketing ?  
views 176<\/div><\/a>\n\t\t\t\t\t\t\t\t1) Comment utiliser les hashtags ?\r\n\r\nLes hashtags transforment les sujets et les locutions en liens cliquables \u00e0 l\u2019int\u00e9rieur des publications de votre journal ou de votre Page. Ils aident les utilisateurs \u00e0 trouver des publications portant sur des sujets qui les int\u00e9ressent. Pour cr\u00e9er un hashtag, tapez # (le symbole di\u00e8se) imm\u00e9diatement suivi d\u2019un sujet ou d\u2019une locution, puis ajoutez-le \u00e0 votre...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Quelques astuces pour vous aider \u00e0 cr\u00e9er un site e-commerce avec Prestashop  
views 1103<\/div><\/a>\n\t\t\t\t\t\t\t\tCr\u00e9er son site e-commerce avec Prestashop n'est pas toujours facile.\u00a0Je mettrais r\u00e9guli\u00e8rement des documents que vous pourrez t\u00e9l\u00e9charger afin de mieux vous aidez dans la cr\u00e9ation de votre site e-commerce.\r\nDocument 1 : Mod\u00e8le de cahier des charges\u00a0\r\nAvant de se lancer dans l'aventure de l'e-commerce, il est tr\u00e8s important de mettre par \u00e9crit un ensemble d'informations qui va vous aider pour la su...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Que pensent les fran\u00e7ais du service client ? | E-commerce  
views 288<\/div><\/a>\n\t\t\t\t\t\t\t\tPour de nombreuses marques, le service client est consid\u00e9r\u00e9 comme une priorit\u00e9.\u00a0Mais que pensent vraiment les Fran\u00e7ais?\r\n\r\nCette infographie, r\u00e9alis\u00e9e par\u00a0Do You Dream Up, nous donne quelques \u00e9l\u00e9ments de r\u00e9ponse.\r\n1) Quelques chiffres....\r\nMalheureusement, on peut constater que 9 Fran\u00e7ais sur 10 ont d\u00e9j\u00e0 eu une mauvaise exp\u00e9rience en contactant le service client.\r\n\r\n\r\n\r\nPourquoi ?\r\n\r\n \tpour 79% de...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Quel nom de domaine pour mon site e-commerce  
views 239<\/div><\/a>\n\t\t\t\t\t\t\t\t MON NOM DE DOMAINE\r\n \r\nLe choix du nom de domaine est la premi\u00e8re d\u00e9cision importante lorsque vous d\u00e9cidez de cr\u00e9er un site e-commerce ou un site vitrine.\r\n\r\nIl est tr\u00e8s important de r\u00e9fl\u00e9chir \u00e0 celui-ci avant de faire votre choix car il a un impact direct sur votre image de marque sur le web et sur la facilit\u00e9 avec laquelle les internautes trouveront votre site sur les moteurs de recherche.\r\n\r\n\r...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  ","protected":false},"excerpt":{"rendered":"
Ce tutorial va vous permettre d’ins\u00e9rer des tabs dans vos pages cms Astuce Prestashop 1.6 ————————————– 1) Ins\u00e9rer une tab horizontal sur la page cms de Prestashop\u00a0 1.1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code Articles similaires Am\u00e9liorer son r\u00e9f\u00e9rencement naturel en 2015 | Infographie views […]<\/p>\n","protected":false},"author":1,"featured_media":1384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,11],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1380"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=1380"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/1384"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=1380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=1380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}