{"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   8 erreurs SEO commises par les sites e-commerce  
views 485<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par le site\u00a0Oncrawl\u00a0met en avant 8 erreurs commises par les sites e-commerce en terme de SEO.\r\n\r\nTout d'abord, il faut noter que 40% de la population mondiale ach\u00e8te en ligne et recherche des produits sur Internet. Les e-commer\u00e7ants doivent donc am\u00e9liorer leurs performances SEO.\r\n\r\nMais ils commettent souvent les m\u00eames erreurs :\r\n\r\n \tErreur n\u00b01: Ne pas cibler leur reche...<\/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 faire une page contact parfaite ?  
views 196<\/div><\/a>\n\t\t\t\t\t\t\t\tUne page contact est utilis\u00e9e sur un site web pour permettre l\u2019interaction entre les visiteurs et le webmaster du site.\r\n\r\nIl permet au visiteur de demander un devis ou \u00eatre contact\u00e9 par un vendeur.\r\n\r\nLe formulaire de contact est un enjeu important pour les soci\u00e9t\u00e9s poss\u00e9dant un site web car il permet de transformer un simple visiteur en prospect qualifi\u00e9 voir en client.\r\n\r\nCette infographie abor...<\/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   D\u00e9sactiver les deux zooms de la page produit |  Astuce Prestashop 1.6  
views 4766<\/div><\/a>\n\t\t\t\t\t\t\t\tCe tuto simple et rapide va vous permettre de d\u00e9sactiver les deux\u00a0zooms de la page produit.\r\n\r\nCette astuce est valable Prestashop 1.6. Le code \u00e9tant pratiquement similaire, ce tuto peut aussi s'appliquer \u00e0 Prestashop 1.5\r\n\r\n----------------------\r\n\r\n\r\n\r\nSur la page produit, il existe deux types de zoom :\r\n\r\n1) Le zoom \"pop-up\"\r\n\r\n\r\n\r\n2) Le zoom \"Jqzoom\"\r\n\r\n\r\n\r\nSi vous ne d\u00e9sirez pas avoir de zoom...<\/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   Pourquoi il ne faut pas rechercher ses mots cl\u00e9s Adwords sur Google  
views 203<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie explique pourquoi il ne faut pas de saisir sur Google, \u00a0ses requ\u00eates sur laquelle nous avons plac\u00e9 une ench\u00e8re.\r\n\r\n\r\n<\/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   Les fonctionnalit\u00e9s de PrestaShop pour vos clients  
views 301<\/div><\/a>\n\t\t\t\t\t\t\t\tNativement PrestaShop propose une large palette de fonctionnalit\u00e9s qui permet \u00e0 vos clients d'avoir une exp\u00e9rience d'achat optimis\u00e9e, une pr\u00e9sentation compl\u00e8te de vos produits.\r\nVoici une liste de ces fonctionnalit\u00e9s:\r\n\r\nEXPERIENCE D\u2019ACHAT OPTIMISE\r\n\u2014 Navigation \u00e0 facettes (filtre les produits par caract\u00e9ristiques)\r\n\u2014 Outils de recherche int\u00e9gr\u00e9s puissants\r\n\u2014 Bas de page enrichi avec liens d'acc\u00e8s...<\/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 Comment bien poster sur Facebook | Infographie views 374 […]<\/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}]}}