WebSite X5Help Center

 
Axel  
Axel  
User

Lien objet skill bar  fr

Auteur : Axel  
Visité 2152, Followers 1, Partagé 0  

Bonjour,

J'utilise skill bar qui affiche des statistiques comme ci dessous:

Comment peut on faire pour mettre un lien soit sur l'objet ou le label ?

Cordialement

Posté le
18 RéPONSES
JiPeR 48
JiPeR 48
Moderator

Salut Axel,

Je ne pense pas qu'il y ait la possibilité de mettre un lien dans l'état actuel des choses. A mon avis va falloir ouvrir une " IDEE "  ;o))

Sinon il est possible de jongler avec, dessous, une cellule contenant le "Hover Button". A étudier en attendant ? 

@+, J.P.

Lire plus
Posté le de JiPeR 48
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Merci JP, mais je trouve cela trop lourd au visuel ...

Lire plus
Posté le de Axel  
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Pour un objet acheté cela ait le minima je pense d'avoir plein de fonctions !

J'ai aussi acheté l'objet "hover button" qui affiche plein de boutons différents comme:
https://market.websitex5.com/fr/objets/apercu/10342138-2809-41a9-a2e9-71a7dc9866

ou encore

Mais avec l'achat, il n'y a AUCUN boutons ni fichier.

Pour le design, Il faut tout faire soit même !!!!

Je trouve que cela est un peu exagéré de vendre du vent....

Autant prendre des boutons en open source et passer du temps à intégrer le code HTML + JS...

De toutes façons il faut créer / tester / valider ses boutons. Donc grosse perte de temps !

Cordialement

Lire plus
Posté le de Axel  
FABRE Danielle
FABRE Danielle
User

Axel,

Pour les icônes, j'utilise celles du site https://fontawesome.com/icons?d=gallery

Avec l'option free il y a déjà pas mal de possibilités et leur intégration est très simple...

Cordialement,

Danielle

Lire plus
Posté le de FABRE Danielle
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Merci Danielle pour l'info.

Je viens de regarder... En fait les icones sont directement appelées avec du code à insérer: 

j'ai pas trouver comment télécharger les icones !  possible ?

Cordialement

Lire plus
Posté le de Axel  
FABRE Danielle
FABRE Danielle
User

Bonsoir,

Voici un exemple d'intégration dans l'en-tête pour le tél (idem pour le mail) :

Bien sûr il faut avoir téléchargé au préalable la version free de https://fontawesome.com/

Ensuite, cela se fait en 2 temps :

Allez dans le plan du site, Accueil, onglet Avancées.

