{"id":367318,"date":"2023-02-25T12:16:00","date_gmt":"2023-02-25T09:16:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367318"},"modified":"2023-04-13T10:13:14","modified_gmt":"2023-04-13T07:13:14","slug":"comment-creer-des-onglets-wordpress-avec-qi-addons-pour-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-creer-des-onglets-wordpress-avec-qi-addons-pour-elementor\/","title":{"rendered":"Comment cr\u00e9er des onglets WordPress avec Qi Addons pour Elementor"},"content":{"rendered":"\n

La qualit\u00e9 du contenu de votre site Web d\u00e9pend en grande partie de vos connaissances et de vos comp\u00e9tences, mais la fa\u00e7on dont vous l’affichez joue \u00e9galement un r\u00f4le important dans la fa\u00e7on dont les autres le per\u00e7oivent. Les onglets WordPress sont un excellent moyen de structurer et d’organiser le contenu et de le rendre plus facile \u00e0 dig\u00e9rer<\/strong>, en particulier lorsqu’il s’agit d’articles longs. Garder un lecteur sur une page n’a jamais \u00e9t\u00e9 facile, donc compliquer la t\u00e2che en proposant un contenu qui n’est pas visuellement attrayant n’est tout simplement pas une bonne chose \u00e0 faire.<\/p>\n

Les onglets vous aident \u00e0 diviser un article en sections facilement lisibles et \u00e0 le rendre plus accessible au lecteur qui peut alors naviguer plus facilement dans le texte. Bien s\u00fbr, il existe de nombreuses autres astuces d’\u00e9criture<\/a> pour vous aider \u00e0 rendre le contenu plus attrayant, mais la configuration des onglets est l’un des \u00e9l\u00e9ments essentiels. Dans cet article, nous allons vous montrer comment ajouter de beaux onglets \u00e0 votre contenu avec les Qi Addons pour Elementor<\/strong>.<\/p>\n

Ajouter des onglets avec un plugin<\/h2>\n

Qi Addons for Elementor<\/a> est un outil puissant et gratuit qui vous permet d’ ajouter facilement une grande vari\u00e9t\u00e9 de beaux \u00e9l\u00e9ments \u00e0 votre site Web<\/strong>. Il est livr\u00e9 avec une interface intuitive et conviviale, et les utilisateurs d\u00e9butants et avanc\u00e9s le trouveront facile \u00e0 utiliser. Ce qui est particuli\u00e8rement g\u00e9nial avec Qi, c’est l’accent mis sur le design, donc en plus des \u00e9l\u00e9ments utiles, il vous offre \u00e9galement une touche d’\u00e9l\u00e9gance contemporaine<\/strong>.<\/p>\n

Le processus d’installation<\/a> des modules compl\u00e9mentaires QI pour Elementor n’est pas diff\u00e9rent de toute autre installation de plug-in. Si vous avez des questions \u00e0 ce sujet, assurez-vous de v\u00e9rifier le lien que nous avons fourni ci-dessus, et vous pouvez \u00e9galement nous \u00e9crire dans la section des commentaires.<\/p>\n

Comme il s’agit d’un plugin Elementor, assurez-vous de passer \u00e0 l’\u00e9diteur Elementor lors de la cr\u00e9ation d’un nouveau message. Tous les widgets Qi Addons seront clairement affich\u00e9s dans le menu des \u00e9l\u00e9ments de gauche<\/strong>. Faites simplement d\u00e9filer le menu pour les trouver.<\/p>\n

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

D\u00e9sormais, il n’est plus n\u00e9cessaire de parcourir tous les \u00e9l\u00e9ments Qi. Vous pouvez simplement entrer celui que vous souhaitez ajouter<\/strong>, tabulation dans ce cas, dans le champ de recherche et il s’affichera dans les r\u00e9sultats de la recherche. Comme vous pouvez le voir ci-dessous, Qi Addons vous fournit deux \u00e9l\u00e9ments d’onglet – onglet horizontal<\/a> et onglet vertical<\/a>.<\/p>\n

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

Pour ajouter un onglet vertical, faites glisser et d\u00e9posez l’\u00e9l\u00e9ment Elementor \u00e0 l’endroit souhait\u00e9. Lorsque l’onglet vertical est ajout\u00e9, tous les param\u00e8tres seront sur le c\u00f4t\u00e9 gauche et dans les onglets Contenu et Style se trouvent toutes les options li\u00e9es aux onglets<\/strong>. L’option Avanc\u00e9 est en fait le groupe par d\u00e9faut d’Elementor pour la colonne.<\/p>\n

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

Les premiers param\u00e8tres que vous verrez sont les param\u00e8tres g\u00e9n\u00e9raux, ils regroupent toutes les options n\u00e9cessaires pour ajuster votre contenu de mani\u00e8re optimale<\/strong>.<\/p>\n

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

L’option Placer le contenu sous l’onglet \u00e0 l’\u00e9cran sous vous permet de d\u00e9finir l’onglet vertical en fonction de la taille de l’\u00e9cran cible. Vous pouvez choisir entre quatre tailles d’\u00e9cran. Par exemple, si la taille de l’\u00e9cran est inf\u00e9rieure \u00e0 480 pixels, le titre de l’onglet sera plac\u00e9 au-dessus et non \u00e0 c\u00f4t\u00e9 du texte. Cette option se r\u00e9f\u00e8re uniquement aux onglets verticaux. L’image ci-dessous illustre comment l’onglet vertical est vu sur le grand \u00e9cran et comment vous d\u00e9finissez la taille de l’\u00e9cran dans l’option Placer le contenu sous l’onglet \u00e0 l’\u00e9cran sous.<\/p>\n

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

Pour saisir et organiser le texte dans l’onglet vertical, cliquez sur l’ option \u00c9l\u00e9ments<\/strong>, et le menu s’ouvrira avec un champ en dessous pour saisir le texte directement<\/strong>. Vous pouvez \u00e9galement ajuster imm\u00e9diatement les param\u00e8tres du texte en termes d’alignement, de typographie. Il n’est pas n\u00e9cessaire de d\u00e9finir les param\u00e8tres g\u00e9n\u00e9raux pour la typographie car vous pouvez le faire plus tard dans l’onglet Style. C’est \u00e9galement l\u00e0 que vous d\u00e9finissez le titre de l’onglet vertical<\/strong>, simplement en le saisissant dans le champ Titre. Sur le c\u00f4t\u00e9 droit de l’\u00e9cran, vous verrez imm\u00e9diatement l’aper\u00e7u de toutes les modifications que vous apportez.<\/p>\n

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

Apr\u00e8s avoir saisi le texte, vous pouvez continuer \u00e0 le styliser plus en d\u00e9tail<\/strong>. Cliquez sur l’ option Style<\/strong> \u00e0 c\u00f4t\u00e9 de l’option Contenu dans le menu pour ouvrir tous les param\u00e8tres de style.<\/p>\n

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

Le param\u00e8tre de balise de titre vous permet de choisir si vous souhaitez que le titre de l’onglet vertical\/horizontal soit H1, H2, etc. Dans l’image ci-dessus, nous avons opt\u00e9 pour H1.<\/p>\n

L’ option Title Typography<\/strong> est tr\u00e8s int\u00e9ressante. La premi\u00e8re ic\u00f4ne avec le globe ouvre un menu personnalis\u00e9 qui vous permet de choisir le type de typographie parmi les polices globales<\/strong>. C’est un choix s\u00fbr si vous voulez vous assurer que votre onglet est conforme au style g\u00e9n\u00e9ral de votre site Web.<\/p>\n

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

Si vous vous sentez suffisamment en confiance pour d\u00e9finir vous-m\u00eame la typographie du titre ou si vous souhaitez simplement explorer plus d’options, cliquez sur l’ic\u00f4ne en forme de crayon \u00e0 c\u00f4t\u00e9 du globe pour tous les param\u00e8tres de typographie disponibles<\/strong>. Vous pouvez tous les tester facilement, car vous verrez imm\u00e9diatement l’effet sur le c\u00f4t\u00e9 droit de l’\u00e9cran.<\/p>\n

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

L’ option Famille<\/strong> vous permet de choisir la police<\/strong>, puis toutes les options ci-dessous vous permettent de personnaliser davantage la police de votre choix<\/strong>.<\/p>\n

Le param\u00e8tre Taille de ce menu vous permet de d\u00e9finir vous-m\u00eame la taille des lettres<\/strong>, l’option Poids vous permet d’ ajuster la largeur des lettres dans la police<\/strong>. L’option Transformer vous permet de choisir si vous souhaitez que le texte soit uniquement en majuscules ou en minuscules ou en majuscules, etc. L’option D\u00e9coration vous permet de choisir entre les styles de la m\u00eame police – par d\u00e9faut, normal, italique ou oblique. Et vous pouvez \u00e9galement r\u00e9gler vous-m\u00eame la hauteur des lignes<\/strong> et l’espacement des lettres.<\/p>\n

Les param\u00e8tres de typographie sont en effet amusants \u00e0 ajuster car il y a tellement de choix et vous pouvez vraiment d\u00e9finir \u00e0 la fois le titre et le corps du texte pour qu’ils ressemblent exactement \u00e0 ce que vous aviez imagin\u00e9. Apr\u00e8s avoir donn\u00e9 la touche finale, vous pouvez passer \u00e0 d’autres param\u00e8tres de style, notamment choisir la couleur de la police, la couleur d’arri\u00e8re-plan et les bordures si vous le souhaitez<\/strong>. Si vous avez opt\u00e9 pour le type de d\u00e9grad\u00e9 de l’arri\u00e8re-plan, l’option Emplacement vous permet d’affiner l’effet de d\u00e9grad\u00e9.<\/p>\n

Ci-dessous, vous pouvez voir un exemple de la fa\u00e7on dont nous avons organis\u00e9 le titre, nous avons trouv\u00e9 l’option Bordure qui vous permet d’ajuster la largeur du titre tr\u00e8s int\u00e9ressante. Nous n’avons utilis\u00e9 qu’un seul c\u00f4t\u00e9 du titre, mais vous pouvez exp\u00e9rimenter et voir ce qui vous convient le mieux.<\/p>\n

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

Vous pouvez \u00e9galement personnaliser le texte en termes de couleur de police, de couleur d’arri\u00e8re-plan, de typographie et de type de bordure. Puisque vous avez un aper\u00e7u en direct de toutes les modifications que vous apportez, vous avez beaucoup de place pour exp\u00e9rimenter jusqu’\u00e0 ce que vous trouviez ce qui a l’air bien sur la page.<\/p>\n

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

L’image ci-dessous est un exemple de la fa\u00e7on dont nous avons personnalis\u00e9 le texte pour l’adapter au reste du contenu de la page.<\/p>\n

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

Le prochain param\u00e8tre important \u00e0 noter dans ce menu est l’ option Actif\/Survol<\/strong>. C’est ici que vous pouvez d\u00e9finir l’apparence de l’onglet lorsque vous survolez<\/strong>. Les options sont les m\u00eames que toutes celles mentionn\u00e9es ci-dessus, donc si vous voulez que le contenu soit diff\u00e9rent lors du survol, c’est ici que vous d\u00e9finissez exactement \u00e0 quel point vous voulez qu’il soit diff\u00e9rent.<\/p>\n

Les options Sideline<\/strong> que l’on trouve ici permettent d’ajouter des effets de survol anim\u00e9s. Nous vous recommandons de l’exp\u00e9rimenter un peu et de voir ce qui serait le mieux sur vos pages.<\/p>\n

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

Si vous \u00eates satisfait de la fa\u00e7on dont vous avez d\u00e9fini l’onglet jusqu’\u00e0 pr\u00e9sent, vous pouvez continuer \u00e0 explorer les param\u00e8tres de style d’espacement. Ceux-ci vous permettront d’ajuster l’espacement du titre, du contenu et des \u00e9l\u00e9ments que vous avez utilis\u00e9s dans l’onglet.<\/p>\n

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

Si vous devez ins\u00e9rer une tabulation horizontale, la proc\u00e9dure est fondamentalement la m\u00eame. Vous aurez toutes les m\u00eames options \u00e0 votre disposition sauf Placer le contenu sous l’onglet \u00e0 l’\u00e9cran sous l’option.<\/p>\n

Pour des informations plus d\u00e9taill\u00e9es, consultez les vid\u00e9os suivantes\u00a0:<\/p>\n