{"id":813836,"date":"2022-06-14T19:57:04","date_gmt":"2022-06-14T19:57:04","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/divi-plugin-highlight-table-maker-2\/"},"modified":"2022-06-15T23:27:00","modified_gmt":"2022-06-15T23:27:00","slug":"divi-plugin-highlight-table-maker-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/mise-en-avant-du-plugin-divi-table-maker\/","title":{"rendered":"Mise en avant du plugin Divi : Table Maker"},"content":{"rendered":"
\n

Bien que Divi poss\u00e8de de nombreux modules, il ne dispose pas d’un module permettant de construire des tableaux. Heureusement, il existe une solution. Table Maker est un plugin tiers qui vous permet de construire des tableaux enti\u00e8rement personnalisables avec le Divi Builder. Pour vous aider \u00e0 d\u00e9cider si c’est le bon plugin pour votre site Divi, dans cet article, nous allons jeter un coup d’\u0153il \u00e0 Table Maker et voir ce qu’il peut faire.<\/p>\n

Installation de Table Maker<\/h2>\n

\"Installing<\/p>\n

L’installation est simple et directe.<\/p>\n

    \n
  1. Naviguez vers Plugins<\/em> > Add New<\/em> > Upload Plugin<\/em><\/li>\n
  2. Cliquez sur Choose File<\/em><\/li>\n
  3. Localisez le fichier zip du plugin sur votre ordinateur et s\u00e9lectionnez-le<\/li>\n
  4. Cliquez sur Installer maintenant<\/em><\/li>\n
  5. Cliquez sur Activer<\/em><\/li>\n<\/ol>\n

    Module Table Maker<\/h2>\n

    \"Table<\/p>\n

    Un nouveau module a \u00e9t\u00e9 ajout\u00e9 \u00e0 Divi Builder, appel\u00e9 Table Maker. Voyons-en les principales caract\u00e9ristiques.<\/p>\n

    Onglet de contenu Table Maker<\/h3>\n

    \"Table<\/p>\n

    L’onglet Contenu comprend une zone pour les sous-modules. Ceux-ci sont utilis\u00e9s pour cr\u00e9er les colonnes du tableau. Pour les colonnes, vous pouvez r\u00e9gler le nombre d’en-t\u00eates et de pieds de page, ainsi que la taille des colonnes et des lignes, ajuster les points d’arr\u00eat r\u00e9actifs pour chaque type de p\u00e9riph\u00e9rique, activer le d\u00e9filement et choisir des ic\u00f4nes, des boutons et des images. Les ic\u00f4nes, les boutons et les images peuvent \u00eatre personnalis\u00e9s en termes de taille, de couleur, d’emplacement, etc.<\/p>\n

    Sous-modules de colonne<\/h4>\n

    \"Column<\/p>\n

    Les sous-modules d\u00e9finissent les colonnes et incluent un champ pour ajouter du contenu aux lignes. Ils fonctionnent comme un \u00e9diteur de code o\u00f9 chaque ligne est num\u00e9rot\u00e9e. Vous pouvez \u00e9galement ajuster la largeur, les ic\u00f4nes, les boutons et les images.<\/p>\n

    La premi\u00e8re ligne est le titre de la colonne par d\u00e9faut, mais vous pouvez la modifier si vous ne souhaitez pas avoir d’en-t\u00eate. Vous pouvez inclure du HTML, ce qui signifie que vous devrez \u00e9viter certains caract\u00e8res utilis\u00e9s pour le balisage. Vous pouvez \u00e9galement ajouter des CSS, des shortcodes, des iFrames, des ic\u00f4nes, des images, des boutons, etc.<\/p>\n

    \"Column<\/p>\n

    Les colonnes comprennent des personnalisations de conception pour chaque \u00e9l\u00e9ment, notamment le texte, l’arri\u00e8re-plan, les cellules, les cellules d’en-t\u00eate et de pied de page, etc.<\/p>\n

    \"Column<\/p>\n

    Cr\u00e9ez autant de colonnes que vous le souhaitez. Vous pouvez les styliser ind\u00e9pendamment, \u00e9tendre les styles de l’une aux autres, etc. J’ai ajout\u00e9 4 colonnes et ajust\u00e9 les couleurs et les largeurs de chaque colonne s\u00e9par\u00e9ment.<\/p>\n

    En-t\u00eates et pieds de page<\/h4>\n

    \"Headers<\/p>\n

    Vous pouvez d\u00e9finir le nombre de colonnes pour les en-t\u00eates et les pieds de page. Par d\u00e9faut, il y a 1 en-t\u00eate et aucun pied de page. Dans cet exemple, j’ai d\u00e9fini les deux premi\u00e8res colonnes comme en-t\u00eates et la derni\u00e8re comme pied de page. Les couleurs sont stylis\u00e9es ind\u00e9pendamment.<\/p>\n

    \"Headers<\/p>\n

    Vous pouvez faire de m\u00eame pour les lignes. Dans cet exemple, j’ai d\u00e9fini deux rang\u00e9es comme en-t\u00eates (les deux \u00e0 gauche) et une comme pied de page (celle \u00e0 droite).<\/p>\n

    D\u00e9filement du tableau<\/h4>\n

    \"Table<\/p>\n

    Le d\u00e9filement de la table permet un d\u00e9filement horizontal et vertical. Vous pouvez rendre les en-t\u00eates de colonne et de ligne collants si vous le souhaitez. Cela permet de les maintenir en place afin qu’ils ne d\u00e9filent pas hors de vue. Dans cet exemple, j’ai activ\u00e9 le d\u00e9filement et rendu les en-t\u00eates collants. J’ai ajout\u00e9 beaucoup de colonnes pour permettre un d\u00e9filement vertical. Les en-t\u00eates de ligne restent en place.<\/p>\n

    Ic\u00f4nes de tableau<\/h4>\n

    \"Table<\/p>\n

    Vous pouvez ajouter autant d’ic\u00f4nes que vous le souhaitez \u00e0 chaque cellule. Configurez une ic\u00f4ne par d\u00e9faut et choisissez des ic\u00f4nes pour chaque cellule s\u00e9par\u00e9ment. Choisissez l’ic\u00f4ne par d\u00e9faut et ajustez la taille et la couleur dans l’onglet Contenu.<\/p>\n

    \"Table<\/p>\n

    Les ic\u00f4nes sont ajout\u00e9es aux cellules sp\u00e9cifiques dans lesquelles vous souhaitez qu’elles s’affichent en utilisant la balise icon dans la zone de contenu des sous-modules. Vous pouvez remplacer l’ic\u00f4ne par d\u00e9faut et d\u00e9finir une valeur par d\u00e9faut pour cette colonne en la s\u00e9lectionnant dans l’onglet ic\u00f4ne du sous-module, et vous pouvez saisir le nom de toute ic\u00f4ne sp\u00e9cifique que vous souhaitez afficher. La page des ventes sur le march\u00e9 d’Elegant Themes fournit un lien vers la liste des ic\u00f4nes et de leurs noms.<\/p>\n

    Boutons de table<\/h4>\n

    \"Table<\/p>\n

    Les boutons de tableau sont \u00e9galement ajout\u00e9s \u00e0 l’aide de balises. Ajoutez un bouton par d\u00e9faut dans l’onglet Contenu. Vous pouvez \u00e9galement donner un style au bouton \u00e0 partir de ces param\u00e8tres. Remplacez le bouton par d\u00e9faut par ces m\u00eames param\u00e8tres dans chaque sous-module de colonne.<\/p>\n

    \"Table<\/p>\n

    Ajoutez le bouton \u00e0 chaque cellule avec la balise de bouton dans la zone de contenu du sous-module. Modifiez le texte du bouton en l’ajoutant dans les balises. Dans cet exemple, j’ai ajout\u00e9 le bouton par d\u00e9faut \u00e0 quelques cellules et modifi\u00e9 le texte du deuxi\u00e8me bouton.<\/p>\n

    Images du tableau<\/h4>\n

    \"Table<\/p>\n

    Vous pouvez ajouter des images, des ic\u00f4nes et d’autres types de contenu aux cellules. D\u00e9finissez la qualit\u00e9, la proportion, l’\u00e9chelle et l’alignement horizontal et vertical de l’image. Il y a beaucoup d’options pour les images.<\/p>\n

    \"Table<\/p>\n

    M\u00eame si les images sont ajout\u00e9es dans la galerie, elles ne s’affichent pas tant que vous ne leur indiquez pas dans quelle cellule elles doivent \u00eatre affich\u00e9es. Cela se fait \u00e0 l’aide de balises. En tapant la balise d’ouverture de l’image, la balise de fermeture est automatiquement ajout\u00e9e et l’image s’affiche dans cette cellule. Vous pouvez l’inclure avec d’autres contenus dans les cellules. Ajoutez un nombre entre les balises pour sp\u00e9cifier une image sp\u00e9cifique \u00e0 afficher.<\/p>\n

    Onglet Conception de Table Maker<\/h3>\n

    L’onglet Design comprend des param\u00e8tres pour le cadre du tableau, les bandes, les cellules, le texte, l’en-t\u00eate, le pied de page, la taille, l’espacement, la bordure, etc. Voici les principaux param\u00e8tres.<\/p>\n

    Cadre du tableau<\/h4>\n

    \"Table<\/p>\n

    L’onglet Conception comprend des param\u00e8tres pour le cadre de la table, les cellules, le texte, l’en-t\u00eate, la ligne, le pied de page, le dimensionnement, l’espacement, la bordure, etc. Voici le cadre de la table. Le type de cadre par d\u00e9faut utilise Gaps, qui place un peu d’espace entre les cellules. C’est None, qui supprime les bordures entre les cellules.<\/p>\n

    \"Table<\/p>\n

    Pour Gaps, vous pouvez ajuster les \u00e9carts de colonne et de ligne ind\u00e9pendamment. J’ai augment\u00e9 l’\u00e9cart de colonne \u00e0 8px et l’\u00e9cart de ligne \u00e0 4px.<\/p>\n

    \"Table<\/p>\n

    Lines place une bordure autour de chaque cellule. Vous avez le contr\u00f4le sur le style, la couleur et l’\u00e9paisseur des lignes. Il s’agit de la valeur par d\u00e9faut.<\/p>\n

    \"Table<\/p>\n

    Dans cet exemple, j’ai d\u00e9fini le style en pointill\u00e9s, modifi\u00e9 la couleur et ajust\u00e9 la largeur de ligne \u00e0 3px.<\/p>\n

    Rayures de table<\/h4>\n

    \"Table<\/p>\n

    Table Stripes cr\u00e9e un effet de rayures comme dans une feuille de calcul standard. Vous pouvez choisir o\u00f9 il s’applique, choisir l’ordre, et ajuster la teinte, la saturation et la luminosit\u00e9. Voici les param\u00e8tres par d\u00e9faut.<\/p>\n

    \"Table<\/p>\n

    Dans cet exemple, j’ai r\u00e9gl\u00e9 la teinte de la bande sur 86 degr\u00e9s, la saturation sur 172 % et la luminosit\u00e9 sur 82 %. Ces trois ajustements fonctionnent ensemble pour cr\u00e9er des options de couleurs int\u00e9ressantes.<\/p>\n

    \"Table<\/p>\n

    Dans cet exemple, j’ai ajust\u00e9 la couleur des cellules du tableau, des cellules d’en-t\u00eate et des cellules d’en-t\u00eate de colonne.<\/p>\n

    \"Table<\/p>\n

    Pour cet exemple, j’ai ajout\u00e9 une ombre port\u00e9e #1 aux cellules d’en-t\u00eate et une ombre port\u00e9e #3 aux cellules d’en-t\u00eate de ligne. J’ai centr\u00e9 l’alignement horizontal et vertical du texte pour chacun des types de cellules individuellement. J’ai \u00e9galement ajout\u00e9 de l’espace pour les espaces.<\/p>\n

    Style de l’en-t\u00eate et du pied de page<\/h4>\n

    \"Header<\/p>\n

    Vous pouvez d\u00e9finir ind\u00e9pendamment les couleurs du texte et des cellules de l’en-t\u00eate et du pied de page. Dans cet exemple, j’ai ajout\u00e9 un pied de page, rendu le texte blanc et tout en majuscules, d\u00e9fini la couleur des cellules sur bleu fonc\u00e9 et ajout\u00e9 une ombre port\u00e9e aux cellules.<\/p>\n

    \"Header<\/p>\n

    Dans cet exemple, j’ai ajust\u00e9 ind\u00e9pendamment les bordures des cellules, des cellules d’en-t\u00eate et des cellules de pied de page.<\/p>\n

    Exemples de cr\u00e9ation de tableaux<\/h2>\n

    \"Table<\/p>\n

    J’ai cr\u00e9\u00e9 un tableau \u00e0 5 colonnes, avec un en-t\u00eate de colonne et un en-t\u00eate de ligne. L’en-t\u00eate de ligne comporte un bouton d’achat qui permet d’acc\u00e9der \u00e0 la page de chaque produit, ainsi qu’une image du produit. Les deux en-t\u00eates utilisent un fond noir, des coins arrondis et les polices de la mise en page.<\/p>\n

    Les cellules utilisent des rayures, une police plus grande issue de la mise en page et des coins arrondis. La derni\u00e8re colonne affiche des ic\u00f4nes pour indiquer si un produit est en stock. J’ai ajout\u00e9 une ombre port\u00e9e \u00e0 chacun des en-t\u00eates et des cellules. Le cadre du tableau utilise des espaces de 4 pixels pour les colonnes et de 7 pixels pour les lignes.<\/p>\n

    \"Table<\/p>\n

    Voici le m\u00eame design sans les images dans l’en-t\u00eate de ligne.<\/p>\n

    \"Table<\/p>\n

    Voici la mise en page avec les images des produits telle qu’elle appara\u00eet sur mobile. Elle r\u00e9duit le tableau \u00e0 2 colonnes dont l’une est l’en-t\u00eate de ligne. Celui-ci le d\u00e9compose en colonnes.<\/p>\n

    \"Table<\/p>\n

    Il est \u00e9galement possible de le diviser en lignes. Cet exemple supprime les images et affiche le tableau par rang\u00e9es.<\/p>\n

    \"Table<\/p>\n

    Cet exemple montre les rang\u00e9es en accord\u00e9on. En cliquant sur l’une d’entre elles, vous l’ouvrez pour afficher son contenu.<\/p>\n

    O\u00f9 acheter Table Maker<\/h2>\n

    Vous pouvez acheter Table Maker sur la place de march\u00e9 Divi. Il co\u00fbte 35 $ pour un nombre illimit\u00e9 de sites Web et comprend une garantie de remboursement de 30 jours et un an d’assistance et de mises \u00e0 jour. La documentation est fournie sous forme de vid\u00e9os et de textes.<\/p>\n

    R\u00e9flexions finales<\/h2>\n

    Voil\u00e0 pour ce qui est de Table Maker pour Divi. Il poss\u00e8de de nombreuses fonctionnalit\u00e9s pour cr\u00e9er et personnaliser des tableaux pour Divi, dont plusieurs que je n’ai pas couvertes ici. Je n’ai eu besoin de la documentation que pour voir comment utiliser les images, les ic\u00f4nes et les boutons.<\/p>\n

    Au d\u00e9but, il semblait un peu bizarre d’ajouter des boutons, des ic\u00f4nes et des images au tableau \u00e0 l’aide de balises, mais c’est facile \u00e0 faire et comme le contenu des cellules est ajout\u00e9 avec un \u00e9diteur de code, cela vous donne beaucoup plus de contr\u00f4le que ce que vous auriez normalement.<\/p>\n

    Table Maker est un excellent plugin pour cr\u00e9er des tableaux avec Divi. La possibilit\u00e9 d’ajouter du contenu tel que du HTML, des shortcodes, des iFrames, du CSS, etc., am\u00e9liore consid\u00e9rablement les types de tableaux que vous pouvez cr\u00e9er. Si vous \u00eates int\u00e9ress\u00e9 par la cr\u00e9ation de vos propres tableaux personnalis\u00e9s avec Divi, Table Maker vaut le coup d’\u0153il.<\/p>\n

    Nous voulons savoir ce que vous en pensez. Avez-vous essay\u00e9 Table Maker pour Divi ? Faites-nous savoir ce que vous en pensez dans les commentaires <\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Bien que Divi poss\u00e8de de nombreux modules, il ne dispose pas d’un module permettant de construire des tableaux. Heureusement, il existe une solution. Table Maker est un plugin tiers qui vous permet de construire des tableaux enti\u00e8rement personnalisables avec le Divi Builder. Pour vous aider \u00e0 d\u00e9cider si c’est le bon plugin pour votre site […]<\/p>\n","protected":false},"author":1,"featured_media":350494,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-813836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/813836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=813836"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/813836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/350494"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=813836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=813836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=813836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}