S'abonner à mon canal :
[wps_button style=»default» url=»https://comohacerunapagina.es/ir/menu-flotante» target=»blank» background=»#8224e3″ color=»#ffffff» size=»18″ icon=»star »wide=»oui» position=»gauche» radius=»auto» text_shadow=»0px 0px 0px #000″ rel=»nofollow» title=»Bouton par défaut» id=»default-button»]ACHETER DIVI AVEC 10% DE RÉDUCTION RÉDUCTION[/wps_button]
Salut les gars,
Dans le blog des thèmes élégants, j'ai vu ce tutoriel et j'ai trouvé ça très intéressant.
Il consiste à créer un menu flottant sur notre page, type de chats comme celui que j'ai sur ma page mais sans la fonctionnalité Chat, mais avec 3 liens vers les informations que nous voulons.
Quelque chose comme ce qui suit :
La première chose que nous devons faire est de créer un compte gratuit sur la page codepen.io.
Et une fois le compte créé, si on va sur l'url de la programmation du menu flottant, on l'a :
http://codepen.io/andytran/pen/MJKOqB
Quand on va sur cette page on retrouve toute la programmation en haut et en bas la démo de ce que l'on va réaliser :
Pour que notre photo apparaisse dans le menu flottant à la place de celle de l'auteur du code, il suffit de chercher le code suivant dans le panneau html :
<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=400" />
Nous avons remplacé l'URL de votre photo par la nôtre.
Nous allons également changer son nom et les liens qui proviennent de séries pour les nôtres.
Pour ce faire, nous recherchons le code suivant :
<a href="https://andytran.me">View Profile</a>
<h2 class="at-floating-navigation__title">Andy Tran</h2>
<a class="at-floating-navigation__item" href="https://andytran.me">Settings</a>
<a class="at-floating-navigation__item" href="https://andytran.me">Help Desk</a>
<a class="at-floating-navigation__item" href="https://andytran.me">Log Out</a>
Maintenant, si nous cliquons sur la case où il est écrit html et enregistrez (sur MAC, c'est CMD + S)
Il enregistre toute la programmation dans votre compte précédemment enregistré. Vous verrez que tout s'est bien passé car dans l'url vient maintenant le nom de votre utilisateur :
Maintenant, ce que nous devons faire, c'est compresser tout ce code pour pouvoir l'amener plus facilement sur notre site Web et pour cela nous allons à l'url suivante :
http://codepen.io/andytran/pen/jyEPyL
Et on colle l'url de notre code là où il est écrit "Code Module Generator"
Nous copions le code et allons sur notre site réalisé avec DIVI.
Dans WordPress on va dans le menu DIVI -> Options du thème -> Intégration et dans l'option « Ajouter du code à votre blog » on ajoute le code que nous avions enregistré :
Si tout s'est bien passé, vous verrez maintenant le menu flottant sur toutes les pages et entrées de votre site web faites avec DIVI :
Si nous ne voulons pas qu'il apparaisse sur toutes les pages mais sur une spécifique, nous le pouvons également.
Pour ce faire, nous éditons la page où nous voulons qu'elle apparaisse avec le constructeur DIVI et ajoutons un module de code avec le code que nous avons préparé :
Et à l'intérieur du module de code, nous ajoutons :
[wps_button style=»default» url=»https://comohacerunapagina.es/ir/menu-flotante» target=»blank» background=»#8224e3″ color=»#ffffff» size=»18″ icon=»star »wide=»oui» position=»gauche» radius=»auto» text_shadow=»0px 0px 0px #000″ rel=»nofollow» title=»Bouton par défaut» id=»default-button»]ACHETER DIVI AVEC 10% DE RÉDUCTION RÉDUCTION[/wps_button]
J'espère que le tuto vous sera utile 😉
salutations
Oscar
Vous me rendez fou comme toujours, pour ceux d'entre nous qui ne sont pas programmeurs, cela explique le tour du magicien. Je pense que vous pouvez tirer beaucoup d'utilité de cette "technique" d'intégration d'éléments sur le Web, pas seulement de ce type de menu.
Mais j'ai un doute, car j'en déduis que le code complet n'est pas inséré dans notre site, je veux dire le html, css et js, mais nous faisons un appel à la page codepen.io pour l'exécuter. Si on perd le compte de ce site, on se désabonne, le serveur tombe en panne… Est-ce qu'il cesserait de fonctionner ? et comment cela affecte-t-il le chargement de la page ?
En tout cas, la vidéo est très bonne et ouvre de nombreuses possibilités.
Merci beaucoup Juan, je suis content que ça te plaise, comme tu le dis il y a beaucoup de possibilités 😉
La seule chose que Codepen.io fait est de voir le code et la démo sur la même page et cela aide à partager la programmation, mais lorsque vous faites le tutoriel, vous verrez qu'il n'inclut aucune référence à sa page, il le laisse prêt à être utilisé sur votre propre serveur.
Un câlin!!!
Oscar