{"id":62294,"date":"2024-02-13T09:21:20","date_gmt":"2024-02-13T14:21:20","guid":{"rendered":"https:\/\/memberpress.com\/docs\/how-to-show-your-memberships-in-tabs-or-accordion\/"},"modified":"2024-02-16T03:09:45","modified_gmt":"2024-02-16T08:09:45","slug":"how-to-show-your-memberships-in-tabs-or-accordion","status":"publish","type":"ht_kb","link":"https:\/\/stg.memberpress.com\/fr\/docs\/how-to-show-your-memberships-in-tabs-or-accordion\/","title":{"rendered":"Comment afficher vos adh\u00e9sions dans des onglets ou des accord\u00e9ons ?"},"content":{"rendered":"

MemberPress dispose d\u00e9j\u00e0 d'une option permettant d'afficher toutes les adh\u00e9sions sur une seule page si vous optez pour Groupes MemberPress<\/a>. However, what if your memberships are different enough so that upgrading\/downgrading doesn\u2019t make sense, or you simply don\u2019t want to use that feature due to one reason or another?<\/p>\n\n\n\n

Vous avez probablement d\u00e9j\u00e0 remarqu\u00e9 que chaque adh\u00e9sion cr\u00e9e un ensemble de shortcodes auxquels vous pouvez acc\u00e9der en cliquant sur le bouton Shortcodes d'adh\u00e9sion<\/u> <\/strong>dans le lien Inscription<\/strong> onglet de les options d'adh\u00e9sion<\/em> bo\u00eete.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

You\u2019ll notice two shortcodes are generated. For this tutorial, you\u2019ll need the lower one, which contains the ID part so, you\u2019ll need to prepare the shortcodes of all memberships you want to use.<\/p>\n\n\n\n

Now, you could insert those shortcodes in a page or post directly, and that would work, but you\u2019d see that all registration fields would be instantly visible, and if you have three or more memberships you want to add, it won\u2019t look pretty since the page would be quite long with a lot of fields being shown at once.<\/p>\n\n\n\n

In order to make it a lot prettier, you\u2019ll need to install and activate the Onglet - Accord\u00e9on<\/a> plugin. Once the activation is complete, you\u2019ll get a new section in your WordPress Dashboard:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

After that, you\u2019re ready to continue. The user interface might feel a bit counter-intuitive initially, but if you follow these steps, you\u2019ll be up and running in no time. You can start by clicking on the Cr\u00e9er maintenant<\/em> bouton.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

You\u2019ll see eight available tabs and eight available accordions in the free versions; for more, you can upgrade to the Pro version of the plugin.<\/p>\n\n\n\n

Start by clicking on the Choose Theme button on one of the tabs or accordions you want to create. You\u2019ll get this on the left-hand side of the screen:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Cliquez sur le symbole \u201cplus\u201d dans la fen\u00eatre Onglets Champs<\/strong> row, and you\u2019ll see this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

You\u2019ll get three tabs already prepared (but you can add more or delete the third one), which is perfect for our example since we\u2019ll be adding our Bronze Membership, Silver Membership, and Gold Membership. Next, click the pen symbol in order to edit each tab individually. You\u2019ll be on the Menu tab. Type in the membership\u2019s name, select a tab\u2019s icon and color of text and background if you want (the other two options are Pro only), click the Contenu<\/strong> tab, and paste the membership\u2019s shortcode in the Texte<\/em> vue.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n

Don\u2019t forget to click the \u201cUpdate content\u201d button. You\u2019ll most likely need to scroll down to see it.<\/p>\n\n\n\n

R\u00e9p\u00e9tez l'op\u00e9ration pour les adh\u00e9sions Silver et Gold.<\/p>\n\n\n\n

Les autres options telles que Options g\u00e9n\u00e9rales<\/em> dans le Onglets<\/strong> et d'autres options dans l'onglet Menu<\/strong> et Contenu<\/strong> vous permettront d'ajuster ces onglets visuellement, de la mani\u00e8re que vous souhaitez. Nous vous recommandons de passer un peu de temps \u00e0 jouer avec ces onglets pour voir comment ils affectent l'affichage visuel.<\/p>\n\n\n\n

Don\u2019t forget to click the Save\/Update button after every change. When done, click the \u201cBack to WP\u201d button.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

You\u2019ll be asked whether you want to leave the page. Confirm by clicking the \u201cLeave Page\u201d button.<\/p>\n\n\n\n

You\u2019ll see a completed tab, which will also generate a shortcode you\u2019ll need to copy and paste into a page or post of your choice.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

By clicking the Pen icon, you\u2019ll be able to go back to editing, make a copy of the tab by clicking the Copy icon, or trash it by clicking the Trash Can icon. The Preview (eye) icon won\u2019t do you much good since, while previewing, it will just show those memberships\u2019 shortcodes you\u2019ve added previously.<\/p>\n\n\n\n

However, after you publish that post or page, with the shortcode in it, you\u2019ll see something like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Les visiteurs et les membres de vos sites web pourront se d\u00e9placer entre les trois (ou trente-trois) de vos adh\u00e9sions \ud83d\ude42 en cliquant simplement sur un onglet.<\/p>\n\n\n\n

If you end up with errors about values not being filled in, you\u2019ll need to activate the Styles CSS globaux<\/strong> dans l'option MemberPress -> Param\u00e8tres -> G\u00e9n\u00e9ral<\/em> tabulation.<\/p>\n\n\n\n

And that\u2019s it, you\u2019ve created much better-looking tabulated memberships, or memberships in an accordion, depending upon which option you prefer.<\/p>","protected":false},"excerpt":{"rendered":"

MemberPress already has an option to show all memberships on one page if you go for MemberPress Groups. However, what if your memberships are different enough so that upgrading\/downgrading doesn\u2019t make sense, or you simply don\u2019t want to use that feature due to one reason or another? You have probably by now noticed that every [\u2026]<\/p>\n","protected":false},"author":62252,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_FSMCFIC_featured_image_caption":"","_FSMCFIC_featured_image_nocaption":"","_FSMCFIC_featured_image_hide":"","_strive_checklists":"\"\"","_strive_active_checklist":"62291e2bb2422","footnotes":""},"ht-kb-category":[1315],"ht-kb-tag":[],"class_list":["post-62294","ht_kb","type-ht_kb","status-publish","format-standard","ht_kb_category-how-to","entry","has-post-thumbnail"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t