Sélectionnez extension html (c'est par défaut)

Code personnalisé Après ouverture de la balise HEAD : tapez : <script src="https://use.fontawesome.com/f008b9c993.js"></script>

Fermez les propriétés de la page.

Ensuite, comme pour mon exemple, retournez dans l'étape 2 Modèle, Contenu du modèle.

Allez dans votre en-tête et insérez un objet Texte puis insérez le code que vous avez récupéré sur le site Fontawesome en fonction de l'icône désirée. Dans mon exemple j'ai intégré pour le téléphone :

<i class="fa fa-phone" aria-hidden="true"></i> +33 676 040 xxx

Vous pouvez sélectionner cette ligne de code pour modifier la police, sa taille et sa couleur.

Tenez-moi au courant !

Cordialement,

Danielle

Lire plus
Posté le de FABRE Danielle
FABRE Danielle
FABRE Danielle
User

Suite...

Encore plus simple, en s'inscrivant juste sur le site fontawesome... ce qui vous donnera un n° d'utilisateur que vous voyez dans mon code personnalisé :

<script src="https://use.fontawesome.com/f008b9c993.js"></script>

Danielle

Lire plus
Posté le de FABRE Danielle
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Oui ok. C'est bien ce que j'avais compris... Tout ce fait en HTML / JS + CSS
C'est pas ce que je cherche !!!

WSX5 reste un outil pratique par son concept "Drag & Drop" sans code.... Si il faut ajouter du code à toutes les options, autant revenir au code pur avec un editeur HTML classique...

Et je ne veux pas, plus.

Je cherche donc en fait une bibliothèque d'icones (fichiers) au format PNG et ou chaque icone est déclinée dans différentes tailles.

Ensuite avec WSX5 on ajoute l'image souhaitée... Hop.... Zéro code.

Si un lecteur connait des blibiothéques d'icones PNG multiples tailles, je suis preneur

Merci Danielle.

Cordialement

Lire plus
Posté le de Axel  
FABRE Danielle
FABRE Danielle
User

Axel,

Dans Pixabay.com, vous pouvez trouver toutes sortes d'îcônes au format svg ou png, à télécharger gratuitement et sur lesquelles vous pourrez insérer un lien

C'est ça que vous cherchez ?

PS : pour le skillbar, Franck a trouvé la solution ; il l'a testée en live à côté de moi wink c'est hyper simple...

Danielle

Lire plus
Posté le de FABRE Danielle
Laurent D.
Laurent D.
User

Bonjour,

Sinon, il y a l'objet Font Awesome Icons qui ne coûte pas très cher en crédit, et qui ne nécessite aucun code css ni js.

Mais pour revenir à la police Font Awesome, même s'il y a du css, ce n'est pas du tout contraignant. Personnellement, je place ce fichier ainsi que les fichiers Polices dans l'onglet avancé des Statistues, SEO et Code, comme ceci :

Ensuite, tu n'as plus qu'à insérer le code suivant par exemple, sur n'importe quelle page, dans un objet texte, de la taille souhaitée, de la couleur souhaitée, avec ou sans lien, sans oublié de cocher le bouton "Activer le code html", et le tour est joué.

Voilà, bonne continuation.

Laurent.

Lire plus
Posté le de Laurent D.
FABRE Danielle
FABRE Danielle
User

Hello Laurent,

J'avais également suggéré vers 23:00 les font awesome icons à Axel (en free) mais ton idée de l'nsérer en fichier associé est excellente ; je la retiens !

Je comprends Axel qui ne souhaite pas coder mais là, il suffit juste de faire des copier/coller aux bons endroits pour utiliser des outils un peu plus élaborés... et nous sommes là pour l'aider wink

Bonne journée.

Cordialement,

Danielle

Lire plus
Posté le de FABRE Danielle
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Merci Danielle pour l'idée Pixa.. j'avais zappé... Je vais regarder.

Merci Laurent...je vais regarder cela de près car là OK c'est d'une simplicité exemplaire.

Si je comprends bien...il suffit de checker sur Fontawesome l'icone voulue pour récupérer le code comme:


<i-class="fa fa-map-marker"></i>

Cela fonctionne aussi dans le preview ?

Cordialement

Lire plus
Posté le de Axel  
FABRE Danielle
FABRE Danielle
User

Bonjour Axel,

Oui cela fonctionne parfaitement dans le prewview et vous permet d'ajuster à votre convenance.

C'est très simple comme Laurent et moi vous l'avons précisé !

N'oubliez pas de vous inscrire pour insérer votre compte (méthode de Laurent ou mon commentaire de 23:35).

Et pour Pixabay, c'est une mine.

Tenez-nous au courant !

Cordialement,

Danielle

Lire plus
Posté le de FABRE Danielle
FABRE Danielle
FABRE Danielle
User

+

Avez-vous essayé la solution de Franck pour les diagrammes circulaires (commentaire de 23:40) ?

C'est simple et gratuit laughing

Danielle

Lire plus
Posté le de FABRE Danielle
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Bonjour LAurent,

j'ai suivi ton post, mais rien ne s'affiche.

j'ai téléchargé la version Free de fonteawesome

J'ai copie tous ces fichiers fonts dans l'onglet Avancés du SEO comme ci dessous.

et les css en cliquant la case à cocher.

cela donne:

et j'ai ajouté cela dans un objet texte en activant le HTML

<i class="far fa-address-book"></i>

Mais rien !!!

Dans le preview je retrouve bien les fichiers dans les répertoires.

J'ai sûrement loupé une étape ...

Merci

Lire plus
Posté le de Axel  
FABRE Danielle
FABRE Danielle
User

Axel,

Je n'ai pas essayé la méthode de Laurent.

Pour ma part, j'ai été m'inscrire sur le site Font awesome

... ce qui m'a donné un code Awesome CDN à intégrer dans le plan du site, Accueil, onglet Avancées, Après ouverture de la balise HEAD

Puis j'ai intégré le code html de mon icone dans l'objet de ma page.

Là je sais que ça marche bien...

Try again!

Danielle

Lire plus
Posté le de FABRE Danielle
Axel  
Axel  
User
Auteur
Meilleur utilisateur du mois FR

Danielle, Laurent,

j'ai trouvé encore plsu simple sans ênregsitrement sur le site.

Ajouter après la balise HEAD dans la partie 'Avancées' du SEO

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> 

Ensuite ajouter l'icône dans un objet texte en cliquant sur le bouton 'code HTML'

   <i class="fas fa-arrows-alt"></i>

Pour éviter des problèmes d'affichage de l'icône il est recommandé de sélectionner à nouveau le texte et de réinitialiser la police sur tout le texte et de même pour la taille de la police

Cela affiche l'icône.

Pour la taille et la couleur de l'icône, il suffit de changer la police et la taille.

Merci pour votre aide.

Bon, Danielle cela ne résoud pas le problème du lien sur la skill bar. Uci on ajoute un une icône et un lien au dessus de la barre ou en dessous. Mais aucun lien possible sur l'objet généré par la skill bar !!!

Ou alors, y'a un truc que je n'ai pas compris !

Cordialement

Lire plus
Posté le de Axel