TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter un widget d’onglets horizontaux dans Weebly ?

5

Le contenu à onglets est un moyen facile de présenter une grande quantité de contenu dans un espace limité. Weebly avec l’introduction de son App Center apporte de nombreuses nouvelles applications pour ajouter des éléments supplémentaires. « Onglets » est l’une de ces applications que vous pouvez connecter gratuitement à votre site. Dans cet article, nous expliquerons comment ajouter des onglets horizontaux dans Weebly avec l’application d’onglets par défaut et en utilisant un code personnalisé.

Ajouter des onglets horizontaux à l’aide de l’application Onglets par défaut

App Center est une place de marché où vous pouvez trouver toutes les applications Weebly et tierces comme l’application Tabs.

  • Une fois que vous êtes dans l’éditeur de site Weebly, accédez à l’App Center via «Build > Apps ».
  • Utilisez le champ de recherche dans le coin supérieur droit pour taper "onglets" et appuyez sur Entrée.
  • Vous verrez l’application Tabs dans le résultat de la recherche et cliquez dessus pour afficher les détails.
  • Cliquez sur le bouton « Ajouter » et connectez l’application à votre site Weebly.

Comment ajouter un widget d'onglets horizontaux dans Weebly ?

Connexion de l’application Onglets dans le site Weebly

Vous pouvez afficher l’application connectée dans la section « Build » comme les éléments par défaut. Faites glisser et déposez l’élément Onglets pour insérer du contenu à onglets sur votre site. Vous pouvez personnaliser l’en-tête de l’onglet et le contenu de l’éditeur pour créer des onglets horizontaux dans Weebly.

Comment ajouter un widget d'onglets horizontaux dans Weebly ?

Onglets créés avec l’application Weebly Tabs

Fonctionnalités de l’application Onglets

Les utilisateurs peuvent personnaliser les éléments suivants dans l’application Tabs :

  • Ajouter des onglets illimités – nous vous recommandons de limiter à 4 ou 5 onglets au maximum afin de ne pas frapper l’éditeur. De plus, un plus grand nombre d’onglets aura un problème de lisibilité sur les appareils mobiles.
  • Personnalisez la couleur des onglets actifs, inactifs et de la bordure.
  • Faites glisser et déposez tous les éléments dans la zone de contenu des onglets. Vous pouvez créer des cartes, un formulaire de contact, un diaporama, etc. dans la zone de contenu des onglets.
  • Sélectionnez l’un des thèmes – standard, ligne, matériau et simple – pour le contenu à onglets.

Bien que Tabs soit une application native de Weebly, ce n’est pas une application conviviale. Le problème est que lorsque vous avez ajouté du contenu dans un mauvais onglet, il n’y a aucun moyen de faire glisser l’onglet et d’organiser la séquence. Vous devez supprimer tout l’élément et l’ajouter à nouveau avec la séquence correcte.

Onglets personnalisés pour le site Weebly

Il existe de nombreux onglets CSS et jQuery prêts à l’emploi disponibles sur Internet que vous pouvez ajouter avec de petites modifications. L’un de ces onglets personnalisés provient de codedrops créés avec CSS. Ceci est particulièrement adapté lorsque vous n’avez qu’un contenu textuel à ajouter à l’intérieur des onglets. Voici à quoi ressembleront les onglets.

Comment ajouter un widget d'onglets horizontaux dans Weebly ?

Widget Onglets horizontaux

Vous trouverez ci-dessous le code CSS complet du widget des onglets horizontaux. Vous pouvez l’insérer sur votre site Weebly dans la section " Code d’en-tête " de la page.

Comment ajouter un widget d'onglets horizontaux dans Weebly ?

Ajouter un code d’en-tête dans la page

<style> .tabs { position: relative; width: 100%; } .tabs input { position: absolute; z-index: 1000; width: 160px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ left: 160px; } .tabs input#tab-3{ left: 320px; } .tabs input#tab-4{ left: 480px; } .tabs label { background: skyblue; font-size: 16px; line-height: 40px; position: relative; padding: 0 20px; float: left; display: block; color: #333333; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; text-align: center; text-shadow: 1px 1px 1px rgba(255,255,255,0.3); border-radius: 3px 3px 0 0; box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1); } .tabs label:after { content: ''; background: #fff; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; display: block; } .tabs input:hover + label { background: #f1f1f1; } .tabs label:first-of-type { z-index: 4; box-shadow: 2px 0 2px rgba(0,0,0,0.1); } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #f8f8f8; z-index: 6; } .clear-shadow { clear: both; } .content { background: rgba(96, 125, 139, 0.16); position: relative; width: 100%; height: 300px; z-index: 5; box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1); border-radius: 0 3px 3px 3px; } .content div { position: absolute; top: 0; left: 0; padding: 10px 40px; z-index: 1; opacity: 0; -webkit-transition: opacity linear 0.1s; -moz-transition: opacity linear 0.1s; -o-transition: opacity linear 0.1s; -ms-transition: opacity linear 0.1s; transition: opacity linear 0.1s; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity ease-out 0.2s 0.1s; -moz-transition: opacity ease-out 0.2s 0.1s; -o-transition: opacity ease-out 0.2s 0.1s; -ms-transition: opacity ease-out 0.2s 0.1s; transition: opacity ease-out 0.2s 0.1s; } .content div h2, .content div h3{ color: lightslategrey; padding: 20px; } .content div p { font-size: 20px; line-height: 28px; font-style: italic; text-align: left; color: #777; padding-left: 15px; font-family: Cambria, Georgia, serif; border-left: 8px solid rgba(63,148,148, 0.1); } </style>

Vous trouverez ci-dessous le code HTML des onglets que vous pouvez insérer à l’aide de l’élément " Embed Code ".

<section class="tabs"> <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" /> <label for="tab-1" class="tab-label-1">This is Tab 1</label> <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" /> <label for="tab-2" class="tab-label-2">This is Tab 2</label> <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" /> <label for="tab-3" class="tab-label-3">This is Tab 3</label> <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" /> <label for="tab-4" class="tab-label-4">This is Tab 4</label> <div class="clear-shadow"></div> <div class="content"> <!-- This is a content for Tab 1 --> <div class="content-1"> <h2>Heading 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 2 --> <div class="content-2"> <h2>Heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 3 --> <div class="content-3"> <h2>Heading 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <!-- This is a content for Tab 4 --> <div class="content-4"> <h2>Heading 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Sub-Heading 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </section>

Nous créons le premier titre de l’onglet (C’est l’onglet 1) en 160px et augmentons à 320px et 480px pour les autres titres. Vous pouvez l’ajuster en conséquence afin que la zone cliquable s’adapte au titre de l’onglet. L’avantage du widget onglets personnalisés est que vous pouvez préparer le contenu hors ligne et le coller sur votre site en quelques minutes. Lorsque vous souhaitez réorganiser les onglets, vous pouvez le faire hors ligne et simplement remplacer l’ancien code par le nouveau.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails