Lien objet skill bar
Autor: Axel
Besucht 2437,
Followers 1,
Geteilt 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
Gepostet am
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.
Autor
Merci JP, mais je trouve cela trop lourd au visuel ...
Autor
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
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
Autor
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
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
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
Bonjour,
As-tu essayé ceci pour tes diagrammes circulaires ?
https://github.com/pguso/jquery-plugin-circliful
Tu as même des tests en live ici :
https://jsfiddle.net/9dajqcr1/
Amuse toi bien !
+++
Autor
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
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 c'est hyper simple...
Danielle
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.
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
Bonne journée.
Cordialement,
Danielle
Autor
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
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
+
Avez-vous essayé la solution de Franck pour les diagrammes circulaires (commentaire de 23:40) ?
C'est simple et gratuit
Danielle
Autor
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
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
Autor
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